/* Kizuna Yori · Sitio (ADR-013, H8c) · Landing de El Diez Digital.
   Hoja propia de la superficie pública, servida con huella por ConstructorActivos. Un solo tema (oscuro) a propósito:
   es la identidad de la marca. Verde = trabajar conmigo; púrpura = el canal (decisión de Jaime, 2026-09-11). */

@layer reset, tokens, base, componentes, utilidades, movimiento;

/* Fuentes de reserva con métricas ajustadas: al llegar Inter y Space Grotesk el texto no cambia de alto (CLS). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fuentes/inter-var.3100e775.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fuentes/space-grotesk-var.06408904.woff2") format("woff2");
}

@font-face {
  font-family: "Inter reserva";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 106.1%;
  ascent-override: 91.3%;
  descent-override: 22.73%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Grotesk reserva";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 108.3%;
  ascent-override: 90.86%;
  descent-override: 26.96%;
  line-gap-override: 0%;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, picture, svg, canvas { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; }
  ul { list-style: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
}

@layer tokens {
  :root {
    color-scheme: dark;

    /* Color: roles M3 derivados de #00FF9F (esquema Fidelity) + terciario púrpura de la luz de las fotos */
    --sup: #0A0A0A;
    --sup-baja: #101311;
    --sup-cont: #151916;
    --sup-alta: #1C211E;
    --sup-max: #262C28;
    --texto: #E1E4E0;
    --texto-sec: #BFC9C1;
    --contorno: #89938B;
    --contorno-var: #343D37;
    --primario: #00FF9F;
    --sobre-primario: #00391F;
    --primario-cont: #005234;
    --sobre-primario-cont: #8CFFC6;
    --secundario: #B3CCBD;
    --terciario: #CDB8FF;
    --sobre-terciario: #36206F;
    --terciario-cont: #51399A;
    --sobre-terciario-cont: #EADDFF;
    --error: #FFB4AB;
    --sobre-error: #690005;

    /* Tipografía */
    --f-display: "Space Grotesk", "Grotesk reserva", system-ui, sans-serif;
    --f-texto: "Inter", "Inter reserva", system-ui, sans-serif;
    --t-hero: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
    --t-h2: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);
    --t-h3: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
    --t-lead: clamp(.96875rem, .94rem + .15vw, 1.0625rem);
    --t-cuerpo: .9375rem;
    --t-peq: .8125rem;
    --t-mini: .75rem;

    /* Espacio */
    --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
    --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
    --e-seccion: clamp(56px, 6.5vw, 96px);
    --ancho: 1120px;
    --margen: clamp(20px, 4vw, 40px);

    /* Forma */
    --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 28px; --r-2xl: 48px; --r-full: 999px;
    --forma-circulo: polygon(50% 0%,53.3% 0.1%,56.5% 0.4%,59.8% 1%,62.9% 1.7%,66.1% 2.7%,69.1% 3.8%,72.1% 5.2%,75% 6.7%,77.8% 8.4%,80.4% 10.3%,83% 12.4%,85.4% 14.6%,87.6% 17%,89.7% 19.6%,91.6% 22.2%,93.3% 25%,94.8% 27.9%,96.2% 30.9%,97.3% 33.9%,98.3% 37.1%,99% 40.2%,99.6% 43.5%,99.9% 46.7%,100% 50%,99.9% 53.3%,99.6% 56.5%,99% 59.8%,98.3% 62.9%,97.3% 66.1%,96.2% 69.1%,94.8% 72.1%,93.3% 75%,91.6% 77.8%,89.7% 80.4%,87.6% 83%,85.4% 85.4%,83% 87.6%,80.4% 89.7%,77.8% 91.6%,75% 93.3%,72.1% 94.8%,69.1% 96.2%,66.1% 97.3%,62.9% 98.3%,59.8% 99%,56.5% 99.6%,53.3% 99.9%,50% 100%,46.7% 99.9%,43.5% 99.6%,40.2% 99%,37.1% 98.3%,33.9% 97.3%,30.9% 96.2%,27.9% 94.8%,25% 93.3%,22.2% 91.6%,19.6% 89.7%,17% 87.6%,14.6% 85.4%,12.4% 83%,10.3% 80.4%,8.4% 77.8%,6.7% 75%,5.2% 72.1%,3.8% 69.1%,2.7% 66.1%,1.7% 62.9%,1% 59.8%,0.4% 56.5%,0.1% 53.3%,0% 50%,0.1% 46.7%,0.4% 43.5%,1% 40.2%,1.7% 37.1%,2.7% 33.9%,3.8% 30.9%,5.2% 27.9%,6.7% 25%,8.4% 22.2%,10.3% 19.6%,12.4% 17%,14.6% 14.6%,17% 12.4%,19.6% 10.3%,22.2% 8.4%,25% 6.7%,27.9% 5.2%,30.9% 3.8%,33.9% 2.7%,37.1% 1.7%,40.2% 1%,43.5% 0.4%,46.7% 0.1%);
    --forma-cuadrado: polygon(50% 0%,53.3% 0%,56.6% 0%,59.9% 0%,63.4% 0%,67% 0%,70.7% 0%,74.6% 0%,78.8% 0.2%,83.1% 0.5%,87.5% 1.2%,91.6% 2.6%,95% 5%,97.4% 8.4%,98.8% 12.5%,99.5% 16.9%,99.8% 21.2%,100% 25.4%,100% 29.3%,100% 33%,100% 36.6%,100% 40.1%,100% 43.4%,100% 46.7%,100% 50%,100% 53.3%,100% 56.6%,100% 59.9%,100% 63.4%,100% 67%,100% 70.7%,100% 74.6%,99.8% 78.8%,99.5% 83.1%,98.8% 87.5%,97.4% 91.6%,95% 95%,91.6% 97.4%,87.5% 98.8%,83.1% 99.5%,78.8% 99.8%,74.6% 100%,70.7% 100%,67% 100%,63.4% 100%,59.9% 100%,56.6% 100%,53.3% 100%,50% 100%,46.7% 100%,43.4% 100%,40.1% 100%,36.6% 100%,33% 100%,29.3% 100%,25.4% 100%,21.2% 99.8%,16.9% 99.5%,12.5% 98.8%,8.4% 97.4%,5% 95%,2.6% 91.6%,1.2% 87.5%,0.5% 83.1%,0.2% 78.8%,0% 74.6%,0% 70.7%,0% 67%,0% 63.4%,0% 59.9%,0% 56.6%,0% 53.3%,0% 50%,0% 46.7%,0% 43.4%,0% 40.1%,0% 36.6%,0% 33%,0% 29.3%,0% 25.4%,0.2% 21.2%,0.5% 16.9%,1.2% 12.5%,2.6% 8.4%,5% 5%,8.4% 2.6%,12.5% 1.2%,16.9% 0.5%,21.2% 0.2%,25.4% 0%,29.3% 0%,33% 0%,36.6% 0%,40.1% 0%,43.4% 0%,46.7% 0%);
    --forma-pentagono: polygon(50% 0%,53.3% 0.3%,56.4% 1.3%,59.4% 2.7%,62.2% 4.4%,64.9% 6.2%,67.4% 8.1%,69.8% 9.8%,72.2% 11.6%,74.5% 13.3%,76.9% 15%,79.2% 16.7%,81.6% 18.4%,84% 20.2%,86.5% 22%,89% 23.9%,91.5% 26%,93.9% 28.4%,95.8% 31%,97.3% 34%,98.1% 37.1%,98.3% 40.4%,97.9% 43.7%,97.3% 46.9%,96.4% 50%,95.4% 53%,94.5% 55.9%,93.6% 58.7%,92.7% 61.4%,91.8% 64.2%,90.9% 66.9%,90% 69.7%,89.1% 72.6%,88.1% 75.5%,87.1% 78.5%,85.9% 81.5%,84.4% 84.4%,82.6% 87.2%,80.4% 89.6%,77.7% 91.4%,74.7% 92.7%,71.5% 93.5%,68.2% 93.9%,65% 94.1%,61.8% 94.1%,58.8% 94.1%,55.8% 94.1%,52.9% 94.1%,50% 94.1%,47.1% 94.1%,44.2% 94.1%,41.2% 94.1%,38.2% 94.1%,35% 94.1%,31.8% 93.9%,28.5% 93.5%,25.3% 92.7%,22.3% 91.4%,19.6% 89.6%,17.4% 87.2%,15.6% 84.4%,14.1% 81.5%,12.9% 78.5%,11.9% 75.5%,10.9% 72.6%,10% 69.7%,9.1% 66.9%,8.2% 64.2%,7.3% 61.4%,6.4% 58.7%,5.5% 55.9%,4.6% 53%,3.6% 50%,2.7% 46.9%,2.1% 43.7%,1.7% 40.4%,1.9% 37.1%,2.7% 34%,4.2% 31%,6.1% 28.4%,8.5% 26%,11% 23.9%,13.5% 22%,16% 20.2%,18.4% 18.4%,20.8% 16.7%,23.1% 15%,25.5% 13.3%,27.8% 11.6%,30.2% 9.8%,32.6% 8.1%,35.1% 6.2%,37.8% 4.4%,40.6% 2.7%,43.6% 1.3%,46.7% 0.3%);

    /* Movimiento: muelles M3 (los mismos de tokens.css del panel) */
    --muelle-06: linear(0, 0.098, 0.314, 0.556, 0.77, 0.93, 1.031, 1.081, 1.095, 1.085, 1.065, 1.042, 1.022, 1.007, 0.997, 0.992, 0.991, 0.992, 0.994, 0.996, 1);
    --muelle-08: linear(0, 0.065, 0.209, 0.377, 0.538, 0.678, 0.789, 0.872, 0.931, 0.97, 0.994, 1.007, 1.013, 1.015, 1.014, 1.012, 1.01, 1.007, 1.005, 1.003, 1);
    --muelle-09: linear(0, 0.035, 0.119, 0.226, 0.339, 0.45, 0.551, 0.64, 0.717, 0.781, 0.833, 0.874, 0.907, 0.933, 0.952, 0.967, 0.978, 0.986, 0.991, 0.995, 1);
    --muelle-10: linear(0, 0.068, 0.208, 0.362, 0.504, 0.624, 0.72, 0.795, 0.851, 0.893, 0.924, 0.946, 0.962, 0.973, 0.981, 0.987, 0.991, 0.994, 0.996, 0.997, 1);
    --d-expr-rapido: 348ms;
    --d-expr-normal: 412ms;
    --d-expr-lento: 567ms;
    --d-std-normal: 219ms;
    --d-efecto: 212ms;
    --d-efecto-rapido: 137ms;
    --mov-expr-rapido: var(--d-expr-rapido) var(--muelle-06);
    --mov-expr-normal: var(--d-expr-normal) var(--muelle-08);
    --mov-expr-lento: var(--d-expr-lento) var(--muelle-08);
    --mov-std: var(--d-std-normal) var(--muelle-09);
    --mov-efecto: var(--d-efecto) var(--muelle-10);
    --mov-efecto-rapido: var(--d-efecto-rapido) var(--muelle-10);
    --sombra-flotante: 0 12px 32px -8px rgb(0 0 0 / .6), 0 2px 6px rgb(0 0 0 / .4);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --d-expr-rapido: 0s; --d-expr-normal: 0s; --d-expr-lento: 0s; --d-std-normal: 0s;
      --d-efecto: 0s; --d-efecto-rapido: 0s;
    }
  }
}

@layer base {
  html { background: var(--sup); scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; scrollbar-color: var(--sup-max) var(--sup); scrollbar-width: thin; }
  body {
    background: var(--sup);
    color: var(--texto);
    font: 400 var(--t-cuerpo)/1.6 var(--f-texto);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
  h2 { font-size: var(--t-h2); }
  h3 { font-size: var(--t-h3); letter-spacing: -.015em; line-height: 1.2; }
  p { text-wrap: pretty; }
  strong { color: var(--texto); font-weight: 600; }
  ::selection { background: var(--primario); color: var(--sobre-primario); }
  :focus-visible { outline: 3px solid var(--secundario); outline-offset: 3px; border-radius: var(--r-xs); }
  input, textarea, select { caret-color: var(--primario); accent-color: var(--primario); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
}

@layer componentes {
  /* --- Estructura --- */
  .contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
  .seccion { position: relative; padding-block: var(--e-seccion); }
  .seccion--banda { background: rgb(16 19 17 / .7); }
  .seccion__cabeza { display: grid; gap: var(--e-3); max-width: 42rem; margin-bottom: var(--e-6); }
  .seccion__cabeza p { color: var(--texto-sec); font-size: var(--t-lead); }
  .seccion__cabeza--centro { margin-inline: auto; text-align: center; justify-items: center; }
  #fondo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

  /* --- Cabecera (único vidrio, junto con la barra fija de móvil) --- */
  .cabecera {
    position: fixed; inset: 0 0 auto; z-index: 50;
    background: rgb(10 10 10 / .72);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    border-bottom: 1px solid rgb(225 228 224 / .06);
  }
  .cabecera__fila { display: flex; align-items: center; gap: var(--e-5); min-height: 64px; }
  .marca { font: 700 1.1875rem/1 var(--f-display); letter-spacing: -.02em; color: var(--primario); margin-right: auto; white-space: nowrap; }
  .nav { display: none; gap: var(--e-6); font-size: var(--t-peq); font-weight: 500; color: var(--texto-sec); }
  .nav a { padding-block: var(--e-2); transition: color var(--mov-efecto); }
  .nav a:hover { color: var(--texto); }
  .cabecera__acciones { display: flex; gap: var(--e-2); align-items: center; }
  .menu-boton { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md); color: var(--texto); }
  .menu-boton:hover { background: rgb(225 228 224 / .08); }
  .menu-movil {
    position: absolute; inset: 100% 0 auto; display: grid; gap: var(--e-1);
    padding: var(--e-3) var(--margen) var(--e-5);
    background: rgb(10 10 10 / .97); border-bottom: 1px solid var(--contorno-var);
    box-shadow: var(--sombra-flotante);
  }
  .menu-movil a:not(.boton) { padding-block: var(--e-3); font-size: 1.0625rem; font-weight: 500; }
  .menu-movil .boton { margin-top: var(--e-3); }
  @media (min-width: 900px) {
    .nav { display: flex; }
    .menu-boton { display: none; }
  }

  /* --- Iconos (trazo 2, puntas redondas: un único estilo en toda la página) --- */
  .ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ic--lleno { fill: currentColor; stroke: none; }

  /* --- Botones: píldora que se cuadra al presionar (M3 Expressive) --- */
  .boton {
    --alto: 46px;
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    min-height: var(--alto); padding: 0 var(--e-5);
    border-radius: calc(var(--alto) / 2);
    font: 600 .9375rem/1.2 var(--f-texto); text-align: center; white-space: nowrap;
    transition: border-radius var(--mov-expr-rapido), background-color var(--mov-efecto), color var(--mov-efecto);
  }
  .boton::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; transition: opacity var(--mov-efecto-rapido); }
  .boton:hover::before { opacity: .08; }
  .boton:active::before { opacity: .12; }
  .boton:active { border-radius: var(--r-md); }
  .boton--peq { --alto: 40px; padding: 0 var(--e-4); font-size: var(--t-peq); }
  .boton--lleno { background: var(--primario); color: var(--sobre-primario); }
  .boton--canal { background: var(--terciario-cont); color: var(--sobre-terciario-cont); }
  .boton--contorno { color: var(--primario); box-shadow: inset 0 0 0 1px var(--contorno); }
  .boton--ancho { width: 100%; }
  .boton[disabled] { opacity: .6; cursor: progress; }
  .enlace { color: var(--primario); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
  .enlace:hover { text-decoration-thickness: 2px; }
  .enlace--canal { color: var(--terciario); }

  /* --- Hero: dos caminos con el mismo peso --- */
  .hero { padding-top: calc(64px + clamp(32px, 5vw, 64px)); padding-bottom: var(--e-seccion); }
  .hero__rejilla { display: grid; gap: var(--e-7); align-items: center; }
  .hero h1 { font-size: var(--t-hero); }
  .hero h1 span { display: block; color: var(--primario); }
  .hero__sub { margin-top: var(--e-4); max-width: 34rem; color: var(--texto-sec); font-size: var(--t-lead); }
  .hero__foto { position: relative; width: min(100%, 300px); aspect-ratio: 1; justify-self: center; display: none; }
  .hero__foto-fondo { position: absolute; inset: -4%; background: var(--terciario-cont); clip-path: var(--forma-cuadrado); transform: rotate(8deg); transition: transform var(--mov-expr-lento); }
  .hero__foto picture { position: relative; width: 100%; height: 100%; }
  .hero__foto img { width: 100%; height: 100%; object-fit: cover; clip-path: var(--forma-cuadrado); transition: transform var(--mov-expr-lento); }
  .hero__foto:hover .hero__foto-fondo { transform: rotate(18deg); }
  .hero__foto:hover img { transform: rotate(-4deg) scale(1.02); }
  .hero__prueba { display: flex; align-items: center; gap: var(--e-3); margin-top: var(--e-4); color: var(--texto-sec); font-size: var(--t-peq); }
  .hero__prueba img { width: 40px; height: 40px; object-fit: cover; clip-path: var(--forma-cuadrado); }
  .hero__prueba b { color: var(--texto); font-weight: 600; }
  @media (min-width: 900px) {
    .hero__rejilla { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: var(--e-8); }
    .hero__foto { display: block; }
    .hero__prueba img { display: none; }
  }

  /* Los dos caminos: mismo peso, discretos, dentro de la columna del texto (pedido de Jaime, 2026-10-13). */
  .caminos { display: grid; gap: var(--e-2); margin-top: var(--e-5); max-width: 34rem; }
  @media (min-width: 520px) { .caminos { grid-template-columns: 1fr 1fr; } }
  .camino {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: var(--e-3); align-items: center;
    padding: var(--e-3) var(--e-4) var(--e-3) var(--e-3); border-radius: var(--r-lg);
    box-shadow: inset 0 0 0 1px var(--borde-camino);
    transition: border-radius var(--mov-expr-rapido), background-color var(--mov-efecto);
  }
  .camino::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; transition: opacity var(--mov-efecto-rapido); }
  .camino:hover::before { opacity: .07; }
  .camino:active { border-radius: var(--r-md); }
  .camino--canal { --borde-camino: rgb(205 184 255 / .35); background: rgb(81 57 154 / .28); color: var(--terciario); }
  .camino--servicio { --borde-camino: rgb(0 255 159 / .3); background: rgb(0 82 52 / .35); color: var(--primario); }
  .camino__icono {
    grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center;
    clip-path: var(--forma-circulo); transition: clip-path var(--mov-expr-normal), transform var(--mov-expr-normal);
  }
  .camino--canal .camino__icono { background: var(--terciario); color: var(--sobre-terciario); }
  .camino--servicio .camino__icono { background: var(--primario); color: var(--sobre-primario); }
  .camino:hover .camino__icono { clip-path: var(--forma-cuadrado); transform: rotate(-8deg); }
  .camino__icono .ic { width: 17px; height: 17px; }
  .camino__titulo { font: 600 .9375rem/1.25 var(--f-display); color: var(--texto); }
  .camino__texto { grid-column: 2; font-size: var(--t-mini); color: var(--texto-sec); }
  .camino__flecha { grid-column: 3; grid-row: 1 / span 2; width: 18px; height: 18px; transition: transform var(--mov-expr-rapido); }
  .camino--canal:hover .camino__flecha { transform: translate(2px, -2px); }
  .camino--servicio:hover .camino__flecha { transform: translateY(2px); }

  /* --- Videos --- */
  .cabeza-fila { display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-6); align-items: end; justify-content: space-between; margin-bottom: var(--e-6); }
  .cabeza-fila .seccion__cabeza { margin-bottom: 0; }
  .videos { display: grid; gap: var(--e-6) var(--e-5); }
  @media (min-width: 720px) { .videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .video { display: grid; gap: var(--e-3); align-content: start; }
  .video__marco { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--sup-alta); }
  .video__marco img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--mov-expr-lento); }
  .video:hover .video__marco img { transform: scale(1.04); }
  .video__play {
    position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; display: grid; place-items: center;
    background: var(--terciario); color: var(--sobre-terciario); clip-path: var(--forma-cuadrado);
    transform: scale(.82); opacity: 0;
    transition: clip-path var(--mov-expr-normal), transform var(--mov-expr-normal), opacity var(--mov-efecto);
  }
  .video__play .ic { width: 24px; height: 24px; }
  .video:hover .video__play, .video:focus-visible .video__play { opacity: 1; transform: scale(1); clip-path: var(--forma-circulo); }
  .video__titulo { font: 600 .9375rem/1.35 var(--f-display); min-height: calc(2 * 1.35em); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; transition: color var(--mov-efecto); }
  .video:hover .video__titulo { color: var(--terciario); }
  .video__fecha { min-height: 1.4em; font-size: var(--t-mini); color: var(--texto-sec); }
  .video--cargando .video__marco, .video--cargando .video__titulo, .video--cargando .video__fecha { background: var(--sup-alta); border-radius: var(--r-sm); color: transparent; }
  .video--cargando .video__fecha { width: 40%; }
  .videos__aviso { grid-column: 1 / -1; padding: var(--e-7) 0; text-align: center; color: var(--texto-sec); }
  .puente { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4) var(--e-6); margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid var(--contorno-var); }
  .puente p { font: 600 1rem/1.35 var(--f-display); color: var(--texto); }
  .puente p span { display: block; font: 400 var(--t-cuerpo)/1.5 var(--f-texto); color: var(--texto-sec); }

  /* --- Selector de servicios --- */
  .selector { display: grid; gap: var(--e-2); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--e-5); }
  @media (min-width: 900px) { .selector { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .opcion {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; gap: var(--e-3); justify-items: start; text-align: left;
    padding: var(--e-3) var(--e-4) var(--e-4); border-radius: var(--r-lg);
    background: var(--sup-cont); color: var(--texto-sec);
    box-shadow: inset 0 0 0 1px var(--contorno-var);
    font: 600 .875rem/1.3 var(--f-display);
    transition: border-radius var(--mov-expr-rapido), background-color var(--mov-efecto), color var(--mov-efecto), box-shadow var(--mov-efecto);
  }
  .opcion::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; transition: opacity var(--mov-efecto-rapido); }
  .opcion:hover::before { opacity: .06; }
  .opcion__icono { width: 32px; height: 32px; display: grid; place-items: center; background: var(--sup-max); color: var(--texto); clip-path: var(--forma-circulo); transition: clip-path var(--mov-expr-normal), background-color var(--mov-efecto), color var(--mov-efecto); }
  .opcion[aria-selected="true"] { background: var(--primario-cont); color: var(--sobre-primario-cont); box-shadow: none; border-radius: var(--r-xl); }
  .opcion[aria-selected="true"] .opcion__icono { background: var(--primario); color: var(--sobre-primario); clip-path: var(--forma-cuadrado); }
  .opcion span:last-child { color: inherit; }
  .opcion[aria-selected="true"] span:last-child { color: var(--texto); }

  .panel-servicio {
    display: grid; gap: var(--e-5); padding: clamp(20px, 3vw, 32px);
    border-radius: var(--r-xl); background: var(--sup-cont); box-shadow: inset 0 0 0 1px var(--contorno-var);
  }
  @media (min-width: 900px) { .panel-servicio { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--e-7); align-items: center; } }
  .panel-servicio__texto { display: grid; gap: var(--e-3); }
  .panel-servicio__texto > p { font-size: var(--t-cuerpo); color: var(--texto-sec); max-width: 36rem; }
  .lista-check { display: grid; gap: var(--e-2); margin-top: var(--e-1); font-size: var(--t-peq); }
  .lista-check li { display: flex; gap: var(--e-3); align-items: flex-start; }
  .lista-check .ic { color: var(--primario); margin-top: .15em; }
  .precio { display: grid; gap: var(--e-3); padding: var(--e-5); border-radius: var(--r-lg); background: var(--sup-alta); }
  .precio__monto { font: 600 clamp(1.625rem, 1.4rem + .8vw, 2rem)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .precio__nota { color: var(--texto-sec); font-size: var(--t-peq); margin-top: calc(-1 * var(--e-2)); }
  .precio__acciones { display: grid; gap: var(--e-2); margin-top: var(--e-2); }
  .servicios__pie { display: grid; gap: var(--e-2); margin-top: var(--e-5); color: var(--texto-sec); max-width: 46rem; font-size: var(--t-peq); }
  .ia { display: inline-flex; gap: var(--e-2); align-items: center; color: var(--texto); font-weight: 500; }
  .ia .ic { color: var(--primario); }

  /* Pasos: la forma crece con el paso (círculo → cuadrado → pentágono) */
  .pasos { display: grid; gap: var(--e-5); margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--contorno-var); }
  @media (min-width: 900px) { .pasos { grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: start; } }
  .pasos > h3 { font-size: var(--t-h3); }
  .paso { display: grid; grid-template-columns: auto 1fr; gap: var(--e-1) var(--e-4); }
  .paso__num { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; font: 600 1.0625rem/1 var(--f-display); background: var(--sup-max); color: var(--texto); }
  .paso:nth-of-type(1) .paso__num { clip-path: var(--forma-circulo); }
  .paso:nth-of-type(2) .paso__num { clip-path: var(--forma-cuadrado); }
  .paso:nth-of-type(3) .paso__num { clip-path: var(--forma-pentagono); background: var(--primario); color: var(--sobre-primario); }
  .paso b { font: 600 .9375rem/1.3 var(--f-display); color: var(--texto); }
  .paso p { color: var(--texto-sec); font-size: var(--t-peq); }

  /* --- Marcas --- */
  .marcas { padding-block: var(--e-7); border-block: 1px solid var(--contorno-var); }
  .marcas h2 { font: 600 var(--t-peq)/1.4 var(--f-texto); letter-spacing: 0; color: var(--texto-sec); text-align: center; margin-bottom: var(--e-5); }
  .marcas ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3) var(--e-6); }
  .marcas li { font: 600 clamp(1rem, .95rem + .35vw, 1.25rem)/1.2 var(--f-display); letter-spacing: -.02em; color: var(--texto-sec); }

  /* --- Sobre mí --- */
  .sobre { display: grid; gap: var(--e-7); align-items: center; }
  @media (min-width: 900px) { .sobre { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: var(--e-8); } }
  .sobre__foto { aspect-ratio: 3 / 4; border-radius: var(--r-xl); overflow: hidden; background: var(--sup-alta); max-width: 360px; }
  .sobre__foto img { width: 100%; height: 100%; object-fit: cover; }
  .sobre__texto { display: grid; gap: var(--e-4); }
  .sobre__texto h2 span { display: block; color: var(--terciario); }
  .sobre__texto p { color: var(--texto-sec); max-width: 40rem; }
  .chips { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
  .chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--e-4); border-radius: var(--r-sm); background: var(--sup-alta); font-size: var(--t-peq); font-weight: 600; color: var(--texto); }
  .chip--canal { background: var(--terciario-cont); color: var(--sobre-terciario-cont); }

  /* --- Preguntas --- */
  .preguntas { display: grid; gap: var(--e-2); max-width: 46rem; margin-inline: auto; }
  .preguntas details { border-radius: var(--r-lg); background: var(--sup-cont); transition: border-radius var(--mov-expr-normal), background-color var(--mov-efecto); }
  .preguntas details[open] { border-radius: var(--r-xl); background: var(--sup-alta); }
  .preguntas summary {
    display: flex; justify-content: space-between; align-items: center; gap: var(--e-4);
    min-height: 52px; padding: var(--e-3) var(--e-5); cursor: pointer; list-style: none;
    font: 600 .9375rem/1.35 var(--f-display);
  }
  .preguntas summary::-webkit-details-marker { display: none; }
  .preguntas summary .ic { color: var(--primario); transition: transform var(--mov-expr-rapido); }
  .preguntas details[open] summary .ic { transform: rotate(45deg); }
  .preguntas details p { padding: 0 var(--e-5) var(--e-4); color: var(--texto-sec); max-width: 44rem; font-size: var(--t-peq); }
  .garantia { display: grid; grid-template-columns: auto 1fr; gap: var(--e-5); align-items: start; max-width: 46rem; margin: var(--e-5) auto 0; padding: var(--e-5); border-radius: var(--r-xl); background: var(--primario-cont); color: var(--sobre-primario-cont); }
  .garantia__icono { width: 44px; height: 44px; display: grid; place-items: center; background: var(--primario); color: var(--sobre-primario); clip-path: var(--forma-cuadrado); }
  .garantia h3 { color: var(--texto); margin-bottom: var(--e-1); font-size: 1.0625rem; }
  .garantia p { font-size: var(--t-peq); }

  /* --- Formularios --- */
  .formulario-caja { max-width: 44rem; margin-inline: auto; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-xl); background: var(--sup-cont); box-shadow: inset 0 0 0 1px var(--contorno-var); }
  .formulario { display: grid; gap: var(--e-4); }
  .formulario__fila { display: grid; gap: var(--e-4); }
  @media (min-width: 720px) { .formulario__fila { grid-template-columns: 1fr 1fr; } }
  .campo { display: grid; gap: var(--e-2); }
  .campo > label, .campo__etiqueta { font-size: var(--t-peq); font-weight: 600; color: var(--texto); }
  .campo input, .campo select, .campo textarea {
    width: 100%; min-height: 46px; padding: var(--e-2) var(--e-3); font-size: 1rem; /* 16 px: iOS no amplía la página al enfocar */
    border-radius: var(--r-md); border: 1px solid var(--contorno-var); background: var(--sup-baja); color: var(--texto);
    transition: border-color var(--mov-efecto), box-shadow var(--mov-efecto);
  }
  .campo select { height: 46px; padding-block: 0; }
  .campo textarea { min-height: 104px; resize: vertical; }
  .campo input::placeholder, .campo textarea::placeholder { color: #8F9A92; }
  .campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--contorno); }
  .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario); }
  .campo--error input, .campo--error textarea { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
  .campo__error { font-size: var(--t-mini); color: var(--error); }
  .campo__error:empty { display: none; }
  .formulario__nota { text-align: center; font-size: var(--t-peq); color: var(--texto-sec); }
  .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .rangos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); border: 0; padding: 0; }
  .rangos legend { margin-bottom: var(--e-2); }
  .rango input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .rango span {
    display: grid; place-items: center; min-height: 44px; padding: 0 var(--e-2);
    border-radius: var(--r-md); border: 1px solid var(--contorno-var); background: var(--sup-baja);
    font-size: var(--t-peq); font-weight: 600; color: var(--texto-sec); cursor: pointer;
    transition: border-radius var(--mov-expr-rapido), background-color var(--mov-efecto), color var(--mov-efecto);
  }
  .rango input:checked + span { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); border-radius: var(--r-xl); }
  .rango input:focus-visible + span { outline: 3px solid var(--secundario); outline-offset: 3px; }

  /* --- Pestañas del formulario de contacto: dos opciones en una fila --- */
  .pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1); padding: var(--e-1); margin-bottom: var(--e-5); border-radius: var(--r-full); background: var(--sup-baja); box-shadow: inset 0 0 0 1px var(--contorno-var); }
  .pestana {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 40px; padding: var(--e-2) var(--e-3); border-radius: var(--r-full);
    font: 600 var(--t-peq)/1.25 var(--f-texto); color: var(--texto-sec);
    transition: background-color var(--mov-efecto), color var(--mov-efecto), border-radius var(--mov-expr-rapido);
  }
  .pestana::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; transition: opacity var(--mov-efecto-rapido); }
  .pestana:hover::before { opacity: .06; }
  .pestana:active { border-radius: var(--r-md); }
  .pestana[aria-selected="true"] { background: var(--primario-cont); color: var(--sobre-primario-cont); }
  .panel-form__intro { color: var(--texto-sec); font-size: var(--t-peq); margin-bottom: var(--e-4); }

  /* --- Comunidad --- */
  .redes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin-top: var(--e-5); }
  .red {
    display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-4) 0 var(--e-1); font-size: var(--t-peq);
    border-radius: var(--r-full); background: var(--sup-cont); box-shadow: inset 0 0 0 1px var(--contorno-var);
    font-weight: 600; transition: border-radius var(--mov-expr-rapido), background-color var(--mov-efecto);
  }
  .red__icono { width: 34px; height: 34px; display: grid; place-items: center; background: var(--sup-max); clip-path: var(--forma-circulo); transition: clip-path var(--mov-expr-normal), background-color var(--mov-efecto), color var(--mov-efecto); }
  .red__icono svg { width: 18px; height: 18px; fill: currentColor; }
  .red:hover { background: var(--sup-alta); }
  .red:hover .red__icono { clip-path: var(--forma-cuadrado); background: var(--terciario); color: var(--sobre-terciario); }
  .red:active { border-radius: var(--r-md); }

  /* --- Cierre --- */
  .cierre { text-align: center; }
  .cierre__mantra { font: 600 var(--t-peq)/1.5 var(--f-texto); color: var(--texto-sec); margin-bottom: var(--e-5); }
  .cierre__mantra span { color: var(--terciario); }
  .cierre p { color: var(--texto-sec); font-size: var(--t-lead); max-width: 34rem; margin: var(--e-3) auto 0; }
  .cierre__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin-top: var(--e-5); }

  /* --- Pie --- */
  .pie { padding-block: var(--e-7) var(--e-6); border-top: 1px solid var(--contorno-var); background: var(--sup); font-size: var(--t-peq); color: var(--texto-sec); }
  .pie__rejilla { display: grid; gap: var(--e-6); }
  @media (min-width: 900px) { .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; } }
  .pie__marca { font: 700 1.1875rem/1 var(--f-display); color: var(--texto); margin-bottom: var(--e-3); }
  .pie nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e-5); align-content: start; }
  .pie nav a, .pie__contacto a { display: inline-flex; align-items: center; min-height: 40px; }
  .pie a:hover { color: var(--primario); }
  .pie__contacto { display: grid; align-content: start; }
  .pie__titulo { font-weight: 600; color: var(--texto); margin-bottom: var(--e-2); }
  .pie__legal { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid var(--contorno-var); font-size: var(--t-mini); }

  /* --- Barra fija de móvil y aviso --- */
  .barra-movil {
    position: fixed; inset: auto 0 0; z-index: 55; display: flex; gap: var(--e-2);
    padding: var(--e-3) var(--margen) calc(var(--e-3) + env(safe-area-inset-bottom));
    background: rgb(10 10 10 / .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgb(225 228 224 / .08);
    transform: translateY(110%); transition: transform var(--mov-expr-normal);
  }
  .barra-movil .boton { flex: 1; }
  .barra-movil--visible { transform: none; }
  @media (min-width: 900px) { .barra-movil { display: none; } }
  .aviso {
    position: fixed; left: 50%; bottom: calc(var(--e-5) + env(safe-area-inset-bottom)); z-index: 100;
    max-width: min(92vw, 30rem); padding: var(--e-4) var(--e-5); border-radius: var(--r-xs);
    background: var(--texto); color: var(--sup); font-weight: 600; box-shadow: var(--sombra-flotante);
    transform: translate(-50%, calc(100% + var(--e-8))); visibility: hidden;
    transition: transform var(--mov-expr-normal), visibility 0s linear var(--d-expr-normal);
  }
  .aviso--visible { transform: translate(-50%, 0); visibility: visible; transition: transform var(--mov-expr-normal), visibility 0s; }
  .aviso--error { background: var(--error); color: var(--sobre-error); }
}

@layer utilidades {
  [hidden] { display: none; }
  /* En utilidades para ganarle a .boton y .nav, que fijan display en componentes. */
  .solo-escritorio { display: none; }
  @media (min-width: 900px) { .solo-escritorio { display: inline-flex; } }
  .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

@layer movimiento {
  /* El momento de la página: cambiar de servicio. El panel nuevo entra con muelle; el resto de la página no se anima al hacer scroll. */
  .panel-servicio--entra { animation: entra-panel var(--mov-expr-normal); }
  @keyframes entra-panel {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: none; }
  }
}