/* ============================================================
   INFOYEC — components.css
   Piezas reutilizables: cabecera, botones, fichas, traza de agente,
   formularios y pie.
   ============================================================ */

/* ---------- 1. Aparición al entrar en pantalla ---------- */
[data-rv]{opacity:0;transition:opacity var(--d-3) var(--e-out) var(--rv-d,0ms),transform var(--d-3) var(--e-out) var(--rv-d,0ms);}
[data-rv="up"]{transform:translateY(22px);}
[data-rv="fade"]{transform:none;}
[data-rv="left"]{transform:translateX(-20px);}
[data-rv].is-in{opacity:1;transform:none;}
.no-js [data-rv]{opacity:1;transform:none;}

/* El titular se parte en líneas y cada una sube por separado. */
.linea{display:block;overflow:hidden;}
.linea > span{display:block;transform:translateY(105%);transition:transform 1s var(--e-out) var(--l-d,0ms);}
.is-in .linea > span,.linea.is-in > span{transform:none;}
.no-js .linea > span{transform:none;}

/* ---------- 2. Cabecera ---------- */
.site-header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:120;height:var(--header-h);
  display:flex;align-items:center;
  transition:background var(--d-2) var(--e-out),border-color var(--d-2) var(--e-out),backdrop-filter var(--d-2);
  border-bottom:1px solid transparent;
}
.site-header__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;gap:var(--gut);
}
.site-header[data-mode="over"]{color:#fff;}
.site-header[data-mode="over"] .brandmark__word{color:#fff;}
.site-header[data-mode="over"] .brandmark__sub{color:var(--jade-soft);}
.site-header.is-stuck{
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--linea);color:var(--azul);
}
.site-header.is-stuck .brandmark__word{color:var(--azul);}
.site-header.is-stuck .brandmark__sub{color:var(--jade-ink);}
.site-header.is-stuck .nav-link{color:var(--gris);}
.site-header.is-stuck .burger span{background:var(--azul);}

.brandmark{display:inline-flex;align-items:center;gap:.62rem;flex:0 0 auto;}
.brandmark__badge{width:38px;height:38px;border-radius:calc(38px * .22);flex:0 0 auto;}
.brandmark__txt{display:flex;flex-direction:column;line-height:1;}
.brandmark__word{
  font-family:var(--f-brand);font-weight:800;font-size:1.24rem;letter-spacing:-.012em;
  color:var(--azul);
}
.brandmark__sub{
  font-size:.5rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--jade-ink);margin-top:.34em;
}
@media(max-width:520px){ .brandmark__sub{display:none;} }

.nav{display:flex;gap:1.5rem;margin-inline-start:auto;}
@media(max-width:1080px){ .nav{display:none;} }
.nav-link{
  font-size:var(--t-sm);font-weight:500;color:rgba(255,255,255,.82);
  position:relative;padding-block:.3rem;transition:color var(--d-1) var(--e-out);
}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:var(--jade);transform:scaleX(0);transform-origin:right;
  transition:transform var(--d-2) var(--e-out);
}
.nav-link:hover::after,.nav-link[aria-current]::after{transform:scaleX(1);transform-origin:left;}
.nav-link:hover{color:#fff;}
.site-header.is-stuck .nav-link:hover,.site-header.is-stuck .nav-link[aria-current]{color:var(--azul);}

.nav-actions{display:flex;align-items:center;gap:.9rem;margin-inline-start:auto;}
@media(min-width:1081px){ .nav-actions{margin-inline-start:0;} }

.burger{
  width:42px;height:42px;display:inline-flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;flex:0 0 auto;
}
@media(min-width:1081px){ .burger{display:none;} }
.burger span{width:19px;height:1.8px;background:#fff;transition:transform var(--d-2) var(--e-out),opacity var(--d-1);}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg);}

/* ---------- 3. Menú completo ---------- */
.menu{
  position:fixed;inset:0;z-index:110;background:var(--prof);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--header-h) + 2rem) var(--gut) 2rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .72s var(--e-out);
  visibility:hidden;
}
.menu[data-open]{clip-path:inset(0 0 0 0);visibility:visible;}
.menu__list{max-width:var(--maxw);width:100%;margin-inline:auto;}
.menu__item{
  display:flex;align-items:baseline;gap:1.1rem;padding-block:.42rem;
  font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.9rem,5.6vw,3.4rem);color:#fff;
  opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--e-out) var(--m-d,0ms),transform .5s var(--e-out) var(--m-d,0ms),color var(--d-1);
}
.menu[data-open] .menu__item{opacity:1;transform:none;}
.menu__item i{
  font-family:var(--f-mono);font-style:normal;font-size:var(--t-micro);
  color:var(--jade-soft);letter-spacing:.14em;flex:0 0 auto;
}
.menu__item:hover{color:var(--jade-soft);}
.menu__foot{
  max-width:var(--maxw);width:100%;margin:2.4rem auto 0;padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;justify-content:space-between;
}

/* ---------- 4. Botones y enlaces ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--f-brand);font-weight:700;font-size:var(--t-sm);
  letter-spacing:-.005em;padding:.86em 1.5em;border-radius:var(--r-pill);
  background:var(--azul);color:#fff;border:1.5px solid var(--azul);
  transition:transform var(--d-1) var(--e-out),background var(--d-1),border-color var(--d-1),color var(--d-1),box-shadow var(--d-2);
  will-change:transform;text-align:center;
}
.btn svg{width:1em;height:1em;flex:0 0 auto;}
.btn:hover{background:var(--azul-700);border-color:var(--azul-700);box-shadow:var(--sh-2);}
.btn:active{transform:translateY(1px);}
.btn--lg{font-size:1rem;padding:1.02em 1.85em;}
.btn--sm{font-size:var(--t-xs);padding:.66em 1.1em;}
.btn--jade{background:var(--jade);border-color:var(--jade);color:var(--azul);}
.btn--jade:hover{background:#0DBB8C;border-color:#0DBB8C;color:var(--azul);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule);}
.btn--ghost:hover{background:transparent;border-color:var(--ink);box-shadow:none;}
.is-dark .btn--ghost,.hero .btn--ghost,.cierre .btn--ghost,.phead .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35);}
.is-dark .btn--ghost:hover,.hero .btn--ghost:hover,.cierre .btn--ghost:hover,.phead .btn--ghost:hover{border-color:#fff;}
.btn--wa{background:#25D366;border-color:#25D366;color:#06301A;}
.btn--wa:hover{background:#1FBE5B;border-color:#1FBE5B;color:#06301A;}
.btn[disabled]{opacity:.5;pointer-events:none;}

.link-t{
  display:inline-flex;align-items:center;gap:.45em;font-weight:600;
  font-size:var(--t-sm);color:var(--accent-ink);
  border-bottom:1.5px solid currentColor;padding-bottom:1px;
  transition:gap var(--d-1) var(--e-out),opacity var(--d-1);
}
.link-t:hover{gap:.8em;}
.link-t svg{width:.85em;height:.85em;}

/* ---------- 5. Marquesina ---------- */
.marquee{
  overflow:hidden;border-block:1px solid var(--rule);
  padding-block:1.05rem;background:var(--bg-alt);
}
.marquee__track{display:flex;width:max-content;animation:marq 46s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__grp{display:flex;align-items:center;gap:2.6rem;padding-inline:1.3rem;}
.marquee__grp span{
  font-family:var(--f-brand);font-weight:700;font-size:var(--t-sm);
  letter-spacing:-.008em;color:var(--ink-2);white-space:nowrap;
}
.marquee__grp i{font-style:normal;color:var(--accent);font-size:.62em;}
@keyframes marq{ to{ transform:translateX(-50%);} }

/* ---------- 6. Fichas ---------- */
.ficha{
  position:relative;background:var(--bg);border:1px solid var(--rule);
  border-radius:var(--r-sm);padding:1.7rem 1.6rem 1.6rem;
  display:flex;flex-direction:column;gap:.75rem;
  transition:border-color var(--d-2) var(--e-out),transform var(--d-2) var(--e-out),box-shadow var(--d-2);
}
.ficha:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--sh-1);}
.ficha__n{
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.14em;
  color:var(--accent-ink);
}
.ficha h3{font-size:var(--t-md);}
.ficha p{color:var(--ink-2);font-size:var(--t-sm);}
.ficha__pie{margin-top:auto;padding-top:.9rem;}
.ficha--enlace::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
}
.ficha__icono{width:34px;height:34px;color:var(--accent-ink);}
.is-dark .ficha{background:rgba(255,255,255,.035);border-color:var(--rule);}
.is-dark .ficha:hover{border-color:var(--jade-soft);background:rgba(255,255,255,.06);}
.is-dark .lista li::before{background:var(--jade-soft);}

/* Lista con marca cuadrada. Es la viñeta del sistema: un cuadrado de 5 px,
   el mismo gesto que el «grado» del logotipo. */
.lista{display:grid;gap:.45rem;margin-top:.3rem;}
.lista li{
  font-size:var(--t-sm);color:var(--ink-2);padding-left:1.05rem;position:relative;
}
.lista li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:1px;background:var(--accent);
}
.lista--suelta li{padding-block:.15rem;}

/* ---------- 7. Cifras ---------- */
.kpis{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);}
@media(min-width:640px){ .kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));} }
.kpi{background:var(--bg);padding:1.6rem 1.4rem;}
.kpi b{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(2rem,4vw,3.1rem);line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.kpi b em{font-style:normal;color:var(--accent-ink);}
.kpi span{display:block;margin-top:.55rem;font-size:var(--t-sm);color:var(--ink-2);}
.kpi small{display:block;margin-top:.4rem;font-size:var(--t-xs);color:var(--ink-3);}

/* ---------- 8. Pasos numerados ---------- */
.pasos{counter-reset:p;display:grid;gap:0;}
.paso{
  counter-increment:p;display:grid;gap:.4rem 1.6rem;
  padding-block:1.7rem;border-top:1px solid var(--rule);
  grid-template-columns:auto 1fr;align-items:start;
}
.paso:last-child{border-bottom:1px solid var(--rule);}
.paso::before{
  content:counter(p,decimal-leading-zero);
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.14em;
  color:var(--accent-ink);padding-top:.5em;
}
.paso h3{font-size:var(--t-md);grid-column:2;}
/* El :not() no es un adorno. .paso__t también es un <p>, y sin excluirlo
   `.paso p` (0,1,1) gana en especificidad a `.paso__t` (0,1,0): la etiqueta
   se iba a la columna del párrafo y se pintaba encima del texto. */
.paso p:not(.paso__t){grid-column:2;color:var(--ink-2);max-width:60ch;}
.paso .paso__t{
  grid-column:2;font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--ink-3);margin-top:.35rem;
}
@media(min-width:820px){
  /* Filas explícitas: sin ellas, el párrafo que ocupa las dos reparte su
     alto entre ambas y la etiqueta de fase se despega del título. */
  .paso{grid-template-columns:auto minmax(0,.72fr) minmax(0,1fr);
        grid-template-rows:auto 1fr;}
  .paso h3{grid-column:2;grid-row:1;}
  .paso p:not(.paso__t){grid-column:3;grid-row:1 / span 2;}
  .paso .paso__t{grid-column:2;grid-row:2;}
}

/* ---------- 9. La traza: el componente que explica un agente ----------
   Es una consola honesta. Cada línea es un paso real del proceso, con su
   marca de tiempo y quién lo ejecuta: el agente o una persona. Los pasos que
   requieren firma humana van marcados, y ese es justamente el argumento. */
.traza{
  background:#04101B;border:1px solid rgba(255,255,255,.13);border-radius:var(--r-sm);
  font-family:var(--f-mono);font-size:var(--t-xs);line-height:1.75;
  overflow:hidden;color:#C7D4E0;
}
.traza__barra{
  display:flex;align-items:center;gap:.7rem;padding:.72rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);
}
.traza__orbi{width:22px;height:auto;flex:0 0 auto;}
.traza__punto{width:8px;height:8px;border-radius:50%;background:var(--jade-soft);flex:0 0 auto;}
.traza__punto[data-vivo]{animation:pulso 1.9s var(--e-io) infinite;}
@keyframes pulso{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.72);} }
.traza__tit{letter-spacing:.13em;text-transform:uppercase;font-size:var(--t-micro);color:#8FA2B4;}
/* Alto suficiente para los siete pasos del proceso más largo. Con 340 px la
   última línea —la que lleva la firma humana, que es el argumento— quedaba
   cortada justo en el borde. */
.traza__cuerpo{padding:.9rem 1rem 1.1rem;max-height:min(62vh,470px);overflow-y:auto;}
.traza__l{
  display:grid;grid-template-columns:auto auto 1fr;gap:.55rem .8rem;
  padding-block:.24rem;opacity:0;transform:translateY(5px);
  transition:opacity .34s var(--e-out),transform .34s var(--e-out);
}
.traza__l.is-in{opacity:1;transform:none;}
.traza__l time{color:#6E8296;font-variant-numeric:tabular-nums;}
.traza__l b{
  font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  font-size:.62rem;padding:.16em .5em;border-radius:2px;align-self:center;
  border:1px solid currentColor;
}
.traza__l[data-quien="agente"] b{color:var(--jade-soft);}
.traza__l[data-quien="erp"] b{color:var(--amarillo-soft);}
.traza__l[data-quien="persona"] b{color:var(--naranja-soft);}
.traza__l span{color:#C7D4E0;}
.traza__l em{font-style:normal;color:#8FA2B4;}
.traza__pie{
  padding:.75rem 1rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;
  color:#8FA2B4;font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;
}
.traza__pie span{white-space:nowrap;}
.traza__pie b{color:var(--jade-soft);font-weight:600;}

/* Selector de tareas que alimenta la traza */
.tareas{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.1rem;}
.tarea{
  font-size:var(--t-xs);font-weight:600;padding:.52em 1em;border-radius:var(--r-pill);
  border:1px solid var(--rule);color:var(--ink-2);background:transparent;
  transition:border-color var(--d-1),color var(--d-1),background var(--d-1);
}
.tarea:hover{border-color:var(--ink-3);color:var(--ink);}
.tarea[aria-pressed="true"]{background:var(--jade);border-color:var(--jade);color:var(--azul);}
.is-dark .tarea{border-color:rgba(255,255,255,.22);color:#A7B6C6;}
.is-dark .tarea:hover{border-color:#fff;color:#fff;}
.is-dark .tarea[aria-pressed="true"]{background:var(--jade);border-color:var(--jade);color:var(--azul);}

/* ---------- 9 bis. ORBI ----------
   La mascota no es un adorno: es la marca de agua que distingue lo que ha
   hecho una máquina de lo que ha hecho una persona. Por eso aparece siempre
   junto a un texto que lo explica, nunca sola. */
.orbi{display:grid;gap:var(--gut);align-items:center;}
@media(min-width:820px){ .orbi{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);} }
.orbi__fig{
  margin:0;display:grid;place-items:center;padding:2.2rem;
  background:rgba(255,255,255,.04);border:1px solid var(--rule);border-radius:var(--r-sm);
  position:relative;overflow:hidden;
}
.orbi__fig img,.orbi__fig svg{width:min(230px,72%);height:auto;}
.orbi__fig figcaption{
  margin-top:1.2rem;font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);
}
/* flota despacio: da señal de vida sin distraer */
.orbi__fig img{animation:flota 5.2s var(--e-io) infinite alternate;}
@keyframes flota{ from{transform:translateY(-5px);} to{transform:translateY(5px);} }

/* La misma cara, en pequeño, para marcar un párrafo como «esto lo hace la máquina» */
.orbi-sello{
  display:inline-flex;align-items:center;gap:.6rem;font-size:var(--t-xs);
  font-weight:600;color:var(--accent-ink);
}
.orbi-sello img{width:26px;height:auto;flex:0 0 auto;}

/* ---------- 10. Aurora: el recorrido como luz ----------
   Se usa solo en bloques oscuros y siempre por detrás del contenido. Es el
   único sitio donde el degradado aparece a gran tamaño. */
.aurora{position:relative;overflow:hidden;isolation:isolate;}
.aurora__luz{
  position:absolute;z-index:-1;pointer-events:none;filter:blur(70px);opacity:.5;
  inset:-25% -10% auto 30%;height:min(70vh,620px);
  background:
    radial-gradient(closest-side,rgba(255,94,19,.55),transparent 72%) 78% 22%/58% 68% no-repeat,
    radial-gradient(closest-side,rgba(242,169,0,.42),transparent 72%) 52% 44%/56% 66% no-repeat,
    radial-gradient(closest-side,rgba(15,169,127,.55),transparent 72%) 22% 62%/62% 74% no-repeat;
  animation:deriva 26s var(--e-io) infinite alternate;
}
@keyframes deriva{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-5%,4%,0) scale(1.12); }
}

/* ---------- 11. Órbita animada ---------- */
.orbita{width:100%;height:auto;}
.orbita__arco{
  stroke-dasharray:var(--dash,1000);stroke-dashoffset:var(--dash,1000);
  transition:stroke-dashoffset 1.6s var(--e-out);
}
.orbita.is-in .orbita__arco{stroke-dashoffset:0;}
.orbita__grado{opacity:0;transform-origin:center;transition:opacity .4s var(--e-out) 1.4s;}
.orbita.is-in .orbita__grado{opacity:1;}

/* ---------- 12. Formularios ---------- */
.campo{display:flex;flex-direction:column;gap:.4rem;}
.campo > label,.grupo__t{
  font-size:var(--t-xs);font-weight:600;letter-spacing:.02em;color:var(--ink-2);
}
.campo .pista{font-size:var(--t-xs);color:var(--ink-3);}
.campo input,.campo select,.campo textarea{
  width:100%;background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:.82rem .95rem;font-size:var(--t-sm);color:var(--ink);
  transition:border-color var(--d-1),box-shadow var(--d-1);
}
.campo textarea{min-height:130px;resize:vertical;}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,169,127,.18);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--ink-3);}
.campo[data-error] input,.campo[data-error] select,.campo[data-error] textarea{border-color:#C6301C;}
.campo .error{font-size:var(--t-xs);color:#C6301C;font-weight:500;}

.grupo{border:0;padding:0;margin:0;}
.grupo__t{display:block;margin-bottom:.75rem;}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip{
  position:relative;display:inline-flex;align-items:center;gap:.5em;
  font-size:var(--t-xs);font-weight:600;padding:.6em 1em;
  border:1px solid var(--rule);border-radius:var(--r-pill);
  color:var(--ink-2);cursor:pointer;
  transition:border-color var(--d-1),color var(--d-1),background var(--d-1);
}
.chip input{position:absolute;opacity:0;width:0;height:0;}
.chip__p{
  width:15px;height:15px;border:1.5px solid var(--rule);border-radius:4px;
  flex:0 0 auto;display:grid;place-items:center;transition:all var(--d-1);
}
.chip__p::after{
  content:"";width:7px;height:7px;border-radius:1.5px;background:var(--azul);
  transform:scale(0);transition:transform var(--d-1) var(--e-spring);
}
.chip:hover{border-color:var(--ink-3);color:var(--ink);}
.chip:has(input:checked){background:var(--jade);border-color:var(--jade);color:var(--azul);}
.chip:has(input:checked) .chip__p{border-color:var(--azul);}
.chip:has(input:checked) .chip__p::after{transform:scale(1);}
.chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px;}
/* Sin :has() (navegadores viejos) el JS pone la clase a mano. */
.chip.is-on{background:var(--jade);border-color:var(--jade);color:var(--azul);}
.chip.is-on .chip__p{border-color:var(--azul);}
.chip.is-on .chip__p::after{transform:scale(1);}

.condicional{
  display:none;margin-top:1rem;padding-left:1rem;
  border-left:2px solid var(--jade);
}
.condicional[data-on]{display:block;animation:abre .4s var(--e-out);}
@keyframes abre{ from{opacity:0;transform:translateY(-6px);} }

/* Campo trampa: fuera de pantalla, no display:none. Algunos robots ignoran
   los campos ocultos con display:none, pero rellenan los que solo están
   desplazados. */
.trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-xs);color:var(--ink-2);}
.consent input{margin-top:.25em;accent-color:var(--jade);width:16px;height:16px;flex:0 0 auto;}
.consent a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;}

.aviso{
  padding:1rem 1.15rem;border-radius:var(--r-sm);font-size:var(--t-sm);
  border:1px solid var(--rule);background:var(--bg-alt);color:var(--ink-2);
}
.aviso--ok{border-color:var(--jade);background:rgba(15,169,127,.08);color:var(--jade-ink);}
.aviso--mal{border-color:#C6301C;background:rgba(198,48,28,.07);color:#9A2415;}

/* El texto de la consulta, por si el navegador no deja copiar al portapapeles.
   Aparece solo en ese caso, ya seleccionado, para que baste con Ctrl+C. */
.consulta-cruda{
  display:block;width:100%;margin-top:.9rem;padding:.8rem;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--papel);
  font-family:var(--f-mono);font-size:var(--t-xs);line-height:1.6;color:var(--ink);
  resize:vertical;
}

/* ---------- 13. WhatsApp ---------- */
.wa{
  display:grid;gap:1.2rem;padding:1.7rem;border:1px solid var(--rule);
  border-radius:var(--r-sm);background:var(--bg-alt);
}
.wa__cab{display:flex;align-items:center;gap:.8rem;}
.wa__ic{
  width:42px;height:42px;border-radius:12px;background:#25D366;color:#06301A;
  display:grid;place-items:center;flex:0 0 auto;
}
.wa__ic svg{width:24px;height:24px;}
.wa h3{font-size:var(--t-md);}
.wa p{font-size:var(--t-sm);color:var(--ink-2);}
.wa__flotante{
  position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:100;
  width:56px;height:56px;border-radius:50%;background:#25D366;color:#06301A;
  display:grid;place-items:center;box-shadow:0 8px 30px rgba(7,23,38,.28);
  transform:translateY(90px) scale(.9);opacity:0;
  transition:transform .5s var(--e-spring),opacity .35s var(--e-out),box-shadow var(--d-2);
}
.wa__flotante[data-on]{transform:none;opacity:1;}
.wa__flotante:hover{box-shadow:0 12px 38px rgba(7,23,38,.36);}
.wa__flotante svg{width:29px;height:29px;}

/* ---------- 14. Cabecera de página interior ---------- */
.phead{
  background:var(--prof);color:#fff;padding-block:calc(var(--header-h) + 4.5rem) 4rem;
  position:relative;overflow:hidden;
}
.phead__in{position:relative;z-index:1;}
.phead h1{font-size:var(--t-xxl);max-width:20ch;}
.phead .lead{margin-top:1.3rem;color:#A7B6C6;}
.phead__migas{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.5rem;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase;color:#8FA2B4;
}
.phead__migas a:hover{color:var(--jade-soft);}
.phead__migas i{font-style:normal;color:var(--jade-soft);}

/* ---------- 15. Llamada final ---------- */
.cierre{background:var(--prof);color:#fff;position:relative;overflow:hidden;}
.cierre__in{position:relative;z-index:1;text-align:center;display:grid;gap:1.5rem;justify-items:center;}
.cierre h2{font-size:var(--t-xl);max-width:19ch;}
.cierre p{color:#A7B6C6;max-width:52ch;}
.cierre__btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;}

/* ---------- 16. Pie ---------- */
.site-footer{background:var(--prof);color:var(--ink-2);padding-block:4rem 2rem;}
.site-footer__top{
  display:grid;gap:2.4rem;padding-bottom:2.6rem;border-bottom:1px solid var(--rule);
}
@media(min-width:900px){ .site-footer__top{grid-template-columns:1.3fr 1fr 1fr 1fr;} }
/* Rótulos de columna del pie. Son <h2> y no <h4> para no dejar un salto de
   nivel detrás del último <h2> de la página; el tamaño lo pone el estilo. */
.site-footer__t{
  font-size:var(--t-micro);letter-spacing:.19em;text-transform:uppercase;
  color:#8FA2B4;font-family:var(--f-body);font-weight:600;margin-bottom:1rem;
  line-height:1.4;
}
.site-footer ul{display:grid;gap:.55rem;}
.site-footer a{font-size:var(--t-sm);color:#A7B6C6;transition:color var(--d-1);}
.site-footer a:hover{color:var(--jade-soft);}
.site-footer__marca{max-width:34ch;}
.site-footer__marca p{font-size:var(--t-sm);color:#8FA2B4;margin-top:1rem;}
.site-footer__legal{
  display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;justify-content:space-between;
  padding-top:1.6rem;font-size:var(--t-xs);color:#8FA2B4;
}
.site-footer__legal nav{display:flex;flex-wrap:wrap;gap:.7rem 1.3rem;}
.hermanas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem;}
.hermana{
  display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .85rem;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);
  font-size:var(--t-xs);font-weight:600;color:#A7B6C6;transition:border-color var(--d-1),color var(--d-1);
}
.hermana i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
.hermana:hover{border-color:currentColor;color:#fff;}