/* Triaje Group, estilos. Mobile first.
   Mundo: sus posts de redes. Azul noche como suelo, amarillo como campo que manda,
   violeta y naranja como acentos, el trazo del logo (check + avión de papel) como gesto,
   brillo cobrizo arriba a la derecha, Poppins pesada. */

:root {
  --noche: #131234;
  --noche-hondo: #0c0b26;
  --noche-alto: #1e1d4b;
  --noche-linea: rgba(255, 255, 255, .14);
  --amarillo: #fddf01;
  --amarillo-hondo: #ecd000;
  --violeta: #6951e4;
  --violeta-hondo: #5842cc;
  --naranja: #df602f;
  --blanco: #ffffff;
  --nube: #f3f3f8;
  --niebla: #d2d3d7;
  --lavanda: #bdb4f2;
  --tinta: #131234;
  --tinta-suave: #4a4968;
  --linea: rgba(19, 18, 52, .12);
  --wa: #25d366;
  --wa-hondo: #1da851;

  --f: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --r-xl: 32px;
  --r-l: 24px;
  --r-m: 16px;
  --r-s: 12px;
  --sombra: 0 22px 44px -22px rgba(12, 11, 38, .6), 0 6px 14px -8px rgba(12, 11, 38, .35);
  --sombra-suave: 0 14px 30px -18px rgba(12, 11, 38, .45);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --cab: 58px;
  --gutter: 16px;
  --envase: 1200px;

  color-scheme: dark light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--f);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--noche);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  caret-color: var(--violeta);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--amarillo); color: var(--noche); }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; border-radius: 6px; }
.seccion--blanca :focus-visible, .seccion--nube :focus-visible, .form :focus-visible, .nosotros :focus-visible, .confianza :focus-visible { outline-color: var(--violeta); }
html { scrollbar-color: var(--violeta) var(--noche-hondo); }

.solo-lector, .trampa { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--amarillo); color: var(--noche); padding: 10px 16px; border-radius: 999px; font-weight: 600; transition: top .2s; }
.saltar:focus { top: 10px; }

.envase { width: 100%; max-width: var(--envase); margin-inline: auto; padding-inline: var(--gutter); }
.envase--angosto { max-width: 820px; }
.ico { width: 1.25em; height: 1.25em; flex: none; }

/* Texto corrido: justificado con partición (regla de Genaro) */
.texto p, p.texto, .texto { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.texto p + p { margin-top: .9em; }

.t-seccion {
  font-weight: 800;
  font-size: clamp(2.05rem, 6.4vw + .4rem, 4rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.t-sub { font-weight: 700; font-size: clamp(1.3rem, 2.4vw + .7rem, 1.75rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }

/* ---------------------------------------------------------------- botones */
.boton {
  --bg: var(--amarillo); --fg: var(--noche);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .8em 1.35em;
  border-radius: 999px; border: 2px solid transparent;
  background: var(--bg); color: var(--fg);
  font-weight: 600; font-size: 1rem; line-height: 1.1; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: transform .35s var(--ease), background-color .25s, box-shadow .35s var(--ease), color .25s;
  -webkit-tap-highlight-color: transparent;
}
.boton .ico { width: 1.15em; height: 1.15em; transition: transform .35s var(--ease); }
.boton:hover { transform: translateY(-2px); box-shadow: var(--sombra-suave); }
.boton:hover .ico:last-child { transform: translateX(3px); }
.boton:active { transform: translateY(0) scale(.97); transition-duration: .1s; }
.boton--amarillo, .boton--primario { --bg: var(--amarillo); --fg: var(--noche); }
.boton--amarillo:hover, .boton--primario:hover { --bg: #fff06a; }
.boton--noche { --bg: var(--noche); --fg: var(--amarillo); }
.boton--noche:hover { --bg: var(--noche-alto); }
.boton--contorno { --bg: transparent; --fg: currentColor; border-color: currentColor; }
.boton--contorno:hover { --bg: rgba(255, 255, 255, .08); }
.boton--wa { --bg: var(--wa); --fg: #fff; }
.boton--chico { min-height: 40px; padding: .55em 1em; font-size: .9rem; }
.boton--grande { min-height: 56px; padding: 1em 1.6em; font-size: 1.05rem; }
.boton--ancho { width: 100%; }
.boton[disabled] { opacity: .6; cursor: progress; transform: none; box-shadow: none; }

.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.acciones--centro { justify-content: center; }
.enlace { font-weight: 600; color: var(--violeta-hondo); display: inline-flex; align-items: center; gap: .4em; }
.enlace--claro { color: inherit; }
.enlace .ico { width: 1.1em; height: 1.1em; }

/* ---------------------------------------------------------------- cabecera */
.cab {
  position: sticky; top: 0; z-index: 40;
  height: var(--cab);
  background: rgba(19, 18, 52, .86);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background-color .3s;
  view-transition-name: cabecera;
}
.cab.is-scrolled { border-bottom-color: var(--noche-linea); background: rgba(12, 11, 38, .9); }
.cab__in { height: 100%; max-width: var(--envase); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 10px; }
.cab__logo { display: block; color: #fff; margin-right: auto; padding: 6px 0; }
.logo { overflow: visible; }
.logo__trazo { stroke: var(--violeta); }
.logo--cab { width: 104px; height: auto; }
.nav { display: none; }
.cab__idioma { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; color: #fff; font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-decoration: none; border: 1.5px solid var(--noche-linea); transition: border-color .25s, background-color .25s; }
.cab__idioma:hover { border-color: var(--amarillo); }
.cab__cta { display: none; }
.cab__menu {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 14px 0 16px; border-radius: 999px;
  background: var(--amarillo); color: var(--noche); border: 0; font-weight: 600; font-size: .92rem; cursor: pointer;
  transition: transform .3s var(--ease);
}
.cab__menu:active { transform: scale(.95); }
.cab__hamb { position: relative; width: 16px; height: 10px; }
.cab__hamb::before, .cab__hamb::after { content: ""; position: absolute; left: 0; right: 0; height: 2.5px; border-radius: 2px; background: currentColor; }
.cab__hamb::before { top: 0; } .cab__hamb::after { bottom: 0; right: 5px; }
.cab__menu--cerrar .ico { width: 18px; height: 18px; }

/* menú a pantalla completa: se abre como un círculo desde el botón */
.menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--noche-hondo); color: #fff;
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: circle(0 at calc(100% - 50px) 29px);
  transition: clip-path .6s var(--ease);
}
.menu[hidden] { display: block; visibility: hidden; }
.menu.is-open { visibility: visible; clip-path: circle(150% at calc(100% - 50px) 29px); }
@media (prefers-reduced-motion: reduce) { .menu { transition: none; } }
.menu__in { position: relative; min-height: 100%; display: flex; flex-direction: column; padding: 0 var(--gutter) 32px; max-width: var(--envase); margin-inline: auto; }
.menu__top { height: var(--cab); display: flex; align-items: center; justify-content: space-between; }
.menu__nav { position: relative; z-index: 1; display: grid; gap: 26px; padding-top: 18px; }
.menu__titulo { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lavanda); font-weight: 500; margin-bottom: 6px; }
.menu__grupo a { display: block; padding: 6px 0; font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; text-decoration: none; transition: color .2s, transform .35s var(--ease); }
.menu__grupo a:hover { color: var(--amarillo); transform: translateX(6px); }
.menu__pie { position: relative; z-index: 1; margin-top: auto; padding-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.menu__trazo { position: absolute; right: -30%; bottom: 10%; width: 120%; opacity: .5; z-index: 0; pointer-events: none; }
.menu__top, .menu__nav, .menu__pie { position: relative; z-index: 1; }   /* el trazo iba encima de "English" */
.menu__trazo path { stroke: var(--violeta); }
.menu.is-open .menu__grupo { animation: subir .6s var(--ease) both; }
.menu.is-open .menu__grupo:nth-child(2) { animation-delay: .06s; }
.menu.is-open .menu__grupo:nth-child(3) { animation-delay: .12s; }
.menu.is-open .menu__grupo:nth-child(4) { animation-delay: .18s; }
@keyframes subir { from { opacity: 0; transform: translate(-10px, 16px); } }

.redes { display: flex; gap: 10px; }
.red { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--noche-linea); color: #fff; transition: background-color .25s, color .25s, border-color .25s, transform .35s var(--ease); }
.red:hover { background: var(--amarillo); color: var(--noche); border-color: var(--amarillo); transform: translateY(-2px); }
.red .ico { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- adornos y trazo */
.orn { position: absolute; pointer-events: none; }
.orn--estrella path { fill: var(--amarillo); }
.orn--asterisco g { stroke: var(--amarillo); }
.orn--medialuna path { fill: var(--naranja); }

.hero__trazo, .shero__trazo, .final__trazo, .menu__trazo, .persona__trazo { max-width: none; height: auto; }
.trazo-dib path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html:not(.js) .trazo-dib path, .trazo-dib.is-dibujado path { stroke-dashoffset: 0; }
.trazo-dib.is-dibujado path { transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1); }
@media (prefers-reduced-motion: reduce) { .trazo-dib path { stroke-dashoffset: 0 !important; transition: none !important; } }

.hero__brillo {
  position: absolute; pointer-events: none; z-index: 0;
  width: 150vmax; height: 150vmax; left: calc(var(--bx, 88%) - 75vmax); top: calc(var(--by, 6%) - 75vmax);
  background: radial-gradient(closest-side, rgba(214, 150, 104, .34), rgba(150, 104, 104, .12) 32%, transparent 62%);
  transition: left 1.2s var(--ease), top 1.2s var(--ease);
}
/* grano: textura de papel impreso, como sus posts exportados */
.hero::after, .shero::after, .final::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- HERO home */
.hero { position: relative; overflow: hidden; background: var(--noche); color: #fff; isolation: isolate; }
.hero__in { position: relative; z-index: 1; max-width: var(--envase); margin-inline: auto; padding: 22px var(--gutter) 44px; }
.hero__trazo { position: absolute; z-index: 0; width: 116%; left: -12%; top: 62px; opacity: .92; }
.hero__trazo path { stroke: var(--violeta); }
.hero__estrella { width: 34px; right: 22px; top: 190px; z-index: 1; animation: flotar 7s ease-in-out infinite; }
.hero__asterisco { width: 22px; right: 70px; top: 26px; z-index: 1; animation: girar 18s linear infinite; }
.hero__medialuna { width: 92px; left: -40px; bottom: 26%; z-index: 0; transform: rotate(-45deg); opacity: .9; }
@keyframes flotar { 50% { transform: translateY(-8px) rotate(8deg); } }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orn { animation: none !important; } }

.hero__h1 {
  font-weight: 800; color: var(--amarillo);
  font-size: clamp(2.55rem, 10.4vw + .2rem, 6rem);
  line-height: .98; letter-spacing: -.04em;
  text-wrap: balance; max-width: 11ch;
}
.hero__sub { margin-top: 16px; max-width: 30ch; color: var(--niebla); font-size: 1.05rem; line-height: 1.5; font-weight: 500; }
.hero__elige { margin-top: 26px; }
.hero__pregunta { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -.01em; }

.puertas { display: grid; gap: 12px; }
.puerta {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: end;
  min-height: 136px; padding: 18px 18px 18px 20px;
  border-radius: var(--r-xl); text-decoration: none;
  box-shadow: var(--sombra);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.puerta--amarilla { background: var(--amarillo); color: var(--noche); }
.puerta--violeta { background: var(--violeta); color: #fff; }
.puerta__linea { grid-column: 1 / -1; font-size: .92rem; font-weight: 500; opacity: .85; }
.puerta__titulo { font-weight: 800; font-size: clamp(1.7rem, 7.4vw, 2.6rem); line-height: 1; letter-spacing: -.035em; max-width: 9.5ch; align-self: end; }
.puerta__flecha { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; align-self: end; transition: transform .5s var(--ease), background-color .3s; }
.puerta--amarilla .puerta__flecha { background: var(--noche); color: var(--amarillo); }
.puerta--violeta .puerta__flecha { background: #fff; color: var(--violeta); }
.puerta__flecha .ico { width: 24px; height: 24px; transition: transform .5s var(--ease); }
.puerta__fondo { position: absolute; z-index: -1; right: -14px; top: -18px; width: 150px; height: 150px; opacity: .13; transform: rotate(-8deg); transition: transform .8s var(--ease); }
.puerta:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .7); }
.puerta:hover .puerta__flecha .ico { transform: rotate(45deg); }
.puerta:hover .puerta__fondo { transform: rotate(0deg) translate(-8px, 6px) scale(1.06); }
.puerta:active { transform: scale(.985); }

.otros { margin-top: 26px; }
.otros__t { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 12px; }
.chips { display: grid; grid-template-columns: 1fr; gap: 8px; }
.chips li { min-width: 0; }
.chip { height: 100%; }
.chip {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center;
  padding: 9px 16px 9px 9px; border-radius: 20px;
  background: var(--noche-alto); border: 1px solid var(--noche-linea);
  text-decoration: none; color: #fff;
  transition: background-color .25s, border-color .25s, transform .35s var(--ease);
}
.chip__ico { grid-row: span 2; width: 36px; height: 36px; padding: 8px; border-radius: 999px; background: var(--amarillo); color: var(--noche); }
.chip__t { font-weight: 600; font-size: .95rem; line-height: 1.2; }
.chip__s { font-size: .78rem; color: var(--lavanda); line-height: 1.3; }
.chip:hover { background: #28275c; border-color: rgba(253, 223, 1, .5); transform: translateY(-2px); }

/* ---------------------------------------------------------------- cinta */
.cinta { background: var(--amarillo); color: var(--noche); overflow: hidden; padding: 14px 0; }
.cinta__pista { display: flex; width: max-content; align-items: center; gap: 22px; animation: cinta 46s linear infinite; }
.cinta__pista li { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; white-space: nowrap; }
.cinta__orn .orn { position: static; width: 18px; }
.cinta__orn .orn--estrella path { fill: var(--noche); }
.cinta:hover .cinta__pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cinta__pista { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding-inline: 16px; } .cinta__pista li:nth-child(n+13) { display: none; } }

/* ---------------------------------------------------------------- cómo trabajamos: tarjetas que se apilan */
.como { background: var(--noche); color: #fff; padding: 72px 0 90px; }
.como__cab { max-width: 640px; }
.como__cab .t-seccion { color: #fff; }
.como__intro { margin-top: 14px; color: var(--niebla); }
.pila { margin-top: 36px; display: grid; gap: 16px; }
.pila__tarjeta {
  position: sticky; top: calc(var(--cab) + 14px + (var(--i) - 1) * 12px);
  min-height: 250px; padding: 26px 24px 28px;
  border-radius: var(--r-xl); box-shadow: 0 -12px 40px -18px rgba(0, 0, 0, .55);
  display: grid; align-content: end; gap: 10px; overflow: hidden;
}
.pila__tarjeta--1 { background: var(--amarillo); color: var(--noche); }
.pila__tarjeta--2 { background: var(--violeta); color: #fff; }
.pila__tarjeta--3 { background: #fff; color: var(--noche); }
.pila__tarjeta--4 { background: var(--naranja); color: var(--noche); }
.pila__num { position: absolute; top: 6px; right: 18px; font-weight: 800; font-size: 7rem; line-height: 1; letter-spacing: -.06em; opacity: .16; }
.pila__tarjeta h3 { font-weight: 800; font-size: clamp(1.6rem, 5vw + .5rem, 2.4rem); line-height: 1.02; letter-spacing: -.03em; max-width: 14ch; }
.pila__tarjeta p { max-width: 44ch; font-size: 1rem; line-height: 1.55; }

/* ---------------------------------------------------------------- nosotros */
.nosotros { background: #fff; color: var(--tinta); padding: 80px 0; }
.nosotros__in { display: grid; gap: 40px; }
.nosotros__texto .texto { margin-top: 18px; color: var(--tinta-suave); max-width: 62ch; }
.valores { margin-top: 26px; display: grid; gap: 14px; }
.valores li { position: relative; display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; }
.valores .orn { position: static; width: 22px; margin-top: 4px; grid-row: span 2; }
.valores .orn--estrella path { fill: var(--violeta); }
.valores strong { font-weight: 700; font-size: 1.1rem; }
.valores span { color: var(--tinta-suave); font-size: .98rem; }
.personas { display: grid; gap: 28px; }
.persona { display: grid; gap: 16px; }
.persona__foto { width: 100%; height: auto; aspect-ratio: 800 / 785; object-fit: cover; border-radius: var(--r-xl); background: var(--amarillo); box-shadow: var(--sombra-suave); }
.persona__foto--mono { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--noche); }
.persona__foto--mono span { position: relative; z-index: 1; font-weight: 800; font-size: clamp(5rem, 26vw, 9rem); letter-spacing: -.06em; color: var(--amarillo); }
.persona__trazo { position: absolute; width: 118%; left: -10%; top: 18%; }
.persona__trazo path { stroke: var(--violeta); stroke-dasharray: none; stroke-dashoffset: 0; }
.persona figcaption { display: grid; gap: 2px; }
.persona__nombre { font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.2; }
.persona__cargo { font-weight: 500; color: var(--violeta-hondo); font-size: .95rem; }
.persona p { margin-top: 10px; color: var(--tinta-suave); text-align: justify; hyphens: auto; }
.nosotros__equipo { color: var(--tinta-suave); max-width: 62ch; }
.donde { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; padding: 22px; border-radius: var(--r-l); background: var(--nube); }
.donde__ico { width: 44px; height: 44px; padding: 10px; border-radius: 999px; background: var(--noche); color: var(--amarillo); }
.donde h3 { font-weight: 700; font-size: 1.2rem; }
.donde .texto { color: var(--tinta-suave); margin: 4px 0 8px; }

/* ---------------------------------------------------------------- confianza */
.confianza { background: var(--nube); color: var(--tinta); padding: 72px 0; }
.instituciones { text-align: center; }
.instituciones__t { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; color: var(--noche); text-wrap: balance; }
.instituciones__lista { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.instituciones__lista li { font-weight: 800; font-size: clamp(1.6rem, 6vw, 2.6rem); letter-spacing: -.03em; color: var(--noche); }
.confianza__grid { margin-top: 48px; display: grid; gap: 16px; }
.honesto, .resenas { position: relative; padding: 28px 24px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--sombra-suave); display: grid; gap: 12px; align-content: start; }
.honesto__ico, .resenas__ico { width: 46px; height: 46px; padding: 11px; border-radius: 999px; background: var(--noche); color: var(--amarillo); }
.resenas__ico { background: var(--amarillo); color: var(--noche); }
.honesto .texto, .resenas .texto { color: var(--tinta-suave); }
.resenas .boton { justify-self: start; margin-top: 6px; }

/* ---------------------------------------------------------------- dúo friends/destinos */
.duo { background: var(--nube); padding: 0 0 72px; }
.duo__in { display: grid; gap: 16px; }
.bloque {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 12px; align-content: start;
  min-height: 300px; padding: 30px 26px; border-radius: var(--r-xl);
  text-decoration: none; transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.bloque--amarillo { background: var(--amarillo); color: var(--noche); }
.bloque--noche { background: var(--noche); color: #fff; }
.bloque__ico { width: 48px; height: 48px; padding: 11px; border-radius: 999px; }
.bloque--amarillo .bloque__ico { background: var(--noche); color: var(--amarillo); }
.bloque--noche .bloque__ico { background: var(--naranja); color: var(--noche); }
.bloque h2 { font-weight: 800; font-size: clamp(1.7rem, 5vw + .4rem, 2.5rem); line-height: 1.04; letter-spacing: -.03em; max-width: 16ch; }
.bloque p { max-width: 40ch; }
.bloque--noche p { color: var(--niebla); }
.bloque__cta { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.bloque__cta .ico { transition: transform .4s var(--ease); }
.bloque__orn { width: 150px; right: -40px; bottom: -40px; z-index: -1; transition: transform .8s var(--ease); }
.bloque--amarillo .orn--estrella path { fill: #fff; }
.bloque--noche .bloque__orn { transform: rotate(-45deg); }
.bloque:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.bloque:hover .bloque__cta .ico { transform: translateX(5px); }
.bloque--amarillo:hover .bloque__orn { transform: rotate(45deg) scale(1.1); }
.bloque--noche:hover .bloque__orn { transform: rotate(-20deg) scale(1.08); }

/* ---------------------------------------------------------------- cierre home */
.final { position: relative; overflow: hidden; isolation: isolate; background: var(--noche); color: #fff; padding: 96px 0 104px; text-align: center; }
.final__trazo { position: absolute; z-index: 0; width: 150%; left: -25%; top: 50%; translate: 0 -50%; opacity: .32; }
.final__trazo path { stroke: var(--violeta); }
.final__in { position: relative; z-index: 1; }
.final__t { font-weight: 800; color: var(--amarillo); font-size: clamp(2.4rem, 9vw, 5.4rem); line-height: .98; letter-spacing: -.04em; text-wrap: balance; max-width: 14ch; margin-inline: auto; }
.final__p { margin: 20px auto 0; max-width: 40ch; color: var(--niebla); text-align: justify; text-align-last: center; hyphens: auto; }

/* ---------------------------------------------------------------- pie (minimalista, 29/09/2026) */
.pie { background: var(--noche-hondo); color: #fff; padding: 64px 0 max(28px, env(safe-area-inset-bottom)); text-align: center; }
.pie__in { max-width: var(--envase); margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: center; }
.pie__logo { display: block; border-radius: 8px; }
.logo--pie { width: 170px; }
.pie__lema { margin-top: 18px; font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
.pie__amor { margin-top: 8px; color: var(--lavanda); display: inline-flex; align-items: center; gap: 8px; }
.corazon { width: 18px; height: 18px; fill: var(--amarillo); transform-origin: 50% 55%; }
.pie__fila { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; font-size: .95rem; }
.pie__fila li { display: inline-flex; align-items: center; gap: 8px; color: var(--niebla); }
.pie__fila a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.pie__fila a:hover { color: var(--amarillo); }
.pie__fila .ico { width: 18px; height: 18px; color: var(--amarillo); }
.pie__correos { margin-top: 14px; gap: 10px 26px; }
.pie__area { color: var(--lavanda); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pie__redes { margin-top: 26px; justify-content: center; }
.pie__legal { max-width: 760px; margin: 40px auto 0; padding: 22px var(--gutter) 0; border-top: 1px solid var(--noche-linea); color: var(--lavanda); font-size: .82rem; display: grid; gap: 10px; }
.pie__legal p:first-child { text-align: justify; text-align-last: center; hyphens: auto; }
@media (max-width: 639px) {
  .pie__fila { flex-direction: column; align-items: center; gap: 12px; }
  .pie__fila li { display: block; max-width: 30ch; text-wrap: balance; }
  .pie__fila a { display: inline; }
  .pie__fila .ico { display: inline-block; vertical-align: -.22em; margin-right: 8px; }
  .pie__area { margin-right: 8px; }
  .pie__correos { font-size: .88rem; }
  .pie__correos li { max-width: none; white-space: nowrap; }
}

/* Efecto del pie: al entrar en pantalla el trazo del logo se dibuja y el corazón late dos veces.
   Sin .js o con reduce-motion queda todo quieto y completo. */
.js .pie .logo__trazo { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .pie.is-latido .logo__trazo { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1) .15s; }
.js .pie.is-latido .corazon { animation: latido 1.1s cubic-bezier(.16, 1, .3, 1) 1.45s backwards; }
@keyframes latido { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.3); } 30% { transform: scale(1); } 44% { transform: scale(1.2); } 62% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .js .pie .logo__trazo { stroke-dashoffset: 0 !important; transition: none !important; } .js .pie .corazon { animation: none !important; } }

/* ---------------------------------------------------------------- WhatsApp flotante y barra */
.wa-flot {
  position: fixed; z-index: 35; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px;
  height: 58px; padding: 0 18px 0 16px; border-radius: 999px;
  background: var(--wa); color: #fff; text-decoration: none; font-weight: 600;
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .55);
  transition: transform .4s var(--ease), background-color .25s;
}
.wa-flot .ico { width: 26px; height: 26px; }
.wa-flot:hover { background: var(--wa-hondo); transform: translateY(-3px); }
.wa-flot__txt { font-size: .95rem; }
@media (max-width: 639px) { .wa-flot { width: 58px; padding: 0; justify-content: center; } .wa-flot__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.wa-flot--escritorio { display: none; }
.wa-flot.is-oculto { opacity: 0; transform: translateY(24px); pointer-events: none; }
.wa-flot { transition: transform .4s var(--ease), background-color .25s, opacity .3s; }

.barra {
  position: fixed; z-index: 35; left: 0; right: 0; bottom: 0;
  display: flex; gap: 10px; padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom));
  background: rgba(12, 11, 38, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--noche-linea);
  transition: transform .5s var(--ease);
}
.barra.is-oculta { transform: translateY(110%); }
.barra__principal { flex: 1; min-height: 52px; }
.barra__wa { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; background: var(--wa); color: #fff; flex: none; }
.barra__wa .ico { width: 26px; height: 26px; }
.p-servicio .pie { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---------------------------------------------------------------- HERO de servicio (sus posts) */
.shero { position: relative; overflow: hidden; isolation: isolate; color: #fff; text-align: center; }
.shero__fondo { position: absolute; inset: 0; z-index: -1; background: var(--noche); }
.shero__in { position: relative; z-index: 1; padding-top: 56px; padding-bottom: 64px; display: flex; flex-direction: column; align-items: center; }
.shero__ico { width: 54px; height: 54px; padding: 13px; border-radius: 999px; background: var(--amarillo); color: var(--noche); margin-bottom: 26px; }
.shero__t { font-weight: 800; color: var(--amarillo); font-size: clamp(2.8rem, 12vw, 6rem); line-height: .96; letter-spacing: -.04em; text-wrap: balance; max-width: 11ch; }
.shero__raya { display: block; width: 72px; height: 3px; border-radius: 3px; background: var(--lavanda); opacity: .7; margin: 26px auto 18px; }
.shero__s { font-weight: 500; font-size: clamp(1.05rem, 2.6vw + .5rem, 1.55rem); letter-spacing: .06em; color: var(--niebla); }
.shero__p { margin-top: 22px; max-width: 46ch; color: var(--niebla); text-align: justify; text-align-last: center; hyphens: auto; }
.shero__trazo { position: absolute; z-index: 0; width: 120%; left: -10%; top: 14%; opacity: .5; }
.shero__trazo path { stroke: var(--violeta); }
.shero__estrella { width: 30px; left: 8%; bottom: 18%; animation: flotar 7s ease-in-out infinite; }
.shero__asterisco { width: 22px; right: 9%; top: 16%; animation: girar 18s linear infinite; }
.shero .boton--contorno { color: #fff; }

.shero--amarillo, .shero--amarillo .shero__fondo { background: var(--amarillo); }
.shero--amarillo { color: var(--noche); }
.shero--amarillo .shero__t { color: var(--noche); }
.shero--amarillo .shero__s, .shero--amarillo .shero__p { color: var(--noche); }
.shero--amarillo .shero__raya { background: var(--noche); opacity: .35; }
.shero--amarillo .shero__trazo path { stroke: #fff; }
.shero--amarillo .shero__trazo { opacity: 1; }
.shero--amarillo .shero__ico { background: var(--noche); color: var(--amarillo); }
.shero--amarillo .hero__brillo { display: none; }
.shero--amarillo .boton--primario { --bg: var(--noche); --fg: var(--amarillo); }
.shero--amarillo .boton--contorno { color: var(--noche); }
.shero--amarillo .boton--contorno:hover { --bg: rgba(19, 18, 52, .08); }
.shero--amarillo .orn--estrella path { fill: #fff; }
.shero--amarillo .orn--asterisco g { stroke: var(--noche); }

.shero--violeta .shero__fondo { background: var(--violeta); }
.shero--violeta .shero__t { color: #fff; }
.shero--violeta .shero__s, .shero--violeta .shero__p { color: #fff; }
.shero--violeta .shero__raya { background: var(--amarillo); opacity: 1; }
.shero--violeta .shero__trazo path { stroke: var(--amarillo); }
.shero--violeta .shero__trazo { opacity: .9; }
.shero--violeta .hero__brillo { opacity: .5; }

.shero--naranja .shero__fondo { background: var(--naranja); }
.shero--naranja { color: var(--noche); }
.shero--naranja .shero__t, .shero--naranja .shero__s, .shero--naranja .shero__p { color: var(--noche); }
.shero--naranja .shero__raya { background: var(--noche); opacity: .4; }
.shero--naranja .shero__trazo path { stroke: var(--amarillo); }
.shero--naranja .shero__trazo { opacity: .9; }
.shero--naranja .shero__ico { background: var(--noche); color: var(--naranja); }
.shero--naranja .hero__brillo { display: none; }
.shero--naranja .boton--primario { --bg: var(--noche); --fg: var(--amarillo); }
.shero--naranja .orn--estrella path { fill: var(--noche); }
.shero--naranja .orn--asterisco g { stroke: var(--noche); }

/* ---------------------------------------------------------------- secciones de servicio */
.seccion { padding: 64px 0; }
.seccion--corta { padding: 32px 0; }
.seccion--blanca { background: #fff; color: var(--tinta); }
.seccion--nube { background: var(--nube); color: var(--tinta); }
.seccion--noche { background: var(--noche); color: #fff; }
.bloque-t + .bloque-t { margin-top: 56px; }

.destacado { background: #fff; color: var(--noche); padding: 56px 0 8px; }
.destacado .envase { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.destacado p { font-weight: 700; font-size: clamp(1.45rem, 4vw + .6rem, 2.4rem); line-height: 1.2; letter-spacing: -.025em; max-width: 30ch; text-wrap: pretty; }
.destacado__orn { position: static; flex: none; width: 32px; margin-top: 6px; }
.destacado .orn--estrella path { fill: var(--violeta); }

.lista { margin-top: 26px; display: grid; gap: 4px; }
.lista li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea); font-weight: 500; }
.check { width: 30px; height: 30px; padding: 6px; border-radius: 999px; background: var(--amarillo); color: var(--noche); }
.lista__prog { margin-top: 22px; color: var(--tinta-suave); max-width: 62ch; }

.streams { margin-top: 24px; display: grid; gap: 14px; }
.stream { padding: 26px 24px; border-radius: var(--r-xl); background: var(--noche); color: #fff; }
.stream:nth-child(2) { background: var(--violeta); }
.stream h3 { font-weight: 700; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.02em; }
.stream p { margin-top: 8px; color: rgba(255, 255, 255, .86); }

.revisamos__in { display: grid; gap: 36px; }
.pastillas { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.pastillas li { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--linea); font-weight: 500; font-size: .95rem; transition: border-color .2s, transform .3s var(--ease); }
.pastillas li:hover { border-color: var(--violeta); transform: translateY(-2px); }
.honesto--linea { grid-template-columns: auto 1fr; align-items: center; box-shadow: none; border: 1.5px solid var(--linea); background: #fff; }
.honesto--linea p { font-weight: 500; }

/* proceso: riel que se llena al bajar */
.proceso { position: relative; }
.proceso__cab .texto { margin-top: 12px; color: var(--niebla); max-width: 56ch; }
.pasos { position: relative; margin-top: 36px; display: grid; gap: 0; padding-left: 0; }
.pasos__riel { position: absolute; left: 21px; top: 22px; bottom: 22px; width: 4px; border-radius: 4px; background: var(--noche-linea); overflow: hidden; }
.pasos__lleno { position: absolute; inset: 0; background: var(--amarillo); transform-origin: top; transform: scaleY(var(--p)); border-radius: 4px; }
.paso { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 0 0 30px; }
.paso:last-child { padding-bottom: 0; }
.paso__n { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; background: var(--noche-alto); border: 2px solid var(--noche-linea); font-weight: 700; color: var(--lavanda); transition: background-color .4s, color .4s, border-color .4s, transform .5s var(--ease); }
.paso.is-activo .paso__n { background: var(--amarillo); border-color: var(--amarillo); color: var(--noche); transform: scale(1.06); }
.paso h3 { font-weight: 700; font-size: 1.2rem; line-height: 1.25; padding-top: 10px; }
.paso p { margin-top: 6px; color: var(--niebla); font-size: 1rem; text-align: justify; hyphens: auto; }
.pagos { margin-top: 40px; display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; padding: 22px; border-radius: var(--r-l); background: var(--noche-alto); border: 1px solid var(--noche-linea); }
.pagos p { color: #fff; font-weight: 500; text-align: justify; hyphens: auto; }
.pagos .honesto__ico { background: var(--amarillo); color: var(--noche); }

/* FAQ */
.faq__lista { margin-top: 28px; border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.12rem; line-height: 1.3; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__ico { width: 34px; height: 34px; padding: 7px; border-radius: 999px; background: var(--nube); transition: transform .45s var(--ease), background-color .25s; }
.faq__item[open] .faq__ico { transform: rotate(180deg); background: var(--amarillo); }
.faq__item summary:hover .faq__ico { background: var(--amarillo); }
.faq__cuerpo { padding: 0 0 26px; color: var(--tinta-suave); }
.faq__cuerpo p + p { margin-top: .8em; }
.faq__item::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
.aviso { margin-top: 26px; padding: 14px 16px; border-radius: var(--r-m); background: var(--nube); font-size: .9rem; color: var(--tinta-suave); text-align: justify; hyphens: auto; }
.aviso a { color: var(--violeta-hondo); font-weight: 600; }
.aviso--borrador { background: #fff4b8; color: var(--noche); font-weight: 600; }

/* calculadoras */
.calc, .estimador { margin-top: 18px; padding: 22px 18px; border-radius: var(--r-l); background: var(--noche); color: #fff; display: grid; gap: 16px; text-align: left; hyphens: manual; }
.calc__t { font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: var(--amarillo); }
.calc__grupo { border: 0; padding: 0; margin: 0; }
.calc__grupo legend { font-size: .9rem; color: var(--niebla); margin-bottom: 8px; padding: 0; }
.segmentado { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--noche-alto); }
.segmentado label { position: relative; }
.segmentado input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmentado span { display: grid; place-items: center; min-height: 42px; padding: 6px 10px; border-radius: 999px; font-weight: 600; font-size: .9rem; text-align: center; line-height: 1.2; transition: background-color .3s var(--ease), color .3s; }
.segmentado input:checked + span { background: var(--amarillo); color: var(--noche); }
.segmentado input:focus-visible + span { outline: 3px solid var(--violeta); outline-offset: 2px; }
.interruptor { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; }
.interruptor input { position: absolute; opacity: 0; }
.interruptor__pista { position: relative; width: 48px; height: 28px; border-radius: 999px; background: var(--noche-alto); border: 1.5px solid var(--noche-linea); flex: none; transition: background-color .3s; }
.interruptor__pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 999px; background: var(--lavanda); transition: transform .35s var(--ease), background-color .3s; }
.interruptor input:checked + .interruptor__pista { background: var(--violeta); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(20px); background: #fff; }
.interruptor input:focus-visible + .interruptor__pista { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.calc__nums { display: grid; gap: 10px; }
.contador { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .95rem; }
.contador__ctl { display: inline-flex; align-items: center; border-radius: 999px; background: var(--noche-alto); padding: 3px; flex: none; }
.contador__ctl button { width: 38px; height: 38px; border-radius: 999px; border: 0; background: transparent; color: #fff; font-size: 1.2rem; cursor: pointer; transition: background-color .2s; }
.contador__ctl button:hover { background: rgba(255, 255, 255, .1); }
.contador__ctl input { width: 42px; text-align: center; border: 0; background: transparent; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
.contador__ctl input::-webkit-inner-spin-button { -webkit-appearance: none; }
.calc .campo__et, .estimador .campo__et { color: var(--niebla); }
.calc input[data-c="curso"], .estimador select { background: var(--noche-alto); border-color: var(--noche-linea); color: #fff; }
.calc__desglose { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--noche-linea); font-size: .92rem; }
.calc__fila { display: flex; justify-content: space-between; gap: 12px; color: var(--niebla); }
.calc__fila[hidden] { display: none; }
.calc__fila dd { font-variant-numeric: tabular-nums; color: #fff; font-weight: 500; }
.calc__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 14px 16px; border-radius: var(--r-m); background: var(--amarillo); color: var(--noche); font-weight: 600; }
.calc__total strong { white-space: nowrap; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calc__nota { font-size: .82rem; color: var(--lavanda); line-height: 1.5; text-align: justify; hyphens: auto; }
.seccion--blanca .calc__nota { color: var(--tinta-suave); }
.estimador .calc__nota, .calc .calc__nota { color: var(--lavanda); }

/* traducciones */
.precios__grid { display: grid; gap: 32px; }
.precios .texto { margin-top: 12px; color: var(--tinta-suave); }
.tabla-envase { margin-top: 20px; overflow-x: auto; border-radius: var(--r-l); border: 1.5px solid var(--linea); }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 330px; }
.tabla th, .tabla td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--linea); }
.tabla thead th { background: var(--noche); color: #fff; font-weight: 600; font-size: .82rem; letter-spacing: .04em; }
.tabla td { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tbody th { font-weight: 500; }
.tabla tr:last-child th, .tabla tr:last-child td { border-bottom: 0; }
.tabla__sep th { background: var(--nube); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--tinta-suave); }
.precios__otros { font-size: .95rem; }
.tiempos { margin-top: 40px; display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 24px 20px; border-radius: var(--r-xl); background: var(--amarillo); color: var(--noche); }
.tiempos__ico { width: 46px; height: 46px; padding: 11px; border-radius: 999px; background: var(--noche); color: var(--amarillo); }
.tiempos ul { margin: 12px 0 10px; display: grid; gap: 10px; }
.tiempos li { display: grid; gap: 2px; }
.tiempos li strong { font-weight: 700; }
.tiempos .calc__nota { color: var(--noche); opacity: .8; }
.extras { margin-top: 16px; display: grid; gap: 12px; }
.extras li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; padding: 20px; border-radius: var(--r-l); background: var(--nube); }
.extra__ico { grid-row: span 2; width: 42px; height: 42px; padding: 10px; border-radius: 999px; background: var(--violeta); color: #fff; }
.extras p { color: var(--tinta-suave); font-size: .95rem; }

/* OSHC */
.planes { margin-top: 26px; display: grid; gap: 12px; }
.plan { display: grid; gap: 4px; padding: 24px; border-radius: var(--r-xl); background: var(--noche); color: #fff; }
.plan:nth-child(2) { background: var(--violeta); }
.plan:nth-child(3) { background: var(--amarillo); color: var(--noche); }
.plan strong { font-weight: 800; font-size: 1.8rem; letter-spacing: -.03em; }
.aseguradoras { margin-top: 44px; }
.marcas { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.marcas li { padding: 14px 22px; border-radius: 999px; border: 1.5px solid var(--linea); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }

/* destinos */
.destinos { display: grid; gap: 16px; }
.dubai { position: relative; overflow: hidden; isolation: isolate; padding: 30px 24px; border-radius: var(--r-xl); background: var(--noche); color: #fff; display: grid; gap: 14px; justify-items: start; }
.dubai .texto { color: var(--niebla); max-width: 48ch; }
.dubai .boton--noche { --bg: var(--amarillo); --fg: var(--noche); }
.dubai__orn { width: 160px; right: -50px; top: -50px; transform: rotate(135deg); z-index: -1; }
.pronto { display: grid; gap: 10px; }
.pronto li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px; border-radius: var(--r-l); border: 1.5px dashed rgba(19, 18, 52, .3); }
.pronto span { font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; }
.pronto em { font-style: normal; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }

/* friends */
.friends { display: grid; gap: 20px; }
.programa { padding: 30px 24px; border-radius: var(--r-xl); display: grid; gap: 12px; align-content: start; }
.programa--ref { background: var(--noche); color: #fff; }
.programa--ref .texto { color: var(--niebla); }
.programa--emb { background: var(--amarillo); color: var(--noche); }
.premios { display: grid; gap: 8px; margin-top: 8px; }
.premios li { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--noche-linea); }
.premios strong { font-weight: 800; font-size: 1.6rem; color: var(--amarillo); letter-spacing: -.02em; }
.escalera { display: grid; gap: 8px; margin-top: 8px; }
.escalera li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-m); background: rgba(19, 18, 52, calc(.06 * var(--n))); margin-left: calc((var(--n) - 1) * 14px); }
.escalera strong { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; white-space: nowrap; }
.programa--emb .calc__nota { color: var(--noche); opacity: .8; }
.cuando { padding: 26px 22px; border-radius: var(--r-xl); background: var(--nube); display: grid; gap: 12px; }
.cuando ul { display: grid; gap: 10px; }
.cuando li { display: grid; gap: 2px; }
.cuando .texto { color: var(--tinta-suave); }
.cuando .calc__nota { color: var(--tinta-suave); }

/* relacionados */
.rels { margin-top: 18px; display: grid; gap: 10px; }
.rel { display: grid; grid-template-columns: auto 1fr auto; column-gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r-l); background: #fff; text-decoration: none; border: 1.5px solid transparent; transition: border-color .25s, transform .4s var(--ease), box-shadow .4s var(--ease); }
.rel__ico { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 999px; background: var(--noche); color: var(--amarillo); }
.rel__t { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.rel__s { grid-column: 2; font-size: .88rem; color: var(--tinta-suave); }
.rel__flecha { grid-row: 1 / span 2; grid-column: 3; width: 22px; height: 22px; transition: transform .4s var(--ease); }
.rel:hover { border-color: var(--violeta); transform: translateY(-2px); box-shadow: var(--sombra-suave); }
.rel:hover .rel__flecha { transform: translateX(4px); }

/* ---------------------------------------------------------------- formulario */
.formulario { background: var(--noche); color: #fff; padding: 72px 0 80px; position: relative; overflow: hidden; }
.formulario__in { display: grid; gap: 28px; }
.formulario__cab .texto { margin-top: 12px; color: var(--niebla); max-width: 48ch; }
.formulario__cab .enlace { margin-top: 16px; color: var(--amarillo); }
.form { background: #fff; color: var(--tinta); border-radius: var(--r-xl); padding: 24px 18px 22px; box-shadow: var(--sombra); display: grid; gap: 18px; }
.form__grid { display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo__et { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.campo__opc { font-weight: 400; color: var(--tinta-suave); font-size: .85rem; }
.campo input:not([type=radio]):not([type=checkbox]):not([type=file]), .campo select, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 1.5px solid #cfcfe0; border-radius: 14px; background: #fff; color: var(--tinta);
  font-size: 1rem; line-height: 1.3;
  transition: border-color .2s, box-shadow .2s;
  appearance: none; -webkit-appearance: none;
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #7d7c98; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #a9a8c6; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--violeta); box-shadow: 0 0 0 4px rgba(105, 81, 228, .2); }
.campo.is-error input, .campo.is-error select, .campo.is-error textarea { border-color: #c2361b; box-shadow: 0 0 0 4px rgba(194, 54, 27, .12); }
.campo__sel { position: relative; }
.campo__sel select { padding-right: 44px; cursor: pointer; }
.campo__sel select:invalid { color: #7d7c98; }
.campo__sel .ico { position: absolute; right: 14px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--tinta-suave); }
.campo__error { color: #b3301a; font-size: .86rem; font-weight: 500; }
.campo__ayuda { font-size: .86rem; color: var(--tinta-suave); line-height: 1.5; }
.campo--radio { border: 0; padding: 0; margin: 0; }
.campo--radio legend { padding: 0; margin-bottom: 8px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.opcion span { display: inline-flex; align-items: center; min-height: 46px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid #cfcfe0; font-weight: 500; font-size: .95rem; transition: background-color .25s, border-color .25s, color .25s; }
.opcion input:checked + span { background: var(--noche); border-color: var(--noche); color: var(--amarillo); }
.opcion input:focus-visible + span { outline: 3px solid var(--violeta); outline-offset: 2px; }
.campo--radio.is-error .opcion span { border-color: #c2361b; }
.acepto { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: .9rem; line-height: 1.5; color: var(--tinta-suave); cursor: pointer; }
.acepto input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--violeta); cursor: pointer; }
.acepto a { color: var(--violeta-hondo); font-weight: 600; }
.subida { position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 16px; border-radius: var(--r-l); border: 2px dashed #b9b8d4; background: var(--nube); text-align: center; cursor: pointer; transition: border-color .25s, background-color .25s; }
.subida input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.subida:hover, .subida.is-arrastre { border-color: var(--violeta); background: #ecebfb; }
.subida:focus-within { border-color: var(--violeta); box-shadow: 0 0 0 4px rgba(105, 81, 228, .2); }
.subida__ico { width: 40px; height: 40px; color: var(--violeta); }
.subida__boton { font-weight: 700; }
.subida__o { font-size: .88rem; color: var(--tinta-suave); }
.subida__lista { display: grid; gap: 6px; }
.subida__lista:empty::before { content: attr(data-vacio); font-size: .86rem; color: var(--tinta-suave); }
.subida__lista li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-s); background: var(--nube); font-size: .9rem; }
.subida__lista .ico { width: 20px; height: 20px; color: var(--violeta); }
.subida__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.subida__nota { grid-column: 2; font-size: .8rem; color: #8a5a00; }
.subida__lista button { border: 0; background: none; color: var(--tinta-suave); font-size: .85rem; text-decoration: underline; cursor: pointer; padding: 4px; }
.form__estado:empty { display: none; }
.form__estado { padding: 12px 14px; border-radius: var(--r-m); background: #fdecea; color: #8f2512; font-weight: 500; font-size: .95rem; }
.form__progreso { height: 8px; border-radius: 8px; background: var(--nube); overflow: hidden; }
.form__progreso span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--av, 0)); background: var(--violeta); border-radius: 8px; transition: transform .2s linear; }
.form__micro { text-align: center; font-size: .85rem; color: var(--tinta-suave); }

/* gracias, legal */
.gracias .shero__in { min-height: calc(100svh - var(--cab) - 40px); justify-content: center; }
.gracias__check { width: 64px; height: 64px; padding: 16px; border-radius: 999px; background: var(--amarillo); color: var(--noche); margin-bottom: 26px; animation: pop .8s var(--ease) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.gracias__paso { margin-top: 30px; width: 100%; max-width: 520px; padding: 24px 20px; border-radius: var(--r-xl); background: var(--noche-alto); border: 1px solid var(--noche-linea); display: grid; gap: 10px; justify-items: center; }
.gracias__paso:empty { display: none; }
.gracias__paso h2 { font-weight: 800; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.gracias__paso p { color: var(--niebla); }
.gracias__paso a:not(.boton) { color: var(--amarillo); }
.gracias__paso .boton { margin-top: 6px; }
.legal { padding-top: 56px; }
.legal .texto { margin-top: 24px; }
.legal .t-sub { margin: 28px 0 8px; }

/* ---------------------------------------------------------------- aparición al bajar: despegue en diagonal */
.js.revela-on [data-revela] { opacity: 0; transform: translate(-10px, 18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js.revela-on [data-revela].is-visto { opacity: 1; transform: none; }
.hero .puerta[data-revela] { transition-duration: 1s; }
.js.revela-on .hero .puerta[data-revela]:nth-child(2) { transition-delay: .09s; }

/* ---------------------------------------------------------------- transiciones entre páginas */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: var(--ease); }
::view-transition-old(root) { animation: .3s var(--ease) both salir; }
::view-transition-new(root) { animation: .45s var(--ease) both entrar; }
@keyframes salir { to { opacity: 0; } }
@keyframes entrar { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ================================================================= ≥ 640 */
@media (min-width: 640px) {
  :root { --gutter: 28px; }
  .puertas { grid-template-columns: 1fr 1fr; }
  .puerta { min-height: 200px; }
  .form { padding: 32px 30px 28px; }
  .form__grid { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .campo--ancho { grid-column: 1 / -1; }
  .confianza__grid, .duo__in { grid-template-columns: 1fr 1fr; }
  .personas { grid-template-columns: 1fr 1fr; }
  .streams, .planes { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .extras { grid-template-columns: repeat(3, 1fr); }
  .extras li { grid-template-columns: 1fr; }
  .extra__ico { grid-row: auto; margin-bottom: 10px; }
  .rels { grid-template-columns: repeat(3, 1fr); }
  .rel { grid-template-columns: 1fr auto; row-gap: 12px; padding: 20px; }
  .rel__ico { grid-row: auto; }
  .rel__t { grid-column: 1; }
  .rel__s { grid-column: 1; }
  .rel__flecha { grid-row: 1; grid-column: 2; align-self: start; }
  .pronto { grid-template-columns: repeat(3, 1fr); }
  .chips { grid-template-columns: 1fr 1fr; }
  .donde { grid-template-columns: auto 1fr; gap: 16px; }
  .pagos { grid-template-columns: auto 1fr; }
  .pronto li { flex-direction: column; align-items: flex-start; }
  .calc__nums { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ================================================================= ≥ 960 escritorio */
@media (min-width: 960px) {
  :root { --cab: 70px; --gutter: 40px; }
  body { font-size: 1.08rem; }
  .logo--cab { width: 124px; }
  .nav { display: flex; gap: 4px; margin-right: 8px; }
  .nav__link { padding: 8px 14px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 500; font-size: .95rem; transition: background-color .2s, color .2s; }
  .nav__link:hover { background: rgba(255, 255, 255, .08); color: var(--amarillo); }
  .cab__cta { display: inline-flex; }
  .cab__menu { background: transparent; color: #fff; border: 1.5px solid var(--noche-linea); }
  .cab__menu:hover { border-color: var(--amarillo); }
  .cab__menu--cerrar { background: var(--amarillo); color: var(--noche); }

  .menu__nav { grid-template-columns: repeat(4, 1fr); padding-top: 60px; }
  .menu__grupo a { font-size: 1.9rem; }

  .hero__in { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.12fr); gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 72px; min-height: min(calc(100svh - var(--cab)), 940px); }
  .hero__trazo { width: 78%; left: -6%; top: 10%; }
  .hero__h1 { font-size: clamp(3.8rem, 5.2vw, 5.2rem); max-width: 12ch; }
  .hero__sub { font-size: 1.25rem; margin-top: 24px; }
  .hero__elige { margin-top: 0; }
  .puertas { grid-template-columns: 1fr; gap: 14px; }
  .puerta { min-height: 180px; padding: 26px 26px 24px 30px; }
  .puerta__titulo { font-size: 2.7rem; max-width: 12ch; }
  .puerta__fondo { width: 210px; height: 210px; right: -10px; top: -30px; }
  .hero__estrella { width: 46px; right: auto; left: 44%; top: 60%; }
  .hero__asterisco { width: 30px; right: 4%; top: 7%; }
  .hero__medialuna { width: 140px; left: -60px; bottom: 10%; }
  .chips { gap: 10px; }
  .chip__t { font-size: .9rem; white-space: nowrap; }
  .chip { padding-right: 12px; }

  .como { padding: 120px 0; }
  .como .envase { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .como__cab { position: sticky; top: calc(var(--cab) + 40px); }
  .pila { margin-top: 0; gap: 24px; }
  .pila__tarjeta { min-height: 330px; padding: 36px 36px 38px; top: calc(var(--cab) + 40px + (var(--i) - 1) * 16px); }

  .nosotros { padding: 120px 0; }
  .nosotros__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 72px; row-gap: 48px; align-items: start; }
  .nosotros__texto { position: sticky; top: calc(var(--cab) + 40px); }
  .personas { gap: 24px; }
  .persona:nth-child(2) { margin-top: 90px; }
  .nosotros__equipo { grid-column: 1; }
  .donde { grid-column: 2; }

  .confianza { padding: 110px 0; }
  .confianza__grid { margin-top: 64px; }
  .honesto, .resenas { padding: 36px 34px; }
  .duo { padding-bottom: 110px; }
  .bloque { min-height: 380px; padding: 40px 38px; }
  .final { padding: 150px 0 160px; }


  .wa-flot--escritorio { display: inline-flex; }
  .barra { display: none; }
  .p-servicio .pie { padding-bottom: 32px; }

  .shero__in { padding-top: 96px; padding-bottom: 110px; }
  .shero__trazo { width: 80%; left: 10%; top: 8%; }
  .shero__estrella { width: 44px; left: 12%; bottom: 22%; }
  .shero__asterisco { width: 30px; right: 14%; top: 22%; }

  .seccion { padding: 104px 0; }
  .seccion--corta { padding: 40px 0; }
  .destacado { padding: 96px 0 16px; }
  .destacado__orn { width: 42px; }
  .seccion--blanca > .envase > .bloque-t .lista { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .revisamos__in { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .revisamos__in > .honesto { grid-column: 1 / -1; }
  .proceso__cab { text-align: center; max-width: 820px; margin-inline: auto; }
  .proceso__cab .texto { margin-inline: auto; text-align-last: center; }
  .pasos { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; }
  .paso { grid-template-columns: 56px 1fr; gap: 22px; padding-bottom: 38px; }
  .paso__n { width: 56px; height: 56px; font-size: 1.1rem; }
  .pasos__riel { left: 26px; top: 28px; bottom: 28px; }
  .paso h3 { font-size: 1.35rem; padding-top: 14px; }
  .pagos { max-width: 820px; padding: 28px; margin-inline: auto; }
  .destacado .envase { justify-content: center; }
  .destacado p { margin: 0; }
  .revisamos__in > .revisamos:only-child { grid-column: 1 / -1; text-align: center; }
  .revisamos__in > .revisamos:only-child .pastillas { justify-content: center; }
  .formulario { padding: 110px 0; }
  .formulario__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .formulario__cab { position: sticky; top: calc(var(--cab) + 40px); }
  .form { padding: 40px; }
  .precios__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .estimador { margin-top: 0; position: sticky; top: calc(var(--cab) + 32px); padding: 28px; }
  .tiempos { padding: 32px; margin-top: 56px; }
  .destinos { grid-template-columns: 1.2fr 1fr; align-items: stretch; }
  .dubai { padding: 44px 40px; }
  .pronto { grid-template-columns: 1fr; }
  .friends { grid-template-columns: 1fr 1fr; }
  .cuando { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .cuando h3 { grid-column: 1 / -1; }
  .programa { padding: 40px 36px; }
}

@media (min-width: 1280px) {
  .hero__in { gap: 88px; }
}

/* =================================================================================================
   PALETA HOMOGÉNEA (01/10/2026). Pedido de Triaje: "están muy contrastados, usar los colores de redes".
   Sus posts son SOLO azul noche + amarillo + grises suaves. Por eso:
   - Todas las superficies son de la familia azul noche (dos tonos que se alternan, sin blancos).
   - El amarillo es el único color fuerte: títulos, botones, números, iconos y la cinta.
   - Violeta y naranja quedan solo como adorno apagado (trazo y medialuna), nunca como fondo.
   Los efectos (trazo que se dibuja, brillo, pila, riel, latido) siguen igual: solo cambia el color.
   ================================================================================================= */
:root {
  --noche-medio: #171640;      /* segundo tono de sección */
  --tarjeta: #1d1c4a;          /* superficie de tarjetas */
  --tarjeta-borde: rgba(255, 255, 255, .09);
  --gris-post: #d2d3d7;        /* subtítulo de sus posts */
  --gris-logo: #a5a4b4;        /* logo atenuado de sus posts */
  --trazo-suave: #3b3591;      /* el violeta del trazo, apagado hacia el azul */
}
/* Secciones antes blancas o gris nube: ahora azul. Los tokens de texto se redefinen dentro,
   así cada componente que usaba --tinta / --tinta-suave / --nube / --linea se adapta solo. */
.seccion--blanca, .seccion--nube, .nosotros, .confianza, .duo, .destacado, .formulario, .relacionados {
  --tinta: #fff; --tinta-suave: #c9c8da; --nube: rgba(255, 255, 255, .05); --linea: rgba(255, 255, 255, .12);
  --violeta-hondo: var(--amarillo);
  color: #fff;
}
.seccion--blanca, .nosotros, .destacado { background: var(--noche); }
.seccion--nube, .confianza, .duo, .relacionados { background: var(--noche-medio); }
.seccion--blanca .t-seccion, .nosotros .t-seccion, .seccion--nube .t-seccion { color: #fff; }
.seccion--blanca :focus-visible, .seccion--nube :focus-visible, .form :focus-visible, .nosotros :focus-visible, .confianza :focus-visible { outline-color: var(--amarillo); }
html { scrollbar-color: var(--tarjeta) var(--noche-hondo); }
.enlace { color: var(--amarillo); }

/* trazo y adornos: presentes pero sin gritar */
.hero__trazo path, .shero__trazo path, .final__trazo path, .menu__trazo path, .persona__trazo path { stroke: var(--trazo-suave); }
.hero__trazo { opacity: .75; }
.shero__trazo { opacity: .55; }
.orn--medialuna path { fill: var(--trazo-suave); }

/* heros de servicio: todos como sus posts (título amarillo sobre azul) */
.shero--amarillo, .shero--amarillo .shero__fondo, .shero--violeta .shero__fondo, .shero--naranja .shero__fondo { background: var(--noche); }
.shero--amarillo, .shero--naranja { color: #fff; }
.shero--amarillo .shero__t, .shero--violeta .shero__t, .shero--naranja .shero__t { color: var(--amarillo); }
.shero--amarillo .shero__s, .shero--amarillo .shero__p, .shero--violeta .shero__s, .shero--violeta .shero__p,
.shero--naranja .shero__s, .shero--naranja .shero__p { color: var(--gris-post); }
.shero--amarillo .shero__raya, .shero--violeta .shero__raya, .shero--naranja .shero__raya { background: var(--lavanda); opacity: .7; }
.shero--amarillo .shero__trazo path, .shero--violeta .shero__trazo path, .shero--naranja .shero__trazo path { stroke: var(--trazo-suave); }
.shero--amarillo .shero__trazo, .shero--violeta .shero__trazo, .shero--naranja .shero__trazo { opacity: .55; }
.shero--amarillo .shero__ico, .shero--naranja .shero__ico { background: var(--amarillo); color: var(--noche); }
.shero--amarillo .hero__brillo, .shero--naranja .hero__brillo { display: block; }
.shero--violeta .hero__brillo { opacity: 1; }
.shero--amarillo .boton--primario, .shero--naranja .boton--primario { --bg: var(--amarillo); --fg: var(--noche); }
.shero--amarillo .boton--contorno { color: #fff; }
.shero--amarillo .boton--contorno:hover { --bg: rgba(255, 255, 255, .08); }
.shero--amarillo .orn--estrella path, .shero--naranja .orn--estrella path { fill: var(--amarillo); }
.shero--amarillo .orn--asterisco g, .shero--naranja .orn--asterisco g { stroke: var(--amarillo); }

/* portada: la puerta amarilla manda; la segunda es azul con borde, sin violeta */
.puerta--violeta { background: var(--tarjeta); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(253, 223, 1, .35), var(--sombra); }
.puerta--violeta .puerta__flecha { background: var(--amarillo); color: var(--noche); }
.puerta--violeta .puerta__linea { color: var(--gris-post); opacity: 1; }
.chip { background: var(--tarjeta); border-color: var(--tarjeta-borde); }
.chip:hover { background: #26255a; }
.chip__s { color: var(--gris-logo); }

/* cómo trabajamos: cuatro tarjetas del mismo azul, el número en amarillo */
.pila__tarjeta--1, .pila__tarjeta--2, .pila__tarjeta--3, .pila__tarjeta--4 { background: var(--tarjeta); color: #fff; border: 1px solid var(--tarjeta-borde); }
.pila__num { color: var(--amarillo); opacity: .9; font-size: 5.5rem; }
.pila__tarjeta h3 { color: #fff; }
.pila__tarjeta p { color: var(--gris-post); }
.pila__tarjeta--1 { box-shadow: inset 0 3px 0 var(--amarillo), 0 -12px 40px -18px rgba(0, 0, 0, .55); }

/* nosotros y confianza */
.valores .orn--estrella path, .destacado .orn--estrella path { fill: var(--amarillo); }
.persona__cargo { color: var(--amarillo); }
.donde, .honesto, .resenas, .cuando, .extras li { background: var(--tarjeta); border: 1px solid var(--tarjeta-borde); box-shadow: none; }
.instituciones__t, .instituciones__lista li { color: #fff; }
.instituciones__lista li { color: var(--gris-post); }
.resenas .boton--noche, .seccion--blanca .boton--noche, .seccion--nube .boton--noche, .destinos .boton--noche { --bg: var(--amarillo); --fg: var(--noche); }
.resenas .boton--noche:hover, .seccion--blanca .boton--noche:hover, .seccion--nube .boton--noche:hover { --bg: #fff06a; }

/* bloques Friends / destinos */
.bloque--amarillo, .bloque--noche { background: var(--tarjeta); color: #fff; border: 1px solid var(--tarjeta-borde); }
.bloque--amarillo h2, .bloque--noche h2 { color: var(--amarillo); }
.bloque--amarillo p { color: var(--gris-post); }
.bloque--amarillo .bloque__ico, .bloque--noche .bloque__ico { background: var(--amarillo); color: var(--noche); }
.bloque--amarillo .orn--estrella path { fill: var(--trazo-suave); }

/* servicio: listas, pastillas, streams, planes, tiempos */
.stream, .stream:nth-child(2), .plan, .plan:nth-child(2), .plan:nth-child(3) { background: var(--tarjeta); color: #fff; border: 1px solid var(--tarjeta-borde); }
.plan strong { color: var(--amarillo); }
.pastillas li { background: var(--tarjeta); border-color: var(--tarjeta-borde); }
.pastillas li:hover { border-color: var(--amarillo); }
.honesto--linea { background: var(--tarjeta); border-color: var(--tarjeta-borde); }
.tiempos { background: var(--tarjeta); color: #fff; border: 1px solid rgba(253, 223, 1, .35); }
.tiempos__ico { background: var(--amarillo); color: var(--noche); }
.tiempos .calc__nota { color: var(--lavanda); opacity: 1; }
.extra__ico { background: var(--amarillo); color: var(--noche); }
.tabla thead th { background: var(--tarjeta); color: var(--amarillo); }
.calc, .estimador { background: var(--tarjeta); border: 1px solid var(--tarjeta-borde); }
.segmentado, .contador__ctl, .calc input[data-c="curso"], .estimador select { background: var(--noche); }
.interruptor input:checked + .interruptor__pista { background: var(--amarillo); }
.interruptor input:checked + .interruptor__pista::after { background: var(--noche); }
.faq__ico { background: var(--tarjeta); color: #fff; }
.faq__item[open] .faq__ico, .faq__item summary:hover .faq__ico { color: var(--noche); }
.aviso--borrador { background: rgba(253, 223, 1, .14); color: #fff; }
.rel { background: var(--tarjeta); border-color: var(--tarjeta-borde); color: #fff; }
.rel:hover { border-color: rgba(253, 223, 1, .6); }
.programa--emb { background: var(--tarjeta); color: #fff; border: 1px solid rgba(253, 223, 1, .35); }
.pronto li { background: var(--tarjeta); border-color: var(--tarjeta-borde); color: #fff; }

/* formulario: tarjeta azul, campos un tono más hondo, foco amarillo */
.form { background: var(--tarjeta); color: #fff; border: 1px solid var(--tarjeta-borde); }
.campo input, .campo select, .campo textarea { background: var(--noche); border-color: rgba(255, 255, 255, .16); color: #fff; }
.campo input::placeholder, .campo textarea::placeholder { color: #8d8ca6; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--amarillo); box-shadow: 0 0 0 4px rgba(253, 223, 1, .18); }
.campo input[type="date"], .campo input[type="month"] { color-scheme: dark; }
.campo select option { background: var(--noche); color: #fff; }
.acepto input { accent-color: var(--amarillo); }
.subida { background: var(--noche); border-color: rgba(255, 255, 255, .22); }
.subida:hover, .subida.is-arrastre { background: #1f1e50; border-color: var(--amarillo); }
.subida:focus-within { border-color: var(--amarillo); box-shadow: 0 0 0 4px rgba(253, 223, 1, .18); }
.subida__ico, .subida__lista .ico { color: var(--amarillo); }
.subida__lista li { background: var(--noche); }
.form__progreso span { background: var(--amarillo); }
.form .boton--noche { --bg: var(--amarillo); --fg: var(--noche); }
.form .boton--noche:hover { --bg: #fff06a; }
.dubai { background: var(--tarjeta); border: 1px solid var(--tarjeta-borde); }

/* =================================================================================================
   MENÚ MINIMALISTA (01/10/2026). Antes: mega menú a pantalla completa con 4 columnas de letra enorme.
   Ahora: panel lateral angosto, una sola lista con rótulos pequeños. Se conservan los efectos:
   apertura en círculo desde el botón, entrada escalonada de los grupos y el trazo que se dibuja.
   En móvil el panel ocupa todo el ancho (sigue siendo una lista simple).
   ================================================================================================= */
.menu { background: transparent; clip-path: none; transition: none; overflow: hidden; }
.menu__velo { position: absolute; inset: 0; background: rgba(8, 7, 28, .55); opacity: 0; transition: opacity .45s var(--ease); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.menu.is-open .menu__velo { opacity: 1; }
.menu__in {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100%); max-width: none; margin: 0;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--noche-hondo); border-left: 1px solid var(--noche-linea);
  padding: 0 28px 28px;
  clip-path: circle(0 at calc(100% - 50px) 29px);
  transition: clip-path .6s var(--ease);
}
.menu.is-open .menu__in { clip-path: circle(160% at calc(100% - 50px) 29px); }
@media (prefers-reduced-motion: reduce) { .menu__in, .menu__velo { transition: none; } }
.menu__nav { gap: 22px; padding-top: 8px; }
.menu__titulo { font-size: .72rem; letter-spacing: .16em; color: var(--gris-logo); margin-bottom: 4px; }
.menu__grupo a {
  position: relative; display: block; padding: 7px 0 7px 18px;
  font-size: 1.08rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; color: #fff;
}
.menu__grupo a::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 99px; background: var(--amarillo); transform: scale(0); transition: transform .3s var(--ease); }
.menu__grupo a:hover, .menu__grupo a[aria-current="page"] { color: var(--amarillo); transform: translateX(4px); }
.menu__grupo a:hover::before, .menu__grupo a[aria-current="page"]::before { transform: scale(1); }
.menu__grupo--suelto { padding-top: 16px; border-top: 1px solid var(--noche-linea); }
.menu__pie { padding-top: 28px; gap: 12px; }
.menu__pie .redes { gap: 8px; }
.menu__pie .red { width: 40px; height: 40px; }
.menu__trazo { right: -55%; bottom: 4%; width: 150%; opacity: .55; }
.menu.is-open .menu__grupo { animation: subir .55s var(--ease) both; }
.menu.is-open .menu__grupo:nth-child(2) { animation-delay: .05s; }
.menu.is-open .menu__grupo:nth-child(3) { animation-delay: .1s; }
.menu.is-open .menu__grupo:nth-child(4) { animation-delay: .15s; }

/* cabecera: enlaces más quietos, el actual marcado con un punto amarillo */
.nav__link { position: relative; }
.nav__link.is-actual { color: var(--amarillo); }
@media (min-width: 960px) {
  .menu__nav { grid-template-columns: 1fr; padding-top: 8px; }
  .menu__grupo a { font-size: 1.08rem; }
  .menu__in { padding-inline: 32px; }
  .nav__link { padding: 8px 11px; font-size: .92rem; }
}
@media (min-width: 960px) and (max-width: 1139px) { .cab__cta span { display: none; } .cab__cta { padding-inline: .8em; } }

/* =================================================================================================
   DESTINOS EN AUSTRALIA + BLOG (01/10/2026). Misma paleta homogénea: tarjetas azules, amarillo de acento.
   ================================================================================================= */
.saltos { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.salto { display: grid; place-items: center; min-width: 54px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--noche-linea); color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-decoration: none; transition: border-color .25s, color .25s, transform .35s var(--ease); }
.salto:hover { border-color: var(--amarillo); color: var(--amarillo); transform: translateY(-2px); }

.filtros { display: grid; gap: 10px; margin-bottom: 28px; }
.filtros__t { font-weight: 700; font-size: 1.05rem; }
.filtros__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--tarjeta-borde); background: var(--tarjeta); color: #fff; font-weight: 500; font-size: .92rem; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease); }
.filtro:hover { border-color: rgba(253, 223, 1, .6); transform: translateY(-1px); }
.filtro.is-activo { background: var(--amarillo); border-color: var(--amarillo); color: var(--noche); font-weight: 600; }

.estados { display: grid; gap: 16px; }
.estado { position: relative; display: grid; gap: 16px; align-content: start; padding: 24px 20px; border-radius: var(--r-xl); background: var(--tarjeta); border: 1px solid var(--tarjeta-borde); scroll-margin-top: calc(var(--cab) + 20px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.estado[hidden] { display: none; }
.estado.is-saliendo { opacity: 0; transform: scale(.97); }
.estado:target { border-color: rgba(253, 223, 1, .7); }
.estado__cab { display: flex; align-items: center; gap: 14px; }
.estado__sigla { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--amarillo); color: var(--noche); font-weight: 800; font-size: 1.1rem; letter-spacing: .02em; }
.estado__t { font-weight: 800; font-size: 1.45rem; line-height: 1.1; letter-spacing: -.02em; }
.estado__capital { color: var(--gris-post); font-weight: 500; }
.estado__nota { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border-radius: 999px; background: rgba(253, 223, 1, .12); color: var(--amarillo); font-weight: 600; font-size: .88rem; }
.estado__nota .ico { width: 16px; height: 16px; }
.estado__datos { display: grid; gap: 10px; }
.estado__datos dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-logo); font-weight: 600; }
.estado__datos dd { margin: 2px 0 0; color: #fff; }
.estado__cats { display: grid; gap: 6px; }
.cat { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 12px; border-radius: 12px; background: var(--noche); font-size: .9rem; }
.cat em { font-style: normal; font-weight: 600; font-size: .78rem; white-space: nowrap; color: var(--gris-post); }
.cat--2 em, .cat--3 em { color: var(--amarillo); }
.estado__listas { display: grid; gap: 14px; }
.estado__listas h4 { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-logo); font-weight: 600; margin-bottom: 6px; }
.estado__para li, .estado__ojo li { position: relative; padding-left: 18px; color: var(--gris-post); font-size: .95rem; line-height: 1.5; }
.estado__para li + li, .estado__ojo li + li { margin-top: 6px; }
.estado__para li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 99px; background: var(--amarillo); }
.estado__ojo li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 99px; border: 1.5px solid var(--gris-logo); }
.estado__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.estado__acciones .boton { white-space: normal; }

.regional { display: grid; gap: 20px; }
.regional__texto { position: relative; }
.regional__texto .texto { margin-top: 16px; color: var(--gris-post); max-width: 64ch; }
.regional__texto .calc__nota { margin-top: 14px; }
.regional__texto .calc__nota a { color: var(--lavanda); }
.regional__orn { position: static; width: 30px; margin-bottom: 14px; }
.regional__costo { display: grid; gap: 12px; align-content: start; padding: 26px 22px; border-radius: var(--r-xl); background: var(--tarjeta); border: 1px solid var(--tarjeta-borde); }
.regional__costo .texto { color: var(--gris-post); }
.regional__costo .boton { justify-self: start; color: #fff; }

/* blog */
.shero--corto .shero__in { padding-top: 48px; padding-bottom: 52px; }
.p-blog .shero__s { text-transform: uppercase; letter-spacing: .2em; font-size: .9rem; margin-bottom: 12px; }
.posts { display: grid; gap: 14px; }
.post { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.post[hidden] { display: none; }
.post__a { display: grid; gap: 10px; height: 100%; padding: 24px 22px; border-radius: var(--r-xl); background: var(--tarjeta); border: 1px solid var(--tarjeta-borde); color: #fff; text-decoration: none; transition: border-color .25s, transform .4s var(--ease), box-shadow .4s var(--ease); }
.post__a:hover { border-color: rgba(253, 223, 1, .55); transform: translateY(-3px); box-shadow: var(--sombra-suave); }
.post__cat { justify-self: start; padding: 4px 10px; border-radius: 999px; background: rgba(253, 223, 1, .12); color: var(--amarillo); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.post__t { font-weight: 800; font-size: 1.3rem; line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; }
.post__r { color: var(--gris-post); font-size: .97rem; line-height: 1.55; text-align: justify; hyphens: auto; }
.post__meta { color: var(--gris-logo); font-size: .85rem; }
.post__ir { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--amarillo); }
.post__ir .ico { transition: transform .4s var(--ease); }
.post__a:hover .post__ir .ico { transform: translateX(5px); }

.articulo__cab .shero__in { align-items: flex-start; text-align: left; }
.articulo__volver { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--gris-post); text-decoration: none; font-weight: 500; font-size: .92rem; }
.articulo__volver:hover { color: var(--amarillo); }
.articulo__cab .post__cat { margin-bottom: 14px; }
.articulo__t { font-weight: 800; color: var(--amarillo); font-size: clamp(2rem, 6.4vw + .3rem, 3.4rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.articulo__cab .post__meta { margin-top: 16px; }
.articulo__cuerpo { color: #e6e6ef; font-size: 1.08rem; line-height: 1.75; }
.articulo__cuerpo h2 { margin: 1.8em 0 .5em; font-weight: 800; font-size: 1.55rem; line-height: 1.2; letter-spacing: -.02em; color: #fff; text-align: left; text-wrap: balance; }
.articulo__cuerpo h3 { margin: 1.4em 0 .4em; font-weight: 700; font-size: 1.2rem; color: #fff; text-align: left; }
.articulo__cuerpo p + p { margin-top: 1em; }
.articulo__cuerpo ul, .articulo__cuerpo ol { margin: 1em 0; display: grid; gap: 8px; }
.articulo__cuerpo li { position: relative; padding-left: 22px; text-align: justify; hyphens: auto; }
.articulo__cuerpo ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 99px; background: var(--amarillo); }
.articulo__cuerpo ol { counter-reset: n; }
.articulo__cuerpo ol li { counter-increment: n; }
.articulo__cuerpo ol li::before { content: counter(n); position: absolute; left: 0; top: 0; font-weight: 800; color: var(--amarillo); }
.articulo__cuerpo a { color: var(--amarillo); font-weight: 600; }
.articulo__cuerpo strong { color: #fff; }
.articulo__fuentes { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--noche-linea); }
.articulo__fuentes ul { margin-top: 12px; display: grid; gap: 8px; }
.articulo__fuentes a { display: inline-flex; align-items: center; gap: 8px; color: var(--lavanda); font-size: .95rem; }
.articulo__fuentes .ico { width: 16px; height: 16px; flex: none; }
.articulo__cta { margin-top: 36px; display: grid; gap: 14px; align-items: center; padding: 26px 22px; border-radius: var(--r-xl); background: var(--tarjeta); border: 1px solid rgba(253, 223, 1, .35); }
.articulo__cta p { color: var(--gris-post); margin-top: 4px; }
.articulo__cta .boton { justify-self: start; }

/* Completar con Google (solo aparece si hay credencial) */
.form__google { display: grid; justify-items: center; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--tarjeta-borde); }
.form__google-boton { min-height: 44px; }
.form__google-nota { font-size: .82rem; color: var(--gris-logo); }
.form__google.is-listo .form__google-nota { color: var(--amarillo); font-weight: 600; }

@media (min-width: 720px) {
  .estados { grid-template-columns: 1fr 1fr; }
  .estado { padding: 30px 28px; }
  .estado__listas { grid-template-columns: 1fr 1fr; gap: 20px; }
  .posts { grid-template-columns: 1fr 1fr; }
  .posts--mas { grid-template-columns: repeat(3, 1fr); }
  .articulo__cta { grid-template-columns: auto 1fr auto; }
  .regional { grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
}
@media (min-width: 1080px) {
  .posts { grid-template-columns: repeat(3, 1fr); }
  .estado__t { font-size: 1.65rem; }
}

/* secciones contiguas del mismo azul: una línea muy suave las separa */
.shero + .seccion, .destacado + .seccion--blanca { border-top: 1px solid rgba(255, 255, 255, .06); }
.faq { background: var(--noche-medio); }
/* campos del formulario en azul (mismo selector que la regla original, para ganarle) */
.form .campo input:not([type=radio]):not([type=checkbox]):not([type=file]), .form .campo select, .form .campo textarea { background: var(--noche); border-color: rgba(255, 255, 255, .16); color: #fff; }
.form .campo input:hover, .form .campo select:hover, .form .campo textarea:hover { border-color: rgba(255, 255, 255, .32); }
.form .campo input:focus, .form .campo select:focus, .form .campo textarea:focus { border-color: var(--amarillo); box-shadow: 0 0 0 4px rgba(253, 223, 1, .18); }
.form .campo__sel select:invalid { color: #8d8ca6; }
.form .campo__sel .ico { color: var(--gris-logo); }
.form .campo.is-error input, .form .campo.is-error select, .form .campo.is-error textarea { border-color: #ff8a6b; box-shadow: 0 0 0 4px rgba(255, 138, 107, .16); }
.form .campo__error { color: #ff9b80; }
.form .opcion span { color: #fff; }
.form .opcion span { border-color: rgba(255, 255, 255, .2); }
.form .opcion input:checked + span { background: var(--amarillo); border-color: var(--amarillo); color: var(--noche); }

/* =================================================================================================
   PASOS CON COLOR (01/10/2026, pedido de Triaje): cada paso con su color y el último en verde.
   La tarjeta sigue azul (paleta homogénea); el color va en el tinte, el borde, la línea de arriba y el número:
   amarillo → naranja → violeta → verde ("listo").
   ================================================================================================= */
.pila__tarjeta--1 { --paso: #fddf01; }
.pila__tarjeta--2 { --paso: #f28c4b; }
.pila__tarjeta--3 { --paso: #9a88f5; }
.pila__tarjeta--4 { --paso: #34d17f; }
.pila__tarjeta--1, .pila__tarjeta--2, .pila__tarjeta--3, .pila__tarjeta--4 {
  background: color-mix(in srgb, var(--paso) 13%, var(--tarjeta));
  border: 1px solid color-mix(in srgb, var(--paso) 38%, transparent);
  box-shadow: inset 0 3px 0 var(--paso), 0 -12px 40px -18px rgba(0, 0, 0, .55);
}
.pila__tarjeta .pila__num { color: var(--paso); }

/* proceso de cada servicio: el riel pasa de amarillo a verde y el último paso termina en verde */
.pasos__lleno { background: linear-gradient(to bottom, #fddf01, #f28c4b 40%, #9a88f5 70%, #34d17f); }
.paso:last-child.is-activo .paso__n { background: #34d17f; border-color: #34d17f; color: var(--noche); }
.pila__tarjeta--1 { background: color-mix(in srgb, var(--paso) 7%, var(--tarjeta)); }


/* =================================================================================================
   PALETA DE INSTAGRAM, ALTERNADA (05/10/2026). Genaro: "difícil de observar, todo azul; usar el blanco de su Instagram"
   y luego "el hero blanco y después el azul, y así sucesivamente".
   Su grilla alterna piezas CREMA (#f3f2ee, letra azul noche, amarillo de resaltador o círculo) con piezas AZUL NOCHE
   (letra blanca, palabra clave en amarilla). La web hace lo mismo bloque por bloque:
   - build.py (alternar_tonos) marca cada hijo directo de <main>: el 1º (hero) .tono-claro, el 2º .tono-azul, etc.
     La cinta amarilla no cuenta. El artículo del blog es UN bloque (cabecera + cuerpo en crema).
   - .tono-azul usa los estilos de la capa 01/10 (que ya resolvía todo en azul): aquí solo se fija el fondo.
   - .tono-claro redefine tokens y pisa los colores fijos (#fff / amarillo como letra) de esa capa.
   - En crema el amarillo NUNCA es letra (contraste 1,33): va de fondo (botones, círculos de iconos, resaltador).
   La cabecera fija y el pie quedan azules siempre.
   ================================================================================================= */
:root { --crema: #f3f2ee; --crema-linea: rgba(19, 18, 52, .10); }

.tono-azul { background: var(--noche); color: #fff; }
.tono-azul + .pie, main:has(> .tono-azul:last-child) + .pie { border-top: 1px solid rgba(255, 255, 255, .08); }
.shero + .seccion, .destacado + .seccion--blanca { border-top: 0; }

.tono-claro, .tono-claro .seccion {
  --tinta: #131234; --tinta-suave: #4a4968; --nube: #fff; --linea: rgba(19, 18, 52, .12);
  --tarjeta: #fff; --tarjeta-borde: var(--crema-linea);
  --gris-post: #4a4968; --gris-logo: #6b6a86; --lavanda: #5a5978; --niebla: #4a4968;
  --violeta-hondo: #131234; --trazo-suave: #e4e1f7; --noche-linea: rgba(19, 18, 52, .12);
  background: var(--crema); color: var(--tinta);
}
.tono-claro :focus-visible { outline-color: var(--tinta); }

/* ---- textos que la capa azul dejó en blanco fijo */
.tono-claro :is(.t-seccion, .t-sub, h2, h3, h4, .instituciones__t, .estado__datos dd, .articulo__cuerpo strong,
  .hero__pregunta, .otros__t, .paso h3, .como__cab .t-seccion, .pila__tarjeta h3, .calc__fila dd) { color: var(--tinta); }
.tono-claro .instituciones__lista li { color: var(--tinta-suave); }

/* ---- tarjetas: blancas, borde fino, sombra apenas */
.tono-claro :is(.donde, .honesto, .resenas, .cuando, .extras li, .bloque--amarillo, .bloque--noche, .stream, .plan, .pastillas li,
    .honesto--linea, .tiempos, .calc, .estimador, .rel, .programa--emb, .pronto li, .form, .dubai, .estado,
    .regional__costo, .post__a, .articulo__cta, .chip) {
  background: #fff; color: var(--tinta); border: 1px solid var(--crema-linea); box-shadow: 0 10px 28px -20px rgba(19, 18, 52, .35);
}
.tono-claro :is(.stream p, .bloque--amarillo p, .bloque--noche p, .chip__s) { color: var(--tinta-suave); }
.tono-claro .chip:hover { background: #fff; border-color: var(--noche); }

/* ---- el amarillo que era letra pasa a azul noche (con resaltador o subrayado amarillo) */
.tono-claro :is(.bloque--amarillo h2, .bloque--noche h2, .calc__t, .plan strong, .premios strong, .persona__cargo, .post__ir,
    .estado__nota, .post__cat, .cat--2 em, .cat--3 em, .articulo__cuerpo a, .articulo__cuerpo ol li::before, .enlace,
    .formulario__cab .enlace, .gracias__paso a:not(.boton), .form__google.is-listo .form__google-nota, .articulo__volver:hover) { color: var(--tinta); }
.tono-claro :is(.enlace, .articulo__cuerpo a, .gracias__paso a:not(.boton)) { text-decoration-color: var(--amarillo); text-decoration-thickness: 3px; text-underline-offset: .18em; }
.tono-claro :is(.persona__cargo, .calc__t, .plan strong, .premios strong) {
  background: linear-gradient(transparent 58%, var(--amarillo) 58%, var(--amarillo) 92%, transparent 92%);
  justify-self: start; width: fit-content;
}
.tono-claro :is(.estado__nota, .post__cat) { background: var(--amarillo); color: var(--noche); }
.tono-claro .articulo__cuerpo { color: #2c2b4a; }
.tono-claro .articulo__cuerpo ul li::before { background: var(--noche); }
.tono-claro .articulo__fuentes { border-top-color: var(--crema-linea); }
.tono-claro .articulo__fuentes a, .tono-claro .articulo__volver { color: var(--tinta-suave); }

/* ---- iconos redondos: círculo amarillo con dibujo azul (como el círculo de sus posts) */
.tono-claro :is(.donde__ico, .honesto__ico, .resenas__ico, .bloque__ico, .tiempos__ico, .extra__ico, .rel__ico, .estado__sigla, .shero__ico) { background: var(--amarillo); color: var(--noche); }
.tono-claro :is(.subida__ico, .subida__lista .ico) { color: var(--tinta); }
.tono-azul :is(.honesto__ico, .resenas__ico) { background: var(--amarillo); color: var(--noche); }

/* ---- adornos sobre crema */
.tono-claro .orn--estrella path { fill: var(--amarillo); }
.tono-claro .orn--asterisco g { stroke: var(--amarillo); }
.tono-claro .orn--medialuna path { fill: var(--trazo-suave); }
.tono-claro .persona__trazo path { stroke: var(--amarillo); }

/* ---- tabla, controles y calculadoras */
.tono-claro .tabla thead th { background: var(--noche); color: var(--amarillo); }
.tono-claro :is(.segmentado, .contador__ctl, .calc input[data-c="curso"], .estimador select, .cat) { background: var(--crema); color: var(--tinta); }
.tono-claro :is(.calc__nota, .tiempos .calc__nota) { color: var(--tinta-suave); }
.tono-claro :is(.calc, .estimador) .campo__et { color: var(--tinta-suave); }
.tono-claro .contador__ctl button { color: var(--tinta); }
.tono-claro .contador__ctl button:hover { background: rgba(19, 18, 52, .08); }
.tono-claro .interruptor input:checked + .interruptor__pista::after { background: var(--noche); }
.tono-claro .faq__ico { background: var(--crema); color: var(--tinta); }
.tono-claro :is(.faq__item[open] .faq__ico, .faq__item summary:hover .faq__ico) { background: var(--amarillo); color: var(--noche); }
.tono-claro .aviso--borrador { background: rgba(253, 223, 1, .35); color: var(--tinta); }
.tono-claro :is(.rel:hover, .post__a:hover) { border-color: var(--noche); }
.tono-claro .filtro { background: #fff; color: var(--tinta); border-color: var(--crema-linea); }
.tono-claro .filtro.is-activo { background: var(--noche); border-color: var(--noche); color: var(--amarillo); }
.tono-claro .regional__costo .boton { color: var(--tinta); }

/* ---- botones en crema: el "noche" queda azul con letra blanca (como "FALSO" de sus posts); contorno azul */
.tono-claro .boton--noche { --bg: var(--noche); --fg: #fff; }
.tono-claro .boton--noche:hover { --bg: #26255a; }
.tono-claro .boton--contorno { color: var(--tinta); }
.tono-claro .boton--contorno:hover { --bg: rgba(19, 18, 52, .06); }

/* ---- formulario en crema: tarjeta blanca, campos crema */
.tono-claro .form .campo input:not([type=radio]):not([type=checkbox]):not([type=file]), .tono-claro .form .campo select, .tono-claro .form .campo textarea,
.tono-claro .campo input, .tono-claro .campo select, .tono-claro .campo textarea { background: var(--crema); border-color: rgba(19, 18, 52, .16); color: var(--tinta); }
.tono-claro .form .campo :is(input, select, textarea):hover { border-color: rgba(19, 18, 52, .35); }
.tono-claro .form .campo :is(input, select, textarea):focus, .tono-claro .campo :is(input, select, textarea):focus { border-color: var(--noche); box-shadow: 0 0 0 4px rgba(253, 223, 1, .55); }
.tono-claro :is(.campo input::placeholder, .campo textarea::placeholder, .form .campo__sel select:invalid) { color: #8a89a0; }
.tono-claro .campo :is(input[type="date"], input[type="month"]) { color-scheme: light; }
.tono-claro .campo select option { background: #fff; color: var(--tinta); }
.tono-claro .form .campo__sel .ico { color: var(--tinta-suave); }
.tono-claro .form .campo.is-error :is(input, select, textarea) { border-color: #c2410c; box-shadow: 0 0 0 4px rgba(194, 65, 12, .14); }
.tono-claro .form .campo__error { color: #b23a0a; }
.tono-claro .form .opcion span { color: var(--tinta); border-color: rgba(19, 18, 52, .2); background: #fff; }
.tono-claro .form .opcion input:checked + span { background: var(--noche); border-color: var(--noche); color: var(--amarillo); }
.tono-claro .acepto input { accent-color: var(--noche); }
.tono-claro :is(.subida, .subida__lista li) { background: var(--crema); border-color: rgba(19, 18, 52, .22); }
.tono-claro :is(.subida:hover, .subida.is-arrastre) { background: #ecebe4; border-color: var(--noche); }
.tono-claro .subida:focus-within { border-color: var(--noche); box-shadow: 0 0 0 4px rgba(253, 223, 1, .55); }
.tono-claro .form__progreso span { background: var(--noche); }
.tono-claro .form__google { border-bottom-color: var(--crema-linea); }

/* ---- cómo trabajamos en crema: tarjeta blanca con tinte y raya del color del paso, número oscuro legible */
.tono-claro .pila__tarjeta--1 { --paso-t: #131234; }
.tono-claro .pila__tarjeta--2 { --paso-t: #c4521f; }
.tono-claro .pila__tarjeta--3 { --paso-t: #5842cc; }
.tono-claro .pila__tarjeta--4 { --paso-t: #17834d; }
.tono-claro :is(.pila__tarjeta--1, .pila__tarjeta--2, .pila__tarjeta--3, .pila__tarjeta--4) {
  background: color-mix(in srgb, var(--paso) 9%, #fff); color: var(--tinta);
  border: 1px solid color-mix(in srgb, var(--paso) 45%, transparent);
  box-shadow: inset 0 4px 0 var(--paso), 0 -14px 36px -22px rgba(19, 18, 52, .35);
}
.tono-claro .pila__tarjeta--1 { background: color-mix(in srgb, var(--paso) 16%, #fff); }
.tono-claro .pila__tarjeta .pila__num { color: var(--paso-t); opacity: 1; }
.tono-claro .pila__tarjeta p { color: var(--tinta-suave); }

/* ---- proceso (riel) en crema */
.tono-claro .paso__n { background: #fff; border-color: rgba(19, 18, 52, .18); color: var(--tinta-suave); }
.tono-claro .pasos__riel { background: rgba(19, 18, 52, .1); }

/* ---- HERO de portada en crema: título azul noche, trazo amarillo (como el logo sobre blanco), brillo amarillo suave */
.hero.tono-claro { background: var(--crema); }
.tono-claro .hero__h1 { color: var(--tinta); }
.tono-claro :is(.hero__trazo path, .shero__trazo path) { stroke: var(--amarillo); }
.tono-claro .hero__trazo { opacity: .55; }
.tono-claro .shero__trazo { opacity: .3; }
.tono-claro .hero__brillo { display: block; opacity: 1; background: radial-gradient(closest-side, rgba(253, 223, 1, .42), rgba(253, 223, 1, .14) 40%, transparent 66%); }
.tono-claro:is(.hero, .shero)::after { opacity: .05; mix-blend-mode: multiply; }
/* la puerta 2 pasa a azul noche: contrasta con la amarilla igual que sus posts azules junto a los claros */
.tono-claro .puerta--violeta { background: var(--noche); color: #fff; box-shadow: var(--sombra); }
.tono-claro .puerta--violeta .puerta__linea { color: #d2d3d7; }
.tono-claro .puerta--violeta .puerta__flecha { background: var(--amarillo); color: var(--noche); }
.tono-claro .puerta--amarilla { box-shadow: 0 22px 44px -26px rgba(19, 18, 52, .45); }
.tono-claro .puerta:hover { box-shadow: 0 30px 50px -26px rgba(19, 18, 52, .5); }

/* ---- HEROS de servicio en crema (todas las variantes: amarillo, noche, violeta, naranja) */
.tono-claro.shero, .tono-claro .shero, .tono-claro .shero__fondo { background: var(--crema); color: var(--tinta); }
.tono-claro .shero__t { color: var(--tinta); }
.tono-claro :is(.shero__s, .shero__p) { color: var(--tinta-suave); }
.tono-claro .shero__raya { background: var(--amarillo); opacity: 1; height: 4px; }
.tono-claro .boton--primario { --bg: var(--amarillo); --fg: var(--noche); }
.tono-claro .articulo__cab { border-bottom: 1px solid var(--crema-linea); }

/* ---- blog: el artículo entero es un bloque crema (cabecera + cuerpo) */
.tono-claro :is(.articulo__t, .articulo__cuerpo h2, .articulo__cuerpo h3) { color: var(--tinta); }
.tono-claro .articulo__cuerpo .texto, .tono-claro .articulo__cuerpo p { color: #2c2b4a; }
.tono-claro .post__meta { color: var(--gris-logo); }
.tono-claro .articulo__cta p { color: var(--tinta-suave); }
/* ---- siglas de estados en el hero de Destinos */
.tono-claro .salto { color: var(--tinta); border-color: rgba(19, 18, 52, .2); background: #fff; }
.tono-claro .salto:hover { color: var(--noche); background: var(--amarillo); border-color: var(--amarillo); }
.tono-claro .gracias__paso { background: #fff; border-color: var(--crema-linea); box-shadow: 0 10px 28px -20px rgba(19, 18, 52, .35); }

/* =================================================================================================
   TODO CREMA (05/10/2026, tarde). Genaro: "quiero todo el fondo de la página en color blanco crema".
   build.py TONOS = ("tono-claro",) → todos los bloques de <main> salen crema. Además, aquí: cuerpo,
   cierre y pie en crema; la cabecera sigue azul. El azul noche queda solo como acento (tarjeta "Ya estoy en Australia", botones, tabla).
   Entre dos bloques crema seguidos, una línea fina los separa. El menú lateral (panel) sigue azul.
   ================================================================================================= */
body { background: var(--crema); }
html { scrollbar-color: #c9c7bd var(--crema); }
.tono-claro + .tono-claro { border-top: 1px solid var(--crema-linea); }

/* la cabecera (listón de arriba) se queda AZUL: Genaro, 05/10 "el listón superior en azul puede quedar así".
   Sólida: translúcida sobre crema se veía gris violeta. */
.cab, .cab.is-scrolled { background: var(--noche); }

/* cierre "Cuéntanos a dónde quieres llegar" en crema */
.final.tono-claro { background: var(--crema); color: var(--tinta); }
.tono-claro .final__t { color: var(--tinta); }
.tono-claro .final__p { color: var(--tinta-suave); }
.tono-claro .final__trazo path { stroke: var(--amarillo); }
.tono-claro .final__trazo { opacity: .4; }
.tono-claro.final::after { opacity: .05; mix-blend-mode: multiply; }

/* pie en crema: logo azul con su trazo, iconos en círculo amarillo no; iconos azules */
.pie { background: var(--crema); color: var(--tinta); border-top: 1px solid var(--crema-linea); }
.pie .logo { color: var(--noche); }
.pie__amor, .pie__area, .pie__legal { color: var(--tinta-suave); }
.pie__fila li { color: var(--tinta-suave); }
.pie__fila a { color: var(--tinta); }
.pie__fila a:hover { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 3px; }
.pie__fila .ico { color: var(--tinta); }
.pie__legal { border-top-color: var(--crema-linea); }
.pie__legal a { color: var(--tinta); }
.pie :focus-visible { outline-color: var(--tinta); }
.pie .red { color: var(--noche); border-color: rgba(19, 18, 52, .18); }
.pie .red:hover { color: var(--noche); }
.pie .corazon { fill: var(--naranja); }

/* =================================================================================================
   EFECTOS DE SUS POSTS (05/10/2026). Genaro: "se ve muy vacía con el blanco". En vez de degradados (se ven de
   plantilla), el lenguaje de su Instagram:
   1. Círculos amarillos grandes cortados por el borde ("La tasa de negación", "¿Quieres visitar Australia?").
   2. Anillos de línea fina ("Mito / Realidad").
   3. Resaltador amarillo bajo la palabra clave del título (build.py RESALTA + titulo()).
   4. Dos anclas azules en la portada: "Así trabajamos" y el cierre (build.py ANCLAS_AZULES).
   Los círculos van con ::before/::after detrás del contenido (isolation), y la sección recorta con overflow: clip
   (no hidden: hidden rompería el sticky de la pila de tarjetas).
   ================================================================================================= */

/* ---- 3. resaltador */
.resalta { background: none; color: inherit; padding: 0; }
.tono-claro .resalta {
  background: linear-gradient(transparent 60%, var(--amarillo) 60%, var(--amarillo) 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .04em;
}
.tono-azul .resalta { color: var(--amarillo); }
.tono-azul .final__t, .tono-azul .como__cab .t-seccion { color: #fff; }
/* el resaltador se "pinta" al aparecer el título (de izquierda a derecha) */
@media (prefers-reduced-motion: no-preference) {
  /* solo si el título está dentro de un bloque que se revela (si no, se ve entero desde el principio) */
  .js .tono-claro [data-revela] .resalta { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size .9s cubic-bezier(.65, 0, .35, 1) .35s; }
  .js .tono-claro [data-revela].is-visto .resalta { background-size: 100% 100%; }
}

/* ---- base para adornos de sección */
.p-home :is(.hero, .nosotros, .confianza, .duo, .como, .final) { position: relative; isolation: isolate; overflow: clip; }
.p-home :is(.nosotros, .confianza, .duo) > * { position: relative; z-index: 1; }

/* ---- hero: anillos finos detrás del brillo, arriba a la derecha */
.p-home .hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 560px; height: 560px; right: -170px; top: -150px; border-radius: 50%;
  border: 1.5px solid rgba(19, 18, 52, .09); outline: 1.5px solid rgba(19, 18, 52, .06); outline-offset: 70px;
}

/* ---- así trabajamos (azul): anillos blancos muy suaves a la izquierda abajo */
.p-home .como::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 520px; height: 520px; left: -230px; bottom: -160px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .08); outline: 1.5px solid rgba(255, 255, 255, .05); outline-offset: 64px;
}

/* ---- nosotros: círculo amarillo grande cortado arriba a la derecha + anillos abajo a la izquierda */
.p-home .nosotros::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(260px, 34vw, 480px); aspect-ratio: 1; right: calc(clamp(260px, 34vw, 480px) * -.42); top: -90px;
  border-radius: 50%; background: var(--amarillo);
}
.p-home .nosotros::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 420px; height: 420px; left: -210px; bottom: -120px; border-radius: 50%;
  border: 1.5px solid rgba(19, 18, 52, .09); outline: 1.5px solid rgba(19, 18, 52, .06); outline-offset: 56px;
}

/* ---- confianza: anillos a la derecha y un punto amarillo chico a la izquierda */
.p-home .confianza::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 480px; height: 480px; right: -240px; top: 50%; translate: 0 -50%; border-radius: 50%;
  border: 1.5px solid rgba(19, 18, 52, .09); outline: 1.5px solid rgba(19, 18, 52, .06); outline-offset: 60px;
}
.p-home .confianza::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 120px; height: 120px; left: -40px; top: 70px; border-radius: 50%; background: var(--amarillo);
}

/* ---- duo: círculo amarillo grande asomando abajo a la derecha detrás de las tarjetas */
.p-home .duo { padding-top: 72px; }
.p-home .duo::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(280px, 40vw, 560px); aspect-ratio: 1; right: -120px; bottom: calc(clamp(280px, 40vw, 560px) * -.45);
  border-radius: 50%; background: var(--amarillo);
}

/* ---- cierre (azul): círculo amarillo cortado abajo a la izquierda, como "¿Por dónde empiezo?" */
.p-home .final::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(200px, 26vw, 380px); aspect-ratio: 1; left: calc(clamp(200px, 26vw, 380px) * -.4); bottom: calc(clamp(200px, 26vw, 380px) * -.4);
  border-radius: 50%; background: var(--amarillo);
}
.p-home .final { background: var(--noche); }
.tono-azul .final__p { color: var(--gris-post); }
.tono-azul .final__trazo path { stroke: var(--trazo-suave); }

/* celular: círculos más chicos para no tapar texto */
@media (max-width: 719px) {
  .p-home .nosotros::before { width: 190px; right: -95px; top: -70px; }
  .p-home .duo::before { width: 300px; right: -110px; bottom: -150px; }
  .p-home .confianza::after { width: 80px; height: 80px; left: -36px; top: 40px; }
  .p-home .final::before { left: -110px; bottom: -110px; }
}

/* =================================================================================================
   PASOS EN ESCALA (05/10/2026). Antes: amarillo, naranja, violeta, verde = 4 acentos sin orden (rompe 60-30-10,
   el violeta sobre azul daba 3,35 y naranja→violeta no se lee como avance). Ahora una ESCALA SECUENCIAL
   del amarillo de marca al verde "listo" (pedido de Triaje 01/10: cada paso su color, el último verde):
     1 #fddf01 (53°)  2 #c9e12c (70°)  3 #93d84a (92°)  4 #34d17f (149°, salto mayor = llegada)
   Contraste del número sobre la tarjeta azul: 8,9 / 8,3 / 7,1 / 6,3 (WCAG pide 3 para gráficos, 4,5 para texto).
   Versión crema (si la pila cae en tono-claro): números en el tono oscuro de cada color, todos ≥ 4,5.
   El riel de "Tu camino, paso a paso" usa la misma escala.
   ================================================================================================= */
:root { --paso-1: #fddf01; --paso-2: #c9e12c; --paso-3: #93d84a; --paso-4: #34d17f; }
.pila__tarjeta--1 { --paso: var(--paso-1); }
.pila__tarjeta--2 { --paso: var(--paso-2); }
.pila__tarjeta--3 { --paso: var(--paso-3); }
.pila__tarjeta--4 { --paso: var(--paso-4); }
/* mismo tinte en las cuatro (antes la 1 tenía 7% y el resto 13%) */
.pila__tarjeta--1, .pila__tarjeta--2, .pila__tarjeta--3, .pila__tarjeta--4 { background: color-mix(in srgb, var(--paso) 11%, var(--tarjeta)); }
.tono-claro .pila__tarjeta--1 { --paso-t: #756800; }
.tono-claro .pila__tarjeta--2 { --paso-t: #5a6b00; }
.tono-claro .pila__tarjeta--3 { --paso-t: #3d6e12; }
.tono-claro .pila__tarjeta--4 { --paso-t: #13774a; }
.tono-claro :is(.pila__tarjeta--1, .pila__tarjeta--2, .pila__tarjeta--3, .pila__tarjeta--4) { background: color-mix(in srgb, var(--paso) 12%, #fff); }
.pasos__lleno { background: linear-gradient(to bottom, var(--paso-1), var(--paso-2) 35%, var(--paso-3) 68%, var(--paso-4)); }
.paso:last-child.is-activo .paso__n { background: var(--paso-4); border-color: var(--paso-4); }

/* =================================================================================================
   ARREGLO (05/10/2026, foto de Genaro): en escritorio .nosotros__texto era sticky y el párrafo
   .nosotros__equipo (misma columna, no sticky) subía por ENCIMA de la lista Cercanos / Con calidad / Con amor
   al bajar. La columna es larga: no necesita sticky.
   ================================================================================================= */
@media (min-width: 960px) { .nosotros__texto { position: static; } }

/* =================================================================================================
   PASOS EN COLORES PRIMARIOS (05/10/2026, pedido de Genaro). Reemplaza la escala amarillo→verde:
     1 amarillo #fddf01 (marca)  2 rojo #ff5a52  3 azul #4d9bff  4 verde #34d17f ("listo", pedido de Triaje 01/10)
   Rojo y azul van un poco aclarados para que el número pase 4,5 sobre la tarjeta azul (4,56 y 4,77; el rojo
   y el azul puros daban 4,3 y 4,1). Versión crema: tonos oscuros ≥ 5,1.
   Para volver a la escala: quitar este bloque (las variables de "PASOS EN ESCALA" quedan debajo).
   ================================================================================================= */
:root { --paso-1: #fddf01; --paso-2: #ff5a52; --paso-3: #4d9bff; --paso-4: #34d17f; }
.tono-claro .pila__tarjeta--1 { --paso-t: #756800; }
.tono-claro .pila__tarjeta--2 { --paso-t: #b3141a; }
.tono-claro .pila__tarjeta--3 { --paso-t: #1557c0; }
.tono-claro .pila__tarjeta--4 { --paso-t: #13774a; }

/* =================================================================================================
   CABECERA BLANCA + LOGO AZUL (08/10/2026, pedido de Triaje sobre su boceto): barra blanca, la palabra en
   azul noche y el trazo amarillo (el logo principal, como en fondo blanco). Reemplaza la cabecera azul del 05/10.
   Regla: nunca letra amarilla sobre blanco; el enlace actual se marca con el resaltador amarillo debajo.
   El panel del menú lateral sigue azul con su logo blanco.
   ================================================================================================= */
.cab, .cab.is-scrolled { background: #fff; border-bottom: 1px solid var(--crema-linea); }
.cab.is-scrolled { box-shadow: 0 10px 30px -22px rgba(19, 18, 52, .45); }
.cab .cab__logo { color: var(--noche); }
.cab .logo__trazo { stroke: var(--amarillo); }
.menu .cab__logo { color: #fff; }
.menu .logo__trazo { stroke: var(--amarillo); }
.cab .cab__idioma { color: var(--tinta); border-color: rgba(19, 18, 52, .16); }
.cab .cab__idioma:hover { border-color: var(--noche); }
.cab :focus-visible { outline-color: var(--noche); }
@media (min-width: 960px) {
  .cab .nav__link { color: var(--tinta); }
  .cab .nav__link:hover { color: var(--tinta); background: rgba(19, 18, 52, .06); }
  .cab .nav__link.is-actual { color: var(--tinta); background: linear-gradient(transparent 62%, var(--amarillo) 62%, var(--amarillo) 88%, transparent 88%) no-repeat 11px 0 / calc(100% - 22px) 100%; }
  .cab .cab__menu:not(.cab__menu--cerrar) { color: var(--tinta); border-color: rgba(19, 18, 52, .16); }
  .cab .cab__menu:not(.cab__menu--cerrar):hover { border-color: var(--noche); }
}

/* =================================================================================================
   HERO CON FOTO DE AUSTRALIA (08/10/2026, boceto de Triaje). La Ópera de Sídney (dominio público, Bernard Spragg,
   original en brand/fotos/australia/), el texto y las dos puertas a la izquierda sobre un velo crema, y las
   6 pastillas abajo en un panel blanco sobre el agua. Móvil: texto, puertas, foto y pastillas, en ese orden.
   ================================================================================================= */
.p-home .hero--foto { display: flex; flex-direction: column; background: var(--crema); }
.p-home .hero--foto::before, .p-home .hero--foto::after { display: none; }
.hero--foto .hero__in { order: 1; position: relative; z-index: 2; width: 100%; padding-bottom: 8px; }
.hero__foto { order: 2; position: relative; z-index: 0; display: block; margin-top: -36px; }
.hero__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.1; object-fit: cover; object-position: 74% 50%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); mask-image: linear-gradient(to bottom, transparent, #000 22%); }
.hero--foto .otros { order: 3; position: relative; z-index: 2; margin-top: -54px; padding-bottom: 32px; }
.hero--foto .otros__t { display: inline-block; background: #fff; padding: 6px 14px; border-radius: 999px; font-size: .95rem; margin-bottom: 10px; box-shadow: 0 10px 28px -20px rgba(19, 18, 52, .35); }
.hero--foto .hero__sub { color: var(--tinta-suave); }
.hero--foto .hero__pregunta { margin-top: 26px; }
.hero--foto .puerta__titulo { font-size: clamp(1.6rem, 6.6vw, 2.2rem); }

@media (min-width: 960px) {
  .p-home .hero--foto { display: block; min-height: 0; }
  .hero__foto { position: absolute; inset: 0; margin: 0; }
  .hero__foto img { width: 100%; height: 100%; aspect-ratio: auto; object-position: 100% 100%;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 94%); mask-image: linear-gradient(to bottom, #000 70%, transparent 94%); }
  /* velo crema: tapa el cielo detrás del texto y se abre hacia la Ópera */
  .hero__foto::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--crema) 0%, rgba(243, 242, 238, .97) 30%, rgba(243, 242, 238, .78) 42%, rgba(243, 242, 238, 0) 60%); }
  .hero--foto .hero__in { display: block; min-height: 0; padding-top: 52px; padding-bottom: 0; }
  .hero--foto .hero__intro { max-width: 570px; }
  .hero--foto .hero__h1 { font-size: clamp(3.2rem, 4.2vw, 4.3rem); }
  .hero--foto .hero__sub { font-size: 1.12rem; max-width: 36ch; margin-top: 18px; }
  .hero--foto .hero__pregunta { margin-top: 22px; margin-bottom: 10px; font-size: 1rem; }
  .hero--foto .puertas { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero--foto .puerta { min-height: 128px; padding: 16px 16px 16px 20px; }
  .hero--foto .puerta__titulo { font-size: 1.45rem; max-width: 10ch; }
  .hero--foto .puerta__linea { font-size: .82rem; }
  .hero--foto .puerta__flecha { width: 42px; height: 42px; }
  .hero--foto .puerta__fondo { width: 130px; height: 130px; }
  .hero--foto .otros { margin-top: 28px; padding-bottom: 56px; }
  .hero--foto .otros__t { margin-bottom: 8px; font-size: .9rem; padding: 5px 12px; }
  .hero--foto .chips { gap: 6px; }
  .hero--foto .chip { padding-block: 6px; }
  .hero--foto .otros > * { position: relative; }
  .hero--foto .chips { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hero--foto .chip { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

/* =================================================================================================
   LA LÍNEA AMARILLA (08/10/2026). Triaje: "esta línea amarilla se puede poner por la página, siento que genera
   conexión". triaje.js arma UN solo recorrido para toda la portada: rodea la Ópera (puntos fijados sobre la
   foto, así sigue el edificio en cualquier tamaño), baja por el margen y cruza de lado entre sección y sección.
   Cada sección lleva su copia del mismo trazado (svg.hilo con viewBox desplazado) DETRÁS de su contenido: las
   tarjetas lo tapan y los textos no quedan cruzados. Se dibuja al bajar, con una punta que avanza.
   Sin JS no hay línea; con movimiento reducido se ve entera y quieta.
   ================================================================================================= */
.p-home main > section { position: relative; }
.hilo { position: absolute !important; left: 0; top: 0; width: 100%; height: 100%; z-index: 0 !important; pointer-events: none; overflow: visible; }
.hero--foto .hilo { z-index: 1 !important; }
.hilo__linea { fill: none; stroke: var(--amarillo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tono-claro .hilo__linea { stroke: #f2cf00; }
.hilo__punta { fill: var(--amarillo); stroke: var(--noche); stroke-width: 2; }
.p-home main > :is(.como, .final) > :not(.hilo, .final__trazo) { position: relative; z-index: 1; }

/* =================================================================================================
   DOCUMENTO DE TRIAJE (08/10/2026): docs/cambios-2026-10-08/PEDIDO.md
   Fondo blanco, sin guiones de partición, heros a pantalla completa, menú y barra en tonos suaves,
   logo en su versión de fondo amarillo (palabra azul + trazo blanco) con presencia en menú y pie,
   nada morado, y la portada nueva (servicios con foto, otros destinos, equipo, testimonios, agenda + Friends).
   ================================================================================================= */
:root { --crema: #ffffff; --gris-sec: #f5f5f3; --crema-linea: rgba(19, 18, 52, .09); }
body { background: #fff; }

/* ---- sin partir palabras con guion y texto con borde natural (Cris: "que el texto se distribuya de forma natural").
   Anula la regla del justificado para esta web. Los textos centrados siguen centrados. */
*, *::before, *::after { -webkit-hyphens: manual !important; hyphens: manual !important; }
.texto p, p.texto, .texto, .persona p, .paso p, .pagos p, .calc__nota, .post__r, .articulo__cuerpo li, .aviso, .pie__legal p:first-child { text-align: left; }
.shero__p, .final__p, .pie__legal p:first-child { text-align: center; text-align-last: auto; }
.shero__p, .final__p { text-wrap: pretty; }

/* ---- heros de cada página a pantalla completa, contenido centrado y completo (modelo: Estudiar / Triaje Migratorio) */
.shero:not(.articulo__cab) { min-height: calc(100svh - var(--cab)); display: flex; align-items: center; }
.shero:not(.articulo__cab) > .shero__in { width: 100%; }
@media (min-width: 960px) { .shero:not(.articulo__cab) .shero__in { padding-top: 64px; padding-bottom: 72px; } }

/* ---- nada morado: el trazo del logo siempre amarillo (o blanco sobre amarillo) */
.logo__trazo { stroke: var(--amarillo); }

/* ---- logo con presencia: versión fondo amarillo, palabra azul y trazo blanco (la del documento) */
.pie__logo, .menu__top .cab__logo { background: var(--amarillo); color: var(--noche); border-radius: 18px; }
.pie__logo { padding: 22px 30px 18px; box-shadow: 0 18px 40px -26px rgba(19, 18, 52, .5); }
.logo--pie { width: 210px; }
.pie .logo, .menu .cab__logo { color: var(--noche); }
.pie .logo__trazo, .menu .logo__trazo { stroke: #fff; }
.menu__top .cab__logo { padding: 8px 14px 6px; margin-right: 0; }

/* ---- menú lateral en tonos suaves: blanco, letra azul, punto amarillo */
.menu__in { background: #fff; color: var(--tinta); border-left: 1px solid var(--crema-linea); box-shadow: -30px 0 60px -40px rgba(19, 18, 52, .5); }
.menu__velo { background: rgba(19, 18, 52, .28); }
.menu__titulo { color: var(--tinta-suave); }
.menu__grupo a { color: var(--tinta); }
.menu__grupo a:hover, .menu__grupo a[aria-current="page"] { color: var(--tinta); }
.menu__grupo--suelto { border-top-color: var(--crema-linea); }
.menu .cab__menu--cerrar { background: var(--gris-sec); color: var(--tinta); }
.menu .red { color: var(--noche); border-color: rgba(19, 18, 52, .18); }
.menu__trazo path { stroke: var(--amarillo) !important; }
.menu__trazo { opacity: .35; }
.menu :focus-visible { outline-color: var(--noche); }

/* ---- pie en blanco con línea fina arriba */
.pie { background: #fff; }

/* ================================ PORTADA NUEVA ================================ */
.ceja { font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 12px; }
.tono-azul .ceja, .otros-dest .ceja, .bloque2--agenda .ceja { color: #d2d3d7; }
.cab-sec { max-width: 720px; }
.cab-sec__p { margin-top: 12px; color: var(--tinta-suave); font-size: 1.05rem; line-height: 1.55; }

/* hero: ceja y puertas en pastilla blanca con icono amarillo (boceto de Dani) */
.hero--foto .ceja { margin-bottom: 14px; }
.puertas-p { margin-top: 28px; display: grid; gap: 10px; }
.puerta-p {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px; border-radius: 18px; background: #fff; color: var(--tinta); text-decoration: none;
  font-weight: 700; font-size: 1.02rem; line-height: 1.2; box-shadow: 0 14px 34px -22px rgba(19, 18, 52, .55); border: 1px solid var(--crema-linea);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.puerta-p__ico { width: 44px; height: 44px; padding: 10px; border-radius: 999px; background: var(--amarillo); color: var(--noche); }
.puerta-p__flecha { width: 34px; height: 34px; padding: 8px; border-radius: 999px; border: 1px solid var(--crema-linea); transition: transform .35s var(--ease); }
.puerta-p:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(19, 18, 52, .6); }
.puerta-p:hover .puerta-p__flecha { transform: translateX(3px); background: var(--amarillo); border-color: var(--amarillo); }
.hero--foto .hero__in { padding-bottom: 28px; }
@media (min-width: 640px) { .puertas-p { grid-template-columns: 1fr 1fr; max-width: 560px; } }
@media (min-width: 960px) {
  .p-home .hero--foto { min-height: calc(100svh - var(--cab)); display: flex; align-items: center; }
  .hero--foto .hero__in { padding-top: 48px; padding-bottom: 64px; }
}

/* servicios: 6 tarjetas con foto e icono */
.servicios { padding: 72px 0 80px; }
.servs { margin-top: 32px; display: grid; gap: 16px; grid-template-columns: 1fr; }
.serv__a { display: flex; flex-direction: column; height: 100%; position: relative; background: #fff; border: 1px solid var(--crema-linea); border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--tinta);
  box-shadow: 0 16px 36px -28px rgba(19, 18, 52, .55); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.serv__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease); }
.serv__ico { position: relative; z-index: 1; width: 52px; height: 52px; padding: 12px; margin: -26px 0 0 18px; border-radius: 999px; background: var(--amarillo); color: var(--noche); box-shadow: 0 0 0 5px #fff; }
.serv__t { padding: 12px 20px 0; font-weight: 800; font-size: 1.15rem; line-height: 1.2; letter-spacing: -.01em; }
.serv__p { padding: 8px 20px 0; color: var(--tinta-suave); font-size: .95rem; line-height: 1.5; flex: 1; }
.serv__mas { margin: 16px 20px 20px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid rgba(19, 18, 52, .2); font-weight: 600; font-size: .9rem; transition: background-color .25s, border-color .25s; }
.serv__mas .ico { width: 16px; height: 16px; }
.serv__a:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -28px rgba(19, 18, 52, .6); }
.serv__a:hover .serv__foto { transform: scale(1.04); }
.serv__a:hover .serv__mas { background: var(--amarillo); border-color: var(--amarillo); }
@media (min-width: 640px) { .servs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .servs { grid-template-columns: repeat(3, 1fr); gap: 20px; } .servicios { padding: 96px 0 104px; } }

/* otros destinos: bloque azul con 3 fotos */
.otros-dest { background: var(--noche); color: #fff; padding: 72px 0; }
.otros-dest .t-seccion { color: #fff; }
.otros-dest .cab-sec__p { color: #d2d3d7; }
.otros-dest .resalta { color: var(--noche); }
.otros-dest__in { display: grid; gap: 28px; }
.otros-dest__txt .boton { margin-top: 22px; }
.boton--blanco { --bg: #fff; --fg: var(--noche); }
.dests { display: grid; gap: 14px; grid-template-columns: 1fr; }
.dest__a { display: grid; grid-template-rows: auto 1fr; height: 100%; position: relative; background: #fff; color: var(--tinta); border-radius: 20px; overflow: hidden; text-decoration: none; transition: transform .4s var(--ease); }
.dest__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dest__cuerpo { padding: 14px 64px 16px 18px; display: grid; gap: 4px; }
.dest__t { font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dest__t em { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--gris-sec); color: var(--tinta-suave); }
.dest__p { color: var(--tinta-suave); font-size: .92rem; line-height: 1.45; }
.dest__flecha { position: absolute; right: 14px; bottom: 16px; width: 38px; height: 38px; padding: 9px; border-radius: 999px; background: var(--amarillo); color: var(--noche); display: grid; place-items: center; }
.dest__flecha .ico { width: 18px; height: 18px; }
.dest__a:hover { transform: translateY(-4px); }
@media (min-width: 640px) { .dests { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .otros-dest { padding: 96px 0; } .otros-dest__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: center; gap: 48px; } }

/* equipo: reutiliza .nosotros; sin el párrafo largo ni la caja de dirección */
.nosotros .ceja { margin-bottom: 10px; }

/* testimonios: gris claro, título a la izquierda y la tarjeta de Google */
.testimonios { background: var(--gris-sec) !important; padding: 72px 0; }
.testimonios__in { display: grid; gap: 24px; align-items: center; }
.testimonios .resenas { background: #fff; border-radius: 22px; padding: 26px 24px; border: 1px solid var(--crema-linea); display: grid; gap: 14px; justify-items: start; box-shadow: 0 16px 36px -28px rgba(19, 18, 52, .5); }
.testimonios .resenas__ico { width: 44px; height: 44px; padding: 10px; border-radius: 999px; background: var(--amarillo); }
@media (min-width: 960px) { .testimonios__in { grid-template-columns: 1fr 1fr; gap: 56px; } .testimonios { padding: 96px 0; } }

/* agenda (azul con foto) + Triaje Friends (blanca con foto) */
.duo__in { display: grid; gap: 18px; }
.bloque2 { position: relative; display: grid; border-radius: 26px; overflow: hidden; text-decoration: none; min-height: 300px; }
.bloque2__txt { position: relative; z-index: 1; padding: 30px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bloque2 h2 { font-weight: 800; font-size: clamp(1.8rem, 3vw + .8rem, 2.6rem); line-height: 1.05; letter-spacing: -.03em; }
.bloque2 p { max-width: 34ch; line-height: 1.5; }
.bloque2 .acciones { margin-top: 10px; }
.bloque2__foto { width: 100%; height: 220px; object-fit: cover; }
.bloque2--agenda { background: var(--noche); color: #fff; }
.bloque2--agenda p { color: #d2d3d7; }
.bloque2--agenda .resalta { color: var(--noche); }
.boton--contorno-claro { --bg: transparent; --fg: #fff; border-color: rgba(255, 255, 255, .5); }
.bloque2--friends { background: #fff; color: var(--tinta); border: 1px solid var(--crema-linea); box-shadow: 0 16px 36px -28px rgba(19, 18, 52, .5); }
.bloque2--friends p { color: var(--tinta-suave); }
.bloque2--friends .boton { margin-top: 8px; }
.bloque2--friends:hover .boton { background: var(--amarillo); border-color: var(--amarillo); }
@media (min-width: 960px) {
  .duo__in { grid-template-columns: 1.15fr 1fr; }
  .bloque2 { grid-template-columns: 1.1fr .9fr; }
  .bloque2__foto { height: 100%; min-height: 320px; }
  .bloque2--agenda .bloque2__foto { clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
  .bloque2--friends .bloque2__foto { clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
}
.p-home .duo { background: #fff; }

/* cierre: redes */
.final__redes-t { margin-top: 34px; font-weight: 600; color: #d2d3d7; }
.final__redes { margin-top: 12px; justify-content: center; }
.final .red { color: #fff; border-color: rgba(255, 255, 255, .3); }

/* adornos de la portada nueva: anillos finos en servicios y un punto amarillo en testimonios */
.p-home :is(.servicios, .otros-dest, .testimonios) { position: relative; isolation: isolate; overflow: clip; }
.p-home .servicios::before { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 520px; height: 520px; right: -260px; top: -120px; border-radius: 50%;
  border: 1.5px solid rgba(19, 18, 52, .08); outline: 1.5px solid rgba(19, 18, 52, .05); outline-offset: 60px; }
.p-home .testimonios::before { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 110px; height: 110px; left: -40px; bottom: 40px; border-radius: 50%; background: var(--amarillo); }
.p-home .otros-dest::before { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 480px; height: 480px; left: -220px; top: -180px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .08); outline: 1.5px solid rgba(255, 255, 255, .05); outline-offset: 60px; }

/* la línea amarilla pasa DETRÁS del contenido de todas las secciones */
.p-home main > section > :not(.hilo, .final__trazo, .hero__foto) { position: relative; z-index: 1; }
.otros-dest .hilo__linea { stroke: var(--amarillo); }

/* Estudiar: "Así trabajamos" + instituciones + Sin promesas (venían de la portada) */
.p-offshore .confianza { padding: 72px 0; }
.honesto--solo { margin-top: 36px; max-width: 760px; margin-inline: auto; }
/* ajustes tras la primera captura (08/10) */
.serv__foto, .dest__foto { height: auto; flex: none; }
.otros-dest .t-seccion { font-size: clamp(2rem, 2.2vw + 1.1rem, 2.9rem); }
.bloque2--agenda h2 { color: #fff; }
.bloque2--friends h2 { color: var(--tinta); }
.p-home .bloque2--agenda h2, .p-home .otros-dest .t-seccion { color: #fff; }
.p-home :is(.otros-dest, .bloque2--agenda) .resalta { color: var(--noche); padding-inline: .06em;
  background: linear-gradient(transparent 58%, var(--amarillo) 58%, var(--amarillo) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.p-home .otros-dest .resalta { color: #fff; background: linear-gradient(transparent 70%, var(--amarillo) 70%, var(--amarillo) 92%, transparent 92%); }
.p-home .bloque2--agenda .resalta { color: #fff; background: linear-gradient(transparent 70%, var(--amarillo) 70%, var(--amarillo) 92%, transparent 92%); }

/* ---- hero en pantallas anchas (08/10/2026, captura de Genaro: "en PC se ve un poco vacío"): el velo blanco iba
   desde el borde de la pantalla y dejaba una franja vacía a la izquierda del texto. Ahora el velo arranca
   transparente, se aclara SOLO detrás de la columna de texto (que empieza en --izq) y se abre hacia la Ópera. */
@media (min-width: 960px) {
  .hero__foto { --izq: max(0px, (100vw - var(--envase)) / 2); }
  .hero__foto::after {
    background: linear-gradient(90deg,
      rgba(255, 255, 255, .35) 0,
      rgba(255, 255, 255, .9) calc(var(--izq) + 40px),
      rgba(255, 255, 255, .94) calc(var(--izq) + 520px),
      rgba(255, 255, 255, .7) calc(var(--izq) + 640px),
      rgba(255, 255, 255, 0) calc(var(--izq) + 820px));
  }
}

/* ---- Crédito del estudio (14/10/2026, pedido de Genaro: "todas las web tengan que cuystudio las hizo"): línea propia
   bajo el ©, carita del cuy en versión chica, nofollow por la regla de Google sobre enlaces en pies. Receta:
   webs/estudio-digital/docs/credito-pie/RECETA-OTRAS-WEBS.md. Pie blanco: "Web creada por" en --tinta-suave
   (#4a4968, 8,6:1 medido sobre #fff) y "Cuy Studio" en --tinta (#131234, 18,0:1). Amarillo solo como subrayado, nunca letra. */
.pie-cred { margin-top: 2px; }
.pie-cred a { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; color: var(--tinta-suave); border-bottom: 0; text-decoration: none; white-space: nowrap; border-radius: 4px; }
.pie-cred [translate] { color: var(--tinta); border-bottom: 1px solid rgba(19, 18, 52, .3); }
.pie-cred a:hover, .pie-cred a:focus-visible, .pie-cred a:hover [translate], .pie-cred a:focus-visible [translate] { color: var(--tinta); }
.pie-cred a:hover [translate], .pie-cred a:focus-visible [translate] { border-bottom: 2px solid var(--amarillo); }
.pie-cuy { flex: none; width: auto; height: 22px; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.pie-cred a:hover .pie-cuy, .pie-cred a:focus-visible .pie-cuy { transform: translateY(-1px) rotate(-8deg); }
@media (prefers-reduced-motion: reduce) { .pie-cred a:hover .pie-cuy, .pie-cred a:focus-visible .pie-cuy { transform: none; } }
/* En celular el botón flotante de WhatsApp (58 px, abajo a la derecha) quedaba pegado a "Cuy Studio" al final de la página:
   el pie deja el mismo hueco que ya tenían las páginas de servicio (.p-servicio .pie). */
@media (max-width: 639px) { body:has(.wa-flot:not(.wa-flot--escritorio)) .pie { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* =================================================================================================
   LÍNEA AMARILLA MÁS FINA + CHISPA (14/10/2026, Genaro: "que recorra del lado izquierdo al derecho, más delgada
   y sutil y que haga algún movimiento"). triaje.js hace entrar el arco del hero por el borde izquierdo (bajo las
   puertas) y lo lleva por encima de la Ópera hasta la derecha. La chispa es una copia del arco con un trazo corto
   que lo recorre en bucle; con movimiento reducido no aparece.
   ================================================================================================= */
.hilo__linea, .tono-claro .hilo__linea, .otros-dest .hilo__linea { stroke-width: 1.6; }
.tono-claro .hilo__linea { stroke: #f4d21a; }
.hilo__punta { r: 4.5px; stroke: none; }  /* 14/10: solo amarillo, sin el borde azul noche (Genaro) */
.hilo__chispa { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hilo__chispa {
    display: block; fill: none; stroke: var(--amarillo); stroke-width: 3.2; stroke-linecap: round;
    stroke-dasharray: 7 93; stroke-dashoffset: 7;
    filter: drop-shadow(0 0 4px rgba(253, 223, 1, .9));
    animation: hilo-chispa 7s cubic-bezier(.45, 0, .25, 1) 2.2s infinite;
  }
  @keyframes hilo-chispa {
    0% { stroke-dashoffset: 7; opacity: 0; }
    6% { opacity: 1; }
    70% { opacity: 1; }
    78%, 100% { stroke-dashoffset: -100; opacity: 0; }
  }
}

/* foto "Across the Harbour" (14/10/2026): es más alta que el hero; en PC se encuadra un poco arriba del centro
   para que las velas y el cielo por donde pasa la línea no queden recortados */
@media (min-width: 960px) { .hero__foto img { object-position: 100% 30%; } }

/* Texto del equipo JUSTIFICADO (14/10/2026, Genaro: "justifica el texto sin los espacios raros").
   Sin guiones de partición (pedido de Triaje del 08/10), así que las calles se controlan con el corte
   de líneas (text-wrap: pretty) y se MIDEN a 390 / 1366 / 1903 px antes de entregar. */
.nosotros__texto .texto p { text-align: justify; text-wrap: pretty; }
/* justificado fino (triaje.js arma una línea por <span>; ver "justificado fino SIN guiones") */
.justo .justo__l { display: block; white-space: nowrap; text-align: left; }
.justo .justo__l--llena { text-align: justify; text-align-last: justify; }
.persona figcaption p { text-align: justify; }  /* bios del equipo justificadas (14/10/2026); triaje.js las afina */

/* =================================================================================================
   RESEÑAS DE GOOGLE QUE ROTAN (14/10/2026, Genaro: "que se vean realmente allí las reseñas que tienen en Google
   y que vayan rotando con algún efecto gráfico"). Textos reales de tools/resenas_google.json (build.py:
   carrusel_resenas). Sin JS: fila con scroll lateral. Con JS (.rot.is-js): una tarjeta a la vez, apiladas en la
   misma celda, con dos tarjetas "fantasma" detrás; entra con fundido + subida + desenfoque. Estrellas amarillas
   como forma (no letra), nunca texto amarillo sobre blanco.
   ================================================================================================= */
.testimonios__cab { display: grid; gap: 14px; justify-items: start; align-content: start; }
.testimonios__cab .texto { color: var(--tinta-suave); max-width: 46ch; }
.testimonios__cab .boton { margin-top: 4px; }
.resenas-resumen { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 2px 0 0; color: var(--tinta-suave); font-size: .95rem; }
.resenas-resumen strong { font-size: 1.6rem; font-weight: 800; color: var(--noche); line-height: 1; }
.resenas-resumen__g { width: 26px; height: 26px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px -6px rgba(19, 18, 52, .35); }
.estrellas { display: inline-flex; gap: 2px; }
.estrella { width: 18px; height: 18px; fill: var(--amarillo); stroke: #e0bf00; stroke-width: .6; stroke-linejoin: round; }
.estrella--vacia { fill: #e6e6ea; stroke: #d5d5db; }
@media (min-width: 960px) { .testimonios__in { align-items: center; } }

.rot { position: relative; min-width: 0; }
.rot__pista { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 440px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; }
.rot__item { scroll-snap-align: start; position: relative; margin: 0; display: grid; gap: 14px; align-content: start; padding: 30px 28px 24px; border-radius: 24px; background: #fff;
  border: 1px solid var(--crema-linea); box-shadow: 0 26px 50px -34px rgba(19, 18, 52, .55); }
.rot__comillas { position: absolute; top: 22px; right: 24px; width: 42px; height: 35px; fill: var(--amarillo); opacity: .9; }
.rot__texto { margin: 0; color: var(--tinta); font-size: 1.02rem; line-height: 1.62; }
.rot__texto p { margin: 0; }
.rot__texto p + p { margin-top: .6em; }
.rot__mas { justify-self: start; margin-top: -4px; padding: 2px 0; border: 0; background: none; font: inherit; font-weight: 600; font-size: .92rem; color: var(--noche); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.rot__pie { display: flex; align-items: center; gap: 12px; padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--crema-linea); }
.rot__avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; background: var(--amarillo); color: var(--noche); font-weight: 800; font-size: 1.1rem; }
.rot__quien { display: grid; line-height: 1.25; margin-right: auto; }
.rot__quien strong { color: var(--noche); }
.rot__quien small { color: var(--tinta-suave); font-size: .82rem; }
.rot__g { flex: none; width: 22px; height: 22px; }

/* con JS: una a la vez */
.rot.is-js .rot__pista { grid-auto-flow: row; grid-auto-columns: auto; grid-template-areas: "pila"; overflow: visible; scroll-snap-type: none; padding: 0; position: relative; }
.rot.is-js .rot__pista::before, .rot.is-js .rot__pista::after { content: ""; grid-area: pila; border-radius: 24px; background: #fff; border: 1px solid var(--crema-linea); pointer-events: none; }
.rot.is-js .rot__pista::before { transform: rotate(-3.2deg) translate(-6px, 10px); opacity: .7; box-shadow: 0 20px 40px -32px rgba(19, 18, 52, .5); }
.rot.is-js .rot__pista::after { transform: rotate(2deg) translate(8px, 6px); opacity: .85; background: #fffbe0; }
.rot.is-js .rot__item { grid-area: pila; z-index: 1; visibility: hidden; opacity: 0; transform: translateY(18px) scale(.97); filter: blur(6px); }
.rot.is-js .rot__item.is-activa { visibility: visible; opacity: 1; transform: none; filter: none; }
.rot.is-js .rot__item.is-sale { visibility: visible; opacity: 0; transform: translateY(-14px) scale(.985); filter: blur(4px); }
@media (prefers-reduced-motion: no-preference) {
  .rot.is-js .rot__item { transition: opacity .6s ease, transform .75s cubic-bezier(.2, .8, .2, 1), filter .6s ease, visibility 0s linear .75s; }
  .rot.is-js .rot__item.is-activa { transition: opacity .6s ease .12s, transform .75s cubic-bezier(.2, .8, .2, 1) .12s, filter .6s ease .12s, visibility 0s; }
  .rot.is-js .rot__item.is-activa .estrella { animation: rot-estrella .5s cubic-bezier(.3, 1.6, .5, 1) both; }
  .rot.is-js .rot__item.is-activa .estrella:nth-child(2) { animation-delay: .32s; }
  .rot.is-js .rot__item.is-activa .estrella:nth-child(3) { animation-delay: .39s; }
  .rot.is-js .rot__item.is-activa .estrella:nth-child(4) { animation-delay: .46s; }
  .rot.is-js .rot__item.is-activa .estrella:nth-child(5) { animation-delay: .53s; }
  .rot.is-js .rot__item.is-activa .estrella:nth-child(1) { animation-delay: .25s; }
  @keyframes rot-estrella { from { transform: scale(.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
}
.rot.is-js .rot__texto:not(.is-abierto) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.rot.is-js .rot__texto:not(.is-abierto) p + p { margin-top: 0; }
.rot.is-js .rot__texto:not(.is-abierto) p { display: inline; }
.rot.is-js .rot__texto:not(.is-abierto) p + p::before { content: " "; }

.rot__ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.rot__ctrl[hidden] { display: none; }
.rot__flecha { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(19, 18, 52, .16); background: #fff; color: var(--noche); cursor: pointer; transition: background .2s, transform .2s; }
.rot__flecha:hover { background: var(--amarillo); }
.rot__flecha:active { transform: scale(.94); }
.rot__flecha .ico { width: 18px; height: 18px; }
.rot__puntos { display: flex; gap: 6px; }
.rot__punto { position: relative; width: 22px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.rot__punto i { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: rgba(19, 18, 52, .14); overflow: hidden; }
.rot__punto i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--noche); transform: scaleX(0); transform-origin: left; }
.rot__punto.is-visto i::after { transform: scaleX(1); opacity: .35; }
.rot__punto.is-activo { width: 40px; }
.rot__punto.is-activo i::after { transform: scaleX(1); opacity: 1; }
.rot.is-auto .rot__punto.is-activo i::after { animation: rot-progreso var(--rot-ms, 7000ms) linear both; }
.rot.is-pausa .rot__punto.is-activo i::after { animation-play-state: paused; }
@keyframes rot-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rot__punto { transition: width .35s ease; }
.rot :focus-visible { outline: 3px solid var(--noche); outline-offset: 3px; }
@media (min-width: 960px) { .rot__item { padding: 36px 36px 26px; } .rot__texto { font-size: 1.06rem; } }
.rot__flecha { flex: none; }
@media (max-width: 600px) {
  .rot__ctrl { gap: 10px; }
  .rot__puntos { gap: 4px; }
  .rot__punto { width: 12px; }
  .rot__punto.is-activo { width: 26px; }
  .rot.is-js .rot__pista::before { transform: rotate(-1.6deg) translate(-2px, 9px); }
  .rot.is-js .rot__pista::after { transform: rotate(1.2deg) translate(3px, 5px); }
}

/* Agenda + Triaje Friends (14/10/2026, Genaro): "Agenda" no se veía (quedaba azul noche sobre azul noche);
   fotos nuevas (videollamada para Agenda, foto del cliente con la polera de Triaje para Friends) y la palabra
   "Triaje" de Friends con el dibujo del logo (build.py: palabra_logo). */
.p-home .duo .bloque2--agenda h2 { color: #fff !important; }
.palabra-logo { display: inline-block; height: .98em; width: auto; aspect-ratio: 789 / 268; vertical-align: -.24em; margin-right: .04em; color: var(--noche); overflow: hidden; }
.friends__h { line-height: 1.12; }
.bloque2--friends .bloque2__foto { object-position: 50% 30%; }
.bloque2--agenda .bloque2__foto { object-position: 60% 40%; }
@media (max-width: 959px) { .bloque2--agenda .bloque2__foto { object-position: 60% 22%; } .bloque2--friends .bloque2__foto { object-position: 50% 38%; } }
@media (min-width: 960px) { .bloque2--friends .bloque2__foto { object-position: 12% 30%; } }
/* cargo de Cris = el de Dani (14/10/2026): la tarjeta más alta estiraba la fila del cargo y el resaltado (58-92 % de su
   alto) quedaba como un bloque grueso separado del texto. El pie no se estira. */
.persona figcaption { align-content: start; }
.persona__cargo { line-height: 1.35; }
.persona { align-content: start; }
/* logo del pie = PNG del cliente "FONDO BLANCO" (14/10/2026): sin la cajita amarilla, sobre el blanco del pie */
.pie__logo { background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0; }
.logo--pie-img { display: block; width: 220px; height: auto; }
/* título del hero en MAYÚSCULAS (14/10/2026, Genaro: "Inicia tu camino en Australia, todo en mayúsculas", en el hero, no en
   el pie). Por CSS: el HTML sigue en minúsculas (lectores de pantalla, OG y buscadores). Un poco más chico porque ocupa más ancho. */
.p-home .hero__h1 { text-transform: uppercase; letter-spacing: -.035em; }
@media (min-width: 960px) { .p-home .hero--foto .hero__h1 { font-size: clamp(2.9rem, 3.7vw, 3.9rem); } }