/* Zona5: sistema de diseño «cristal» (v2.0, 19/10/2026) [PROPUESTA: pendiente de aprobación de Santiago]
   Marca fija: blanco, negro y los cuatro colores de Google. Tipografía: Poppins, servida desde la propia web.
   Estilo: fondos con degradados suaves de color, tarjetas y botones de cristal (desenfoque, brillo y sombra),
   iconos y logotipos en lugar de párrafos, y el detalle plegado detrás de botones «Descúbrelo».
   Todos los colores, tamaños y márgenes salen de las variables de este bloque. */
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root {
  --ink: #1D1D1F;
  --ink-2: #424245;
  --ink-3: #6E6E73;
  --soft-on-ink: #C9CCD4;
  --line: #D2D2D7;
  --paper: #FFFFFF;
  --tint: #F5F5F7;
  --night: #0B0D12;
  --blue: #4285F4;
  --red: #EA4335;
  --yellow: #FBBC05;
  --gold: #F6B92B;      /* dorado de las estrellas del logo (muestreado del archivo del logo) */
  --gold-hi: #FFD54F;
  --gold-lo: #E39A14;
  --green: #34A853;
  --link: #0B57D0;
  --danger: #B3261E;
  --ok: #1E7B3A;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-display: clamp(2.5rem, 1.35rem + 4.6vw, 4.75rem);
  --t-title: clamp(1.75rem, 1.2rem + 2.1vw, 3rem);
  --t-sub: 1.25rem;
  --t-body: clamp(1.0625rem, 1.02rem + .15vw, 1.125rem);
  --t-small: .875rem;

  --margin: clamp(1.25rem, .6rem + 3vw, 3.5rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --r-lg: 1.75rem;
  --r-md: 1.25rem;

  /* Cristal */
  --glass-bg: linear-gradient(140deg, rgba(255,255,255,.82), rgba(255,255,255,.5));
  --glass-edge: rgba(255,255,255,.85);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 -1px 0 rgba(20,30,60,.04) inset, 0 24px 48px -18px rgba(20,30,70,.22), 0 3px 8px rgba(20,30,70,.05);
  --grad-text: linear-gradient(100deg, #1B66E8 0%, #2B8FE0 45%, #1E9E4A 100%);
}

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-Regular.woff2") format("woff2"), url("../fonts/poppins-Regular.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-Medium.woff2") format("woff2"), url("../fonts/poppins-Medium.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-Bold.woff2") format("woff2"), url("../fonts/poppins-Bold.woff") format("woff"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--tint); color: var(--ink);
  font-family: var(--font); font-size: var(--t-body); line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; }
svg { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.night :focus-visible { outline-color: #fff; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.08; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--t-display); line-height: 1.02; letter-spacing: -.04em; }
h2 { font-size: var(--t-title); }
h3 { font-size: var(--t-sub); line-height: 1.2; letter-spacing: -.02em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.muted { color: var(--ink-2); }
.small { font-size: var(--t-small); }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: .75rem 1rem; }
.skip:focus { left: 0; }
.only-js { display: none; }
.js .only-js { display: block; }
[hidden] { display: none !important; }
.grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

.wrap {
  width: 100%; max-width: 76rem; margin-inline: auto;
  padding-left: max(var(--margin), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margin), env(safe-area-inset-right, 0px));
}

/* Iconos: trazo uniforme; los logotipos de marca son rellenos */
.icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.brand-ic { fill: currentColor; stroke: none; }
.stars { width: 7.5rem; height: 1.5rem; }
.stars use { fill: var(--yellow); }

/* Eslogan: pastilla oscura con estrellas doradas y «5 estrellas» en el dorado del logo (contraste ~10:1 sobre el fondo oscuro) */
.slogan-pill { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .45rem .9rem; margin: 0; padding: .8rem 1.5rem .8rem 1.15rem; border-radius: 1.75rem; color: #fff; font-weight: 700; font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); letter-spacing: -.01em; line-height: 1.25; background: linear-gradient(180deg, #1B1D24, #0B0D12); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 16px 30px -16px rgba(11,13,18,.6); }
.slogan-pill .stars { width: 6.5rem; height: 1.3rem; flex: none; }
.slogan-pill span { text-wrap: balance; }
.gold { color: var(--gold); }

/* ============ Cristal ============ */
.glass {
  position: relative; isolation: isolate;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
}
.glass::before { /* reflejo diagonal */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 36%);
}
.glass--dark {
  background: linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 28px 56px -20px rgba(0,0,0,.7);
}
.glass--dark::before { background: linear-gradient(118deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 40%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255,255,255,.94); }
  .glass--dark { background: rgba(38,42,52,.94); }
}

/* Fondos con degradados de color (se mueven muy despacio) */
.aurora, .page-head, .center-page { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.aurora::before, .page-head::before, .center-page::before {
  content: ""; position: absolute; inset: -15% -10% 0 -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42rem 30rem at 10% 6%, rgba(66,133,244,.42), transparent 62%),
    radial-gradient(34rem 26rem at 92% 10%, rgba(251,188,5,.42), transparent 62%),
    radial-gradient(38rem 30rem at 78% 92%, rgba(52,168,83,.30), transparent 62%),
    radial-gradient(30rem 24rem at 6% 88%, rgba(234,67,53,.24), transparent 62%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .aurora::before, .page-head::before, .center-page::before { animation: drift 26s ease-in-out infinite alternate; }
}
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-2.5%, 3%, 0) scale(1.07); } }

.night {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip; color: #fff;
  background: radial-gradient(60rem 30rem at 50% -10%, #1B2440 0%, transparent 70%), var(--night);
}
.night::before {
  content: ""; position: absolute; inset: -10% -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34rem 24rem at 6% 30%, rgba(66,133,244,.34), transparent 65%),
    radial-gradient(30rem 22rem at 96% 24%, rgba(234,67,53,.24), transparent 65%),
    radial-gradient(34rem 24rem at 90% 92%, rgba(251,188,5,.22), transparent 65%),
    radial-gradient(34rem 24rem at 8% 98%, rgba(52,168,83,.26), transparent 65%);
}
@media (prefers-reduced-motion: no-preference) { .night::before { animation: drift 30s ease-in-out infinite alternate; } }
.night .muted, .night .soft { color: var(--soft-on-ink); }
.night a:not(.btn):not(.link-arrow) { color: #fff; }

/* Botones: cristal. El principal lleva el aro de los cuatro colores de Google */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 3.25rem; padding: .7rem 1.6rem;
  border: 2px solid transparent; border-radius: 999px;
  background: linear-gradient(180deg, #30343C, #14161A) padding-box, conic-gradient(from var(--spin, 0deg), #4285F4, #34A853, #FBBC05, #EA4335, #4285F4) border-box;
  color: #fff; font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 14px 28px -10px rgba(18,20,24,.6), 0 3px 6px rgba(18,20,24,.18);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-color .2s;
}
.btn::before { /* brillo */
  content: ""; position: absolute; inset: 0 0 45% 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
}
.btn::after { /* reflejo que cruza al pasar el ratón */
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg) translateX(0);
}
.btn .icon { transition: transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 20px 34px -10px rgba(18,20,24,.65), 0 4px 8px rgba(18,20,24,.2); }
.btn:hover .icon--arrow { transform: translateX(.3rem); }
.btn:active { transform: translateY(0) scale(.985); }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { animation: spin 3.2s linear infinite; }
  .btn:hover::after { transition: transform .8s var(--ease); transform: skewX(-18deg) translateX(520%); }
}
@keyframes spin { to { --spin: 360deg; } }
.btn--ghost, .btn--wa {
  background: var(--glass-bg); border-color: var(--glass-edge); color: var(--ink);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 12px 24px -12px rgba(20,30,70,.28), 0 2px 5px rgba(20,30,70,.06);
}
.btn--ghost::before, .btn--wa::before { background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)); }
.btn--ghost:hover { animation: none; box-shadow: 0 1px 0 #fff inset, 0 18px 30px -12px rgba(20,30,70,.34), 0 3px 6px rgba(20,30,70,.08); }
.btn--wa { background: linear-gradient(180deg, #3FBF63, #1E8E3E) padding-box, linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.1)) border-box; border-color: transparent; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 14px 26px -10px rgba(30,142,62,.7); }
.btn--wa:hover { animation: none; }
.btn--small { min-height: 2.75rem; padding: .4rem 1.15rem; font-size: var(--t-small); }
.btn--light {
  background: linear-gradient(180deg, #FFFFFF, #E6E9EF) padding-box, linear-gradient(180deg, #fff, rgba(255,255,255,.4)) border-box; color: var(--ink);
  box-shadow: 0 1px 0 #fff inset, 0 16px 30px -12px rgba(0,0,0,.6);
}
.btn--light::before { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0)); }
.btn--light:hover { animation: none; }
.btn--ghost-dark {
  background: linear-gradient(140deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); border-color: rgba(255,255,255,.35); color: #fff;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 14px 28px -14px rgba(0,0,0,.7);
}
.btn--ghost-dark:hover { animation: none; background: linear-gradient(140deg, rgba(255,255,255,.26), rgba(255,255,255,.1)); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .22em; }

/* Cabecera: píldora de cristal flotante */
.site-header { position: fixed; z-index: 50; top: max(.6rem, env(safe-area-inset-top, 0px)); left: 0; right: 0; padding-inline: max(.75rem, env(safe-area-inset-left, 0px)); pointer-events: none; }
.header-pill {
  pointer-events: auto; position: relative; max-width: 76rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.6rem; padding: .3rem .5rem .3rem 1.2rem; border-radius: 999px;
  background: linear-gradient(140deg, rgba(255,255,255,.92), rgba(255,255,255,.8));
  border: 1px solid var(--glass-edge);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 18px 36px -16px rgba(20,30,70,.3), 0 2px 6px rgba(20,30,70,.06);
  -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .header-pill { background: rgba(255,255,255,.96); } }
.brand { display: inline-flex; align-items: center; min-height: 2.75rem; }
.brand img { display: block; height: 2.9rem; width: auto; }
.nav ul { display: flex; align-items: center; gap: .1rem; }
.nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .95rem; border-radius: 999px;
  color: var(--ink); font-weight: 500; font-size: .98rem; text-decoration: none; transition: background-color .2s;
}
.nav a:not(.btn):hover { background: rgba(20,30,70,.07); }
.nav a[aria-current="page"] { background: rgba(20,30,70,.09); font-weight: 600; }
.nav-cta { margin-left: .4rem; }
.nav-toggle {
  display: none; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.1rem; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #30343C, #14161A); color: #fff; font: inherit; font-weight: 600; font-size: var(--t-small); cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 16px -8px rgba(18,20,24,.6);
}
.js .nav-toggle { display: inline-flex; }
.js .nav {
  display: none; position: absolute; top: calc(100% + .5rem); left: 0; right: 0; padding: 1rem 1.1rem 1.15rem; border-radius: var(--r-lg);
  background: linear-gradient(140deg, rgba(255,255,255,.94), rgba(255,255,255,.82)); border: 1px solid var(--glass-edge);
  box-shadow: 0 30px 60px -20px rgba(20,30,70,.4); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
}
.js .nav[data-open="true"] { display: block; }
.js .nav ul { flex-direction: column; align-items: stretch; gap: .1rem; }
.js .nav a:not(.btn) { min-height: 3.25rem; font-size: 1.1rem; font-weight: 600; }
.js .nav-cta { margin: .6rem 0 0; }
.js .nav-cta .btn { width: 100%; }
@media (max-width: 859px) { .nav ul { flex-wrap: wrap; } }
@media (max-width: 440px) { .btn { padding-inline: 1.3rem; } .btn-row { gap: .6rem; } .hero-head .lead { margin-bottom: 1.2rem; } .hero-cta .btn-row { margin-bottom: 0; } .way-art img, .way-art svg { max-height: 13rem; } }
@media (min-width: 860px) {
  .js .nav-toggle { display: none; }
  .js .nav, .js .nav[data-open] { display: block; position: static; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .js .nav ul { flex-direction: row; align-items: center; gap: .1rem; }
  .js .nav a:not(.btn) { min-height: 2.75rem; font-size: .98rem; font-weight: 500; }
  .js .nav a[aria-current="page"] { font-weight: 600; }
  .js .nav-cta { margin: 0 0 0 .4rem; }
  .js .nav-cta .btn { width: auto; }
}

/* Secciones */
.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.sec-head { max-width: 44rem; margin: 0 auto clamp(1.75rem, 4vw, 3rem); text-align: center; }
.sec-head h2 { margin-bottom: 0; }
.sec-head .lead { margin: .75rem auto 0; }
.lead { font-size: var(--t-body); max-width: 36rem; color: var(--ink-2); }
.night .lead { color: var(--soft-on-ink); }
.fine { margin: 1.25rem 0 0; font-size: var(--t-small); color: var(--ink-3); text-align: center; }
.night .fine { color: var(--soft-on-ink); }

/* Revelado al desplazarse */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(1.5rem) scale(.985); }
  .js .reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
  .reveal[data-d="1"] { --d: 90ms; }
  .reveal[data-d="2"] { --d: 180ms; }
  .reveal[data-d="3"] { --d: 270ms; }
}

/* Iconos en cápsulas de color, píldoras y logotipos */
.ic {
  --c1: #6BA2FF; --c2: #2B6BE0;
  display: grid; place-items: center; flex: none; width: 3.6rem; height: 3.6rem; border-radius: 1.1rem; color: #fff;
  background: linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 22px -8px var(--c2);
}
.ic .icon { width: 1.75rem; height: 1.75rem; }
.ic--red { --c1: #FF8E80; --c2: #D93A2B; }
.ic--green { --c1: #62D17F; --c2: #23903F; }
.ic--yellow { --c1: #FFDA5E; --c2: #F0A300; color: var(--ink); }
.ic--ink { --c1: #4A4F59; --c2: #14161A; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem .4rem .7rem; border-radius: 999px;
  background: var(--glass-bg); border: 1px solid var(--glass-edge); font-size: .92rem; font-weight: 500; line-height: 1.2;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 8px 16px -10px rgba(20,30,70,.3);
}
.chip .icon { width: 1.15rem; height: 1.15rem; color: var(--link); }
.chip--green .icon { color: var(--ok); }
.logo {
  display: grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; border-radius: 1rem; color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 12px 22px -10px rgba(0,0,0,.55);
}
.logo .brand-ic, .logo .icon { width: 1.65rem; height: 1.65rem; }
.logo--google { background: linear-gradient(160deg, #fff, #E9ECF1); color: #1D1D1F; }
.logo--ig { background: radial-gradient(circle at 30% 108%, #FFD46B 0%, #F9583B 42%, #D6249F 66%, #5B6CEB 100%); }
.logo--fb { background: linear-gradient(160deg, #3D8BFF, #0A5AE0); }
.logo--tt { background: linear-gradient(160deg, #2B2D31, #000); }
.logo--wa { background: linear-gradient(160deg, #3BDD7B, #17A852); }
.logo--web { background: linear-gradient(150deg, #6BA2FF, #34A853); }
.logo--link { background: linear-gradient(150deg, #FFDA5E, #F0A300); color: var(--ink); }

/* ============ Portada: hero ============ */
.hero { padding: clamp(6.5rem, 12vw, 8.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); }
.hero-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "cta" "art" "foot"; } /* móvil: los botones antes de la escena, para que se vean en la primera pantalla (auditoría 21/10) */
.hero-head { grid-area: head; } .hero-art { grid-area: art; } .hero-cta { grid-area: cta; } .hero-foot { grid-area: foot; }
@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: 2.5rem; row-gap: 0;
    grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". art" "head art" "cta art" "foot art" ". art";
  }
  .hero-art { align-self: center; }
  .hero-cta { margin-bottom: 1.5rem; }
}
.kicker {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; padding: .4rem .9rem .4rem .75rem; border-radius: 999px;
  font-size: .875rem; font-weight: 700; letter-spacing: .02em; color: var(--ink);
  background: rgba(255,255,255,.78); border: 1px solid #fff; box-shadow: 0 10px 22px -14px rgba(10,14,30,.5);
}
.kicker::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: linear-gradient(135deg, var(--gold-hi), var(--gold-lo)); box-shadow: 0 0 0 3px rgba(246,185,43,.28); }
.hero-head h1 { margin-bottom: .4em; max-width: 13em; font-size: clamp(2.05rem, 1rem + 3.5vw, 3.6rem); }
.hero-head .lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); margin-bottom: 1.5rem; max-width: 33rem; color: var(--ink-2); }
.hero-head .lead strong { font-weight: 700; color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Logotipos de destino (03/11): en columna, a la izquierda de la escena; se ilumina el del uso que se está viendo */
.tap-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55rem; }
.dst-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.dst { display: grid; justify-items: center; gap: .25rem; text-align: center; }
.dst .logo { position: relative; width: 2.6rem; height: 2.6rem; border-radius: .85rem; transition: transform .25s var(--ease); }
.dst .logo::after { content: ""; position: absolute; inset: -.28rem; border-radius: 1.1rem; border: 3px solid var(--gold); opacity: 0; transform: scale(.88); transition: opacity .2s, transform .25s var(--ease); }
.dst-n { font-size: .7rem; font-weight: 600; line-height: 1.15; color: var(--ink-2); }
.dst .logo .brand-ic, .dst .logo .icon { width: 1.35rem; height: 1.35rem; }
@media (max-width: 559px) {
  .tap-row { gap: .4rem; }
  .dst-list { gap: .5rem; }
  .dst { gap: 0; }
  .dst .logo { width: 2.35rem; height: 2.35rem; border-radius: .75rem; }
  .dst .logo .brand-ic, .dst .logo .icon { width: 1.2rem; height: 1.2rem; }
  .dst-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.logo--carta { background: linear-gradient(150deg, #5BCB78, #23903F); }
.hero[data-use="resenas"] .dst--resenas .logo,
.hero[data-use="redes"] :is(.dst--redes, .dst--fb, .dst--tt) .logo,
.hero[data-use="carta"] .dst--carta .logo,
.hero[data-use="web"] :is(.dst--web, .dst--wa) .logo { transform: translateY(-3px) scale(1.07); }
.hero[data-use="resenas"] .dst--resenas .logo::after,
.hero[data-use="redes"] :is(.dst--redes, .dst--fb, .dst--tt) .logo::after,
.hero[data-use="carta"] .dst--carta .logo::after,
.hero[data-use="web"] :is(.dst--web, .dst--wa) .logo::after { opacity: 1; transform: none; }
.hero-foot .chips { margin-bottom: 0; }
.hero { --tap-t: 7s; } /* 03/11: antes 13 s; Santiago pidió que se vea más rápido */
.hero-art { position: relative; isolation: isolate; margin: 0 auto; width: min(100%, 33rem); }
.hero-art::before {
  content: ""; position: absolute; inset: 4% 0 10% 0; z-index: -1;
  background: radial-gradient(closest-side, rgba(66,133,244,.42), rgba(52,168,83,.22) 55%, transparent 78%);
}
.mock-note { margin: .6rem 0 0; font-size: var(--t-small); line-height: 1.3; color: var(--ink-3); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .hero-head > * { animation: rise .9s var(--ease) both; }
  .hero-head > :nth-child(2) { animation-delay: .08s; }
  .hero-head > :nth-child(3) { animation-delay: .16s; }
  .hero-cta { animation: rise .9s var(--ease) .26s both; }
  .hero-foot { animation: rise .9s var(--ease) .3s both; }
  .hero-art { animation: rise 1.1s var(--ease) .1s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }

/* Escena: la foto real del soporte, el móvil se acerca, se abre el enlace y la página carga en el navegador (todo con CSS) */
.tap-stage { position: relative; aspect-ratio: 520 / 620; }
/* Un soporte distinto por cada uso (fotos reales que aportó Santiago). Cada conjunto se muestra con data-use y se posiciona en % del escenario de 520 × 620 (debe coincidir con scripts/gen_art.py) */
.stand-set { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; pointer-events: none; }
.hero[data-use="resenas"] .stand-set--resenas, .hero[data-use="redes"] .stand-set--redes, .hero[data-use="carta"] .stand-set--carta, .hero[data-use="web"] .stand-set--web { opacity: 1; }
.stand-img { --stand-sh: drop-shadow(0 20px 18px rgba(10,14,30,.26)); position: absolute; left: 3.077%; top: 1.613%; width: 76.923%; height: auto; display: block; filter: var(--stand-sh); }
.stand--carta { left: 1.358%; width: 80.361%; } .stand--web { left: 1.469%; width: 80.14%; }
.stand-set--redes .stand-img { --stand-sh: drop-shadow(0 10px 9px rgba(10,14,30,.26)); }
.stand--tiktok { left: 0; top: 11.463%; width: 38.462%; } .stand--instagram { left: 29.423%; top: 16.169%; width: 41.154%; } .stand--facebook { left: 61.538%; top: 10.484%; width: 38.462%; }
.stand-shadow { position: absolute; left: 0; top: 83%; width: 84%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10,14,30,.4), rgba(10,14,30,0)); filter: blur(6px); }
.stand-shadow--tiktok { left: 0; top: 49.9%; width: 38.462%; height: 5.5%; } .stand-shadow--instagram { left: 29.423%; top: 59.2%; width: 41.154%; height: 5.5%; } .stand-shadow--facebook { left: 61.538%; top: 49.9%; width: 38.462%; height: 5.5%; }
.tap { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tap .clock { font-family: var(--font); font-weight: 600; font-size: 54px; fill: #fff; }
.tap .bn-glass { fill: rgba(255,255,255,.88); stroke: #fff; stroke-width: 1.5; }
.tap .bn-t { font-family: var(--font); font-weight: 700; font-size: 13.5px; fill: #16191D; }
.tap .bn-s { font-family: var(--font); font-weight: 500; font-size: 11.5px; fill: #4B4F57; }
.tap .d-t { font-family: var(--font); font-weight: 700; font-size: 18px; fill: #16191D; }
.tap .d-b { font-family: var(--font); font-weight: 700; font-size: 14px; fill: #fff; }
.tap .d-w { font-family: var(--font); font-weight: 700; font-size: 20px; fill: #fff; letter-spacing: .14em; }
.tap .br-u { font-family: var(--font); font-weight: 600; font-size: 10.5px; fill: #3C4048; }
.tap .br-s { font-family: var(--font); font-weight: 600; font-size: 10px; fill: #16191D; }
.tap .bt--tt { fill: #0B0B0F; } .tap .bt--fb { fill: #1877F2; }
.tap .bt--google { fill: #fff; } .tap .bt--ig { fill: url(#g-ig); } .tap .bt--green { fill: url(#g-green); } .tap .bt--ink { fill: #16191D; }
.tap .dstar { fill: #FBBC05; }
.tap .bg { fill: #fff; } .tap .bg--ink { fill: #16191D; }
.tap .bg--cy { fill: #25F4EE; } .tap .bg--pk { fill: #FE2C55; } .tap .bg--fb { fill: #1877F2; }
.tap .gl { fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tap .wave, .tap .glow, .tap .banner, .tap .dstar, .tap .ld-spin { transform-box: fill-box; transform-origin: center; }
.tap .prog { transform-box: fill-box; transform-origin: left center; }
.tap .wave, .tap .glow { opacity: 0; }
.tap .u { opacity: 0; transition: opacity .35s; }
.hero[data-use="resenas"] .u--resenas, .hero[data-use="redes"] .u--redes, .hero[data-use="carta"] .u--carta, .hero[data-use="web"] .u--web { opacity: 1; }
.tap .scene--one { transition: opacity .35s; }
.hero[data-use="redes"] .tap .scene--one { opacity: 0; }
.tap .tap-phone { transform-box: fill-box; transform-origin: center; }
/* Cada móvil crece desde su sitio hasta su zoom: --zo es el origen (centro en reposo), --zx/--zy el desplazamiento y --zk la escala extra */
.tap .tap-zoom { --zx: -151px; --zy: -96px; --zk: 1.65; transform-box: view-box; transform-origin: 413px 408px; }
.tap .ph--tt .tap-zoom { transform-origin: 100px 440px; --zx: -16px; --zy: -130px; --zk: 1.367; }
.tap .ph--ig .tap-zoom { transform-origin: 260px 440px; --zx: 0px; --zy: -130px; --zk: 1.367; }
.tap .ph--fb .tap-zoom { transform-origin: 420px 440px; --zx: 16px; --zy: -130px; --zk: 1.367; }
/* Estado de reposo (movimiento reducido): el móvil junto al soporte con la página ya cargada */
.tap .lock { opacity: 0; }
.tap .browser, .tap .dest { opacity: 1; }
.tap .skel, .tap .prog, .tap .ld-ui { opacity: 0; }
.tap-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .4rem 0 0; }
.tap-step {
  margin: 0; display: inline-flex; align-items: center; gap: .6rem; padding: .45rem 1.05rem .45rem .5rem; border-radius: 999px; max-width: 100%;
  font-size: .9375rem; font-weight: 600; line-height: 1.25; color: var(--ink);
  background: rgba(255,255,255,.84); border: 1px solid #fff; box-shadow: 0 10px 22px -14px rgba(10,14,30,.5);
}
.tap-step b { display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: .8125rem; }
@media (max-width: 420px) { .tap-step { font-size: .875rem; } }
@media (prefers-reduced-motion: no-preference) {
  .tap .tap-phone { animation: tp-phone var(--tap-t) infinite both; }
  .tap .tap-zoom { animation: tp-zoom var(--tap-t) infinite both; }
  .stand-img { animation: tp-dim var(--tap-t) infinite both; }
  .tap .wave { animation: tp-wave var(--tap-t) infinite both; }
  .tap .wave--2 { animation-delay: .15s; } .tap .wave--3 { animation-delay: .3s; }
  .tap .glow { animation: tp-glow var(--tap-t) infinite both; }
  .tap .lock { animation: tp-lock var(--tap-t) infinite both; }
  .tap .banner { animation: tp-banner var(--tap-t) infinite both; }
  .tap .browser { animation: tp-browser var(--tap-t) infinite both; }
  .tap .skel { animation: tp-skel var(--tap-t) infinite both; }
  .tap .prog { animation: tp-prog var(--tap-t) infinite both; }
  .tap .ld-ui { animation: tp-ld var(--tap-t) infinite both; }
  .tap .ld-spin { animation: tp-spin .8s linear infinite; }
  .tap .dest { animation: tp-dest var(--tap-t) infinite both; }
  .tap .dstar { animation: tp-star var(--tap-t) infinite both; }
  .tap .dstar:nth-of-type(2) { animation-delay: .06s; } .tap .dstar:nth-of-type(3) { animation-delay: .12s; }
  .tap .dstar:nth-of-type(4) { animation-delay: .18s; } .tap .dstar:nth-of-type(5) { animation-delay: .24s; }
  .tap-steps { display: grid; justify-items: center; min-height: 2.7rem; }
  .tap-step { grid-area: 1 / 1; opacity: 0; }
  .tap-step--1 { animation: tp-s1 var(--tap-t) infinite both; }
  .tap-step--2 { animation: tp-s2 var(--tap-t) infinite both; }
  .tap-step--3 { animation: tp-s3 var(--tap-t) infinite both; }
  .hero[data-use="resenas"] .dst--resenas .logo,
  .hero[data-use="redes"] :is(.dst--redes, .dst--fb, .dst--tt) .logo,
  .hero[data-use="carta"] .dst--carta .logo,
  .hero[data-use="web"] :is(.dst--web, .dst--wa) .logo { transform: none; animation: tp-lit var(--tap-t) infinite both; }
  .hero[data-use="resenas"] .dst--resenas .logo::after,
  .hero[data-use="redes"] :is(.dst--redes, .dst--fb, .dst--tt) .logo::after,
  .hero[data-use="carta"] .dst--carta .logo::after,
  .hero[data-use="web"] :is(.dst--web, .dst--wa) .logo::after { opacity: 0; transform: scale(.88); animation: tp-lit-ring var(--tap-t) infinite both; }
  .hero-art.is-off *, .hero-art.is-off { animation-play-state: paused !important; }
}
/* Una vuelta dura --tap-t (7 s desde el 03/11; antes 13 s): 0-16 % acerca el móvil · 16-36 % toque y aviso del enlace ·
   36-54 % el móvil crece y la página carga · 54-95 % la página del destino a la vista. El logotipo del uso se ilumina desde el principio. */
@keyframes tp-phone {
  0% { opacity: 0; transform: translate(190px, 110px) rotate(9deg); animation-timing-function: ease-out; }
  4% { opacity: 1; transform: translate(180px, 104px) rotate(8deg); animation-timing-function: cubic-bezier(.3, .8, .25, 1); }
  16% { opacity: 1; transform: none; }
  92% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(0, 26px); }
}
@keyframes tp-zoom {
  0%, 34% { transform: none; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
  43%, 100% { transform: translate(var(--zx), var(--zy)) scale(var(--zk)); }
}
@keyframes tp-dim {
  0%, 34% { filter: var(--stand-sh) brightness(1) blur(0px); }
  43%, 92% { filter: var(--stand-sh) brightness(.42) blur(2px); }
  100% { filter: var(--stand-sh) brightness(1) blur(0px); }
}
@keyframes tp-wave {
  0%, 16% { opacity: 0; transform: scale(1); }
  18% { opacity: .9; transform: scale(1); }
  28% { opacity: 0; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(2.6); }
}
@keyframes tp-glow {
  0%, 16% { opacity: 0; transform: scale(.5); }
  20% { opacity: 1; transform: scale(1); }
  29%, 100% { opacity: 0; transform: scale(1.7); }
}
@keyframes tp-lock {
  0%, 36% { opacity: 1; }
  40%, 100% { opacity: 0; }
}
@keyframes tp-banner {
  0%, 20% { opacity: 0; transform: translateY(-30px) scale(.94); animation-timing-function: cubic-bezier(.2, 1.2, .3, 1); }
  25% { opacity: 1; transform: none; }
  31% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  33% { opacity: 1; transform: scale(.95); }
  36%, 100% { opacity: 0; transform: translateY(-10px) scale(.9); }
}
@keyframes tp-browser {
  0%, 36% { opacity: 0; }
  40%, 100% { opacity: 1; }
}
@keyframes tp-skel {
  0%, 39% { opacity: 0; }
  41%, 50% { opacity: 1; }
  53%, 100% { opacity: 0; }
}
@keyframes tp-prog {
  0%, 39% { opacity: 0; transform: scaleX(0); }
  40% { opacity: 1; transform: scaleX(0); animation-timing-function: ease-out; }
  43% { opacity: 1; transform: scaleX(.35); animation-timing-function: linear; }
  48% { opacity: 1; transform: scaleX(.82); animation-timing-function: ease-in; }
  50% { opacity: 1; transform: scaleX(1); }
  53%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes tp-ld {
  0%, 39% { opacity: 0; }
  41%, 50% { opacity: 1; }
  53%, 100% { opacity: 0; }
}
@keyframes tp-spin { to { transform: rotate(360deg); } }
@keyframes tp-dest {
  0%, 50% { opacity: 0; }
  54% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes tp-star {
  0%, 54% { transform: scale(0); }
  58% { transform: scale(1.3); }
  62%, 100% { transform: scale(1); }
}
@keyframes tp-s1 {
  0%, 1% { opacity: 0; transform: translateY(8px); }
  3%, 19% { opacity: 1; transform: none; }
  22%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes tp-s2 {
  0%, 20% { opacity: 0; transform: translateY(8px); }
  24%, 36% { opacity: 1; transform: none; }
  39%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes tp-s3 {
  0%, 38% { opacity: 0; transform: translateY(8px); }
  42%, 93% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes tp-lit {
  0% { transform: none; }
  5%, 94% { transform: translateY(-3px) scale(1.09); }
  100% { transform: none; }
}
@keyframes tp-lit-ring {
  0% { opacity: 0; transform: scale(.88); }
  5%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(.88); }
}

/* ============ Así de fácil: dos recorridos ============ */
.flows { display: grid; gap: 1.25rem; max-width: 62rem; margin-inline: auto; }
.flow { padding: clamp(1.25rem, 3vw, 2rem); }
.flow-label {
  display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0 0 1.6rem; text-align: center;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--ink);
}
.flow-label .icon { width: 1.5rem; height: 1.5rem; color: var(--link); }
.flow-steps { display: grid; gap: 1.5rem; counter-reset: s; }
.flow-steps > li { position: relative; display: flex; align-items: center; gap: 1rem; }
.flow-t { font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.flow-steps > li:not(:last-child)::after { /* conector vertical en móvil */
  content: ""; position: absolute; left: 1.8rem; top: 3.9rem; height: 1.2rem; border-left: 2px dashed rgba(20,30,70,.28);
}
@media (min-width: 700px) {
  .flow-steps { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .flow-steps--4 { grid-template-columns: repeat(4, 1fr); }
  .flow-steps > li { flex-direction: column; text-align: center; gap: .9rem; padding-inline: .5rem; }
  .flow-steps > li:not(:last-child)::after { /* conector horizontal con guiones que avanzan */
    left: calc(50% + 2.5rem); right: calc(-50% + 2.5rem); top: calc(1.8rem - 1px); height: 2px; width: auto; border-left: 0;
    background: repeating-linear-gradient(90deg, rgba(20,30,70,.34) 0 6px, transparent 6px 12px);
  }
  .flow-steps > li:not(:last-child)::before { /* punta de flecha */
    content: ""; position: absolute; top: calc(1.8rem - 4px); right: calc(-50% + 2.5rem); width: 8px; height: 8px;
    border-top: 2px solid rgba(20,30,70,.45); border-right: 2px solid rgba(20,30,70,.45); transform: rotate(45deg);
  }
}
@media (min-width: 700px) and (prefers-reduced-motion: no-preference) {
  .flow-steps > li:not(:last-child)::after { animation: dashflow 1.1s linear infinite; }
}
@keyframes dashflow { to { background-position-x: 12px; } }

/* «Tu pedido»: mapa de decisiones (elige producto, dos caminos, cada uno con sus pasos y su enlace) */
.tree-hint { margin: -.9rem 0 1.5rem; text-align: center; font-size: var(--t-small); color: var(--ink-3); }
.tree { display: grid; justify-items: center; }
.tree-start {
  display: inline-flex; align-items: center; gap: .9rem; padding: .55rem 1.5rem .55rem .55rem; border-radius: 999px;
  background: rgba(255,255,255,.88); border: 1px solid #fff; box-shadow: 0 14px 28px -16px rgba(20,30,70,.45);
}
.tree-start .ic { width: 3rem; height: 3rem; border-radius: 1rem; }
.tree-start .flow-t { font-size: 1.05rem; }
.tree-split { display: none; }
.tree-branches { display: grid; gap: 2.9rem; width: 100%; margin-top: 1.9rem; }
.branch { position: relative; display: grid; align-content: start; justify-items: center; gap: 0; padding: 1.1rem 1rem 1.3rem; border-radius: var(--r-lg); background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.9); }
.branch::before { /* flecha desde «Eliges tu producto» en móvil; en la segunda, «o» */
  content: ""; position: absolute; left: 50%; bottom: 100%; height: 1.9rem; margin-bottom: 0; border-left: 2px dashed rgba(20,30,70,.34);
}
.branch--std::before { top: -1.9rem; bottom: auto; }
.branch--pers::before { content: "o"; top: -2.5rem; bottom: auto; height: auto; width: 1.5rem; margin-left: -.75rem; border: 0; text-align: center; font-weight: 700; font-size: var(--t-small); color: var(--ink-3); line-height: 1.5rem; }
.branch-head, .branch-head:hover { text-decoration: none; }
.branch-head {
  position: relative; display: grid; justify-items: center; gap: .55rem; width: 100%; max-width: 20rem; margin-bottom: 1.4rem; padding: .85rem 1rem; border-radius: 1.25rem; text-align: center; color: var(--ink);
  background: rgba(255,255,255,.92); border: 1px solid #fff; border-top: 4px solid var(--bc, #4285F4);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 14px 26px -16px rgba(20,30,70,.5);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.branch--std { --bc: #4285F4; } .branch--pers { --bc: #FBBC05; }
.branch-t { display: grid; gap: .15rem; }
.branch-t b { font-size: 1.1rem; letter-spacing: -.015em; }
.branch-t small { font-size: var(--t-small); color: var(--ink-3); line-height: 1.3; }
.branch-go { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-small); font-weight: 700; color: var(--link); }
.branch-go .icon { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
.branch-head:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 20px 30px -16px rgba(20,30,70,.55); }
.branch-head:hover .branch-go .icon { transform: translateX(3px); }
.branch-steps { display: grid; justify-items: center; width: 100%; }
.branch-steps > li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; padding-bottom: 2.3rem; }
.branch-steps > li:last-child { padding-bottom: 0; }
.branch-steps > li:not(:last-child)::after { /* conector vertical con punta de flecha */
  content: ""; position: absolute; left: 50%; bottom: .3rem; height: 1.6rem; border-left: 2px dashed rgba(20,30,70,.34);
}
.branch-steps > li:not(:last-child)::before {
  content: ""; position: absolute; left: calc(50% - 5px); bottom: calc(.3rem + 1px); width: 8px; height: 8px;
  border-right: 2px solid rgba(20,30,70,.45); border-bottom: 2px solid rgba(20,30,70,.45); transform: rotate(45deg);
}
.branch-art { display: grid; justify-items: center; gap: .2rem; width: 100%; }
.branch-art img { display: block; width: 100%; max-width: 9.5rem; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: .9rem; background: #F4F5F8; }
.branch-cap { font-size: .66rem; line-height: 1.2; color: var(--ink-3); }
/* «Recomendado» (03/11, pedido por Santiago): marco de guiones dorados que avanzan alrededor del camino personalizado */
.branch--rec { border-color: transparent; background: rgba(255,250,235,.7); }
.rec-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rec-frame rect { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 10 7; }
@media (prefers-reduced-motion: no-preference) { .rec-frame rect { animation: rec-ants 1.1s linear infinite; } }
@keyframes rec-ants { to { stroke-dashoffset: -17; } }
.rec-badge {
  position: absolute; top: 0; left: 50%; z-index: 2; transform: translate(-50%, -50%); margin: 0; padding: .25rem .85rem; border-radius: 999px; white-space: nowrap;
  font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; color: var(--ink);
  background: linear-gradient(135deg, var(--gold-hi), var(--gold-lo)); box-shadow: 0 8px 16px -8px rgba(180,120,0,.6);
}
.ic-link { display: block; border-radius: 1.1rem; }
.ic-link .ic { transition: transform .25s var(--ease), box-shadow .25s; }
.ic-link:hover .ic { transform: translateY(-3px) scale(1.06); }
@media (min-width: 760px) {
  .tree-split { display: block; position: relative; z-index: 1; width: 100%; height: 3.4rem; margin-top: .1rem; }
  .tree-split::before { content: ""; position: absolute; left: 50%; top: 0; height: 1.6rem; border-left: 2px dashed rgba(20,30,70,.34); }
  .tree-split::after { content: ""; position: absolute; left: 25%; right: 25%; top: 1.6rem; border-top: 2px dashed rgba(20,30,70,.34); }
  .tree-split i { position: absolute; top: 1.6rem; bottom: 0; border-left: 2px dashed rgba(20,30,70,.34); }
  .tree-split i:nth-child(1) { left: 25%; } .tree-split i:nth-child(2) { left: 75%; }
  .tree-split i::after { content: ""; position: absolute; left: -5px; bottom: 1px; width: 8px; height: 8px; border-right: 2px solid rgba(20,30,70,.45); border-bottom: 2px solid rgba(20,30,70,.45); transform: rotate(45deg); }
  .tree-branches { grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 0; }
  .branch::before, .branch--pers::before { display: none; }
  .branch-head { min-height: 8.2rem; align-content: center; }
}

/* Botón «Descúbrelo» y detalle plegado */
.more { margin-top: 1.5rem; text-align: center; }
.more > summary {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .4rem 1.2rem .4rem 1rem; border-radius: 999px; cursor: pointer; list-style: none;
  background: var(--glass-bg); border: 1px solid var(--glass-edge); font-weight: 600; font-size: var(--t-small); color: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 10px 20px -12px rgba(20,30,70,.35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { transform: translateY(-1px); }
.more > summary .icon { width: 1.1rem; height: 1.1rem; transition: transform .3s var(--ease); }
.more[open] > summary .icon { transform: rotate(45deg); }
.more-body { margin: 1rem auto 0; max-width: 46rem; padding: 1.25rem 1.5rem; text-align: left; border-radius: var(--r-md); }
.more-body > :last-child { margin-bottom: 0; }
.more-body ul { display: grid; gap: .75rem; }
.more-body li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .75rem; }
.more-body li .icon { width: 1.2rem; height: 1.2rem; margin-top: .25rem; color: var(--ok); stroke-width: 2.4; }
.more-body p { color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .more[open] .more-body { animation: open-in .4s var(--ease) both; } }
@keyframes open-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
.night .more > summary { background: linear-gradient(140deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); border-color: rgba(255,255,255,.3); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.3) inset; }
.night .more-body p, .night .more-body li { color: var(--soft-on-ink); }
.night .more-body li .icon { color: #7EE0A0; }

/* ============ Mapa mental: un chip, el enlace que tú elijas ============ */
.mind { padding-block: clamp(3.5rem, 7vw, 6rem); }
.mind .sec-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.map { position: relative; max-width: 66rem; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.map-lines { display: none; }
.node { padding: 1rem .9rem 1.1rem; display: grid; justify-items: center; gap: .75rem; text-align: center; border-radius: var(--r-md); }
.node-logos { display: flex; justify-content: center; gap: .45rem; }
.node-logos .logo { width: 2.6rem; height: 2.6rem; border-radius: .8rem; }
.node-logos .logo .brand-ic, .node-logos .logo .icon { width: 1.35rem; height: 1.35rem; }
.node-label { font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.node-sub { margin: 0; font-size: var(--t-small); color: var(--soft-on-ink); line-height: 1.3; }
.node .stars { width: 6rem; height: 1.2rem; }
.node .art-mini { width: 6.5rem; height: auto; }
.node--center { grid-column: 1 / -1; justify-self: center; width: 9.5rem; height: 9.5rem; padding: 0; align-content: center; gap: .15rem; border-radius: 50%; position: relative; margin-bottom: 1.25rem; }
.node--center::after { content: ""; position: absolute; left: 50%; top: 100%; height: 1.25rem; border-left: 2px dashed rgba(255,255,255,.4); }
.node--center .icon { width: 2.6rem; height: 2.6rem; color: #fff; }
.node--center .node-label { font-size: 1rem; }
.node--center { border: 5px solid transparent; background: linear-gradient(150deg, #20263A, #0F121B) padding-box, conic-gradient(from var(--spin, 0deg), #4285F4, #34A853, #FBBC05, #EA4335, #4285F4) border-box; }
.node--center::before { display: none; }
.node--resenas { --nc: var(--blue); } .node--redes { --nc: var(--red); } .node--carta { --nc: var(--green); } .node--web { --nc: var(--yellow); }
.node:not(.node--center) { border-top: 3px solid var(--nc); }
.art-mini { display: block; }
.art-mini .mini-t { font-family: var(--font); font-weight: 700; font-size: 11px; fill: #fff; letter-spacing: .16em; }
.art-mini .mini-gl { fill: none; stroke: #1D1D1F; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .node--center { animation: spin-loop 8s linear infinite; }
}
@keyframes spin-loop { to { --spin: 360deg; } }
@media (min-width: 900px) {
  .map { display: block; aspect-ratio: 100 / 56; }
  .map-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .map-lines path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 9; vector-effect: non-scaling-stroke; opacity: .95; }
  .node { position: absolute; width: 17rem; transform: translate(-50%, -50%); padding: 1.25rem 1.1rem 1.35rem; border-top-width: 3px; }
  .node--center { width: 11rem; height: 11rem; margin: 0; left: 50%; top: 50%; }
  .node--center::after { display: none; }
  .node--center .icon { width: 3.2rem; height: 3.2rem; }
  .node--center .node-label { font-size: 1.1rem; }
  .node--resenas { left: 16%; top: 20%; } .node--redes { left: 16%; top: 80%; }
  .node--carta { left: 84%; top: 20%; } .node--web { left: 84%; top: 80%; }
  .node-logos .logo { width: 3.25rem; height: 3.25rem; border-radius: 1rem; }
  .node-logos .logo .brand-ic, .node-logos .logo .icon { width: 1.65rem; height: 1.65rem; }
  .node .art-mini { width: 7.5rem; }
  .node .stars { width: 7.5rem; height: 1.5rem; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .map-lines path { animation: dash 1.8s linear infinite; }
  .node { transition: transform .3s var(--ease); }
  .node:not(.node--center):hover { transform: translate(-50%, calc(-50% - 4px)); }
}
@keyframes dash { to { stroke-dashoffset: -24; } }
@media (max-width: 380px) {
  .node-logos { gap: .3rem; }
  .node-logos .logo { width: 2.3rem; height: 2.3rem; }
}

/* ============ Dos formas de pedir ============ */
.ways { display: grid; gap: 1.5rem; max-width: 62rem; margin-inline: auto; }
@media (min-width: 860px) { .ways { grid-template-columns: 1fr 1fr; } }
.way { display: flex; flex-direction: column; padding: clamp(1.1rem, 3vw, 1.75rem); gap: 1rem; }
.way-art { margin: 0; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(150deg, #FFFFFF, #E4E8EF); position: relative; }
.way-art img, .product-art img, .cta-art img { mix-blend-mode: multiply; }
.way-art img { display: block; width: 100%; height: auto; max-height: 17rem; object-fit: contain; }
.way-art svg { width: 100%; height: auto; max-height: 17rem; padding: 1rem; }
.way-art svg text { font-family: var(--font); }
.way-art figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .35rem .75rem; font-size: .78rem; line-height: 1.25; color: var(--ink-3); background: linear-gradient(0deg, rgba(255,255,255,.85), rgba(255,255,255,0)); text-align: center; }
.way h3 { margin: 0; font-size: 1.5rem; }
.menu { display: grid; gap: .55rem; margin: 0; }
.menu > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-radius: 1rem; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }
.menu dt { display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; }
.menu dt .icon { color: var(--link); }
.menu dd { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.menu dd small { margin-left: .3rem; font-size: var(--t-small); font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.price-iva { margin: 0; font-size: var(--t-small); line-height: 1.4; color: var(--ink-3); }
.way .btn { align-self: flex-start; }
.way .more { margin-top: 0; text-align: left; }
.way .more-body { margin-left: 0; padding: 1rem 1.15rem; }

/* ============ Para tu negocio ============ */
.sectors-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; max-width: 62rem; margin-inline: auto; }
@media (min-width: 860px) { .sectors-grid { grid-template-columns: repeat(4, 1fr); } }
.sector { display: grid; justify-items: center; gap: .8rem; padding: 1.4rem .9rem 1.5rem; text-align: center; border-radius: var(--r-md); }
.sector h3 { margin: 0; font-size: 1.1rem; }
.sector p { margin: 0; font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .sector { transition: transform .3s var(--ease); }
  .sector:hover { transform: translateY(-4px); }
}

/* ============ Quién está detrás ============ */
.founder { display: grid; gap: 1.5rem; align-items: center; max-width: 62rem; margin-inline: auto; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 2rem; }
@media (min-width: 800px) { .founder { grid-template-columns: auto 1fr; gap: 3rem; } }
.founder-mark { display: grid; place-items: center; width: clamp(8rem, 22vw, 12rem); aspect-ratio: 1; border-radius: 2rem; background: linear-gradient(150deg, #fff, #E6E9F0); box-shadow: 0 1px 0 #fff inset, 0 18px 36px -16px rgba(20,30,70,.3); }
.founder-mark img { width: 72%; height: auto; }
.founder h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom: 1rem; }
.founder .more { text-align: left; margin-top: 1.25rem; }
.founder .more-body { margin-left: 0; }
.founder .ticks { display: grid; gap: .6rem; margin: 0 0 1.5rem; }
.ticks li { display: flex; align-items: center; gap: .7rem; font-weight: 500; }
.ticks .icon { width: 1.35rem; height: 1.35rem; color: var(--ok); stroke-width: 2.2; }

/* ============ Llamada final ============ */
.cta { padding-block: clamp(3rem, 6vw, 5.5rem); }
.cta-card { display: grid; gap: 1.75rem; align-items: center; max-width: 62rem; margin-inline: auto; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 2rem; }
@media (min-width: 800px) { .cta-card { grid-template-columns: 1.3fr .9fr; gap: 2.5rem; } }
.cta h2 { margin-bottom: .4em; }
.cta p { color: var(--soft-on-ink); max-width: 28rem; }
.cta-art { margin: 0; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(150deg, #fff, #DCE1EA); }
.cta-art img { display: block; width: 100%; height: auto; }
.cta-art figcaption { padding: .35rem .75rem; font-size: .78rem; color: var(--ink-3); text-align: center; background: #fff; }

/* ============ Páginas interiores ============ */
.page-head { padding: clamp(7rem, 12vw, 9rem) 0 clamp(2rem, 4vw, 3rem); }
.page-head .wrap { display: grid; gap: .9rem; }
.page-head h1 { margin: 0; font-size: var(--t-display); max-width: 14em; }
.page-head .lead { margin: 0; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); }
.page-head--plain::before { opacity: .55; }
.page-head--plain h1 { font-size: var(--t-title); }
.page-head a:not(.btn), .center-page a:not(.btn) { color: var(--link); }
.art { margin: 0; }
.art svg { width: 100%; height: auto; }
.art svg text { font-family: var(--font); }
.art figcaption { margin-top: .5rem; font-size: var(--t-small); color: var(--ink-3); }
.grid-2 { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }

/* Catálogo */
.products { display: grid; gap: 1.5rem; padding-bottom: clamp(2rem, 4vw, 3rem); }
.product { display: grid; gap: 1.25rem; padding: clamp(1rem, 3vw, 2rem); border-radius: 2rem; }
@media (min-width: 860px) { .product { grid-template-columns: 1fr 1fr; align-items: center; gap: 2.5rem; } .product--flip .product-art { order: 2; } }
.product-art { margin: 0; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(150deg, #FFFFFF, #E4E8EF); }
.product-art img { display: block; width: 100%; height: auto; max-height: 26rem; object-fit: contain; }
.product-art figcaption { padding: .4rem .9rem; font-size: .78rem; line-height: 1.3; color: var(--ink-3); text-align: center; }
.product h2 { margin-bottom: .6rem; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); }
.product .chips { margin-bottom: 1.25rem; }
.product-desc { margin: 0 0 1rem; color: var(--ink-2); max-width: 34rem; }
.product-desc a { color: var(--link); font-weight: 600; }
/* Ruta de navegación de las páginas de producto (propuesta SEO 21/10) */
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: var(--t-small); color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.offer { display: grid; gap: .75rem; margin-bottom: 1.25rem; }
@media (min-width: 560px) { .offer { grid-template-columns: 1fr 1fr; } }
.offer > div { padding: .9rem 1.1rem; border-radius: 1.1rem; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.85); }
.offer .label { margin: 0 0 .1rem; font-weight: 500; color: var(--ink-2); font-size: var(--t-small); }
.price { margin: 0; color: var(--ink); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; }
.price small { font-size: var(--t-small); font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.offer .price-iva { margin-top: .1rem; }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; }
.buy-note { flex-basis: 100%; margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.fallback { margin: 0; padding: .9rem 1.1rem; border-radius: 1rem; background: rgba(255,255,255,.6); font-size: .95rem; }

/* Cápsulas de información: entrega, qué se personaliza, contacto */
.info-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; max-width: 62rem; margin-inline: auto; }
.info-grid--1 { max-width: 24rem; }
@media (min-width: 640px) { .info-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .info-grid--3 { grid-template-columns: repeat(3, 1fr); } .info-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.info { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--r-md); text-decoration: none; color: var(--ink); }
.info--col { flex-direction: column; text-align: center; padding: 1.5rem 1rem; }
.info b { display: block; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.info span.sub { display: block; font-size: var(--t-small); color: var(--ink-2); line-height: 1.35; }
.info a { font-weight: 600; overflow-wrap: anywhere; }
a.info:hover { text-decoration: none; }
@media (prefers-reduced-motion: no-preference) { a.info { transition: transform .25s var(--ease); } a.info:hover { transform: translateY(-3px); } }

/* Proceso de personalización: seis pasos */
@media (min-width: 700px) {
  .flow-steps--6 { grid-template-columns: repeat(3, 1fr); row-gap: 2.25rem; }
  .flow-steps--6 > li::after, .flow-steps--6 > li::before { display: none !important; }
}
@media (min-width: 1000px) {
  .flow-steps--6 { grid-template-columns: repeat(6, 1fr); row-gap: 0; }
  .flow-steps--6 > li:not(:last-child)::after, .flow-steps--6 > li:not(:last-child)::before { display: block !important; }
}

/* Formularios */
.form-card { max-width: 52rem; margin-inline: auto; padding: clamp(1.25rem, 4vw, 2.5rem); border-radius: 2rem; }
.form { display: grid; gap: 1.5rem; }
.form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 1.1rem; min-width: 0; }
.form legend { padding: 0; margin-bottom: .5rem; font-weight: 700; font-size: var(--t-sub); letter-spacing: -.02em; }
.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; min-width: 0; }
.field label { font-weight: 500; font-size: .98rem; }
.field .opt { font-weight: 400; color: var(--ink-3); }
.hint { margin: 0; font-size: var(--t-small); color: var(--ink-3); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; min-height: 3.25rem; padding: .7rem 1rem;
  border: 1px solid rgba(20,30,70,.16); border-radius: 1rem; background: rgba(255,255,255,.85); color: var(--ink);
  font: inherit; font-size: 1rem; box-shadow: 0 2px 4px rgba(20,30,70,.05) inset;
  transition: border-color .2s, box-shadow .2s;
}
textarea { min-height: 9rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(66,133,244,.28); }
.field--error input, .field--error select, .field--error textarea { border-color: var(--danger); }
.error { margin: 0; color: var(--danger); font-size: var(--t-small); font-weight: 500; }
.check { display: grid; grid-template-columns: 1.6rem 1fr; gap: .8rem; align-items: start; }
.check input { width: 1.4rem; height: 1.4rem; margin: .25rem 0 0; accent-color: var(--ink); }
.check label { font-size: .98rem; }
.check .error { grid-column: 2; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { margin: 0; padding: 1rem 1.15rem; border-radius: 1rem; border-left: 6px solid; font-weight: 500; }
.status--ok { border-color: var(--ok); background: #EEF8F1; color: #14532A; }
.status--err { border-color: var(--danger); background: #FDF0EF; color: #7A1A14; }
.form-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; max-width: 52rem; margin: 0 auto 1.5rem; }
.form-intro h2 { margin: 0; }

/* Preguntas frecuentes: desplegables de cristal */
.qa-list { display: grid; gap: .7rem; max-width: 52rem; margin-inline: auto; }
.qa { border-radius: var(--r-md); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem 1rem 1.35rem; cursor: pointer; list-style: none; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.qa summary::-webkit-details-marker { display: none; }
.qa .plus { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(20,30,70,.07); }
.qa .plus .icon { width: 1.1rem; height: 1.1rem; transition: transform .3s var(--ease); }
.qa[open] .plus .icon { transform: rotate(45deg); }
.qa p { margin: 0; padding: 0 1.35rem 1.25rem; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .qa[open] p { animation: open-in .35s var(--ease) both; } }

/* Contacto */
.contact-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.1fr .9fr; align-items: start; gap: 2rem; } }
.contact-grid .form-card { max-width: none; margin-inline: 0; }
.contact-tiles { display: grid; gap: 1rem; }
.contact-tiles .btn { justify-self: start; }

/* Textos legales */
.legal-section { padding-block: 0 clamp(3rem, 6vw, 5rem); }
.prose { max-width: 48rem; margin-inline: auto; font-size: 1.0625rem; background: #fff; border-radius: var(--r-lg); padding: clamp(1.25rem, 4vw, 3rem); box-shadow: 0 24px 48px -24px rgba(20,30,70,.2), 0 2px 6px rgba(20,30,70,.05); }
.prose h2 { margin-top: 2.25rem; font-size: var(--t-sub); letter-spacing: -.02em; }
.prose h2:first-of-type { margin-top: 1.5rem; }
.prose h3 { margin-top: 1.5rem; font-size: 1.125rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1em; list-style: revert; }
.prose li + li { margin-top: .4rem; }
.draft { margin-bottom: 1rem; padding: 1rem 1.2rem; border-left: 6px solid var(--ink); border-radius: .5rem; background: #FFFBEA; }
.draft p { margin: 0; }
.pending { padding: 0 .3em; background: #FFE9A0; font-weight: 500; border-radius: .25rem; }
.table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.prose th, .prose td { padding: .7rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
@media (max-width: 700px) {
  .table-wrap { overflow: visible; }
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: 100%; }
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prose tr { padding: .75rem 0; border-bottom: 1px solid var(--line); }
  .prose td { padding: .3rem 0; border: 0; }
  .prose td::before { content: attr(data-label); display: block; font-size: var(--t-small); font-weight: 500; color: var(--ink-2); }
}

/* Gracias y 404 */
.center-page { padding: clamp(7rem, 12vw, 9rem) 0 clamp(3rem, 7vw, 5rem); }
.center-page h1 { max-width: 14em; font-size: var(--t-title); }
.center-page .lead { margin-bottom: 1.5rem; }
.center-page .flow { margin-bottom: 1.5rem; }
.after-list { margin: 0 0 1.5rem; max-width: 40rem; color: var(--ink-2); }

/* Pie */
.site-footer { padding-block: clamp(3rem, 6vw, 5rem) 6rem; background: linear-gradient(180deg, var(--tint), #E9ECF2); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 5fr 7fr; gap: 4rem; } }
.footer-logo img { display: block; width: min(11rem, 50vw); height: auto; }
.footer-slogan { margin: 1.25rem 0 0; max-width: 24rem; font-size: 1.15rem; }
.footer-about { margin: .9rem 0 0; max-width: 24rem; color: var(--ink-2); font-size: var(--t-small); }
.footer-menu { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.footer-menu a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.2rem; border-radius: 999px; color: var(--ink); font-weight: 600; text-decoration: none; background: var(--glass-bg); border: 1px solid var(--glass-edge); box-shadow: 0 1px 0 #fff inset, 0 8px 16px -10px rgba(20,30,70,.3); }
.footer-menu a:hover { background: #fff; }
.footer-cols { display: grid; gap: 2rem; }
@media (min-width: 640px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.footer-h { margin: 0 0 .5rem; font-size: var(--t-body); font-weight: 700; letter-spacing: 0; }
.footer-list { display: grid; gap: .1rem; }
.footer-list a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); font-weight: 500; }
.footer-list li:not(:has(a)) { padding: .5rem 0; }
.legal-note { margin: 2.5rem 0 0; max-width: 46rem; font-size: var(--t-small); color: var(--ink-3); }
.legal-note--last { margin-top: .75rem; }

/* Franja fija del eslogan (03/11, pedida por Santiago): cinco estrellas y eslogan siempre a la vista, abajo, en toda la web.
   El cuerpo deja su hueco abajo y el botón de WhatsApp y el aviso de cookies se colocan encima. */
:root { --dock-h: 2.6rem; }
body { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px)); }
.slogan-dock {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; pointer-events: none;
  padding: 0 max(.75rem, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(.75rem, env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, #1B1D24, #0B0D12); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 -12px 26px -16px rgba(11,13,18,.6);
  transition: opacity .2s ease-out, transform .2s ease-out;
}
.slogan-dock-in {
  display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: var(--dock-h); margin: 0;
  color: #fff; font-weight: 700; font-size: clamp(.8rem, .74rem + .35vw, 1.02rem); line-height: 1.2; letter-spacing: -.01em; text-align: center;
}
.slogan-dock .stars { width: 4.4rem; height: .88rem; flex: none; }
@media (max-width: 359px) { .slogan-dock .stars { width: 3.4rem; height: .68rem; } .slogan-dock-in { gap: .4rem; } }
.is-typing .slogan-dock { opacity: 0; transform: translateY(100%); }
@media (prefers-reduced-motion: reduce) { .slogan-dock { transition: none; } }

/* Botón flotante de WhatsApp */
.wa-float {
  position: fixed; z-index: 40; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: calc(var(--dock-h) + .75rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.4rem; padding: .5rem 1.2rem .5rem 1rem;
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  background: linear-gradient(180deg, #3FBF63, #1E8E3E); color: #fff; font-weight: 600; font-size: var(--t-small); line-height: 1.2; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 16px 30px -10px rgba(30,142,62,.75);
  transition: opacity .2s ease-out, transform .2s ease-out;
}
.wa-float:hover { text-decoration: none; transform: translateY(-2px); }
@media (max-width: 859px) { .wa-float { width: 3.4rem; height: 3.4rem; min-height: 0; padding: 0; } .wa-label { display: none; } }
.is-typing .wa-float { opacity: 0; transform: translateY(1rem); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }

/* Aviso de cookies (21/10/2026): «Aceptar» y «Rechazar» iguales y al mismo nivel; no bloquea la página.
   Mientras se ve, el botón flotante de WhatsApp se aparta para no taparlo. */
.cookie-bar {
  position: fixed; z-index: 60;
  left: max(.75rem, env(safe-area-inset-left, 0px)); right: max(.75rem, env(safe-area-inset-right, 0px)); bottom: calc(var(--dock-h) + .75rem + env(safe-area-inset-bottom, 0px));
  max-width: 34rem; margin-inline: auto; padding: 1rem 1.15rem 1.1rem; border-radius: var(--r-md);
  font-size: var(--t-small); line-height: 1.5; color: var(--ink-2);
}
.cookie-bar.glass { background: linear-gradient(140deg, rgba(255,255,255,.98), rgba(255,255,255,.92)); }
.cookie-bar p { margin: 0 0 .7rem; }
.cookie-bar .cookie-bar-t { margin-bottom: .2rem; color: var(--ink); font-size: 1rem; font-weight: 700; }
.cookie-bar-state { color: var(--ink); font-weight: 500; }
.cookie-bar-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cookie-bar-btns .btn { width: 100%; }
.cookie-open .wa-float { opacity: 0; transform: translateY(1rem); pointer-events: none; }
/* Ventana de pago (04/11): pago integrado de Stripe dentro de la web. En móvil ocupa la pantalla; en ordenador, centrada. */
.pago {
  width: min(100% - 1.5rem, 34rem); max-height: min(100% - 1.5rem, 54rem); padding: 0; border: 0; border-radius: var(--r-lg);
  background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(10,14,30,.55); overflow: auto; overscroll-behavior: contain;
}
.pago::backdrop { background: rgba(11,13,18,.55); backdrop-filter: blur(4px); }
@media (max-width: 559px) { .pago { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; } }
.pago-in { display: grid; gap: 1rem; padding: clamp(1.1rem, 3vw, 1.6rem); }
.pago-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pago-t { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.pago-x { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
.pago-x .icon { width: 1.25rem; height: 1.25rem; transform: rotate(45deg); }
.pago-x:hover { background: var(--tint); }
.pago-item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .9rem; align-items: center; padding: .75rem; border-radius: var(--r-md); background: var(--tint); }
.pago-img { width: 4.5rem; height: 4.5rem; object-fit: contain; border-radius: .75rem; background: #fff; }
.pago-item-t p { margin: 0; }
.pago-nombre { font-weight: 700; }
.pago-variante { font-size: var(--t-small); color: var(--ink-3); }
.pago-precio { margin-top: .2rem !important; font-size: var(--t-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pago-paso { display: grid; gap: .9rem; }
.pago-paso[hidden] { display: none; }
.pago-row { padding: .25rem 0; }
.pago-total { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pago-fine { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.pago-check { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; line-height: 1.45; cursor: pointer; }
.pago-check input { flex: none; width: 1.35rem; height: 1.35rem; margin: .1rem 0 0; accent-color: var(--ink); }
.pago-seguir { width: 100%; }
.pago-seguir:disabled { opacity: .45; cursor: not-allowed; }
.pago-resumen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pago-form { min-height: 22rem; }
.pago-paso--ok { justify-items: center; text-align: center; padding: 1rem 0; }
.pago-paso--ok p { margin: 0; }
.pago-ok-ic { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--ok); color: #fff; }
.pago-ok-ic .icon { width: 1.8rem; height: 1.8rem; }
.pago-ok-t { font-size: 1.25rem; font-weight: 700; }
.pago-estado { margin: 0; font-size: var(--t-small); color: var(--danger); }
.pago-estado:empty { display: none; }
.pago-seguro { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 0; font-size: .78rem; color: var(--ink-3); text-align: center; }
.pago-seguro .icon { flex: none; width: 1rem; height: 1rem; }
.link-btn {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; border: 0; background: none;
  color: var(--ink); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .08em; cursor: pointer;
}
.link-btn:hover { text-decoration-thickness: .14em; }
.footer-list li[data-cookie-wrap] { padding: 0; }

/* Portada: «Pide tu soporte o tu placa» (03/11). Dos recuadros separados: primero «Personalizados» (soporte y placa, al
   formulario) y después «Estándar» (soporte y placa, con calculadora y pago). Dentro de cada recuadro, dos cuadros pegados. */
.buy-boxes { display: grid; gap: 1.5rem; }
.buy-box { border-radius: var(--r-lg); padding: clamp(1rem, 2.6vw, 1.6rem); }
.buy-box--pers { border-top: 4px solid var(--gold); }
.buy-box--std { border-top: 4px solid #4285F4; }
.buy-box-h { margin: 0 0 1rem; text-align: center; font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); letter-spacing: -.02em; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: var(--r-md); background: rgba(255,255,255,.6); border: 1px solid var(--line); }
.duo-card { container-type: inline-size; display: grid; gap: 1rem; align-content: start; min-width: 0; padding: clamp(1rem, 3vw, 1.75rem); }
.duo-card + .duo-card { border-top: 1px solid var(--line); }
@media (min-width: 760px) {
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo-card + .duo-card { border-top: 0; border-left: 1px solid var(--line); }
}
.duo-art { margin: 0; }
.duo-art img, .duo-art svg { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r-md); background: #F4F5F8; }
.duo-art--contain img { object-fit: contain; background: #F3F5F7; }
.duo-art figcaption { margin-top: .35rem; font-size: .72rem; line-height: 1.3; color: var(--ink-3); }
.duo-h { margin: 0; font-size: 1.15rem; }
.duo-h a { color: inherit; text-decoration: none; }
.duo-h a:hover { text-decoration: underline; }
.duo-opt { display: grid; gap: .8rem; }
.duo-opt .label { margin: 0 0 .1rem; font-size: var(--t-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.duo-opt .price { white-space: nowrap; }
.duo-opt .btn { width: 100%; max-width: 26rem; }
@container (max-width: 22rem) { .duo-opt .btn { padding-inline: .9rem; font-size: .9375rem; } }

/* Calculadora de precio por cantidad y tabla de descuentos (prototipo 26/10) */
.js .calc { display: grid; gap: .6rem; }
.calc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.calc-row label { font-weight: 600; color: var(--ink); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); overflow: hidden; }
.stepper .step { width: 2.75rem; height: 2.75rem; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.25rem; font-weight: 700; line-height: 1; cursor: pointer; }
.stepper .step:hover { background: var(--tint); }
.stepper input { width: 3.75rem; height: 2.75rem; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.05rem; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-sum { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.calc-sum .calc-total { font-size: 1.05rem; color: var(--ink); }
.calc-save { color: var(--ok); font-weight: 600; }
.calc-note { margin: 0; font-size: var(--t-small); color: var(--ink-3); }
.calc-note:empty { display: none; }
.tiers { margin-top: 1.25rem; padding: clamp(1rem, 3vw, 1.75rem); border-radius: var(--r-lg); }
.tiers-h { margin: 0 0 .5rem; font-size: var(--t-sub); }
.tiers .table-wrap { margin: 0 0 .75rem; }
.tiers table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tiers th, .tiers td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.tiers th { font-size: var(--t-small); font-weight: 600; color: var(--ink-3); }
.tiers .fine { margin: 0; text-align: left; }
.tiers .table-wrap { overflow-x: auto; }
@media (max-width: 480px) { .tiers th, .tiers td { padding: .5rem .4rem; font-size: .9rem; } }

/* Formulario de presupuesto: datos opcionales plegados (propuesta 24/10) */
.form-more { margin: 0 0 1.4rem; }
.form-more > summary {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; cursor: pointer; list-style: none;
  color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .08em;
}
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary .icon { flex: none; transition: transform .2s var(--ease); }
.form-more[open] > summary { margin-bottom: 1rem; }
.form-more[open] > summary .icon { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .form-more > summary .icon { transition: none; } }

/* Impresión */
@media print {
  .site-header, .site-footer, .wa-float, .cookie-bar, .slogan-dock, .skip, .nav-toggle, .btn, .art, .hero-art { display: none !important; }
  body { padding-bottom: 0; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .section, .page-head, .center-page { background: none; padding-block: 1rem; }
  .aurora::before, .page-head::before, .center-page::before, .night::before { display: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  h2, h3 { break-after: avoid; }
}

/* Ajustes de las páginas interiores */
.btn-row--center { justify-content: center; }
.flows--left { margin-inline: 0; }
.more--left { text-align: left; }
.more--left .more-body { margin-left: 0; }
.info-list { display: grid; gap: .9rem; }
.offer--wide { max-width: 44rem; margin: 0 auto; }
.offer--wide > div { padding: 1.1rem 1.4rem; border-radius: var(--r-md); }
.product-art.glass { border-radius: var(--r-lg); padding: clamp(.75rem, 2vw, 1.25rem); }
.product-art.glass svg { max-height: 22rem; margin-inline: auto; }
.contact-section .info a { display: block; }
.contact-tiles .info > div { min-width: 0; }
.form-card h2 { font-size: var(--t-title); margin-bottom: 1.25rem; }
.page-head + .section, .page-head + .wrap { padding-top: clamp(.5rem, 2vw, 1.5rem); }
.page-head + .section.contact-section { padding-top: .5rem; }
.form-card h2 { font-size: var(--t-sub); margin-bottom: 1rem; }
.more--left { margin-bottom: 1.5rem; }
.flow-steps--6 .flow-t { font-size: .95rem; text-wrap: balance; }
@media (min-width: 1000px) { .flow-steps--6 > li { padding-inline: .2rem; } }

/* Galería de ejemplos de diseño (personalizar). En móvil se desliza con el dedo; desde 900 px, tres columnas. */
.ex-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(76%, 18rem); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * var(--margin)); padding: .5rem var(--margin) 1.4rem; scroll-padding-inline: var(--margin);
}
.ex-grid:focus-visible { outline: 3px solid var(--link); outline-offset: -3px; border-radius: var(--r-md); }
.ex-card { margin: 0; scroll-snap-align: start; display: grid; align-content: start; gap: .8rem; padding: .85rem .85rem 1.1rem; border-radius: var(--r-lg); }
.ex-card svg.ej { display: block; width: 100%; height: auto; }
.ex-card figcaption { display: grid; justify-items: center; gap: .45rem; text-align: center; }
.ex-card figcaption b { font-size: 1.05rem; }
.ex-link { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-small); color: var(--ink-2); }
.ex-link .icon { width: 1.15rem; height: 1.15rem; color: var(--link); }
.logo--sm { width: 1.75rem; height: 1.75rem; border-radius: .55rem; box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 6px 12px -6px rgba(0,0,0,.5); }
.logo--sm .brand-ic, .logo--sm .icon { width: 1rem; height: 1rem; }
@media (min-width: 900px) {
  .ex-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 62rem; margin-inline: auto; padding: 0 0 .5rem; overflow: visible; scroll-snap-type: none; }
}
#ejemplos .btn-row { margin-top: 1.25rem; }
.ej-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sectors-grid + .btn-row { margin-top: 2rem; }
/* Enlaces largos (por ejemplo la página de reclamaciones) no ensanchan la página en móvil. */
.prose a { overflow-wrap: anywhere; }

.sec-head--sub { margin-top: clamp(2rem, 5vw, 3.5rem); margin-bottom: clamp(1rem, 3vw, 1.75rem); }
.sec-head--sub h3 { margin: 0; font-size: var(--t-sub); letter-spacing: -.02em; }
.fine + .fine { margin-top: .5rem; }
.fine + .btn-row { margin-top: 1.25rem; }