:root {
    --piedra: #d1c9bf;        /* fondo base greige */
    --piedra-clara: #ded7cc;
    --crema: #f5eee1;
    --crema-viva: #fdf9f0;
    --terracota: #b1592f;
    --terracota-oscuro: #96471f;
    --espresso: #2b211b;      /* footer / texto fuerte */
    --tinta: #33291f;
    --tinta-suave: rgba(51, 41, 31, 0.68);
    --linea: rgba(51, 41, 31, 0.14);
    --font-display: "Instrument Serif", Georgia, serif;
    --font-body: "Inter", "Helvetica Neue", sans-serif;
    --radio: 24px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    background: var(--piedra);
    color: var(--tinta);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  ::selection { background: var(--terracota); color: var(--crema); }

  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }

  /* ---------- Barra de anuncio ---------- */
  .anuncio {
    background: var(--terracota);
    color: var(--crema-viva);
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 10px 16px;
  }
  .anuncio a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- Header ---------- */
  header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--piedra) 90%, transparent);
    backdrop-filter: blur(14px);
  }

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px clamp(20px, 4vw, 56px);
    max-width: 1360px;
    margin: 0 auto;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--tinta);
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
  }
  .logo img { display: block; }

  .nav-links { display: flex; gap: 30px; align-items: center; }
  .nav-links a {
    text-decoration: none;
    color: var(--tinta);
    font-size: 0.94rem;
    font-weight: 500;
    opacity: 0.85;
    transition: opacity 0.2s;
  }
  .nav-links a:hover { opacity: 1; }

  .nav-der { display: flex; gap: 18px; align-items: center; }

  .idiomas {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .idiomas a { text-decoration: none; color: var(--tinta); opacity: 0.45; transition: opacity 0.2s; }
  .idiomas a:hover { opacity: 0.8; }
  .idiomas a.activo { opacity: 1; border-bottom: 2px solid var(--terracota); padding-bottom: 1px; }
  .idiomas span { opacity: 0.3; }

  .btn {
    display: inline-block;
    background: var(--terracota);
    color: var(--crema-viva);
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 600;
    padding: 13px 26px;
    border-radius: 999px;
    transition: background 0.22s, transform 0.22s;
  }
  .btn:hover { background: var(--terracota-oscuro); transform: translateY(-1px); }

  .btn-claro {
    background: transparent;
    color: var(--tinta);
    border: 1px solid var(--linea);
  }
  .btn-claro:hover { background: rgba(51, 41, 31, 0.06); }

  @media (max-width: 860px) { .nav-links { display: none; } }

  /* ---------- Hero cinematografico ---------- */
  .hero {
    position: relative;
    overflow: hidden;
    min-height: min(92vh, 900px);
    display: flex;
    align-items: flex-end;
    padding: clamp(120px, 18vh, 200px) 0 clamp(40px, 6vh, 64px);
    background: var(--espresso);
  }

  .hero-fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% center;
  }

  .hero-velo {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to right, rgba(43, 33, 27, 0.62) 0%, rgba(43, 33, 27, 0.28) 55%, rgba(43, 33, 27, 0.1) 100%),
      linear-gradient(to top, rgba(43, 33, 27, 0.66) 0%, rgba(43, 33, 27, 0) 55%);
  }

  .hero .wrap { position: relative; z-index: 1; width: 100%; }

  .hero .pill {
    background: rgba(43, 33, 27, 0.35);
    border: 1px solid rgba(245, 238, 225, 0.28);
    color: var(--crema-viva);
    backdrop-filter: blur(6px);
  }

  .hero h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 7.4vw, 6rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--crema-viva);
    max-width: 13ch;
    text-shadow: 0 2px 24px rgba(43, 33, 27, 0.35);
  }
  .hero h1 em { font-style: italic; color: #e59a6f; }

  .hero-sub {
    margin-top: 28px;
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    color: rgba(253, 249, 240, 0.88);
    max-width: 48ch;
  }

  .hero-acciones { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }

  .hero .btn-claro {
    color: var(--crema-viva);
    border-color: rgba(245, 238, 225, 0.4);
  }
  .hero .btn-claro:hover { background: rgba(245, 238, 225, 0.12); }

  .hero-stats {
    margin-top: clamp(44px, 7vh, 72px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 48px);
    border-top: 1px solid rgba(245, 238, 225, 0.28);
    padding-top: 30px;
    max-width: 880px;
  }
  .stat h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    color: var(--crema-viva);
    line-height: 1.1;
  }
  .stat p { font-size: 0.92rem; color: rgba(253, 249, 240, 0.75); margin-top: 6px; }

  @media (max-width: 640px) { .hero-stats { grid-template-columns: 1fr; gap: 22px; } }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(253, 249, 240, 0.6);
    border: 1px solid rgba(51, 41, 31, 0.1);
    color: var(--tinta);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
    margin-bottom: 30px;
  }
  .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--terracota); }

  /* ---------- Secciones ---------- */
  section { padding: clamp(72px, 11vh, 130px) 0; }

  .etiqueta {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--terracota);
    margin-bottom: 20px;
  }

  .titulo {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: var(--tinta);
    max-width: 24ch;
  }
  .titulo em { font-style: italic; color: var(--terracota); }

  .bajada {
    margin-top: 20px;
    font-size: 1.05rem;
    color: var(--tinta-suave);
    max-width: 58ch;
  }

  /* Quiénes somos */
  .somos { background: var(--crema); border-radius: var(--radio) var(--radio) 0 0; }
  .somos-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  .somos-grid .texto p { color: var(--tinta-suave); font-size: 1.02rem; margin-bottom: 18px; max-width: 56ch; }
  .somos-grid .texto p strong { color: var(--tinta); font-weight: 600; }

  .ficha {
    background: var(--crema-viva);
    border: 1px solid rgba(51, 41, 31, 0.08);
    border-radius: var(--radio);
    padding: clamp(26px, 3vw, 38px);
  }
  .ficha-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid var(--linea);
  }
  .ficha-item:last-child { border-bottom: none; }
  .ficha-item dt { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); }
  .ficha-item dd { font-family: var(--font-display); font-size: 1.25rem; color: var(--tinta); text-align: right; }

  @media (max-width: 860px) { .somos-grid { grid-template-columns: 1fr; } }

  .somos-foto {
    margin-top: clamp(40px, 6vh, 72px);
    border-radius: var(--radio);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    max-height: 560px;
  }
  .somos-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Modelo */
  .modelo { background: var(--crema); }
  .tarjetas {
    margin-top: 52px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
  }
  .tarjeta {
    background: var(--piedra);
    border-radius: var(--radio);
    padding: clamp(28px, 3vw, 40px);
    transition: transform 0.25s;
  }
  .tarjeta:hover { transform: translateY(-4px); }
  .tarjeta-foto {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    margin-bottom: 24px;
  }
  .tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tarjeta .num {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--terracota);
    margin-bottom: 56px;
  }
  .tarjeta h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1.12;
    color: var(--tinta);
    margin: 0 0 12px;
    min-height: 2.3em;
  }
  .tarjeta p { font-size: 0.96rem; color: var(--tinta-suave); }

  .tarjeta-destacada { background: var(--terracota); }
  .tarjeta-destacada .num { color: var(--crema); }
  .tarjeta-destacada h3 { color: var(--crema-viva); }
  .tarjeta-destacada p { color: rgba(253, 249, 240, 0.85); }

  @media (max-width: 860px) { .tarjetas { grid-template-columns: 1fr; } .tarjeta { min-height: 0; } }

  /* Regulación */
  .regulacion { background: var(--crema); }
  .reglas {
    margin-top: 52px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
  }
  .regla {
    background: var(--crema-viva);
    border: 1px solid rgba(51, 41, 31, 0.08);
    border-radius: var(--radio);
    padding: clamp(26px, 3vw, 36px);
  }
  .regla .sello {
    display: inline-grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--piedra);
    color: var(--terracota-oscuro);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    margin-bottom: 18px;
  }
  .regla h4 { font-size: 1.05rem; font-weight: 600; color: var(--tinta); margin-bottom: 8px; }
  .regla p { font-size: 0.94rem; color: var(--tinta-suave); }

  @media (max-width: 760px) { .reglas { grid-template-columns: 1fr; } }

  .nota-legal {
    margin-top: 36px;
    font-size: 0.9rem;
    color: var(--tinta-suave);
    max-width: 74ch;
    padding: 18px 24px;
    border-left: 3px solid var(--terracota);
    background: var(--crema-viva);
    border-radius: 0 14px 14px 0;
  }

  /* Partners */
  .partners { background: var(--espresso); color: var(--crema); border-radius: var(--radio); margin: 0 clamp(8px, 1vw, 16px); }
  .partners .etiqueta { color: #d9906b; }
  .partners .titulo { color: var(--crema-viva); }
  .partners .titulo em { color: #d9906b; }
  .partners .bajada { color: rgba(245, 238, 225, 0.72); }

  .partners-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  .beneficios { margin-top: 8px; }
  .beneficio {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(245, 238, 225, 0.16);
    align-items: baseline;
  }
  .beneficio:first-child { border-top: 1px solid rgba(245, 238, 225, 0.16); }
  .partners-foto {
    margin-top: 34px;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
  }
  .partners-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .beneficio .letra { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: #d9906b; }
  .beneficio h4 { font-size: 1.05rem; font-weight: 600; color: var(--crema-viva); margin-bottom: 6px; }
  .beneficio p { font-size: 0.94rem; color: rgba(245, 238, 225, 0.72); }

  @media (max-width: 860px) { .partners-grid { grid-template-columns: 1fr; } }

  /* Contacto */
  .contacto { text-align: center; }
  .contacto .titulo { margin: 0 auto; }
  .contacto .bajada { margin-left: auto; margin-right: auto; }
  .contacto .btn { margin-top: 36px; font-size: 1.02rem; padding: 16px 34px; }
  .contacto .correo { display: block; margin-top: 18px; font-size: 0.95rem; color: var(--tinta-suave); }
  .contacto .correo a { color: var(--terracota-oscuro); text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- Footer ---------- */
  footer {
    background: var(--espresso);
    color: var(--crema);
    padding: clamp(56px, 8vh, 90px) 0 36px;
    margin-top: clamp(24px, 4vh, 48px);
  }
  .footer-marca {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 9rem);
    line-height: 1;
    color: var(--crema-viva);
    letter-spacing: -0.02em;
  }
  .footer-marca em { font-style: italic; color: #d9906b; }
  .footer-fila {
    margin-top: clamp(36px, 6vh, 64px);
    padding-top: 26px;
    border-top: 1px solid rgba(245, 238, 225, 0.16);
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: rgba(245, 238, 225, 0.6);
  }

  /* ---------- Reveal ---------- */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.visible { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
  }