/* =====================================================================
   SITIO — lo que el sitio con pestañas tiene y la landing no.
   Va ÚLTIMA en la cascada (src/layouts/Base.astro). Todo lo demás —
   suelos, .sec__head, .panel, .cta-band, glows, motivos, formulario —
   sale de las mismas piezas que la landing: no se redefine acá.

   La landing (/charla) es un embudo: sin menú ni pie (CLAUDE.md, regla
   5). El sitio es lo contrario: un índice. Por eso este archivo existe
   y la landing no lo carga.
   ===================================================================== */

/* =====================================================================
   MENÚ — la misma píldora, con pestañas
   ===================================================================== */
.nav--site .nav__links{display:flex;align-items:center;gap:2px}
.nav__link{
  display:inline-flex;align-items:center;min-height:44px;
  padding:0 14px;border-radius:10px;
  font-family:var(--font-body);font-size:15px;font-weight:var(--fw-medium);
  color:var(--white);text-decoration:none;opacity:.82;
  transition:background-color 180ms var(--ease-standard), opacity 180ms var(--ease-standard);
}
.nav__link:hover{opacity:1;background:rgba(255,255,255,.12)}
.nav__link[aria-current="page"]{opacity:1;background:rgba(255,255,255,.16)}
.nav__link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
a.nav__cta{text-decoration:none}

/* Redes, entre las pestañas y el botón. Mismo alto de toque que todo el
   menú (44px). Por debajo de 900 pasan al panel de la hamburguesa. */
.nav__social{display:flex;align-items:center;gap:2px;padding-left:4px;border-left:1px solid rgba(255,255,255,.18)}
.nav__social a{
  display:grid;place-items:center;width:40px;height:44px;border-radius:10px;
  color:var(--white);opacity:.82;
  transition:background-color 180ms var(--ease-standard), opacity 180ms var(--ease-standard);
}
.nav__social a:hover{opacity:1;background:rgba(255,255,255,.12)}
.nav__social a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.nav__sheet-social{
  display:flex;gap:var(--space-2);margin-top:var(--space-2);padding-top:var(--space-3);
  border-top:1px solid rgba(255,255,255,.1);
}
.nav__sheet-social a{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:44px;border-radius:12px;background:rgba(255,255,255,.06);
  color:var(--white);text-decoration:none;font-size:var(--text-sm);
}

/* Hamburguesa: un <details>, así abre y cierra sin JavaScript. */
/* El panel se ancla a la píldora entera, no al botón: anclado al botón
   se salía de la pantalla por la izquierda. */
.nav--site .nav__pill{position:relative}
.nav__menu{display:none}
.nav__toggle{
  display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  background:var(--ground-deep);color:var(--white);cursor:pointer;list-style:none;
}
.nav__toggle::-webkit-details-marker{display:none}
.nav.is-stuck .nav__toggle{background:var(--blue-400)}
.nav__toggle .ico{--ico-size:20px}
.nav__sheet{
  position:absolute;left:0;right:0;top:calc(100% + 10px);
  display:grid;gap:4px;padding:var(--space-3);
  border-radius:18px;
  background:var(--ground-base);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,6,20,.5);
}
.nav__sheet-link{
  display:flex;align-items:center;min-height:48px;padding:0 var(--space-4);
  border-radius:12px;color:var(--white);text-decoration:none;font-size:var(--text-base);
}
.nav__sheet-link[aria-current="page"]{background:rgba(255,255,255,.1)}
.nav__sheet .btn{margin-top:var(--space-2)}

@media (max-width:900px){
  .nav--site .nav__links,
  .nav--site .nav__social,
  .nav--site .nav__cta{display:none}
  .nav__menu{display:block}
  .nav--site .nav__pill{justify-content:space-between;gap:var(--space-4);width:min(100%, 560px)}
}
@media (max-width:560px){
  /* La landing esconde el nombre para que entre el botón; acá el botón
     está en el menú, así que el nombre vuelve. */
  .nav--site .nav__name{display:inline}
}

/* =====================================================================
   CABECERA DE PÁGINA — la primera sección de cada pestaña interna.
   Es un .sec__head como cualquier otro (regla 4), con aire arriba para
   el menú fijo.
   ===================================================================== */
.pagina{padding-top:calc(var(--nav-h) + clamp(72px, 9vw, 128px))}

/* =====================================================================
   TARJETA — la oscura. La blanca es .panel (css/v2.css) y es el único
   plano brillante de su pantalla: donde van dos o más tarjetas juntas,
   van oscuras. Mismo material que las paradas y el FAQ.
   ===================================================================== */
.tarjeta{
  display:flex;flex-direction:column;gap:var(--space-4);
  padding:clamp(24px, 2.6vw, 34px);
  border-radius:var(--radius-lg);
  background:#08193B;
  border:1px solid rgba(255,255,255,.09);
  transition:border-color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard);
}
a.tarjeta{text-decoration:none;color:inherit}
a.tarjeta:hover{border-color:rgba(255,255,255,.22);background:#0A1E44}
.tarjeta__ico{
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:color-mix(in srgb, var(--t, var(--cyan-400)) 16%, transparent);
  color:var(--t, var(--cyan-400));
}
.tarjeta__ico .ico{--ico-size:24px}
.tarjeta__tit{
  margin:0;font-family:var(--font-subhead);font-size:var(--text-lg);
  font-weight:var(--fw-semibold);letter-spacing:var(--ls-title);color:var(--paper);
}
.tarjeta__txt{margin:0;font-size:var(--text-sm);line-height:var(--lh-body);color:var(--paper-dim);text-wrap:pretty}
.tarjeta__lista{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-2)}
.tarjeta__lista li{
  display:grid;grid-template-columns:18px 1fr;gap:var(--space-3);
  font-size:var(--text-sm);line-height:1.5;color:var(--paper-dim);
}
.tarjeta__lista .ico{--ico-size:16px;color:var(--t, var(--cyan-400));margin-top:3px}
.tarjeta__mas{
  margin-top:auto;display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--t, var(--cyan-300));
}
.tarjeta__mas .ico{--ico-size:16px;transition:transform 180ms var(--ease-standard)}
a.tarjeta:hover .tarjeta__mas .ico{transform:translateX(3px)}

/* Tonos del hero (CLAUDE.md, "Paleta del hero"): sobre oscuro, los pasos claros. */
[data-t="sky"] {--t:var(--sky-300)}
[data-t="cyan"]{--t:var(--cyan-300)}
[data-t="park"]{--t:var(--park-300)}
[data-t="jaca"]{--t:var(--jaca-400)}
[data-t="sun"] {--t:#F2C94C}

.grilla{display:grid;gap:var(--space-5)}
.grilla--2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.grilla--3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.grilla--4{grid-template-columns:repeat(4, minmax(0, 1fr))}
@media (max-width:1080px){.grilla--4{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (max-width:960px){.grilla--3{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (max-width:760px){.grilla--2,.grilla--3{grid-template-columns:1fr}}
@media (max-width:560px){.grilla--4{grid-template-columns:1fr}}

/* =====================================================================
   RUBROS — las escenas de día (tools/hero-draw.js) en tarjetas.
   ===================================================================== */
.rubro{gap:var(--space-3)}
.rubro__scene{
  display:block;width:100%;height:auto;aspect-ratio:320 / 150;
  border-radius:calc(var(--radius-lg) - 10px);
  background:color-mix(in srgb, var(--t) 22%, #EAF1FB);
  margin-bottom:var(--space-2);
}
.rubros__mas{margin:var(--space-8) auto 0;text-align:center;color:var(--paper-mute);font-size:var(--text-sm)}

/* La foto del equipo sola y centrada (Inicio): sin la grilla de fichas. */
.inicio__foto{max-width:760px;margin-inline:auto}

/* =====================================================================
   PASOS — el camino corto (Inicio). El completo está en /charla.
   ===================================================================== */
.pasos{counter-reset:paso;margin:0;padding:0;list-style:none}
.paso-corto{position:relative}
.paso-corto__num{
  font-family:var(--font-display);font-size:clamp(36px, 4vw, 52px);
  line-height:1;color:var(--t, var(--cyan-300));
}

/* =====================================================================
   EMBUDO — Marketing + funnels de venta (Servicios).
   Cuatro etapas; la banda de color de cada una se angosta hacia la
   derecha, así la fila entera dibuja el embudo. Colores del hero:
   cielo, cyan, parque y el amarillo de las flores.
   ===================================================================== */
.embudo{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:var(--space-3);margin:0;padding:0;list-style:none}
.etapa{display:flex;flex-direction:column;gap:var(--space-4)}
.etapa__banda{
  --alto:var(--a, 140px);
  display:grid;place-items:center;height:160px;
  color:#fff;
}
.etapa__banda::before{
  content:"";grid-area:1/1;width:100%;height:var(--alto);
  background:var(--c);
  /* Trapecio: entra con el alto de la etapa y sale con el de la siguiente. */
  clip-path:polygon(0 0, 100% calc((var(--alto) - var(--sig)) / 2), 100% calc(100% - (var(--alto) - var(--sig)) / 2), 0 100%);
  border-radius:6px;
}
.etapa__banda .ico{grid-area:1/1;position:relative;--ico-size:32px}
.etapa:nth-child(1){--c:#3F84E2;--a:150px;--sig:120px}
.etapa:nth-child(2){--c:#3FAFA0;--a:120px;--sig:92px}
.etapa:nth-child(3){--c:#5DAE4E;--a:92px;--sig:68px}
.etapa:nth-child(4){--c:#E9B93A;--a:68px;--sig:52px}
.etapa__tit{margin:0;font-family:var(--font-subhead);font-size:var(--text-lg);font-weight:var(--fw-semibold);color:var(--paper)}
.etapa__tit::before{
  content:"";display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--c);margin-right:var(--space-2);vertical-align:middle;
}
.etapa__txt{margin:0;font-size:var(--text-sm);line-height:var(--lh-body);color:var(--paper-dim);text-wrap:pretty}
@media (max-width:860px){
  .embudo{grid-template-columns:1fr;gap:var(--space-6)}
  .etapa{display:grid;grid-template-columns:88px 1fr;gap:var(--space-2) var(--space-5);align-items:start}
  .etapa__banda{height:auto;grid-row:span 2}
  .etapa__banda::before{height:72px;clip-path:none;border-radius:18px}
  .etapa__banda .ico{--ico-size:28px}
}

/* =====================================================================
   NOSOTROS
   ===================================================================== */
.historia{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px, 5vw, 72px);align-items:center}
.historia__txt{display:grid;gap:var(--space-5)}
.historia__txt p{margin:0;font-size:var(--text-lg);line-height:var(--lh-body);color:var(--paper-dim);text-wrap:pretty}
.historia__txt p strong{color:var(--paper);font-weight:var(--fw-semibold)}
.cita{margin:0;display:grid;gap:var(--space-4)}
.cita__txt{
  margin:0;font-family:var(--font-subhead);font-size:clamp(20px, 2vw, 26px);
  line-height:1.35;font-weight:var(--fw-semibold);color:var(--paper);text-wrap:balance;
}
.cita__pie{font-size:var(--text-sm);color:var(--paper-mute)}
.cita .ico{--ico-size:32px;color:var(--cyan-400)}
@media (max-width:860px){.historia{grid-template-columns:1fr}}

/* El apodo va en su propia línea: "Sergio Persoglia · Pancho" no entraba
   en un renglón en celular y el título no se parte. */
.member__nombre-apodo{display:block;font-size:.78em;font-weight:var(--fw-regular);color:var(--paper-mute)}
/* grid-column:2 es obligatorio: .member es una grilla ícono | texto, y
   la lista caía sola en la columna del ícono, la ensanchaba y todo se
   salía de la pantalla en celular. */
.member__skills{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin:var(--space-3) 0 0;padding:0;list-style:none}
.member__skills li{
  padding:4px 10px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  font-size:var(--text-2xs);color:var(--paper-dim);
}

/* Nosotros: con fichas largas (bio + habilidades) la foto quedaba arriba
   y dejaba un hueco debajo. Acompaña el scroll hasta la última ficha. */
@media (min-width:961px){
  .equipo__side{position:sticky;top:calc(var(--nav-h) + 48px);align-self:start}
}

/* Las dos ciudades: recortes de las capas del hero, no dibujos nuevos. */
.ciudad{overflow:hidden;padding:0}
.ciudad__scene{position:relative;aspect-ratio:16 / 9;overflow:hidden}
/* Cada capa a 150 % del ancho, corrida con --x/--y (en % del recuadro)
   para encuadrar el Obelisco o el Illimani: el dibujo es de 1440×1500. */
.ciudad__scene img{
  position:absolute;left:var(--x, 0);top:var(--y, 0);
  width:var(--w, 150%);max-width:none;height:auto;aspect-ratio:1440 / 1500;
}
.ciudad__body{display:grid;gap:var(--space-2);padding:clamp(22px, 2.4vw, 30px)}

/* =====================================================================
   CONTACTO — otros canales
   ===================================================================== */
.canales{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);margin-top:var(--space-10)}
.canal{
  display:inline-flex;align-items:center;gap:var(--space-3);min-height:48px;
  padding:0 var(--space-5);border-radius:var(--radius-pill);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:var(--paper);text-decoration:none;font-size:var(--text-sm);
}
.canal:hover{border-color:rgba(255,255,255,.28)}
.canal .ico{--ico-size:18px;color:var(--cyan-300)}
.canal svg{color:var(--cyan-300)}

/* =====================================================================
   CALENDARIO Y GRACIAS — el paso después del formulario
   ===================================================================== */
.calendario__marco{
  max-width:1040px;margin-inline:auto;
  padding:clamp(8px, 1.4vw, 20px);border-radius:var(--radius-lg);
  background:#08193B;border:1px solid rgba(255,255,255,.09);
}
/* Alto mínimo: el embed se dibuja después de cargar y, sin esto, la
   página saltaba de 0 a 700px. */
.calendario__embed{min-height:640px;width:100%;overflow:auto;border-radius:calc(var(--radius-lg) - 8px)}
/* En celular Cal.com apila el calendario y los horarios: mide ~1060px.
   Reservado de antemano, la página no salta cuando termina de cargar. */
@media (max-width:760px){.calendario__embed{min-height:1040px}}
/* Cal.com pone su indicador de carga ARRIBA del iframe (en su shadow DOM,
   no se puede estilar) y lo saca al terminar: el calendario subía ~370px
   (CLS 0,2). Con order:-1 el iframe va primero y el indicador abajo; al
   desaparecer, no hay nada arriba que se corra. */
.calendario__embed cal-inline > iframe{order:-1}
.calendario__respaldo{
  margin:var(--space-4) auto var(--space-2);max-width:60ch;text-align:center;
  font-size:var(--text-sm);color:var(--paper-mute);text-wrap:pretty;
}
.calendario__respaldo a{color:var(--cyan-300)}
.tarjeta__txt a{color:var(--t, var(--cyan-300))}

/* Sin salidas: el logo solo, sin link ni botón. */
.nav--bare .nav__brand{cursor:default}

/* Aviso de salida (/calendario): tarjeta blanca (.panel) sobre un velo. */
.salida{
  position:fixed;inset:0;z-index:95;
  display:grid;place-items:center;padding:var(--container-pad);
  background:rgba(0,6,20,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.salida[hidden]{display:none}
.salida__caja{max-width:440px;width:100%;display:grid;gap:var(--space-4);text-align:center}
.salida__tit{
  margin:0;font-family:var(--font-subhead);font-size:var(--text-xl);
  font-weight:var(--fw-semibold);letter-spacing:var(--ls-title);color:var(--paper);
}
.salida__txt{margin:0;font-size:var(--text-base);line-height:var(--lh-body);color:var(--paper-dim)}
.salida__despues{
  justify-self:center;min-height:44px;padding:0 var(--space-4);
  background:none;border:0;cursor:pointer;
  font:inherit;font-size:var(--text-sm);color:var(--paper-mute);text-decoration:underline;
}
/* Video de /gracias: marco 16:9. Sin video, la foto del equipo. */
.video{margin:0 auto var(--space-12);max-width:880px;display:grid;gap:var(--space-3)}
.video__marco{
  position:relative;aspect-ratio:16 / 9;overflow:hidden;
  border-radius:var(--radius-lg);background:#08193B;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 60px rgba(0,6,20,.45);
}
.video__marco :is(img, iframe, video){position:absolute;inset:0;width:100%;height:100%;border:0}
.video__poster{object-fit:cover}
.video__pie{text-align:center;font-size:var(--text-sm);color:var(--paper-mute)}

/* Confetti: encima de todo y sin atrapar clics. */
.confetti{position:fixed;inset:0;width:100%;height:100%;z-index:90;pointer-events:none}

.gracias__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-10)}

/* =====================================================================
   LEGALES — texto largo, columna de lectura
   ===================================================================== */
.legal{max-width:72ch;margin-inline:auto;display:grid;gap:var(--space-4)}
.legal h2{
  margin:var(--space-8) 0 0;font-family:var(--font-subhead);font-size:var(--text-xl);
  font-weight:var(--fw-semibold);letter-spacing:var(--ls-title);color:var(--paper);
}
.legal h3{margin:var(--space-4) 0 0;font-family:var(--font-subhead);font-size:var(--text-lg);color:var(--paper)}
.legal p,.legal li{margin:0;font-size:var(--text-base);line-height:var(--lh-body);color:var(--paper-dim)}
.legal ul{margin:0;padding-left:1.2em;display:grid;gap:var(--space-2)}
.legal a{color:var(--cyan-300)}
.legal code{font-size:.9em;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.08);color:var(--paper)}
.legal strong{color:var(--paper)}
.legal__meta{font-size:var(--text-sm) !important;color:var(--paper-mute) !important}
.legal__aviso{
  padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);
  background:rgba(242,201,76,.08);border:1px solid rgba(242,201,76,.3);
}

/* =====================================================================
   PIE
   ===================================================================== */
.pie{
  background:var(--ground-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  padding-block:clamp(56px, 7vw, 88px) var(--space-8);
}
.pie__grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.2fr;gap:clamp(28px, 4vw, 56px)}
.pie__logo{
  display:inline-flex;align-items:center;gap:var(--space-3);min-height:44px;
  color:var(--white);text-decoration:none;font-weight:var(--fw-semibold);font-size:var(--text-lg);
}
.pie__claim{margin:var(--space-4) 0 var(--space-5);max-width:34ch;font-size:var(--text-sm);line-height:var(--lh-body);color:var(--paper-mute)}
.pie__redes{display:flex;gap:var(--space-2)}
.pie__redes a{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:var(--paper);
  transition:background-color 180ms var(--ease-standard), color 180ms var(--ease-standard);
}
.pie__redes a:hover{background:rgba(255,255,255,.14);color:var(--cyan-300)}
.pie__col{display:flex;flex-direction:column;align-items:flex-start}
.pie__tit{
  margin:0 0 var(--space-2);font-size:var(--text-2xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--paper-mute);
}
.pie__col a,.pie__col span{
  display:inline-flex;align-items:center;min-height:40px;
  font-size:var(--text-sm);color:var(--paper-dim);text-decoration:none;
}
.pie__col a:hover{color:var(--cyan-300)}
.pie__base{
  display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  margin-top:clamp(40px, 5vw, 64px);padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,.08);
  font-size:var(--text-xs);color:var(--paper-mute);
}
@media (max-width:960px){.pie__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie__grid{grid-template-columns:1fr}}

@media (prefers-contrast: more){
  .tarjeta{border-color:rgba(255,255,255,.4)}
  .pie__col a,.pie__col span{color:var(--paper)}
}
@media (prefers-reduced-motion: reduce){
  .tarjeta,.nav__link,.pie__redes a{transition:none}
  a.tarjeta:hover .tarjeta__mas .ico{transform:none}
}