/* =========================================================================
   DAGR369 · style.css
   Un único escenario claro (#F8F6F9, el fondo real de los frames del
   avatar) de principio a fin. Diego Armando vive en una capa fija y
   centrada durante toda la web; el contenido cae a su izquierda y a su
   derecha alternándose, en una rejilla de tres columnas cuya calle
   central le está reservada.
   ========================================================================= */

@font-face{
  font-family:"Space Grotesk"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/assets/fonts/space-grotesk-700.woff2") format("woff2");
}
@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/hanken-400.woff2") format("woff2");
}
@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/hanken-500.woff2") format("woff2");
}
@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/hanken-600.woff2") format("woff2");
}
@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/assets/fonts/hanken-700.woff2") format("woff2");
}

:root{
  /* El fondo del avatar, muestreado de los WebP: la página y el personaje
     comparten exactamente el mismo blanco. */
  --paper:#F8F6F9;

  --ink:#141519;
  --ink-muted:rgba(20,21,25,.62);
  --ink-soft:rgba(20,21,25,.42);

  --card-bg:rgba(255,255,255,.62);
  --card-bg-hover:rgba(255,255,255,.86);
  --card-line:rgba(20,21,25,.09);
  --card-line-strong:rgba(20,21,25,.18);

  --cyan:#0FA6BC;
  --violet:#6D5DE0;
  --magenta:#C617B4;
  --amber:#D99206;
  --grad:linear-gradient(90deg,#0FA6BC 0%,#6D5DE0 34%,#C617B4 68%,#D99206 100%);

  --font-head:"Space Grotesk", var(--font-body);
  --font-body:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container:1400px;
  /* La calle central reservada a Diego. Su ancho real es 54svh (96svh de
     alto × 9/16), así que la calle se mide en svh, no en vw: así el texto
     nunca lo invade, sea cual sea la proporción de la pantalla. */
  --gutter:clamp(250px, 58svh, 660px);
  --radius:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html.fx{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-head); font-weight:700; letter-spacing:-.015em; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; z-index:200;
}
.skip-link:focus{ left:16px; top:16px; }

.grad-text{
  background:var(--grad); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html.anim .grad-text--anim{ animation:gradShift 7s ease-in-out infinite; }
@keyframes gradShift{
  0%, 100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

/* ---------------------------------------------------------------------
   DIEGO ARMANDO — capa fija y centrada, presente en toda la web
   --------------------------------------------------------------------- */
.char{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  display:grid; place-items:center;
}
.char__canvas{
  width:auto; height:96svh; aspect-ratio:9/16; display:block;
}
.char__canvas[hidden]{ display:none; }
/* Imagen fija del agente mientras no existan sus fotogramas. Comparte
   geometría con el lienzo (9:16, 96svh) porque el recorte está hecho con el
   mismo encuadre, así que cae exactamente en el mismo sitio. */
.char__still{
  width:auto; height:96svh; aspect-ratio:9/16; display:block;
  max-width:none; object-fit:contain;
}
.char__still:not([src]){ display:none; }
/* En cuanto el lienzo dibuja el primer fotograma, la imagen fija sobra. */
html.fx .char.is-ready .char__still{ display:none; }
/* Velo blanco: al final del recorrido Diego se funde con la página para
   dejar el protagonismo al CTA. */
.char__veil{
  position:absolute; inset:0; background:var(--paper); opacity:0; pointer-events:none;
}

@media (max-width:900px){
  /* En móvil se queda en la franja inferior, centrado: el contenido vive
     encima de él y nunca lo tapa del todo. */
  .char{ place-items:end center; }
  .char__canvas, .char__still{ height:42svh; }
}

/* ---------------------------------------------------------------------
   VIÑETA — un consejo suyo por sección, junto a su cara. Aparece siempre
   en el lado contrario al del texto de esa sección, así no se pisan.
   --------------------------------------------------------------------- */
.speech{
  position:fixed; z-index:4; top:17svh; max-width:250px; pointer-events:none;
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.speech.is-on{ opacity:1; transform:translateY(0); }
.speech--right{ left:calc(50% + 13svh); right:auto; }
.speech--left{ right:calc(50% + 13svh); left:auto; }
.speech p{
  position:relative; margin:0; padding:12px 16px; border-radius:16px;
  background:rgba(255,255,255,.94); border:1px solid var(--card-line);
  box-shadow:0 14px 34px -20px rgba(20,21,25,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:13.5px; font-weight:600; line-height:1.38; color:var(--ink);
}
/* Rabito hacia su cara */
.speech p::after{
  content:""; position:absolute; width:11px; height:11px; top:calc(50% - 6px);
  background:rgba(255,255,255,.94); transform:rotate(45deg);
}
.speech--right p::after{ left:-6px; border-left:1px solid var(--card-line); border-bottom:1px solid var(--card-line); }
.speech--left p::after{ right:-6px; border-right:1px solid var(--card-line); border-top:1px solid var(--card-line); }

@media (max-width:900px){
  /* En móvil el texto de cada sección puede crecer mucho más que en
     escritorio (listas de trayectoria, tabla de precios...), y ese texto
     ocupa TODO el ancho de la pantalla — no hay una "calle" reservada como
     en escritorio. Si la viñeta flota a media pantalla, junto a la cara del
     personaje, acaba tapando párrafos según por dónde vaya el scroll. Para
     que nunca tape nada, se saca de ahí y se pone como una franja fija
     justo debajo de la barra de navegación: una zona que jamás lleva texto
     de sección debajo. */
  .speech, .speech--left, .speech--right{
    left:0; right:0; top:calc(env(safe-area-inset-top, 0px) + 74px); bottom:auto; max-width:none;
    display:flex; justify-content:center; padding:0 18px;
  }
  .speech p{ max-width:min(88vw, 360px); font-size:12.5px; }
  /* Sin rabito: ya no está junto a su cara, así que no tiene a quién señalar. */
  .speech p::after{ display:none; }
}

/* ---------------------------------------------------------------------
   Rejilla de paneles: [ columna izquierda | calle de Diego | derecha ]
   --------------------------------------------------------------------- */
.panel{
  position:relative; z-index:2;
  min-height:100svh; display:flex; align-items:center;
  padding:14svh 0;
}
.panel__grid{
  width:100%; max-width:var(--container); margin:0 auto; padding:0 26px;
  display:grid; grid-template-columns:minmax(0,1fr) var(--gutter) minmax(0,1fr);
  align-items:center; gap:0;
}
.panel[data-side="left"] .panel__col{ grid-column:1; }
.panel[data-side="right"] .panel__col{ grid-column:3; }
.panel__col{ max-width:520px; }
.panel[data-side="right"] .panel__col{ margin-left:auto; }

/* Secciones "split" (cómo trabajo, FAQ): tienen tanto contenido que
   apilarlo todo en una sola columna dejaba el otro lado vacío durante un
   scroll larguísimo. Aquí van DOS `.panel__col` de verdad, una a cada
   lado — en escritorio/tablet. En móvil no hace falta nada especial: el
   `grid-template-columns:1fr` general de ahí abajo ya las apila una debajo
   de otra en el orden del HTML, igual que el resto de columnas. */
@media (min-width:900px){
  .panel__col--left{ grid-column:1; }
  .panel__col--right{ grid-column:3; margin-left:auto; }
}

/* El carril de Diego (--gutter) se calcula con la ALTURA de pantalla, no el
   ancho: en monitores anchos pero no muy altos (el caso típico de escritorio)
   eso deja las columnas de texto muy por debajo de los 520px de arriba, con
   el lado sin texto vacío del todo. A partir de aquí (mismo punto de corte
   que el resto del layout de escritorio) se ensancha el contenedor del grid
   y el tope de la columna, así el texto reclama parte de ese hueco en vez de
   dejarlo en blanco. Solo `.panel__grid`/`.panel__col`: `--container` no se
   toca, así que el nav y las páginas legales quedan exactamente igual. */
@media (min-width:900px){
  .panel__grid{ max-width:clamp(1400px, 94vw, 1760px); }
  .panel__col{ max-width:clamp(520px, 30vw, 680px); }
}

/* El cierre ocupa una pantalla justa y su CTA se apoya abajo: Diego está
   fijo en el centro, así el texto nunca le cae sobre la cara. */
.panel--closing{ min-height:100svh; padding-bottom:6svh; }
.panel--form{ padding-bottom:8svh; }

@media (max-width:900px){
  .panel{
    min-height:100svh; align-items:flex-start;
    padding:13svh 0 40svh; /* hueco inferior: ahí está Diego */
  }
  .panel__grid{ grid-template-columns:1fr; padding:0 22px; }
  .panel[data-side="left"] .panel__col,
  .panel[data-side="right"] .panel__col{ grid-column:1; margin:0 auto; }
  .panel__col{ max-width:560px; text-align:center; }
  .panel--closing{ min-height:100svh; }
  .panel--form{ padding-bottom:12svh; }

  /* Más opacidad en las tarjetas: si alguna cae sobre él, se lee igual */
  .card-glass{ background:rgba(255,255,255,.84); }
  .service-card, .data-card, .process__step{ padding:15px 17px; }
  .service-card h3{ font-size:15.5px; }
  .stack{ gap:11px; }
}

/* Legibilidad sobre el personaje: un halo blanco muy suave tras el texto
   suelto (los bloques con tarjeta ya tienen su propio cristal). */
.hero__title, .lead, .manifesto__line, .human__line, .human__sub,
.closing__title, .closing__sub, .closing__email{
  text-shadow:0 0 26px rgba(248,246,249,.92), 0 0 10px rgba(248,246,249,.9);
}

/* ---------------------------------------------------------------------
   Preloader
   --------------------------------------------------------------------- */
.pl{ display:none; }
html.js.anim .pl{
  display:flex; position:fixed; inset:0; z-index:100; background:var(--paper);
  flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .6s var(--ease), visibility .6s;
}
.pl__brand{ font-family:var(--font-head); font-weight:700; font-size:22px; letter-spacing:.14em; color:var(--ink); margin:0; }
.pl__track{ width:180px; height:2px; background:rgba(20,21,25,.12); border-radius:2px; overflow:hidden; }
.pl__bar{ height:100%; width:0%; background:var(--grad); border-radius:2px; transition:width .3s var(--ease); }
.pl.is-done{ opacity:0; visibility:hidden; pointer-events:none; }

/* ---------------------------------------------------------------------
   Barra de progreso
   --------------------------------------------------------------------- */
.progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:60; }
.progress__bar{ height:100%; width:0%; background:var(--grad); background-size:200% auto; }

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:999px; font-weight:600; font-size:15px;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  font-family:var(--font-body);
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn--primary{ background:var(--grad); background-size:200% auto; color:#fff; font-weight:700; }
.btn--primary:hover{ transform:translateY(-1px); background-position:100% 50%; }
.btn--ghost{ background:rgba(255,255,255,.6); color:var(--ink); border-color:var(--card-line-strong); backdrop-filter:blur(10px); }
.btn--ghost:hover{ background:#fff; }
.btn--lg{ padding:17px 32px; font-size:16px; }
.btn--block{ width:100%; }
.btn--glow{ position:relative; }
html.anim .btn--glow::after{
  content:""; position:absolute; inset:-7px; z-index:-1; border-radius:999px;
  background:var(--grad); filter:blur(16px); opacity:.34;
  animation:gradShift 7s ease-in-out infinite;
}

/* ---------------------------------------------------------------------
   Cristal (sobre blanco)
   --------------------------------------------------------------------- */
.card-glass{
  background:var(--card-bg);
  border:1px solid var(--card-line);
  border-radius:var(--radius);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px -22px rgba(20,21,25,.5);
}

/* ---------------------------------------------------------------------
   Navbar
   --------------------------------------------------------------------- */
.nav{ position:fixed; top:16px; left:16px; right:16px; z-index:50; }
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:12px 20px; flex-wrap:wrap;
  background:rgba(255,255,255,.66); border:1px solid var(--card-line); border-radius:999px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  max-width:var(--container); margin:0 auto;
  transition:background .4s var(--ease);
}
.nav.is-scrolled .nav__inner{ background:rgba(255,255,255,.86); }
.nav__brand{ font-family:var(--font-head); font-weight:700; font-size:18px; text-decoration:none; color:var(--ink); }
.nav__links{ display:flex; gap:26px; flex-wrap:wrap; }
.nav__links a{ text-decoration:none; color:var(--ink-muted); font-size:14px; transition:color .25s; }
.nav__links a:hover{ color:var(--ink); }
.nav__cta{ white-space:nowrap; padding:10px 20px; font-size:14px; }
/* Contenido bilingüe (ver js/i18n.js): [hidden] por sí solo puede perder
   contra un display:flex/grid más específico de otro componente, así que
   se fuerza aquí. */
[data-i18n-es][hidden], [data-i18n-en][hidden]{ display:none !important; }

.nav__right{ display:flex; align-items:center; gap:14px; }

.nav__lang{
  display:flex; align-items:center; gap:2px; flex:0 0 auto;
  padding:3px; border-radius:999px; border:1px solid var(--card-line-strong);
  background:rgba(255,255,255,.5);
}
.nav__lang-btn{
  border:0; background:none; cursor:pointer; padding:5px 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--ink-muted);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.nav__lang-btn[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.nav__lang-btn:not([aria-pressed="true"]):hover{ color:var(--ink); }

.nav__burger{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--card-line-strong);
  background:rgba(255,255,255,.6); cursor:pointer; flex:0 0 auto;
}
.nav__burger span{ width:16px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
}

/* ---------------------------------------------------------------------
   Menú móvil
   --------------------------------------------------------------------- */
.drawer{
  position:fixed; inset:0; z-index:55;
  background:rgba(248,246,249,.95); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:38px;
  opacity:0; visibility:hidden; transform:translateY(-14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.drawer.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.drawer__links{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.drawer__links a{
  font-family:var(--font-head); font-size:clamp(26px,6.6vw,40px); font-weight:700;
  text-decoration:none; color:var(--ink);
}
.drawer__links a:hover{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------------------------------------------------------------------
   Tipografía de sección
   --------------------------------------------------------------------- */
.section-head{ margin-bottom:30px; }
.section-kicker{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); margin-bottom:12px;
}
.section-kicker::before{ content:""; width:16px; height:1px; background:var(--grad); display:inline-block; }
.section-title{ font-size:clamp(25px,2.7vw,36px); margin:0; line-height:1.16; color:var(--ink); }

.eyebrow{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--cyan); margin:0 0 20px;
}
.hero__title{ font-size:clamp(32px,3.9vw,52px); line-height:1.08; margin:0 0 20px; }
.lead{ font-size:17px; color:var(--ink-muted); margin:0 0 30px; }
.lead--tight{ font-size:15.5px; margin:0 0 14px; }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:900px){ .cta-row{ justify-content:center; } }

/* Nota discreta pero legible (plazos, condiciones) */
.micro-note{
  margin:18px 0 0; font-size:12.5px; letter-spacing:.02em; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:7px;
}
.micro-note::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--grad); flex:0 0 auto;
}

/* Etiquetas de disciplinas del equipo */
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding:0; }
.chips li{
  font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px;
  background:rgba(15,166,188,.08); border:1px solid rgba(15,166,188,.2); color:var(--ink);
}
@media (max-width:900px){ .chips{ justify-content:center; } }

/* Equipo: mismos roles que los chips de arriba, pero con más peso visual,
   justo donde el texto dice "detrás hay un equipo" — sin fotos ni nombres
   todavía (ver plan de mejoras). */
.team{ padding:20px 22px; }
.team__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;
}
.team__grid li{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--ink); }
.team__badge{
  display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:var(--grad); color:#fff; font-size:11px; font-weight:700; letter-spacing:.01em;
}
@media (max-width:480px){ .team__grid{ grid-template-columns:1fr; } }

/* Palabra que abre un panel (dentro del manifiesto) */
.linkish{
  position:relative;
  font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
  background-image:var(--grad); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  border-bottom:2px dashed rgba(15,166,188,.5); line-height:1;
}
.linkish:hover{ border-bottom-style:solid; }

/* Aviso «Pulsa aquí»: va en línea, justo después de la palabra y su punto,
   así nunca tapa el texto de al lado ni se sale de la columna. */
.tap-hint, .tap-pill{
  display:inline-flex; align-items:center; white-space:nowrap; vertical-align:middle;
  font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.01em;
  line-height:1; padding:6px 12px; border-radius:999px;
  background:var(--grad); background-size:200% auto;
  /* anula el recorte de texto si lo hereda de un contenedor */
  -webkit-background-clip:border-box; background-clip:border-box;
  color:#fff; -webkit-text-fill-color:#fff;
  box-shadow:0 10px 22px -12px rgba(20,21,25,.7);
}
.tap-hint{ margin-left:12px; }
/* La palabra y su aviso viajan juntos: si no caben, saltan de línea a la vez */
.nowrap{ white-space:nowrap; }
.tap-hint i, .tap-pill i{ font-style:normal; display:inline-block; }
.tap-hint i{ margin-right:6px; }
.tap-pill i{ margin-left:6px; }
html.anim .tap-hint, html.anim .tap-pill{ animation:gradShift 6s ease-in-out infinite; }
html.anim .tap-hint i{ animation:tapArrowL 1.5s ease-in-out infinite; }
html.anim .tap-pill i{ animation:tapArrowD 1.5s ease-in-out infinite; }
@keyframes tapArrowL{
  0%, 100%{ transform:translateX(0); }
  50%{ transform:translateX(-4px); }
}
@keyframes tapArrowD{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(3px); }
}
@media (max-width:900px){
  .tap-hint, .tap-pill{ font-size:11px; padding:5px 10px; }
}

/* Panel que se despliega (confidencialidad, casos) */
.reveal-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.reveal-panel.is-open{ grid-template-rows:1fr; }
.reveal-panel__inner{ overflow:hidden; }
.reveal-panel h3{ font-size:16px; margin:22px 0 12px; }
.reveal-panel ul{ margin:0; padding:0 0 0 18px; }
.reveal-panel li{ font-size:14px; color:var(--ink-muted); line-height:1.5; margin-bottom:9px; }
.reveal-panel li b{ color:var(--ink); }

.scroll-cue{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  width:25px; height:40px; border:2px solid var(--card-line-strong); border-radius:15px; z-index:3;
}
.scroll-cue span{
  position:absolute; top:7px; left:50%; width:4px; height:8px; margin-left:-2px;
  background:var(--grad); border-radius:2px;
}
html.anim .scroll-cue span{ animation:scrollCue 1.8s ease-in-out infinite; }
@keyframes scrollCue{
  0%{ opacity:1; transform:translateY(0); }
  70%{ opacity:0; transform:translateY(13px); }
  100%{ opacity:0; transform:translateY(0); }
}
@media (max-width:900px){ .scroll-cue{ display:none; } }

/* Reveal: el estado inicial lo pone GSAP; esto solo evita el parpadeo */
html.anim [data-reveal]{ opacity:0; }
html.anim [data-reveal].is-visible{ opacity:1; }

/* ---------------------------------------------------------------------
   Manifiesto
   --------------------------------------------------------------------- */
.manifesto__line{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(26px,3.3vw,42px); line-height:1.16; letter-spacing:-.015em;
  margin:0 0 3.2vh; color:var(--ink);
}
.manifesto__line--accent .w{
  background:var(--grad); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.manifesto__line .w{ display:inline-block; }
html.anim .manifesto__line .w{ opacity:.13; transform:translateY(.16em); transition:opacity .5s var(--ease), transform .5s var(--ease); }
html.anim .manifesto__line .w.is-on{ opacity:1; transform:translateY(0); }

/* ---------------------------------------------------------------------
   Pilas de tarjetas
   --------------------------------------------------------------------- */
.stack{ display:flex; flex-direction:column; gap:14px; list-style:none; margin:0; padding:0; }
.stack--tight{ gap:11px; }

.service-card{
  padding:20px 22px; display:flex; align-items:center; gap:16px;
  transition:background .3s var(--ease), border-color .3s var(--ease);
  transform-style:preserve-3d; will-change:transform;
}
.service-card:hover{ background:var(--card-bg-hover); border-color:var(--card-line-strong); }
.service-card__num{
  font-family:var(--font-head); font-size:13px; font-weight:700; flex:0 0 auto;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.service-card h3{ font-size:16.5px; margin:0; line-height:1.35; }

/* Tarjeta que se despliega (los casos reales) */
.service-card--open{ display:block; padding:0; }
.service-card__btn{
  width:100%; display:flex; align-items:center; gap:16px; text-align:left;
  background:none; border:0; padding:20px 22px; cursor:pointer; color:var(--ink); font-family:inherit;
}
.service-card__btn .tap-pill{ margin-left:auto; flex:0 0 auto; }
.service-card--open.is-open .tap-pill i{ transform:rotate(180deg); }
.cases{ list-style:none; margin:0; padding:0 22px 20px; }
.cases li{
  display:flex; flex-direction:column; gap:3px; padding:11px 0;
  border-top:1px solid var(--card-line);
}
.cases li b{ font-size:13.5px; color:var(--ink); }
.cases li span{ font-size:13.5px; color:var(--ink-muted); line-height:1.45; }

/* ---------------------------------------------------------------------
   Frases sueltas ("Es para ti si", trayectoria): lista legible por
   defecto — lo único que existe sin JS, sin GSAP o con
   prefers-reduced-motion. `phrases.js` la deja intacta y solo la vuelve
   invisible (no display:none: sigue reservando su hueco en el flujo, y
   sigue en el árbol de accesibilidad) cuando pinta la franja flotante.
   --------------------------------------------------------------------- */
.phrases{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.phrases li{
  background:var(--card-bg); border:1px solid var(--card-line); border-radius:999px;
  padding:10px 18px; font-size:13.5px; line-height:1.4; color:var(--ink-muted);
  transition:background .3s, border-color .3s, color .3s, box-shadow .3s;
}
.phrases li b{ color:var(--ink); }
html.anim .phrases.phrases--enhanced li{
  background:none; border-color:transparent; box-shadow:none; color:transparent;
}
html.anim .phrases.phrases--enhanced li b{ color:transparent; }

/* Franja flotante: vive en <body>, sigue a su `<ul>` de origen en posición
   y alto (ver phrases.js) pero ocupa TODO el ancho de pantalla, no la
   columna estrecha de texto. */
.phrase-band{
  position:fixed; left:0; width:100%; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .5s var(--ease);
}
.phrase-band.is-on{ opacity:1; }
.phrase-band__pill{
  position:absolute; top:0; left:0; max-width:min(46vw, 420px);
  background:var(--card-bg); border:1px solid var(--card-line); border-radius:20px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:12px 18px; font-size:13.5px; line-height:1.45; color:var(--ink-muted);
  box-shadow:0 10px 30px -22px rgba(20,21,25,.5);
  will-change:transform;
}
.phrase-band__pill b{ color:var(--ink); }
@media (max-width:900px){
  .phrase-band__pill{ max-width:min(72vw, 300px); font-size:12.5px; padding:10px 14px; }
}

.data-card{ padding:20px 22px; transition:background .3s var(--ease); }
.data-card:hover{ background:var(--card-bg-hover); }
.data-card__num{
  font-family:var(--font-head); font-size:clamp(26px,2.5vw,34px); font-weight:700; margin:0 0 6px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.data-card__text{ font-size:14px; color:var(--ink); margin:0 0 10px; line-height:1.5; }
/* Cómo lo resolvemos nosotros, debajo de cada cifra */
.data-card__fix{
  margin:0 0 10px; padding:10px 13px; border-radius:11px;
  background:rgba(15,166,188,.07); border:1px solid rgba(15,166,188,.18);
  font-size:13px; line-height:1.45; color:var(--ink);
}
.data-card__fix b{ color:var(--cyan); font-weight:700; }
.data-card__src{ font-size:11px; color:var(--ink-soft); margin:0; }

.process__step{ padding:16px 20px; display:flex; align-items:baseline; gap:14px; }
.process__step b{
  font-family:var(--font-head); font-size:13px; flex:0 0 auto;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.process__step span{ font-size:14.5px; color:var(--ink); line-height:1.45; }

/* ---------------------------------------------------------------------
   Resultados
   --------------------------------------------------------------------- */
.human__line{
  font-family:var(--font-head); font-weight:700; font-size:clamp(26px,3.3vw,42px);
  line-height:1.14; margin:0 0 14px; color:var(--ink);
}
.human__sub{ font-size:16.5px; color:var(--ink-muted); margin:0; }

/* ---------------------------------------------------------------------
   Calculadora de rentabilidad (sección Resultados)
   --------------------------------------------------------------------- */
/* Un poco más de aire que el resto de columnas, pero sin llegar a invadir
   la calle central de Diego. */
.panel--calc .panel__grid{ grid-template-columns:minmax(0,1.05fr) var(--gutter) minmax(0,.95fr); }
/* max-width:100% (no "none") es la clave: esta celda de grid no hace
   stretch automático a su carril, así que sin un tope explícito crecía
   sin control hasta caber el carrusel de precios entero en una línea en
   vez de recortarlo y dejarlo hacer scroll. min-width:0 evita además que
   el contenido de ancho fijo de dentro fuerce un mínimo mayor que el carril. */
.panel--calc .panel__col{ max-width:100%; min-width:0; }

/* En escritorio/tablet esta sección deja de reservar el carril del avatar:
   los precios son la parte más importante de toda la web y necesitan el
   ancho de verdad, no dos tercios. Una sola columna a pantalla completa —
   las tarjetas pasan por delante del personaje (mismo cristal translúcido
   que el resto del sitio) en vez de pararse en su carril. Solo ≥900px: en
   móvil el layout ya es de una columna y esto no aplica. */
@media (min-width:900px){
  .panel--calc .panel__grid{ grid-template-columns:1fr; }
}

.calc{ margin-top:22px; padding:20px 20px; }
.calc__opts{ display:flex; flex-direction:column; gap:7px; margin-bottom:20px; }
.calc__opt{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:9px 12px; border-radius:10px; border:1px solid var(--card-line);
  background:rgba(255,255,255,.5); transition:border-color .2s, background .2s;
}
.calc__opt:hover{ border-color:var(--card-line-strong); }
.calc__opt:has(input:checked){ border-color:rgba(15,166,188,.45); background:rgba(15,166,188,.07); }
.calc__opt input{ width:17px; height:17px; accent-color:var(--cyan); flex:0 0 auto; }
.calc__opt span{ font-size:14px; }
.calc__opt b{ margin-left:auto; font-size:12.5px; color:var(--cyan); }

.calc__range{ width:100%; accent-color:var(--cyan); margin:2px 0 6px; }
.calc__rev{ margin:0 0 20px; font-size:14px; color:var(--ink-muted); }
.calc__rev b{ font-family:var(--font-head); font-size:19px; color:var(--ink); }

.calc__out{
  border-top:1px solid var(--card-line); padding-top:14px;
  display:flex; flex-direction:column; gap:9px;
}
.calc__row--keep{
  margin-top:4px; padding-top:12px; border-top:1px dashed var(--card-line);
  font-weight:600; color:var(--ink);
}
.calc__row--keep b{
  font-size:19px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* ---------------------------------------------------------------------
   Carrusel de precios — un servicio a la vez, con flechas y puntos
   --------------------------------------------------------------------- */
/* overflow:hidden aquí es lo que de verdad frena el "reventón" de ancho —
   sin esto, aunque los ancestros tengan min-width:0, el contenido del
   carrusel (más ancho que la pantalla a propósito) seguía empujando el
   tamaño de esta caja hacia arriba en vez de quedarse recortado dentro. */
.pricing{ margin-top:22px; overflow:hidden; }
.pricing__track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 14px; margin:0 -4px; scrollbar-width:none;
}
.pricing__track::-webkit-scrollbar{ display:none; }
/* Arrastre con cursor (pricing.js): solo tiene sentido con ratón/trackpad —
   el dedo ya arrastra gratis con el scroll-snap nativo de arriba. */
@media (hover:hover) and (pointer:fine){
  .pricing__track{ cursor:grab; }
  .pricing__track.is-dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
}

.price-card{
  position:relative; flex:0 0 min(340px, 84vw); scroll-snap-align:center;
  background:var(--card-bg); border:1px solid var(--card-line); border-radius:var(--radius);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px -22px rgba(20,21,25,.5);
  padding:22px 22px 20px; display:flex; flex-direction:column; gap:11px;
}
.price-card__badge{
  align-self:flex-start; padding:.2em .7em; border-radius:999px;
  font-size:10.5px; font-weight:700; color:#fff; background:var(--grad);
}
/* Pulso suave en los servicios destacados (Chatbot, Voz): un anillo que
   respira, para que se noten sin gritar. Respeta prefers-reduced-motion
   igual que el resto del sitio (gateado por html.anim). */
html.anim .price-card__badge{ animation:badgePulse 2.6s ease-in-out infinite; }
@keyframes badgePulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(15,166,188,.4); }
  50%{ box-shadow:0 0 0 7px rgba(15,166,188,0); }
}
.price-card__tag{
  margin:0; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--cyan);
}
.price-card__name{ margin:0; font-family:var(--font-head); font-size:20px; font-weight:700; color:var(--ink); }
.price-card__price{ margin:0; font-family:var(--font-head); font-size:30px; font-weight:700; color:var(--ink); }
.price-card__price span{ font-size:14px; font-weight:600; color:var(--ink-soft); margin-left:4px; }
.price-card__terms{ margin:-6px 0 0; font-size:12px; color:var(--ink-soft); }

.price-card__features{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.price-card__features li{ position:relative; padding-left:20px; font-size:13.5px; color:var(--ink-muted); line-height:1.45; }
.price-card__features li::before{ content:"✓"; position:absolute; left:0; top:0; font-weight:700; color:var(--cyan); }

.price-card__result{
  margin-top:auto; padding:12px 14px; border-radius:12px;
  background:rgba(15,166,188,.08); border:1px solid rgba(15,166,188,.2);
}
.price-card__result b{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:3px;
}
.price-card__result p{ margin:0; font-size:12.5px; color:var(--ink-muted); line-height:1.45; }

.pricing__nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:4px; }
.pricing__arrow{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--card-line-strong);
  background:#fff; color:var(--ink); cursor:pointer; font-size:15px; display:grid; place-items:center;
  transition:background .25s var(--ease);
}
.pricing__arrow:hover{ background:var(--card-bg-hover); }
.pricing__arrow:disabled{ opacity:.35; cursor:default; }

.pricing__dots{ display:flex; align-items:center; gap:7px; }
.pricing__dots button{
  width:7px; height:7px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--card-line-strong); transition:background .25s var(--ease), width .25s var(--ease);
}
.pricing__dots button.is-active{ width:18px; border-radius:4px; background:var(--grad); }

@media (max-width:760px){
  .price-card{ flex-basis:min(320px, 82vw); }
}

.calc__setup{
  margin:20px 0 0; padding:16px 18px; border-radius:14px;
  background:rgba(15,166,188,.07); border:1px solid rgba(15,166,188,.18);
  font-size:15.5px; line-height:1.5; font-weight:500; color:var(--ink);
}
.calc__setup b{ color:var(--ink); }

/* Selector de horizonte temporal */
.calc__months{ display:flex; gap:7px; margin-bottom:20px; }
.calc__months label{ flex:1; cursor:pointer; }
.calc__months input{ position:absolute; opacity:0; pointer-events:none; }
.calc__months span{
  display:block; text-align:center; padding:9px 4px; border-radius:10px;
  border:1px solid var(--card-line); background:rgba(255,255,255,.5);
  font-size:13px; font-weight:600; transition:border-color .2s, background .2s, color .2s;
}
.calc__months label:hover span{ border-color:var(--card-line-strong); }
.calc__months input:checked + span{
  border-color:rgba(15,166,188,.5); background:rgba(15,166,188,.1); color:var(--ink);
}
.calc__months input:focus-visible + span{ outline:2px solid var(--cyan); outline-offset:2px; }
.calc__row i{ font-style:normal; }

@media (max-width:900px){
  .panel--calc .panel__grid{ grid-template-columns:1fr; }
  .calc{ text-align:left; }
}

/* ---------------------------------------------------------------------
   Cómo trabajo: el trato y el límite de plazas
   --------------------------------------------------------------------- */
.deal{ padding:18px 22px; margin-bottom:20px; }
.deal__formula{ margin:0 0 5px; font-family:var(--font-head); font-size:clamp(15px,1.5vw,18px); line-height:1.4; }
.deal__formula em{ font-style:normal; font-weight:400; color:var(--ink-muted); font-size:.86em; }
.deal__sub{ margin:0; font-size:13.5px; color:var(--ink-muted); }

.limit{ padding:18px 22px; margin-top:16px; border-color:rgba(15,166,188,.28); }
.limit__num{ margin:0 0 6px; font-family:var(--font-head); font-size:clamp(17px,1.8vw,21px); }
.limit__sub{ margin:0; font-size:13.5px; color:var(--ink-muted); line-height:1.5; }

/* ---------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------- */
.faq__list{ display:flex; flex-direction:column; gap:10px; }
.faq__item{ overflow:hidden; }
.faq__q{
  width:100%; cursor:pointer; padding:17px 20px; font-weight:600; font-size:15px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:none; border:0; color:var(--ink); font-family:inherit; text-align:left;
}
.faq__icon{ position:relative; width:16px; height:16px; flex:0 0 auto; }
.faq__icon::before, .faq__icon::after{
  content:""; position:absolute; background:var(--ink-muted); border-radius:2px;
  transition:transform .35s var(--ease), opacity .35s var(--ease), background .3s;
}
.faq__icon::before{ left:0; top:7px; width:16px; height:2px; }
.faq__icon::after{ left:7px; top:0; width:2px; height:16px; }
.faq__item.is-open .faq__icon::after{ transform:rotate(90deg); opacity:0; }
.faq__item.is-open .faq__icon::before{ background:var(--cyan); }
.faq__body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.faq__item.is-open .faq__body{ grid-template-rows:1fr; }
.faq__body-inner{ overflow:hidden; }
.faq__body-inner p{ margin:0; padding:0 20px 18px; color:var(--ink-muted); font-size:14.5px; line-height:1.6; }

/* ---------------------------------------------------------------------
   Cierre — Diego se acerca, el texto va centrado bajo él
   --------------------------------------------------------------------- */
.closing{
  position:relative; z-index:2; width:100%; max-width:760px; margin:0 auto;
  padding:0 26px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  align-self:flex-end;
}
/* Base de luz: Diego queda arriba y el CTA se apoya sobre un halo blanco,
   así el texto se lee limpio sin taparle la cara. */
.closing::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; bottom:-4svh; transform:translateX(-50%);
  width:min(1200px, 98vw); height:150%;
  background:radial-gradient(58% 62% at 50% 80%,
    rgba(248,246,249,.97) 34%, rgba(248,246,249,.82) 58%, rgba(248,246,249,0) 82%);
}
.closing__title{ font-size:clamp(30px,4.4vw,54px); margin:0; line-height:1.06; }
.closing__sub{ font-size:16.5px; color:var(--ink-muted); margin:0 0 6px; }
.closing__email{ margin:2px 0 0; font-size:14.5px; color:var(--ink-muted); }
.closing__email a{ color:var(--ink); text-decoration:underline; }
@media (max-width:900px){
  /* En móvil Diego ocupa la franja inferior: el cierre va arriba */
  .closing{ position:static; align-self:flex-start; }
  .closing::before{ bottom:-6svh; height:170%; }
}

/* ---------------------------------------------------------------------
   Formulario
   --------------------------------------------------------------------- */
.final__form{ padding:26px 24px; }
.final__form-title{ margin:0 0 16px; font-weight:700; font-family:var(--font-head); }
.field{ margin-bottom:14px; text-align:left; }
.field label{ display:block; font-size:12.5px; margin-bottom:6px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; }
.field input{
  width:100%; padding:12px 14px; border:1px solid var(--card-line-strong); border-radius:10px;
  font-size:15px; font-family:inherit; background:rgba(255,255,255,.8); color:var(--ink);
}
.field input:focus{ outline:none; border-color:var(--cyan); }
.consent{ display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ink-muted); margin-bottom:16px; text-align:left; }
.consent input{ margin-top:3px; }
.consent a{ color:var(--ink); }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.footer{ position:relative; z-index:2; padding:14px 16px 24px; }
/* Eslogan de cierre */
.footer__slogan{
  margin:0 0 18px; text-align:center; color:var(--ink);
  font-family:var(--font-head); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(21px, 2.8vw, 34px);
}
.footer__slogan .grad-text{ background-size:200% auto; }
html.anim .footer__slogan .grad-text{ animation:gradShift 7s ease-in-out infinite; }
.footer__inner{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  padding:16px 24px; margin-bottom:14px;
}
.footer__logo{ font-family:var(--font-head); font-weight:700; margin:0; font-size:16px; }
.footer__brand p:last-child{ margin:2px 0 0; color:var(--ink-soft); font-size:12.5px; }
.footer__contact{ display:flex; gap:18px; font-size:13.5px; }
.footer__contact a{ text-decoration:none; color:var(--ink-muted); }
.footer__contact a:hover{ color:var(--ink); }
.footer__legal{ display:flex; gap:18px; font-size:13px; }
.footer__legal a{ text-decoration:none; color:var(--ink-muted); }
.footer__legal a:hover{ color:var(--ink); }
.footer__cc{
  font:inherit; font-size:13px; color:var(--ink-muted);
  background:none; border:0; padding:0; cursor:pointer;
}
.footer__cc:hover{ color:var(--ink); text-decoration:underline; }
.footer__bar{ height:4px; border-radius:999px; background:var(--grad); }

/* Redes sociales: iconos propios en SVG, sin pedir nada a terceros */
.social{ display:flex; justify-content:center; gap:12px; margin:0 0 18px; }
.social__btn{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--card-line-strong); background:rgba(255,255,255,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.social__btn svg{ width:19px; height:19px; fill:var(--ink); transition:fill .25s var(--ease); }
.social__btn:hover{ transform:translateY(-3px); border-color:transparent; }
.social__btn:hover svg{ fill:#fff; }
/* Cada red, con su color al pasar por encima */
.social__btn[data-net="youtube"]:hover{ background:#FF0000; }
.social__btn[data-net="instagram"]:hover{
  background:linear-gradient(45deg,#F58529 0%,#DD2A7B 50%,#8134AF 80%,#515BD4 100%);
}
.social__btn[data-net="linkedin"]:hover{ background:#0A66C2; }
.social__btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

@media (pointer:coarse){
  /* Sin hover en táctil: el color va siempre puesto */
  .social__btn svg{ fill:#fff; }
  .social__btn[data-net="youtube"]{ background:#FF0000; border-color:transparent; }
  .social__btn[data-net="instagram"]{
    background:linear-gradient(45deg,#F58529 0%,#DD2A7B 50%,#8134AF 80%,#515BD4 100%); border-color:transparent;
  }
  .social__btn[data-net="linkedin"]{ background:#0A66C2; border-color:transparent; }
}

/* ---------------------------------------------------------------------
   Páginas legales
   --------------------------------------------------------------------- */
body.legal{ background:var(--paper); }
.legal-nav{ padding:20px 16px; position:relative; z-index:2; }
.legal-nav .container{ display:flex; align-items:center; justify-content:space-between; max-width:var(--container); margin:0 auto; padding:0 26px; }
.legal-back{ text-decoration:none; color:var(--ink-muted); font-size:14.5px; }
.legal-main{ padding:56px 26px 96px; position:relative; z-index:2; max-width:780px; margin:0 auto; }
.legal-main h1{ font-size:30px; margin:0 0 8px; }
.legal-updated{ color:var(--ink-soft); font-size:13.5px; margin:0 0 34px; }
.legal-main h2{ font-size:18px; margin:34px 0 10px; font-family:var(--font-head); }
.legal-main p, .legal-main li{ color:var(--ink-muted); font-size:15px; }
.legal-main a{ color:var(--cyan); }
.legal-pending{ background:rgba(217,146,6,.14); color:#8a5c00; padding:1px 6px; border-radius:4px; }
/* Tabla de cookies */
.ck{ width:100%; border-collapse:collapse; margin:14px 0 18px; font-size:13px; }
.ck th, .ck td{ border:1px solid var(--card-line); padding:9px 10px; text-align:left; vertical-align:top; color:var(--ink-muted); }
.ck th{ background:rgba(15,166,188,.07); color:var(--ink); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.ck code{ font-size:12px; color:var(--ink); word-break:break-all; }
.ck strong{ color:var(--ink); }
@media (max-width:620px){
  .ck, .ck tbody, .ck tr, .ck td{ display:block; width:100%; }
  .ck thead{ display:none; }
  .ck tr{ margin-bottom:12px; border:1px solid var(--card-line); border-radius:10px; overflow:hidden; }
  .ck td{ border:0; border-bottom:1px solid var(--card-line); }
  .ck td:last-child{ border-bottom:0; }
}
/* Las páginas legales no llevan personaje */
body.legal .char{ display:none; }

/* ---------------------------------------------------------------------
   Dagry — la gorra flotante y su chat
   --------------------------------------------------------------------- */
.dagry{ position:fixed; z-index:65; right:18px; bottom:18px; }

.dagry__btn{
  position:relative; width:58px; height:58px; border-radius:50%; cursor:pointer;
  border:1px solid var(--card-line-strong); background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 14px 30px -14px rgba(20,21,25,.55);
  display:grid; place-items:center; padding:0;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dagry__btn:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -14px rgba(20,21,25,.6); }
.dagry__btn svg{ width:30px; height:auto; fill:var(--ink); }
.dagry__dot{
  position:absolute; top:5px; right:5px; width:11px; height:11px; border-radius:50%;
  background:var(--grad); border:2px solid #fff;
}
html.anim .dagry__dot{ animation:dagryPing 2.4s ease-in-out infinite; }
@keyframes dagryPing{
  0%, 100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.25); opacity:.75; }
}
.dagry.is-open .dagry__btn{ transform:scale(.85); opacity:.6; }

.dagry__panel{
  position:absolute; right:0; bottom:72px; width:min(340px, calc(100vw - 36px));
  display:flex; flex-direction:column; overflow:hidden;
  background:rgba(255,255,255,.97); border:1px solid var(--card-line);
  border-radius:20px; box-shadow:0 24px 50px -22px rgba(20,21,25,.55);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.96); transform-origin:100% 100%;
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.dagry.is-open .dagry__panel{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

.dagry__head{ display:flex; align-items:center; gap:10px; padding:13px 14px; border-bottom:1px solid var(--card-line); }
.dagry__avatar{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(15,166,188,.1); }
.dagry__avatar svg{ width:19px; fill:var(--ink); }
.dagry__id{ display:flex; flex-direction:column; line-height:1.2; }
.dagry__id b{ font-family:var(--font-head); font-size:14.5px; }
.dagry__id i{ font-style:normal; font-size:11.5px; color:var(--ink-soft); }
.dagry__x{ margin-left:auto; border:0; background:none; font-size:24px; line-height:1; color:var(--ink-muted); cursor:pointer; padding:0 4px; }
.dagry__x:hover{ color:var(--ink); }

.dagry__log{ padding:14px; height:min(46svh, 340px); overflow-y:auto; display:flex; flex-direction:column; gap:9px; }
.dagry__msg{ max-width:88%; padding:9px 12px; border-radius:14px; font-size:13.5px; line-height:1.45; }
.dagry__msg--el{ align-self:flex-start; background:rgba(20,21,25,.05); border-bottom-left-radius:5px; color:var(--ink); }
.dagry__msg--yo{ align-self:flex-end; background:var(--grad); color:#fff; border-bottom-right-radius:5px; }
.dagry__msg a{ color:var(--cyan); }
.dagry__msg--yo a{ color:#fff; }
.dagry__msg b{ font-weight:700; }

.dagry__dots{ display:inline-flex; gap:4px; padding:2px 0; }
.dagry__dots i{ width:6px; height:6px; border-radius:50%; background:var(--ink-soft); display:block; }
html.anim .dagry__dots i{ animation:dagryDots 1.1s ease-in-out infinite; }
html.anim .dagry__dots i:nth-child(2){ animation-delay:.15s; }
html.anim .dagry__dots i:nth-child(3){ animation-delay:.3s; }
@keyframes dagryDots{
  0%, 100%{ opacity:.3; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(-3px); }
}

.dagry__chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; }
.dagry__chips:empty{ display:none; }
.dagry__chips button{
  font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  padding:6px 11px; border-radius:999px; color:var(--ink);
  border:1px solid rgba(15,166,188,.35); background:rgba(15,166,188,.08);
}
.dagry__chips button:hover{ background:rgba(15,166,188,.16); }

.dagry__form{ display:flex; gap:8px; padding:11px 14px; border-top:1px solid var(--card-line); }
.dagry__form input{
  flex:1; min-width:0; padding:10px 12px; font:inherit; font-size:13.5px;
  border:1px solid var(--card-line-strong); border-radius:10px; background:#fff; color:var(--ink);
}
.dagry__form input:focus{ outline:none; border-color:var(--cyan); }
.dagry__form button{
  flex:0 0 auto; width:40px; border:0; border-radius:10px; cursor:pointer;
  background:var(--grad); color:#fff; font-size:17px; line-height:1;
}
/* ---------------------------------------------------------------------
   Dagry — agente de voz (llamada), botón e interfaz aparte del chat
   --------------------------------------------------------------------- */
.dagry-voice{ position:fixed; z-index:64; right:18px; bottom:88px; }

.dagry-voice__btn{
  position:relative; width:52px; height:52px; border-radius:50%; cursor:pointer;
  border:0; background:var(--grad); box-shadow:0 14px 30px -14px rgba(20,21,25,.55);
  display:grid; place-items:center; padding:0; color:#fff;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease);
}
.dagry-voice__btn:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -14px rgba(20,21,25,.6); }
.dagry-voice__btn svg{ width:22px; height:22px; fill:currentColor; }
.dagry-voice__btn[aria-expanded="true"]{ transform:scale(.85); opacity:.6; }

.dagry-voice__panel{
  position:absolute; right:0; bottom:64px; width:min(300px, calc(100vw - 36px));
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:20px 18px 16px; gap:4px;
  background:rgba(255,255,255,.97); border:1px solid var(--card-line);
  border-radius:22px; box-shadow:0 24px 50px -22px rgba(20,21,25,.55);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.96); transform-origin:100% 100%;
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.dagry-voice__panel.is-open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

.dagry-voice__close{
  position:absolute; top:10px; right:12px; border:0; background:none;
  font-size:22px; line-height:1; color:var(--ink-muted); cursor:pointer; padding:0 4px;
}
.dagry-voice__close:hover{ color:var(--ink); }

.dagry-voice__orb{ position:relative; width:70px; height:70px; margin-top:6px; display:grid; place-items:center; }
.dagry-voice__orb::before{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--grad); z-index:1; }
.dagry-voice__orb svg{ width:26px; fill:#fff; position:relative; z-index:2; }
.dagry-voice__ring{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(15,166,188,.5); opacity:0; }
.dagry-voice__ring:nth-child(2){ animation-delay:.55s !important; }
html.anim .dagry-voice__panel.is-escuchando .dagry-voice__ring,
html.anim .dagry-voice__panel.is-hablando .dagry-voice__ring{ animation:dagryVoiceRing 1.6s ease-out infinite; }
@keyframes dagryVoiceRing{
  0%{ transform:scale(1); opacity:.6; }
  100%{ transform:scale(1.55); opacity:0; }
}

.dagry-voice__id{ margin:8px 0 0; line-height:1.2; }
.dagry-voice__id b{ display:block; font-family:var(--font-head); font-size:15px; }
.dagry-voice__id i{ font-style:normal; font-size:11.5px; color:var(--ink-soft); }

.dagry-voice__estado{ margin:2px 0 8px; font-size:12.5px; font-weight:700; color:var(--cyan); }

.dagry-voice__transcript{
  width:100%; max-height:150px; overflow-y:auto; text-align:left;
  display:flex; flex-direction:column; gap:6px; padding:2px 2px 4px;
}
.dagry-voice__transcript:empty{ display:none; }
.dagry-voice__linea{ margin:0; font-size:12.5px; line-height:1.4; color:var(--ink-soft); }
.dagry-voice__linea--yo{ color:var(--ink); font-weight:700; }

.dagry-voice__end{
  margin-top:10px; border:0; border-radius:999px; cursor:pointer;
  padding:9px 22px; font:inherit; font-size:13px; font-weight:700;
  background:rgba(217,58,58,.12); color:#c53232;
}
.dagry-voice__end:hover{ background:rgba(217,58,58,.2); }

@media (max-width:760px){
  .dagry-voice{ right:12px; bottom:76px; }
  .dagry-voice__btn{ width:48px; height:48px; }
  .dagry-voice__panel{ bottom:58px; }
}

@media (max-width:760px){
  .dagry{ right:12px; bottom:12px; }
  .dagry__btn{ width:52px; height:52px; }
  .dagry__btn svg{ width:27px; }
  .dagry__panel{ bottom:64px; width:calc(100vw - 24px); }
  .dagry__log{ height:min(42svh, 300px); }
}

/* ---------------------------------------------------------------------
   Aviso de cookies
   --------------------------------------------------------------------- */
.cc{
  position:fixed; z-index:70; left:16px; bottom:16px; width:min(420px, calc(100vw - 32px));
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.cc.is-on{ opacity:1; transform:translateY(0); pointer-events:auto; }
.cc__box{ padding:18px 20px; background:rgba(255,255,255,.94); }
.cc__txt{ margin:0 0 14px; font-size:13px; line-height:1.5; color:var(--ink-muted); }
.cc__txt b{ color:var(--ink); }
.cc__txt a{ color:var(--cyan); }
.cc__btns{ display:flex; gap:10px; }
.cc__btns .btn{ flex:1; padding:11px 16px; font-size:14px; }

@media (max-width:760px){
  /* A lo ancho, pero POR ENCIMA de la gorra de Dagry para no pisarla */
  .cc{ left:12px; right:12px; bottom:76px; width:auto; }
  .cc__txt{ font-size:12.5px; }
}

/* ---------------------------------------------------------------------
   Táctil
   --------------------------------------------------------------------- */
@media (pointer:coarse){
  .btn{ min-height:44px; }
  .faq__q{ min-height:44px; }
  .service-card:hover, .data-card:hover{ background:var(--card-bg); }
}

/* =====================================================================
   PANTALLA DE SELECCIÓN (gate) — escaparate 3D
   ---------------------------------------------------------------------
   Sala oscura con pedestal iluminado: los seis agentes flotan en órbita
   sobre un disco con halo, cada uno con su reflejo en el suelo. Todo el
   escenario es CSS, sin una sola imagen de fondo, para que el pedestal
   caiga siempre justo bajo los pies del que está delante.

   Va por DEBAJO del preloader (z-index 100). Entra oscureciéndose desde
   el blanco del preloader y sale volviendo al blanco de la web: así no
   hay ningún corte brusco de luz.
   --------------------------------------------------------------------- */
.gate{ display:none; }
html.js.anim .gate{
  display:grid; position:fixed; inset:0; z-index:90;
  place-items:center; overflow:hidden;
  /* Fondo blanco, igual que el resto de la web: el recorte de los avatares
     deja un fleco casi blanco en el contorno (residuo de limpiar el fondo
     original) que resulta invisible aquí y se veía como un halo sucio
     sobre un fondo oscuro. Mismo papel, cero fleco. */
  background:var(--paper);
}
.gate[hidden]{ display:none !important; }

/* Botón de salto — visible desde el primer fotograma, independiente del
   ritmo de .gate__actions (que se desvanece al girar/elegir). Quien tenga
   prisa entra directo, sin esperar a la órbita ni elegir avatar. */
.gate__skip{
  position:absolute; top:clamp(14px,3svh,28px); right:clamp(14px,3vw,28px); z-index:5;
  font:inherit; font-size:.82rem; font-weight:700; color:var(--ink-soft);
  background:rgba(255,255,255,.86); border:1px solid var(--card-line);
  border-radius:999px; padding:.55em 1.2em; cursor:pointer;
  transition:color .25s var(--ease), background .25s var(--ease), opacity .3s var(--ease);
}
.gate__skip:hover{ color:var(--ink); background:#fff; }
.gate.is-leaving .gate__skip{ opacity:0; pointer-events:none; }

html.gate-open, html.gate-open body{ overflow:hidden; }

/* Cielo: un realce muy suave sobre el escenario, casi imperceptible */
.gate__sky{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .7s var(--ease);
  background:
    radial-gradient(58% 42% at 50% 34%, rgba(109,93,224,.05), transparent 72%),
    radial-gradient(90% 60% at 50% 108%, rgba(15,166,188,.05), transparent 70%);
}
.gate__streaks{ display:none; }
.gate.is-lit .gate__sky{ opacity:1; }

/* Suelo que se aleja, en gris muy claro */
.gate__floor{
  position:absolute; left:50%; bottom:-4%; width:340%; height:92%;
  transform:translateX(-50%) perspective(760px) rotateX(66deg);
  transform-origin:50% 100%; pointer-events:none; opacity:0;
  transition:opacity .7s var(--ease);
  background-image:
    repeating-linear-gradient(to right,  rgba(20,21,25,.06) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(to bottom, rgba(20,21,25,.06) 0 1px, transparent 1px 96px);
  -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 24%, transparent 60%);
          mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 24%, transparent 60%);
}
.gate.is-lit .gate__floor{ opacity:1; }

.gate__vignette{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .7s var(--ease);
  background:radial-gradient(ellipse 74% 64% at 50% 46%,
    transparent 0%, rgba(20,21,25,.03) 68%, rgba(20,21,25,.07) 100%);
}
.gate.is-lit .gate__vignette{ opacity:1; }

.gate__inner{
  position:relative; z-index:3; width:min(1240px, 94vw);
  display:grid; grid-template-rows:auto 1fr auto;
  gap:clamp(8px,2svh,22px); height:100svh;
  padding:clamp(16px,3.6svh,40px) 0; text-align:center;
}

/* Emblema flotante, como la chapa metálica de la referencia */
.gate__head{ display:grid; justify-items:center; gap:clamp(10px,2svh,20px); }
.gate__emblem{
  display:inline-grid; place-items:center; padding:.5em 1.5em; border-radius:999px;
  font-family:var(--font-head); font-size:12px; font-weight:700; letter-spacing:.3em;
  color:var(--ink); background:rgba(255,255,255,.86);
  border:1px solid var(--card-line);
  box-shadow:0 10px 26px -14px rgba(20,21,25,.3);
}

.gate__title{
  margin:0; font-family:var(--font-head); font-weight:700;
  font-size:clamp(1.3rem,3.4vw,2.3rem); line-height:1.1;
  letter-spacing:-.02em; text-wrap:balance; color:var(--ink);
}

/* --- Escenario ------------------------------------------------------- */
.gate__stage{ position:relative; min-height:0; }

/* Pedestal: haz + disco + halo. JS lo coloca a la altura de los pies del
   que está delante mediante --pedestal-y. */
.gate__pedestal{
  position:absolute; left:50%; top:var(--pedestal-y, 68%);
  translate:-50% 0; pointer-events:none; opacity:0;
  transition:opacity .7s var(--ease);
  width:clamp(300px, 46vw, 700px); height:0;
}
.gate.is-lit .gate__pedestal{ opacity:1; }
.gate__disc{
  position:absolute; left:50%; top:0; translate:-50% -50%;
  width:100%; aspect-ratio:3.4/1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(15,166,188,.16), rgba(109,93,224,.08) 48%, transparent 78%);
  filter:blur(16px);
}
.gate__halo{
  position:absolute; left:50%; top:0; translate:-50% -50%;
  width:210%; aspect-ratio:3.6/1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(15,166,188,.14), rgba(109,93,224,.06) 56%, transparent 78%);
  filter:blur(14px);
}
.gate__beam{ display:none; }

.orb{
  position:absolute; left:50%; top:50%;
  /* El centrado va en `translate`, no en `transform`: así GSAP puede animar
     `transform` sin borrar el -50% y provocar un salto. */
  translate:-50% -50%;
  --orb-h:clamp(172px, 41svh, 460px);
  display:grid; justify-items:center; gap:8px;
  padding:0; border:0; background:none; cursor:pointer;
  will-change:transform, opacity;
  transition:filter .25s var(--ease);
}
.orb__img{
  display:block; height:var(--orb-h);
  width:auto; max-width:none; pointer-events:none;
  filter:drop-shadow(0 16px 26px rgba(20,21,25,.22)) blur(var(--blur, 0px));
}
/* Charco de luz propio: se enciende y se apaga con su dueño */
.orb__pool{
  position:absolute; left:50%; top:calc(var(--orb-h) * .975);
  width:118%; aspect-ratio:3.2/1; translate:-50% -50%;
  pointer-events:none; opacity:0; transition:opacity .7s var(--ease);
  background:radial-gradient(closest-side, rgba(15,166,188,.14), rgba(109,93,224,.07) 48%, transparent 76%);
  filter:blur(7px);
}
.gate.is-lit .orb__pool{ opacity:1; }

/* Reflejo en el suelo, muy sutil sobre blanco */
.orb__mirror{
  position:absolute; left:50%; top:calc(var(--orb-h) * .975); translate:-50% 0; pointer-events:none;
  height:var(--orb-h); width:auto; max-width:none;
  transform:scaleY(-1); transform-origin:top center;
  /* Dos capas de opacidad con ritmos distintos: la profundidad cambia cada
     fotograma (por eso va en `filter`, sin transición) y el encendido de la
     sala es un fundido de 0,7 s (por eso va en `opacity`). Mezclarlas dejaba
     el reflejo arrastrándose detrás de la órbita. */
  filter:blur(var(--blur, 0px));
  opacity:0; transition:opacity .7s var(--ease);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.14), transparent 40%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,.14), transparent 40%);
}
.gate.is-lit .orb__mirror{ opacity:.4; }

.orb__tag{ display:grid; gap:2px; pointer-events:none; }
.orb__name{
  font-family:var(--font-head); font-weight:700; color:var(--ink);
  font-size:clamp(1.02rem,1.7vw,1.42rem); line-height:1; letter-spacing:-.01em;
}
.orb__role{
  display:inline-flex; align-items:center; justify-content:center; gap:.32rem;
  font-size:clamp(.64rem,.95vw,.78rem); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-ink, var(--accent));
}
.orb__role svg{ width:13px; height:13px; flex:none; }

@media (hover:hover){
  .orb:hover{ --blur:0px; }
  .orb:hover .orb__img{ filter:drop-shadow(0 20px 32px rgba(20,21,25,.3)); }
}
.orb:focus-visible{ outline:2px solid var(--ink); outline-offset:6px; border-radius:12px; }

/* --- Pie -------------------------------------------------------------- */
.gate__actions{ display:grid; place-items:center; gap:12px; }
.gate__cta{
  font-family:var(--font-head); font-weight:700; font-size:clamp(.95rem,1.5vw,1.05rem);
  color:#fff; border:0; border-radius:999px; cursor:pointer;
  padding:.86em 2.1em; background:var(--grad); background-size:200% 100%;
  box-shadow:0 10px 30px rgba(15,166,188,.34);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-position .5s var(--ease);
}
@media (hover:hover){
  .gate__cta:hover{ transform:translateY(-2px); background-position:100% 0; box-shadow:0 16px 40px rgba(15,166,188,.5); }
}
.gate__cta:disabled{ cursor:default; opacity:.5; transform:none; }

/* Barra de la referencia, pero con función: se llena mientras gira */
.gate__meter{
  width:min(320px, 62vw); height:2px; border-radius:2px;
  background:rgba(20,21,25,.12); overflow:hidden;
}
.gate__meter span{
  display:block; width:0; height:100%; background:var(--grad);
}
.gate__hint{
  margin:0; font-size:.8rem; color:var(--ink-soft);
}

.gate.is-spinning .orb{ pointer-events:none; }
.gate.is-spinning .gate__hint{ opacity:0; transition:opacity .3s var(--ease); }

.gate.is-picked .orb{ opacity:0 !important; --blur:0px; transition:opacity .45s var(--ease); }
.gate.is-picked .orb.is-winner{ opacity:1 !important; }
.gate.is-picked .gate__actions{ opacity:0; transition:opacity .3s var(--ease); }

/* Salida: se desvanece el escenario entero (ya es blanco, como la web) */
.gate.is-leaving .gate__sky, .gate.is-leaving .gate__floor,
.gate.is-leaving .gate__vignette, .gate.is-leaving .gate__pedestal,
.gate.is-leaving .orb__mirror{ opacity:0; }

@media (max-width:900px){
  .orb{ --orb-h:clamp(150px, 34svh, 345px); }
  .gate__inner{ width:94vw; }
  /* En estrecho la etiqueta no puede mandar sobre el ancho del orbe:
     se parte en dos líneas antes que empujar al avatar fuera. */
  .orb__tag{ max-width:15ch; }
  .orb__role{ flex-wrap:wrap; line-height:1.25; }
}

/* El chat no asoma mientras está la pantalla de selección */
html.gate-open .dagry{ display:none; }

/* ---------------------------------------------------------------------
   El toque del agente. Solo eso: un toque. La identidad de DAGR369 (el
   degradado, el papel, la tipografía) no se toca — solo la viñeta, que es
   lo que el agente "dice", se tiñe de su ropa.
   --------------------------------------------------------------------- */
html[data-agent] .speech p{
  border-color:color-mix(in srgb, var(--accent) 38%, var(--card-line));
}
html[data-agent] .speech p::after{
  border-color:color-mix(in srgb, var(--accent) 38%, var(--card-line));
}

/* ---------------------------------------------------------------------
   Botón de cambiar de agente
   ---------------------------------------------------------------------
   La elección se recuerda, así que sin este botón nadie podría volver a
   ver la pantalla de selección. Vive abajo a la izquierda, en el lado
   contrario al del chat, y lleva la cara del agente que te acompaña ahora
   para que se entienda de un vistazo qué hace.
   --------------------------------------------------------------------- */
.swap{
  position:fixed; left:18px; bottom:18px; z-index:64;
  display:flex; align-items:center; gap:10px;
  padding:7px 14px 7px 7px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.72); border:1px solid var(--card-line);
  box-shadow:0 10px 30px -14px rgba(20,21,25,.5);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-family:var(--font-body); color:var(--ink);
  transition:transform .25s var(--ease), background-color .25s var(--ease),
             box-shadow .25s var(--ease);
}
/* La cara: el retrato es de cuerpo entero, así que se encuadra arriba */
.swap img{
  width:34px; height:34px; border-radius:50%; flex:none;
  object-fit:cover; object-position:50% 4%;
  background:color-mix(in srgb, var(--accent) 16%, #fff);
}
.swap__txt{ display:grid; text-align:left; line-height:1.15; }
.swap__txt b{
  font-family:var(--font-head); font-weight:700; font-size:13.5px; letter-spacing:-.01em;
}
.swap__txt i{ font-style:normal; font-size:11px; color:var(--ink-muted); }
.swap svg{ width:17px; height:17px; flex:none; color:var(--accent-ink, var(--ink-soft)); }

@media (hover:hover){
  .swap:hover{
    transform:translateY(-2px); background:rgba(255,255,255,.92);
    box-shadow:0 16px 36px -14px rgba(20,21,25,.6);
  }
}
.swap:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* No asoma mientras está la pantalla de selección */
html.gate-open .swap{ display:none; }

/* El banner de cookies ocupa la misma esquina. Mientras está, el botón se
   aparta hacia arriba en vez de quedarse escondido detrás. */
body:has(.cc.is-on) .swap{ transform:translateY(-190px); }
@media (hover:hover){
  body:has(.cc.is-on) .swap:hover{ transform:translateY(-192px); }
}

@media (max-width:900px){
  /* En móvil solo la cara y el icono: el texto se comería la pantalla, y
     abajo ya compite con el banner de cookies y con el chat. */
  .swap{ left:12px; bottom:12px; padding:6px; gap:6px; }
  .swap__txt{ display:none; }
  .swap img{ width:30px; height:30px; }
  body:has(.cc.is-on) .swap{ transform:translateY(-230px); }
}

/* ===== Resumen (respuesta directa) =================================== */
/* Va justo detrás del hero: responde qué es esto, para quién y a qué
   precio antes de que haya que hacer scroll por medio sitio. También es lo
   que un buscador o un modelo de lenguaje cita cuando le preguntan por
   agencias de este tipo en Madrid. */
.resumen{ padding:clamp(22px,3.4vw,38px); max-width:760px; }

.resumen__title{
  margin:0 0 10px; font-size:clamp(20px,2.3vw,28px);
  line-height:1.15; color:var(--ink);
}

.resumen__lead{
  margin:0 0 20px; color:var(--ink-muted);
  font-size:clamp(15px,1.15vw,17px); line-height:1.55;
}

.resumen__list{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:12px; }

.resumen__list li{
  display:grid; gap:2px;
  padding-left:16px; border-left:2px solid var(--card-line-strong);
  font-size:clamp(14px,1.05vw,16px); line-height:1.5;
  color:var(--ink-muted);
}

.resumen__list b{
  font-family:var(--font-head); font-weight:700;
  font-size:.82em; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft);
}

.resumen__cta{ align-self:start; }

@media (max-width:700px){
  .resumen__list li{ padding-left:12px; }
}

/* Solo para lectores de pantalla: se queda fuera de la vista pero sigue
   anunciándose. */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ===== Tabla de precios ============================================== */
/* Los mismos datos del carrusel, plegados. Cerrada por defecto para no
   competir con las tarjetas, pero presente siempre en el HTML. */
.tabla-precios{ margin:22px 0 0; }

.tabla-precios > summary{
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(13px,1vw,15px); color:var(--ink-muted);
  padding:9px 14px; border:1px solid var(--card-line-strong);
  border-radius:999px; background:var(--card-bg);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.tabla-precios > summary::-webkit-details-marker{ display:none; }
.tabla-precios > summary::marker{ content:''; }
.tabla-precios > summary::after{
  content:'+'; font-size:1.15em; line-height:1; opacity:.55;
}
.tabla-precios[open] > summary::after{ content:'–'; }

@media (hover:hover){
  .tabla-precios > summary:hover{ color:var(--ink); border-color:var(--ink-soft); }
}

/* La tabla es ancha: que scrollee ella y no el cuerpo de la página. */
.tabla-precios__scroll{ margin-top:16px; overflow-x:auto; }

.tabla-precios table{
  width:100%; min-width:560px; border-collapse:collapse;
  font-size:clamp(13px,1vw,15px); line-height:1.45;
}

.tabla-precios th,
.tabla-precios td{
  text-align:left; padding:11px 14px;
  border-bottom:1px solid var(--card-line);
  vertical-align:top;
}

.tabla-precios thead th{
  font-family:var(--font-head); font-weight:700;
  font-size:.82em; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom-color:var(--card-line-strong);
}

.tabla-precios tbody th{ font-weight:700; color:var(--ink); }
.tabla-precios tbody td{ color:var(--ink-muted); }
.tabla-precios tbody td:first-of-type{ color:var(--ink); white-space:nowrap; }
.tabla-precios tbody tr:last-child th,
.tabla-precios tbody tr:last-child td{ border-bottom:0; }

.tabla-precios__nota{
  margin:14px 0 0; color:var(--ink-soft);
  font-size:clamp(12px,.9vw,14px); line-height:1.5;
}

/* ===== Llamar desde el móvil ========================================= */
/* No lo ponemos flotante: abajo ya están el chat, el banner de cookies y
   el cambio de avatar, y un cuarto elemento fijo acabaría pisando alguno.
   Va en el hero, ocupando el sitio del botón que solo hacía scroll. */
.cta-row__tel{ display:none; }

@media (max-width:700px){
  .cta-row__desktop{ display:none; }
  .cta-row__tel{ display:inline-flex; }
}