/* ==========================================================================
   LINA Y EDUARDO FOLK  -  hoja de estilos principal
   Concepto: "Noche de pena" - azul profundo del logo, luz calida de escenario,
   guarda criolla como elemento ornamental.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Azules criollos: base del logo, abiertos hacia el azul de escenario */
  --noche:        #132b45;
  --noche-2:      #0c1d30;
  --noche-3:      #1e4368;
  --noche-borde:  #2c5279;

  /* Calidos: madera de guitarra criolla, cuero del bombo, luz de escenario */
  --oro:          #c89545;   /* ocre quebracho - color de conversion */
  --oro-claro:    #e0ac5b;
  --oro-oscuro:   #9a6f2c;
  --terracota:    #9c4a38;   /* terracota de tinaja - acento medido */
  --piedra:       #b9af9f;

  /* Neutros calidos: papel, lino, pergamino */
  --crema:        #f7f3ea;
  --crema-2:      #ede6d8;
  --crema-3:      #ddd3c1;
  --tinta:        #2a2723;
  --tinta-suave:  #5d574c;

  /* Texto sobre oscuro */
  --sobre-oscuro:      #faf7f1;
  --sobre-oscuro-mute: #b6c3d2;

  --radio:      10px;
  --radio-sm:   6px;
  --radio-btn:  6px;   /* esquinas de imprenta, no pastilla */
  --sombra:     0 18px 50px -20px rgba(8,18,30,.55);
  --sombra-alt: 0 30px 70px -28px rgba(8,18,30,.75);
  --ancho:      1180px;
  --ancho-txt:  70ch;

  --fuente-display: "Bitter", "Zilla Slab", Georgia, "Times New Roman", serif;
  --fuente-texto:   "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
  --fuente-detalle: "Alegreya Sans SC", "Bitter", Georgia, serif;

  --trans: .34s cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--fuente-texto);
  font-size:clamp(1rem, .96rem + .18vw, 1.09rem);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--fuente-display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.012em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.1rem, 1.4rem + 3.1vw, 3.5rem); font-weight:700; }
h2{ font-size:clamp(1.62rem, 1.2rem + 1.9vw, 2.15rem); }
h3{ font-size:clamp(1.18rem, 1.06rem + .55vw, 1.38rem); }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--oro); color:var(--noche); }

:focus-visible{ outline:3px solid var(--oro); outline-offset:3px; border-radius:4px; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.contenedor{ width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }
.contenedor-angosto{ width:min(100% - 2.5rem, 860px); margin-inline:auto; }

.seccion{ padding:clamp(4rem, 2.5rem + 6vw, 7.5rem) 0; position:relative; }
.seccion--compacta{ padding:clamp(3rem, 2rem + 4vw, 5rem) 0; }

.seccion--oscura{ background:var(--noche); color:var(--sobre-oscuro); }
.seccion--oscura h2,.seccion--oscura h3{ color:var(--crema); }
.seccion--oscura p{ color:var(--sobre-oscuro-mute); }

.seccion--crema-alt{ background:var(--crema-2); }

/* Textura de papel muy sutil sobre los fondos claros */
.seccion--crema-alt::before,
.seccion--textura::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(circle at 1px 1px, rgba(34,32,28,.055) 1px, transparent 0);
  background-size:22px 22px;
}
.seccion > .contenedor,
.seccion > .contenedor-angosto{ position:relative; z-index:1; }

/* --------------------------------------------------------------------------
   4. TIPOGRAFIA DE APOYO
   -------------------------------------------------------------------------- */
.volanta{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--fuente-detalle);
  font-size:.94rem; font-weight:500;
  letter-spacing:.14em;
  color:var(--oro-oscuro); margin-bottom:1.1rem;
}
.volanta::before{ content:""; width:34px; height:1px; background:currentColor; opacity:.6; }
.seccion--oscura .volanta{ color:var(--oro); }

.bajada{
  font-size:clamp(1.06rem, 1rem + .35vw, 1.24rem);
  color:var(--tinta-suave);
  max-width:var(--ancho-txt);
}
.seccion--oscura .bajada{ color:var(--sobre-oscuro-mute); }

.encabezado-seccion{ max-width:760px; margin-bottom:clamp(2.5rem,2rem + 2vw,3.75rem); }
.encabezado-seccion.centrado{ margin-inline:auto; text-align:center; }
.encabezado-seccion.centrado .volanta::before{ display:none; }
.encabezado-seccion.centrado .bajada{ margin-inline:auto; }

/* Guarda criolla ornamental (eco de la orla del logo) */
.guarda{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin:0 0 1.5rem; color:var(--oro);
}
.guarda::before,.guarda::after{
  content:""; height:1px; flex:1; max-width:110px;
  background:linear-gradient(90deg,transparent,currentColor);
}
.guarda::after{ background:linear-gradient(270deg,transparent,currentColor); }
.guarda svg{ width:26px; height:26px; opacity:.9; }
.encabezado-seccion.centrado .guarda{ margin-inline:auto; }

/* --------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:var(--oro); --btn-fg:var(--noche); --btn-bd:var(--oro);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.92rem 1.8rem;
  border:1.5px solid var(--btn-bd); border-radius:var(--radio-btn);
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--fuente-texto); font-weight:600; font-size:1rem;
  letter-spacing:.02em; cursor:pointer;
  transition:transform var(--trans), box-shadow var(--trans), background var(--trans), color var(--trans);
  box-shadow:0 10px 26px -12px rgba(200,149,69,.85);
}
.btn svg{ width:19px; height:19px; flex:0 0 auto; }
.btn::after{
  content:""; position:absolute; inset:0; transform:translateX(-110%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.42),transparent 80%);
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 18px 36px -14px rgba(200,149,69,.95); }
.btn:hover::after{ transform:translateX(110%); transition:transform .75s ease; }
.btn:active{ transform:translateY(-1px); }

.btn--fantasma{
  --btn-bg:transparent; --btn-fg:var(--crema); --btn-bd:rgba(246,241,231,.42);
  box-shadow:none;
}
.btn--fantasma:hover{ --btn-bg:var(--crema); --btn-fg:var(--noche); --btn-bd:var(--crema); box-shadow:0 16px 34px -16px rgba(0,0,0,.6); }

.btn--oscuro{ --btn-bg:var(--noche); --btn-fg:var(--crema); --btn-bd:var(--noche); box-shadow:0 10px 26px -14px rgba(19,43,69,.9); }
.btn--oscuro:hover{ --btn-bg:var(--noche-3); --btn-bd:var(--noche-3); }

.btn--wa{ --btn-bg:#25d366; --btn-fg:#08300f; --btn-bd:#25d366; box-shadow:0 10px 26px -12px rgba(37,211,102,.8); }
.btn--wa:hover{ box-shadow:0 18px 36px -14px rgba(37,211,102,.9); }

.grupo-botones{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }

/* Enlace con flecha */
.link-flecha{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; color:var(--oro-oscuro); border-bottom:1.5px solid transparent;
  transition:gap var(--trans), border-color var(--trans);
}
.link-flecha svg{ width:17px; height:17px; }
.link-flecha:hover{ gap:.85rem; border-color:currentColor; }
.seccion--oscura .link-flecha{ color:var(--oro); }

/* --------------------------------------------------------------------------
   6. NAVEGACION
   -------------------------------------------------------------------------- */
.cabecera{
  position:fixed; inset:0 0 auto 0; z-index:900;
  transition:background var(--trans), box-shadow var(--trans), padding var(--trans);
  padding:.85rem 0;
  background:linear-gradient(to bottom, rgba(19,43,69,.72), rgba(19,43,69,0));
}
.cabecera.solida{
  background:rgba(19,43,69,.96);
  backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 10px 34px -22px rgba(0,0,0,.95);
  padding:.5rem 0;
  border-bottom:1px solid rgba(200,149,69,.16);
}
.cabecera__fila{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.marca{ display:flex; align-items:center; gap:.75rem; color:var(--crema); }
.marca img{ width:52px; height:52px; border-radius:50%; transition:width var(--trans), height var(--trans); }
.cabecera.solida .marca img{ width:44px; height:44px; }
.marca__txt{ display:flex; flex-direction:column; line-height:1.1; }
.marca__nombre{ font-family:var(--fuente-display); font-size:1.12rem; font-weight:600; letter-spacing:-.01em; }
.marca__claim{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--oro); }

.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a{
  position:relative; padding:.55rem .85rem; border-radius:8px;
  font-size:.93rem; font-weight:600; color:var(--sobre-oscuro-mute);
  transition:color var(--trans);
}
.nav a::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.28rem; height:1.5px;
  background:var(--oro); transform:scaleX(0); transform-origin:left; transition:transform var(--trans);
}
.nav a:hover{ color:var(--crema); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a.activo{ color:var(--crema); }
.nav a.activo::after{ transform:scaleX(1); }

.cabecera .btn{ padding:.7rem 1.3rem; font-size:.92rem; }

/* En escritorio el CTA vive en .cabecera__acciones; el que esta dentro del
   menu es solo para la version movil. */
@media (min-width:1001px){
  .nav > .btn{ display:none; }
  .nav a{ white-space:nowrap; }
}

.hamburguesa{
  display:none; width:46px; height:46px; padding:0;
  border:1px solid rgba(246,241,231,.28); border-radius:10px;
  background:rgba(246,241,231,.06); cursor:pointer;
}
.hamburguesa span{ display:block; width:20px; height:1.8px; margin:4px auto; background:var(--crema); border-radius:2px; transition:var(--trans); }
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.8px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.8px) rotate(-45deg); }

@media (max-width:1000px){
  .hamburguesa{ display:block; position:relative; z-index:920; }
  .cabecera__acciones{ display:none; }

  /* Fondo oscurecido detras del panel: da contexto y permite cerrar tocando afuera */
  body.menu-abierto::before{
    content:""; position:fixed; inset:0; z-index:890;
    background:rgba(9,20,33,.66);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  }

  .nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw,340px); z-index:900;
    flex-direction:column; align-items:stretch; justify-content:center; gap:.4rem;
    padding:5rem 1.75rem 2rem;
    background:var(--noche); border-left:1px solid var(--noche-borde);
    transform:translateX(100%); transition:transform var(--trans);
    box-shadow:-24px 0 60px -30px rgba(0,0,0,.9);
  }
  .nav.abierto{ transform:translateX(0); }
  .nav a{ padding:.9rem .5rem; font-size:1.12rem; border-bottom:1px solid var(--noche-borde); border-radius:0; }
  .nav a::after{ display:none; }
  .nav .btn{ margin-top:1.4rem; justify-content:center; }
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero{ position:relative; min-height:min(100svh,880px); display:flex; align-items:flex-end; background:var(--noche); overflow:hidden; }
.hero--interno{ min-height:clamp(430px,52vh,560px); align-items:center; }

.hero__fondo{ position:absolute; inset:0; }
.hero__fondo img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.hero__fondo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--noche) 4%, rgba(19,43,69,.72) 42%, rgba(19,43,69,.5) 100%),
    linear-gradient(105deg, rgba(19,43,69,.9) 0%, rgba(19,43,69,.28) 62%, rgba(19,43,69,.55) 100%);
}
.hero__contenido{ position:relative; z-index:2; padding:9rem 0 clamp(3rem,2rem + 4vw,5.5rem); color:var(--crema); }
.hero--interno .hero__contenido{ padding:8rem 0 3rem; }
.hero__contenido h1{ color:var(--crema); max-width:16ch; text-shadow:0 4px 30px rgba(0,0,0,.5); }
.hero--interno .hero__contenido h1{ max-width:22ch; }
.hero__bajada{ max-width:56ch; font-size:clamp(1.06rem,1rem + .4vw,1.3rem); color:#dfd8ca; margin-bottom:2rem; }
.hero .volanta{ color:var(--oro-claro); }
.hero .grupo-botones{ margin-top:.5rem; }

.hero__scroll{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:3;
  display:grid; place-items:center; gap:.4rem;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(246,241,231,.55);
}
.hero__scroll span{ display:block; width:1px; height:34px; background:linear-gradient(var(--oro),transparent); animation:baja 2.1s ease-in-out infinite; }
@keyframes baja{ 0%,100%{ transform:scaleY(.3); transform-origin:top; opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* --------------------------------------------------------------------------
   8. BARRA DE CREDENCIALES
   -------------------------------------------------------------------------- */
.credenciales{ background:var(--noche-2); color:var(--sobre-oscuro); border-block:1px solid var(--noche-borde); }
.credenciales__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.credenciales__item{ padding:2.1rem 1.5rem; text-align:center; border-right:1px solid var(--noche-borde); }
.credenciales__item:last-child{ border-right:0; }
.credenciales__num{ font-family:var(--fuente-display); font-weight:700; font-size:clamp(2rem,1.5rem + 1.6vw,2.9rem); color:var(--oro); line-height:1; display:block; margin-bottom:.35rem; }
.credenciales__txt{ font-family:var(--fuente-detalle); font-size:.95rem; letter-spacing:.09em; color:var(--sobre-oscuro-mute); }
@media (max-width:900px){ .credenciales__item:nth-child(2n){ border-right:0; } }
@media (max-width:640px){
  .credenciales__item{ border-right:0; border-bottom:1px solid var(--noche-borde); padding:1.6rem 1rem; }
  .credenciales__item:last-child{ border-bottom:0; }
}

/* --------------------------------------------------------------------------
   9. GRILLAS Y TARJETAS
   -------------------------------------------------------------------------- */
.grid{ display:grid; gap:clamp(1.2rem,1rem + 1vw,1.9rem); }
.grid--2{ grid-template-columns:1fr; }
@media (min-width:760px){ .grid--2{ grid-template-columns:repeat(2,1fr); } }

.grid--3{ grid-template-columns:1fr; }
@media (min-width:660px){  .grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .grid--3{ grid-template-columns:repeat(3,1fr); } }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }

/* Grilla de tipos de evento: columnas fijas para que 12 tarjetas cierren
   en filas parejas y no quede una ultima fila desprolija. */
.grid--eventos{ grid-template-columns:repeat(2,1fr); }
@media (min-width:700px){  .grid--eventos{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1040px){ .grid--eventos{ grid-template-columns:repeat(4,1fr); } }

.tarjeta{
  position:relative; padding:2rem 1.85rem; border-radius:var(--radio);
  background:#fff; border:1px solid var(--crema-3);
  box-shadow:0 2px 0 rgba(34,32,28,.04);
  transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  overflow:hidden;
}
.tarjeta::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--oro),var(--terracota));
  transform:scaleX(0); transform-origin:left; transition:transform var(--trans);
}
.tarjeta:hover{ transform:translateY(-6px); box-shadow:var(--sombra); border-color:var(--oro-claro); }
.tarjeta:hover::before{ transform:scaleX(1); }
.tarjeta h3{ margin-bottom:.5rem; }
.tarjeta p{ color:var(--tinta-suave); font-size:.98rem; }

.seccion--oscura .tarjeta{ background:var(--noche-3); border-color:var(--noche-borde); }
.seccion--oscura .tarjeta h3{ color:var(--crema); }
.seccion--oscura .tarjeta p{ color:var(--sobre-oscuro-mute); }
.seccion--oscura .tarjeta:hover{ border-color:rgba(200,149,69,.55); }

.icono{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:1.1rem;
  border-radius:13px; color:var(--oro-oscuro);
  background:linear-gradient(145deg,rgba(200,149,69,.2),rgba(156,74,56,.13));
  border:1px solid rgba(200,149,69,.32);
}
.icono svg{ width:25px; height:25px; }
.seccion--oscura .icono{ color:var(--oro-claro); background:linear-gradient(145deg,rgba(200,149,69,.2),rgba(156,74,56,.14)); }

/* --- Tarjeta de formato (duo / trio / banda) --- */
.formato{ display:flex; flex-direction:column; padding:0; }
.formato__foto{ aspect-ratio:4/3; overflow:hidden; }
.formato__foto img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.formato:hover .formato__foto img{ transform:scale(1.06); }
.formato__cuerpo{ padding:1.6rem 1.6rem 1.9rem; flex:1; display:flex; flex-direction:column; }
.formato__num{ font-family:var(--fuente-detalle); font-size:1rem; color:var(--oro-oscuro); letter-spacing:.1em; margin-bottom:.4rem; }
.seccion--oscura .formato__num{ color:var(--oro); }
.formato ul{ list-style:none; padding:0; margin:1rem 0 0; }
.formato li{ position:relative; padding-left:1.5rem; margin-bottom:.4rem; font-size:.94rem; color:var(--tinta-suave); }
.formato li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--oro); }
.seccion--oscura .formato li{ color:var(--sobre-oscuro-mute); }
.formato .link-flecha{ margin-top:auto; padding-top:1.2rem; align-self:flex-start; }

/* --- Tarjeta de tipo de evento --- */
.evento{ padding:1.7rem 1.6rem; }
.evento h3{ font-size:1.22rem; }
.evento p{ font-size:.94rem; margin:0; }
.evento .icono{ width:44px; height:44px; margin-bottom:.9rem; border-radius:11px; }
.evento .icono svg{ width:21px; height:21px; }

/* --------------------------------------------------------------------------
   10. BLOQUE PARTIDO (texto + foto)
   -------------------------------------------------------------------------- */
.partido{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,1.5rem + 3vw,4.5rem); align-items:center; }
.partido--invertido .partido__media{ order:-1; }
@media (max-width:900px){ .partido{ grid-template-columns:1fr; } .partido--invertido .partido__media{ order:0; } }

.partido__media{ position:relative; }
.partido__media img{ width:100%; border-radius:var(--radio); box-shadow:var(--sombra-alt); }
/* Solo las listas "de verdad" llevan el tilde; los .chips no. */
.partido__texto ul:not(.chips){ list-style:none; padding:0; margin:1.6rem 0 0; }
.partido__texto ul:not(.chips) li{ position:relative; padding-left:2rem; margin-bottom:.85rem; }
.partido__texto ul:not(.chips) li::before{
  content:""; position:absolute; left:0; top:.34em; width:19px; height:19px; border-radius:50%;
  background:rgba(200,149,69,.2);
  box-shadow:inset 0 0 0 1px rgba(200,149,69,.55);
}
.partido__texto ul:not(.chips) li::after{
  content:""; position:absolute; left:6px; top:.63em; width:7px; height:4px;
  border-left:1.7px solid var(--oro-oscuro); border-bottom:1.7px solid var(--oro-oscuro);
  transform:rotate(-45deg);
}
.seccion--oscura .partido__texto ul:not(.chips) li::after{ border-color:var(--oro-claro); }

/* Duo de fotos superpuestas */
.duo-fotos{ position:relative; padding:0 2rem 3.5rem 1rem; }
.duo-fotos img:first-child{ border-radius:var(--radio); box-shadow:var(--sombra-alt); }
.duo-fotos img:last-child{
  position:absolute; right:0; bottom:0; width:52%;
  border-radius:var(--radio); border:6px solid var(--crema);
  box-shadow:var(--sombra-alt);
}
.seccion--oscura .duo-fotos img:last-child{ border-color:var(--noche); }

/* --------------------------------------------------------------------------
   11. FICHAS DE INTEGRANTES
   -------------------------------------------------------------------------- */
.integrante{ display:grid; grid-template-columns:200px 1fr; gap:1.9rem; align-items:center; }
.integrante__foto{ position:relative; }
.integrante__foto img{ width:200px; height:200px; object-fit:cover; border-radius:50%; box-shadow:var(--sombra); }
.integrante__foto::after{ content:""; position:absolute; inset:-9px; border-radius:50%; border:1.5px dashed rgba(200,149,69,.55); }
.integrante h3{ margin-bottom:.15rem; }
.integrante__rol{ display:block; font-family:var(--fuente-detalle); font-size:1.02rem; letter-spacing:.11em; color:var(--oro-oscuro); margin-bottom:.9rem; }
.seccion--oscura .integrante__rol{ color:var(--oro); }
@media (max-width:620px){
  /* En celular la foto va arriba y centrada, pero el texto corrido sigue
     alineado a la izquierda: un parrafo largo centrado se lee mal. */
  .integrante{ grid-template-columns:1fr; justify-items:center; }
  .integrante > div:last-child{ width:100%; }
  .integrante h3,
  .integrante__rol{ text-align:center; }
  .integrante .chips{ justify-content:center; }
}

/* --------------------------------------------------------------------------
   12. LISTA DE ESCENARIOS / RITMOS  (chips)
   -------------------------------------------------------------------------- */
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; padding:0; margin:0; list-style:none; }
.chips li{
  padding:.42rem 1rem; border-radius:var(--radio-btn); font-size:.92rem; font-weight:600;
  background:rgba(200,149,69,.12); border:1px solid rgba(200,149,69,.35); color:var(--oro-oscuro);
}
.seccion--oscura .chips li{ color:var(--oro-claro); background:rgba(200,149,69,.1); }

.escenarios{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:.1rem 2rem; }
.escenarios li{ padding:.95rem 0; border-bottom:1px solid var(--crema-3); display:flex; gap:.85rem; align-items:flex-start; }
.seccion--oscura .escenarios li{ border-color:var(--noche-borde); }
.escenarios li svg{ width:18px; height:18px; flex:0 0 auto; margin-top:.35em; color:var(--oro); }
.escenarios strong{ display:block; font-family:var(--fuente-display); font-size:1.06rem; font-weight:600; }
.escenarios span{ font-size:.88rem; color:var(--tinta-suave); }
.seccion--oscura .escenarios span{ color:var(--sobre-oscuro-mute); }

/* --------------------------------------------------------------------------
   13. PASOS
   -------------------------------------------------------------------------- */
.pasos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2rem; counter-reset:paso; }
.paso{ position:relative; counter-increment:paso; padding-top:.5rem; }
.paso::before{
  content:counter(paso,decimal-leading-zero);
  font-family:var(--fuente-display); font-size:2.6rem; line-height:1;
  color:transparent; -webkit-text-stroke:1.2px var(--oro); display:block; margin-bottom:.7rem;
}
.paso h3{ font-size:1.2rem; }
.paso p{ font-size:.96rem; color:var(--tinta-suave); }
.seccion--oscura .paso p{ color:var(--sobre-oscuro-mute); }

/* --------------------------------------------------------------------------
   14. TESTIMONIOS
   -------------------------------------------------------------------------- */
.testimonio{ position:relative; padding:2.4rem 2rem 1.9rem; }
.testimonio::after{
  content:"\201D"; position:absolute; top:.2rem; right:1.3rem;
  font-family:var(--fuente-display); font-size:5.5rem; line-height:1; color:rgba(200,149,69,.28);
}
.testimonio blockquote{ margin:0 0 1.3rem; font-family:var(--fuente-display); font-size:1.14rem; line-height:1.55; font-style:italic; }
.testimonio figcaption{ display:flex; align-items:center; gap:.8rem; font-size:.9rem; }
.testimonio figcaption b{ display:block; font-style:normal; }
.testimonio figcaption span{ color:var(--tinta-suave); font-size:.84rem; }
.seccion--oscura .testimonio figcaption span{ color:var(--sobre-oscuro-mute); }
.testimonio__avatar{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(145deg,var(--oro),var(--terracota)); color:var(--noche);
  font-family:var(--fuente-display); font-weight:700; font-size:1.05rem;
}

/* --------------------------------------------------------------------------
   15. GALERIA + LIGHTBOX
   -------------------------------------------------------------------------- */
.filtros{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; margin-bottom:2.5rem; }
.filtro{
  padding:.58rem 1.2rem; border-radius:var(--radio-btn); cursor:pointer; font:inherit; font-size:.93rem; font-weight:600;
  background:transparent; color:var(--tinta-suave);
  border:1.5px solid var(--crema-3); transition:var(--trans);
}
.filtro:hover{ border-color:var(--oro); color:var(--oro-oscuro); }
.filtro.activo{ background:var(--noche); border-color:var(--noche); color:var(--crema); }

.galeria{ columns:3; column-gap:1.1rem; }
@media (max-width:900px){ .galeria{ columns:2; } }
@media (max-width:560px){ .galeria{ columns:1; } }

.galeria__item{
  break-inside:avoid; margin-bottom:1.1rem; position:relative; display:block;
  border-radius:var(--radio-sm); overflow:hidden; cursor:zoom-in;
  background:var(--crema-2); box-shadow:0 2px 0 rgba(34,32,28,.05);
}
.galeria__item img{ width:100%; transition:transform .7s cubic-bezier(.22,.61,.36,1), filter var(--trans); }
.galeria__item::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity var(--trans);
  background:linear-gradient(to top,rgba(19,43,69,.82),rgba(19,43,69,0) 55%);
}
.galeria__item figcaption{
  position:absolute; left:1rem; right:1rem; bottom:.9rem; z-index:2;
  color:var(--crema); font-size:.88rem; font-weight:600; line-height:1.35;
  opacity:0; transform:translateY(8px); transition:var(--trans);
}
.galeria__item:hover img{ transform:scale(1.05); }
.galeria__item:hover::after,
.galeria__item:hover figcaption{ opacity:1; transform:translateY(0); }
.galeria__item.oculto{ display:none; }

.lightbox{
  position:fixed; inset:0; z-index:1200; display:none;
  place-items:center; padding:1.5rem;
  background:rgba(9,20,33,.96); backdrop-filter:blur(6px);
}
.lightbox.abierto{ display:grid; }
.lightbox img{ max-width:min(96vw,1200px); max-height:84vh; border-radius:var(--radio-sm); box-shadow:var(--sombra-alt); }
.lightbox__pie{ margin-top:1rem; text-align:center; color:var(--sobre-oscuro-mute); font-size:.92rem; max-width:60ch; }
.lightbox__cerrar,.lightbox__nav{
  position:absolute; display:grid; place-items:center; width:52px; height:52px;
  border:1px solid rgba(246,241,231,.28); border-radius:50%; cursor:pointer;
  background:rgba(246,241,231,.08); color:var(--crema); transition:var(--trans);
}
.lightbox__cerrar:hover,.lightbox__nav:hover{ background:var(--oro); color:var(--noche); border-color:var(--oro); }
.lightbox__cerrar{ top:1.4rem; right:1.4rem; }
.lightbox__nav{ top:50%; transform:translateY(-50%); }
.lightbox__nav--prev{ left:1.4rem; }
.lightbox__nav--next{ right:1.4rem; }
.lightbox svg{ width:22px; height:22px; }
@media (max-width:640px){ .lightbox__nav{ top:auto; bottom:1.4rem; transform:none; } .lightbox__nav--prev{ left:25%; } .lightbox__nav--next{ right:25%; } }

/* --- Tabla que se desliza en pantalla chica --- */
.tabla-scroll{ position:relative; }
.tabla-scroll__caja{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radio); }
.tabla-scroll__aviso{
  display:none; align-items:center; gap:.4rem; justify-content:center;
  margin-top:.9rem; font-size:.85rem; color:var(--tinta-suave);
}
.tabla-scroll__aviso svg{ width:16px; height:16px; }
@media (max-width:820px){ .tabla-scroll__aviso{ display:flex; } }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq{ border-top:1px solid var(--crema-3); }
.seccion--oscura .faq{ border-color:var(--noche-borde); }
.faq details{ border-bottom:1px solid var(--crema-3); }
.seccion--oscura .faq details{ border-color:var(--noche-borde); }
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.4rem .25rem; cursor:pointer; list-style:none;
  font-family:var(--fuente-display); font-size:clamp(1.05rem,1rem + .35vw,1.24rem); font-weight:600;
  transition:color var(--trans);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--oro-oscuro); }
.seccion--oscura .faq summary:hover{ color:var(--oro-claro); }
.faq summary::after{
  content:""; flex:0 0 auto; width:13px; height:13px; margin-top:.4em;
  border-right:2px solid var(--oro); border-bottom:2px solid var(--oro);
  transform:rotate(45deg); transition:transform var(--trans);
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq details p{ padding:0 3rem 1.5rem .25rem; color:var(--tinta-suave); margin:0; }
.seccion--oscura .faq details p{ color:var(--sobre-oscuro-mute); }

/* --------------------------------------------------------------------------
   17. CTA FINAL
   -------------------------------------------------------------------------- */
.cta{ position:relative; overflow:hidden; background:var(--noche); color:var(--crema); text-align:center; }
.cta__fondo{ position:absolute; inset:0; }
.cta__fondo img{ width:100%; height:100%; object-fit:cover; opacity:.24; }
.cta__fondo::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(19,43,69,.55) 0%, var(--noche) 78%); }
.cta .contenedor-angosto{ position:relative; z-index:2; }
.cta h2{ color:var(--crema); }
.cta p{ color:#d9d2c5; }
.cta .grupo-botones{ justify-content:center; margin-top:2rem; }

/* --------------------------------------------------------------------------
   18. CONTACTO
   -------------------------------------------------------------------------- */
.contacto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,1.5rem + 3vw,4rem); align-items:start; }
@media (max-width:900px){ .contacto-grid{ grid-template-columns:1fr; } }

.datos{ list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:1.15rem; }
.datos li{ display:flex; gap:1rem; align-items:flex-start; }
.datos .icono{ width:44px; height:44px; margin:0; border-radius:11px; flex:0 0 auto; }
.datos .icono svg{ width:20px; height:20px; }
.datos b{ display:block; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-suave); margin-bottom:.1rem; }
.seccion--oscura .datos b{ color:var(--sobre-oscuro-mute); }
.datos a,.datos span{
  font-family:var(--fuente-display); font-size:1.08rem; font-weight:600;
  overflow-wrap:anywhere;   /* un mail largo no debe romper el ancho en celular */
}
@media (max-width:420px){ .datos a,.datos span{ font-size:.98rem; } }
.datos a:hover{ color:var(--oro-oscuro); }
.seccion--oscura .datos a:hover{ color:var(--oro-claro); }

.formulario{ background:#fff; border:1px solid var(--crema-3); border-radius:var(--radio); padding:clamp(1.6rem,1.2rem + 1.6vw,2.4rem); box-shadow:var(--sombra); }
.seccion--oscura .formulario{ background:var(--noche-3); border-color:var(--noche-borde); }
.campo{ margin-bottom:1.15rem; }
.campo label{ display:block; font-size:.82rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin-bottom:.45rem; color:var(--tinta-suave); }
.seccion--oscura .campo label{ color:var(--sobre-oscuro-mute); }
.campo input,.campo select,.campo textarea{
  width:100%; padding:.85rem 1rem; font:inherit; font-size:.98rem; color:inherit;
  background:var(--crema); border:1.5px solid var(--crema-3); border-radius:var(--radio-sm);
  transition:border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.seccion--oscura .campo input,.seccion--oscura .campo select,.seccion--oscura .campo textarea{ background:var(--noche-2); border-color:var(--noche-borde); }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--oro); background:#fff; box-shadow:0 0 0 4px rgba(200,149,69,.16);
}
.seccion--oscura .campo input:focus,.seccion--oscura .campo select:focus,.seccion--oscura .campo textarea:focus{ background:var(--noche); }
.campo textarea{ min-height:130px; resize:vertical; }
.campo--fila{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:520px){ .campo--fila{ grid-template-columns:1fr; } }
.formulario .btn{ width:100%; margin-top:.4rem; }
.nota-form{ font-size:.83rem; color:var(--tinta-suave); margin-top:1rem; text-align:center; }
.seccion--oscura .nota-form{ color:var(--sobre-oscuro-mute); }

.aviso{ padding:1rem 1.2rem; border-radius:var(--radio-sm); margin-bottom:1.4rem; font-size:.95rem; border:1px solid; }
.aviso--ok{ background:rgba(37,211,102,.12); border-color:rgba(37,211,102,.45); color:#116b32; }
.seccion--oscura .aviso--ok{ color:#8ce8ad; }
.aviso--error{ background:rgba(156,74,56,.12); border-color:rgba(156,74,56,.5); color:#8c3221; }
.seccion--oscura .aviso--error{ color:#f0a493; }

/* --------------------------------------------------------------------------
   19. PIE
   -------------------------------------------------------------------------- */
.pie{ background:var(--noche); color:var(--sobre-oscuro-mute); padding-top:clamp(3.5rem,2.5rem + 3vw,5rem); }
.pie__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; }
@media (max-width:880px){ .pie__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .pie__grid{ grid-template-columns:1fr; } }
.pie h4{ font-family:var(--fuente-detalle); font-size:1rem; font-weight:500; letter-spacing:.13em; color:var(--oro); margin-bottom:1.1rem; }
.pie ul{ list-style:none; padding:0; margin:0; display:grid; gap:.65rem; }
.pie a{ font-size:.95rem; transition:color var(--trans); }
.pie a:hover{ color:var(--crema); }
.pie__marca img{ width:76px; height:76px; border-radius:50%; margin-bottom:1rem; }
.pie__marca p{ font-size:.94rem; max-width:34ch; }
.redes{ display:flex; gap:.6rem; margin-top:1.2rem; }
.redes a{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--noche-borde); color:var(--sobre-oscuro-mute); transition:var(--trans);
}
.redes a:hover{ background:var(--oro); border-color:var(--oro); color:var(--noche); transform:translateY(-3px); }
.redes svg{ width:19px; height:19px; }
.pie__barra{
  border-top:1px solid var(--noche-borde); padding:1.5rem 0;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-size:.85rem;
}
.pie__barra a{ color:var(--oro); }
.pie__barra a:hover{ text-decoration:underline; }

/* --------------------------------------------------------------------------
   20. WHATSAPP FLOTANTE
   -------------------------------------------------------------------------- */
.wa-flotante{
  position:fixed; right:1.15rem; bottom:1.15rem; z-index:950;
  display:flex; align-items:center; gap:.65rem;
  padding:.85rem 1.35rem .85rem .95rem; border-radius:100px;
  background:#25d366; color:#08300f; font-weight:700; font-size:.94rem;
  box-shadow:0 14px 34px -12px rgba(37,211,102,.75);
  transition:transform var(--trans), box-shadow var(--trans);
}
.wa-flotante svg{ width:26px; height:26px; }
.wa-flotante:hover{ transform:translateY(-4px) scale(1.03); box-shadow:0 20px 44px -14px rgba(37,211,102,.9); }
.wa-flotante::before{
  content:""; position:absolute; inset:0; border-radius:100px; border:2px solid #25d366;
  animation:pulso 2.6s ease-out infinite;
}
@keyframes pulso{ 0%{ transform:scale(1); opacity:.7 } 70%,100%{ transform:scale(1.22); opacity:0 } }
@media (max-width:640px){ .wa-flotante span{ display:none; } .wa-flotante{ padding:.9rem; } }

/* Con el menu abierto, el boton flotante estorba */
body.menu-abierto .wa-flotante{ opacity:0; pointer-events:none; }

/* --------------------------------------------------------------------------
   21. MIGAS
   -------------------------------------------------------------------------- */
.migas{ font-size:.85rem; color:var(--sobre-oscuro-mute); margin-bottom:1.1rem; }
.migas ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0; }
.migas li+li::before{ content:"/"; margin-right:.5rem; opacity:.5; }
.migas a:hover{ color:var(--oro-claro); }

/* --------------------------------------------------------------------------
   22. ANIMACION DE ENTRADA
   -------------------------------------------------------------------------- */
.aparece{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.aparece.visible{ opacity:1; transform:none; }
.aparece[data-retraso="1"]{ transition-delay:.09s }
.aparece[data-retraso="2"]{ transition-delay:.18s }
.aparece[data-retraso="3"]{ transition-delay:.27s }
.aparece[data-retraso="4"]{ transition-delay:.36s }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .aparece{ opacity:1; transform:none; }
}

/* --------------------------------------------------------------------------
   23. AJUSTES DE LECTURA EN CELULAR
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  /* Los bloques centrados mantienen el titulo centrado, pero el texto largo
     pasa a la izquierda: centrado en pantalla angosta cansa la vista. */
  .seccion:not(.cta) .encabezado-seccion.centrado .bajada,
  .seccion:not(.cta) .contenedor-angosto.centrado > .bajada,
  .seccion:not(.cta) .contenedor-angosto.centrado > p{ text-align:left; }

  .chips{ justify-content:flex-start; }
  .encabezado-seccion.centrado .chips,
  .centrado > .chips{ justify-content:center; }

  /* Que ningun boton quede mas angosto que su texto */
  .grupo-botones .btn{ width:100%; }
  .cta .grupo-botones,
  .hero .grupo-botones{ flex-direction:column; align-items:stretch; }
}

/* Utilidades */
.solo-lectores{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.saltar{ position:absolute; left:-9999px; z-index:9999; padding:1rem 1.5rem; background:var(--oro); color:var(--noche); font-weight:700; border-radius:0 0 var(--radio-sm) 0; }
.saltar:focus{ left:0; top:0; }
.centrado{ text-align:center; }
.mt-2{ margin-top:2rem } .mt-3{ margin-top:3rem }