/* La página de marca personal. Arriba el titular; debajo, las tarjetas de
   verdad, vivas en sus móviles, que se pueden tocar. Después, la web se
   construye sola, los pasos corren en horizontal, el precio, y al final el
   formulario para pedirla. Sin guion o con «reducir movimiento», todo queda
   quieto y legible.

   CLARO Y OSCURO (08/10/2026), como la web principal: oscuro por defecto,
   claro si el sistema lo pide o si se elige con el botón, y la elección es la
   misma que en inst-all.pro (clave «tema»). Los dos bloques de abajo son
   iguales a propósito: uno para la elección y otro para el sistema.

   LA MARCA ES LA DE INST-ALL (08/10/2026): los colores, las letras, el
   logotipo y los botones son los de la web principal (`web/plantilla/
   estilo.css` en install-command-center, tema oscuro). Montserrat y Inter,
   nada más; la paleta cerrada de D-022. Lo único que se sale de ella son las
   tarjetas reales: son marcas de clientes, y enseñar que cada uno tiene la
   suya es justo lo que se vende. */
:root {
  color-scheme: dark;
  --noche: #050505;
  --capa: #0e0f11;
  --capa-2: #16171b;
  --linea: rgba(255, 255, 255, .12);
  --linea-fuerte: rgba(255, 255, 255, .22);
  --tinta: #F2F2EF;
  --tinta-2: #c9cbd1;
  --tinta-3: #8d9099;
  --azul: #0A67F2;
  --cian: #00C8FF;
  --purpura: #A020F0;
  --purpura-claro: #c47dff;
  --display: 'Montserrat', 'Arial Black', system-ui, sans-serif;
  --texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --fondo-rgb: 5, 5, 5;
  --error: #ff6b6b;
  --marca-acento: var(--purpura);   /* el «-ALL»: púrpura sobre negro, azul sobre blanco */
  --ver-sol: block; --ver-luna: none;
  --ver-iso-oscuro: block; --ver-iso-claro: none;
}
:root[data-tema="claro"] {
    --noche: #FFFFFF;
    --capa: #F5F5F2;
    --capa-2: #E9E9E5;
    --fondo-rgb: 255, 255, 255;
    --linea: rgba(5, 5, 5, .12);
    --linea-fuerte: rgba(5, 5, 5, .26);
    --tinta: #050505;
    --tinta-2: #3c3c46;
    --tinta-3: #6a6a76;
    --cian: #0A67F2;
    --purpura-claro: #A020F0;
    --marca-acento: var(--azul);
    --error: #c62828;
    --ver-sol: none; --ver-luna: block;
    --ver-iso-oscuro: none; --ver-iso-claro: block;
    color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
      --noche: #FFFFFF;
      --capa: #F5F5F2;
      --capa-2: #E9E9E5;
      --fondo-rgb: 255, 255, 255;
      --linea: rgba(5, 5, 5, .12);
      --linea-fuerte: rgba(5, 5, 5, .26);
      --tinta: #050505;
      --tinta-2: #3c3c46;
      --tinta-3: #6a6a76;
      --cian: #0A67F2;
      --purpura-claro: #A020F0;
      --marca-acento: var(--azul);
    --error: #c62828;
      --ver-sol: none; --ver-luna: block;
      --ver-iso-oscuro: none; --ver-iso-claro: block;
      color-scheme: light;
  }
}
html { background: var(--noche) }
* { box-sizing: border-box }
html.lenis, html.lenis body { height: auto }
body { margin: 0; background: var(--noche); color: var(--tinta); font: 400 16px/1.6 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: hidden }
a { color: inherit }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 4px }
.marco { width: min(1180px, 100%); margin-inline: auto; padding-inline: 20px }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.03em; line-height: .98; text-wrap: balance }
.ceja { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-3); margin: 0 }
.ceja::before { content: ''; width: 22px; height: 1px; background: currentColor }
.ceja b { display: none }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px;
         font: 700 13.5px/1.2 var(--texto); letter-spacing: .12em; text-transform: uppercase; text-align: center; text-decoration: none;
         border: 0; cursor: pointer; will-change: transform; transition: background .3s, box-shadow .3s }
.boton-azul { background: var(--azul); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 10px 30px -10px rgba(10, 103, 242, .85) }
.boton-azul:hover { background: #2277f6; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 14px 40px -10px rgba(0, 200, 255, .7) }
.boton-linea { border: 1px solid var(--linea-fuerte); color: var(--tinta) }

/* Barra */
/* Barra oscura translúcida, como la de la web principal. Antes iba en
   «difference» y sobre los fondos claros de los ejemplos invertía los colores:
   el «-ALL» púrpura salía verde, y eso ya no es la marca. */
.barra { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); color: var(--tinta);
         background: rgba(var(--fondo-rgb), .78); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--linea) }
.barra .marco { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px }
.firma { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 clamp(17px, 5.2vw, 20px)/1 var(--display); letter-spacing: -.01em }
.firma img { width: 34px; height: 34px; transition: transform 1.2s var(--ease) }
.firma:hover img { transform: rotate(90deg) }
.firma b { font-weight: inherit; white-space: nowrap }
.firma b i { font-style: normal; color: var(--marca-acento) }
.iso-oscuro { display: var(--ver-iso-oscuro) }
.iso-claro { display: var(--ver-iso-claro) }
.barra nav { display: flex; gap: 22px; align-items: center; font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em }
.barra nav a { text-decoration: none }
/* El botón al formulario, siempre a la vista en la barra (en el móvil, abajo). */
.barra nav a.nav-cta { white-space: nowrap; padding: 10px 16px; border-radius: 999px; background: var(--azul); color: #fff; letter-spacing: .12em }
.barra nav a.nav-cta:hover { background: #2277f6 }
/* Idioma y tema: los mismos mandos que la web principal. El de tema solo
   aparece con guion, que es quien lo hace funcionar. */
.mandos { display: flex; align-items: center; gap: 10px }
.idioma { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--linea-fuerte); border-radius: 999px; font: 700 11px/1 var(--mono); letter-spacing: .1em }
.idioma a, .idioma .ahora { padding: 6px 9px; border-radius: 999px; color: var(--tinta-3) }
.idioma a:hover { color: var(--tinta) }
.idioma .ahora { background: var(--tinta); color: var(--noche) }
.tema { display: none; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--linea-fuerte); border-radius: 50%; background: none; color: var(--tinta-2); cursor: pointer; transition: color .2s, border-color .2s }
.con-guion .tema { display: grid }
.tema:hover { color: var(--tinta); border-color: var(--tinta-3) }
.tema svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.ico-sol { display: var(--ver-sol) }
.ico-luna { display: var(--ver-luna) }
.progreso { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--azul), var(--purpura)); transform-origin: left; transform: scaleX(0); z-index: 60 }

/* ══ LA PORTADA ══ */
.escenario { position: relative; min-height: 88vh; display: flex; align-items: flex-end; background: var(--noche); color: var(--tinta) }
.escena-hero { position: relative; padding: clamp(110px, 16vh, 160px) 20px 40px; width: min(1180px, 100%); margin-inline: auto }
.escena-hero h1 { font-size: clamp(36px, 10.4vw, 122px); font-weight: 800; margin-top: 18px }
/* Cada línea del titular va entera: con Montserrat, «en el bolsillo» es la
   más ancha, y el tamaño está calculado para que quepa desde 375 px. */
.escena-hero h1 .l { white-space: nowrap }
.escena-hero h1 .l { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.12em }  /* sitio para los rabos: «y», «p» */
/* Escondido desde el primer pintado, y no desde que llega el guion: así no
   asoma y desaparece. Sin `.anima` (sin JavaScript, movimiento reducido) se ve quieto. */
.anima #titulo .l > span { display: inline-block; transform: translateY(110%) }
.anima #hero > p:not(.ceja), .anima #hero .bajar { opacity: 0 }
.escena-hero h1 .l span { display: inline-block }
.escena-hero h1 em { font-style: normal; color: var(--purpura-claro) }
/* La etiqueta del héroe es larga: en el móvil baja a dos líneas, con la raya
   arriba y sin pisar el titular. */
.escena-hero p.ceja { font-size: 12px; margin: 0; align-items: flex-start; line-height: 1.5 }
.escena-hero p.ceja::before { margin-top: .75em; flex: none }
.escena-hero p:not(.ceja) { max-width: 30em; color: var(--tinta-2); font-size: clamp(17px, 1.6vw, 20px); margin: 24px 0 0 }
.bajar { margin-top: 34px; display: inline-flex; align-items: center; gap: 12px; font: 600 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .75 }
.bajar i { width: 1px; height: 46px; background: currentColor; transform-origin: top; animation: baja 1.8s ease-in-out infinite }
@keyframes baja { 0% { transform: scaleY(0) } 50% { transform: scaleY(1) } 100% { transform: scaleY(1); opacity: 0 } }

/* ══ LAS TARJETAS REALES ══
   Cada una es la tarjeta de verdad en un iframe, a 390 px como en un
   teléfono y encogida a la pantalla del móvil (--k y --alto, js/pagina.js).
   Se puede tocar: es la tarjeta funcionando. Debajo, su foto mientras carga.
   En el móvil se pasan con el dedo; en el ordenador van en fila. */
.reales-zona { padding-bottom: clamp(60px, 9vw, 110px) }
.reales-zona .entrada { color: var(--tinta-2); font-size: 18px; margin: 18px 0 0; max-width: 32em }
.reales { list-style: none; margin: 36px 0 0; padding: 4px 20px 24px; display: flex; gap: 22px;
          overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none }
.reales::-webkit-scrollbar { display: none }
.real { flex: none; width: min(300px, 78vw); display: grid; gap: 4px; scroll-snap-align: center }
.real-movil { display: block; aspect-ratio: 320 / 660; padding: 10px; border-radius: 44px; background: #050507; margin-bottom: 12px;
              box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 80px -36px rgba(0, 0, 0, .7) }
.real-pantalla { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 34px; background: #0b0b10 }
.real-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top }
.real-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
              opacity: 0; transition: opacity .6s ease }
.real-video.lista { opacity: 1 }
.real-viva { position: absolute; left: 0; top: 0; width: 390px; height: var(--alto, 809px); border: 0; transform-origin: 0 0; transform: scale(var(--k, .7));
             opacity: 0; transition: opacity .6s ease }
.real-viva.lista { opacity: 1 }
.real b { font: 700 17px/1.2 var(--texto) }
.real > span:last-child { color: var(--tinta-3); font-size: 14px }
/* En ancho, todas a la misma altura y centradas, encogiéndose para caber; si
   no caben, se desliza dentro de su fila (nunca la página). El salto de la del
   medio era para cuando había tres (13/10/2026). */
@media (min-width: 1000px) {
  .reales { justify-content: safe center }
  .real { width: clamp(220px, calc((100vw - 160px) / 5), 300px) }
}

/* ══ LA WEB QUE SE CONSTRUYE ══ */
.seccion { position: relative; padding-block: clamp(80px, 12vw, 150px) }
.web { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 70px); align-items: center; min-height: 100vh }
.web h2, .titular { font-size: clamp(42px, 6vw, 88px); font-weight: 800 }
.web p { color: var(--tinta-2); font-size: 18px; margin: 20px 0 0; max-width: 28em }
.web ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; color: var(--tinta-2) }
.web li::before { content: '→ '; color: var(--purpura-claro) }
.nav-web { border-radius: 20px; border: 1px solid var(--linea); background: #f4f5f8; color: #0e1116; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(77, 93, 255, .45) }
.nav-web .barra-nav { display: flex; gap: 7px; align-items: center; padding: 13px 16px; background: #e6e8ee }
.nav-web .barra-nav i { width: 11px; height: 11px; border-radius: 50%; background: #c9ccd6 }
.nav-web .barra-nav span { margin-left: 10px; flex: 1; min-width: 0; padding: 7px 12px; border-radius: 9px; background: #fff; font: 500 12px/1 var(--mono); color: #6b7280; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.nav-web .cuerpo { padding: clamp(18px, 3vw, 34px); display: grid; gap: 14px }
.b-portada { border-radius: 14px; padding: clamp(18px, 3vw, 30px); background: #2b3dff; color: #fff; display: grid; gap: 10px }
.b-portada b { font: 800 clamp(22px, 2.6vw, 34px)/1 var(--display); letter-spacing: -.02em }
.b-portada span { opacity: .8; font-size: 14px }
.b-portada i { justify-self: start; padding: 10px 16px; border-radius: 10px; background: #fff; color: #2b3dff; font: 700 13px/1 var(--texto); font-style: normal }
.b-servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.b-servicios div { border-radius: 12px; background: #fff; padding: 14px; display: grid; gap: 6px; box-shadow: 0 1px 0 #e3e6ec }
.b-servicios em { width: 26px; height: 26px; border-radius: 8px; background: #eef0ff }
.b-servicios s { height: 8px; border-radius: 4px; background: #e3e6ec; text-decoration: none }
.b-fotos { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; height: 110px }
.b-fotos i { border-radius: 12px; background: linear-gradient(135deg, #c7cdfc, #ffd7cc) }
.b-fotos i:nth-child(2) { background: linear-gradient(135deg, #ffe08a, #ffb38a) }
.b-fotos i:nth-child(3) { background: linear-gradient(135deg, #b8e3c4, #9fc6ff) }
.b-resena { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 12px; background: #fff; font-size: 13px; color: #444b57 }
.b-resena b { color: #f5a400; letter-spacing: 2px }

/* ══ LOS PASOS, EN HORIZONTAL ══ */
.pasos-zona { position: relative; overflow: hidden }
.pasos-cab { padding: clamp(80px, 12vw, 140px) 20px 40px; width: min(1180px, 100%); margin-inline: auto }
.pista { display: flex; gap: 20px; padding: 0 20px 80px; flex-wrap: wrap }
.paso { flex: 1 1 260px; min-height: 340px; border-radius: 28px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; background: var(--capa); border: 1px solid var(--linea) }
.paso:nth-child(2) { background: var(--capa-2) } .paso:nth-child(3) { background: linear-gradient(160deg, rgba(160, 32, 240, .22), var(--capa-2) 70%) } .paso:nth-child(4) { background: var(--azul) }
.paso .n { font: 800 96px/1 var(--display); letter-spacing: -.05em; opacity: .9 }
.paso b { font: 800 34px/1.05 var(--display); letter-spacing: -.02em }
.paso p { margin: 10px 0 0; color: var(--tinta-2) }
.paso:nth-child(4) { color: #fff }  /* azul de marca: texto blanco en los dos temas */
.paso:nth-child(4) p { color: rgba(255, 255, 255, .85) }
.cine .pista { flex-wrap: nowrap; width: max-content; padding-left: max(20px, calc(50vw - 570px)) }
.cine .paso { flex: none; width: min(78vw, 460px); min-height: 0; max-height: 560px }
/* Mientras está clavada, la sección cabe ENTERA en la pantalla: título arriba
   y tarjetas con lo que queda. Con una altura fija (60vh) más el título, en un
   portátil el texto de cada paso quedaba por debajo del borde (10/10/2026). */
.cine .pasos-zona { height: 100vh; height: 100svh; display: flex; flex-direction: column }
.cine .pasos-cab { flex: none; padding-top: clamp(84px, 12vh, 130px); padding-bottom: clamp(18px, 3vh, 32px) }
.cine .pista { flex: 1 1 auto; min-height: 0; padding-bottom: clamp(24px, 6vh, 64px) }
@media (max-height: 760px) { .cine .paso .n { font-size: 64px } .cine .paso b { font-size: 28px } }

/* ══ EL FORMULARIO (en el cierre) ══ */
.mesa { background: var(--capa); border: 1px solid var(--linea); border-radius: 24px; padding: clamp(12px, 2vh, 18px); display: grid; gap: clamp(8px, 1.4vh, 12px) }
.campo { display: grid; gap: 5px; min-width: 0 }
.campo label, .campo .etiqueta { font: 600 12px/1 var(--texto); color: var(--tinta-2) }
.campo input { font: 500 16px/1.2 var(--texto); padding: clamp(8px, 1.3vh, 12px) 12px; border-radius: 11px; border: 1.5px solid var(--linea); background: var(--noche); color: var(--tinta); width: 100%; min-width: 0 }
.campo input:focus { border-color: var(--azul); outline: none }
.campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px }
@media (min-width: 640px) { .campos { grid-template-columns: repeat(3, minmax(0, 1fr)) } .campos.dos { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
/* El texto de su negocio y los botones de «qué te interesa» y «para cuándo». */
.campo textarea { font: 400 16px/1.4 var(--texto); padding: 10px 12px; border-radius: 11px; border: 1.5px solid var(--linea); background: var(--noche); color: var(--tinta); width: 100%; min-height: 76px; resize: vertical }
.campo textarea:focus { border-color: var(--azul); outline: none }
fieldset.campo { margin: 0; padding: 0; border: 0; min-width: 0 }
fieldset.campo legend { padding: 0; margin-bottom: 6px; font: 600 12px/1 var(--texto); color: var(--tinta-2) }
.opciones { display: flex; flex-wrap: wrap; gap: 6px }
.opcion { position: relative; cursor: pointer }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px }
.opcion span { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border: 1.5px solid var(--linea); border-radius: 999px; font: 600 13px/1.1 var(--texto); white-space: nowrap; transition: border-color .2s, background .2s }
.opcion input:checked + span { border-color: var(--azul); background: rgba(10, 103, 242, .14); box-shadow: 0 0 0 1px var(--azul) }
.opcion input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px }
/* El formulario, centrado al saltar a él (js/pagina.js) y sin cortarse bajo la
   barra si se llega sin guion. */
#mesa { scroll-margin-top: 80px }
/* En el teléfono, nombre y teléfono comparten fila: el formulario es largo. */
@media (max-width: 639px) {
  .campos:not(.dos) { grid-template-columns: 1fr 1fr }
  .campos:not(.dos) .campo:last-child { grid-column: 1 / -1 }
}
.enviar { display: flex; align-items: center; gap: 16px }
.enviar .boton { flex: none; min-height: 48px }
.mesa small { color: var(--tinta-3); font-size: 12.5px; line-height: 1.4 }
/* El formulario de captación: la trampa para robots no se ve, la casilla de
   privacidad y el aviso de error, y lo que queda al enviarlo. */
.campo-web { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.mesa { position: relative }
.acepto { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--tinta-2); cursor: pointer }
.acepto input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--azul) }
.acepto a, .mesa small a { color: var(--tinta); text-underline-offset: 3px }
.form-estado { margin: 0; font-size: 14px; color: var(--error) }
.form-estado:empty { display: none }
.boton[disabled] { opacity: .6; cursor: progress }
.hecho { text-align: left }
.mesa[hidden] { display: none }   /* .mesa es grid: sin esto, «hidden» no la esconde */
.hecho b { font: 800 clamp(30px, 4vw, 44px)/1 var(--display); letter-spacing: -.03em }
.hecho p { margin: 0; color: var(--tinta-2); font-size: 17px }

/* ══ PRECIO, YO, CIERRE ══ */
.precios { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 40px }
.precio { border-radius: 28px; padding: 34px; background: var(--capa); border: 1px solid var(--linea); display: grid; gap: 8px }
.precio.fuerte { background: var(--tinta); color: var(--noche) }
.precio small { font: 600 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .65 }
.precio .cifra { font: 800 clamp(64px, 8vw, 108px)/.9 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums }
.precio .cifra span { display: block; margin: 6px 0 10px; font: 600 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .65 }
.precio p { margin: 4px 0 0; opacity: .78 }
.precios.planes { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) }
.precio.plan { align-content: start }
.precio[hidden], .tarifa-grupo[hidden], .tarifas li[hidden], .precio .cifra [hidden] { display: none }   /* son grid/flex: sin esto, «hidden» no esconde */
.plan-nombre { font: 800 clamp(22px, 2.4vw, 28px)/1.1 var(--display); letter-spacing: -.02em }
.precio .cifra .p-mes { font: 600 clamp(18px, 2vw, 24px)/1 var(--display); font-style: normal; letter-spacing: 0; opacity: .7; margin-left: 4px }
/* Debajo del precio de cada plan, lo que va con él; y los extras, en dos
   columnas cuando hay sitio. */
.tarifas { margin-top: 18px }
.tarifa-grupo { border-radius: 28px; padding: 0 30px; border: 1px solid var(--linea); min-width: 0 }
.tarifa-grupo > summary { padding: 24px 0; font: 600 13px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; align-items: center }
.tarifa-grupo[open] > summary { padding-bottom: 12px }
.tarifa-grupo > ul { padding-bottom: 20px }
.tarifas ul, .plan-lineas { list-style: none; margin: 0; padding: 0 }
.plan-lineas { margin-top: 12px }
.tarifas li, .plan-lineas li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-top: 1px solid var(--linea) }
.plan-lineas li { border-top-color: color-mix(in srgb, currentColor 20%, transparent) }
.tarifas li:first-child { border-top: 0 }
.tarifas li[hidden], .plan-lineas li[hidden] { display: none }
.tarifas li span, .plan-lineas li span { min-width: 0 }
.tarifas li b, .plan-lineas li b { flex: none; font: 700 17px/1 var(--display); font-variant-numeric: tabular-nums }
@media (min-width: 760px) {
  .tarifas ul.dos { columns: 2; column-gap: 48px }
  .tarifas ul.dos li { break-inside: avoid; border-top: 0; border-bottom: 1px solid var(--linea) }
}
.yo { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center }
/* El sello de INST-ALL: el isotipo con un aro de texto que gira. */
/* `overflow: hidden`: el aro es un cuadrado que gira y sus esquinas asomaban;
   en un móvil estrecho la página se deslizaba de lado. El texto va dentro del
   círculo, así que no se corta nada. */
.sello { position: relative; aspect-ratio: 1; width: 100%; max-width: 360px; display: grid; place-items: center; border-radius: 50%; overflow: hidden;
         background: radial-gradient(circle at 30% 25%, rgba(160, 32, 240, .45) 0%, var(--capa) 62%) }
.sello-aro { position: absolute; inset: 0; width: 100%; height: 100%; animation: sello-gira 22s linear infinite }
.sello-aro text { font: 600 13px var(--mono); letter-spacing: 3.2px; fill: var(--tinta-2) }
.sello-logo { width: 42%; height: auto }
@keyframes sello-gira { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .sello-aro { animation: none } }
.yo p { color: var(--tinta-2); font-size: 19px; max-width: 32em; margin: 18px 0 0 }
.yo blockquote { margin: 24px 0 0; padding-left: 18px; border-left: 2px solid var(--purpura); font: 600 clamp(20px, 2.2vw, 27px)/1.35 var(--display); letter-spacing: -.01em; max-width: 22em }
.preguntas { max-width: 820px; margin-top: 30px; border-top: 1px solid var(--linea) }
details { border-bottom: 1px solid var(--linea) }
summary { cursor: pointer; padding: 22px 0; font: 700 19px/1.3 var(--texto); list-style: none; display: flex; justify-content: space-between; gap: 16px }
summary::-webkit-details-marker { display: none }
summary::after { content: '+'; color: var(--purpura-claro); font: 500 24px/1 var(--mono) }
details[open] summary::after { content: '−' }
details p { margin: 0 0 22px; color: var(--tinta-2) }
.cierre { text-align: center; min-height: 90vh; display: grid; place-items: center }
.cierre .mesa { width: min(760px, 100%); margin-inline: auto; text-align: left }
.cierre h2 { font-size: clamp(56px, 11vw, 170px); font-weight: 800 }
.cierre h2 em { font-style: normal; color: var(--purpura-claro) }
.cierre p { color: var(--tinta-2); font-size: 19px; margin: 22px 0 34px }
.tel { display: block; margin-top: 18px; font: 500 15px/1 var(--mono); color: var(--tinta-2); text-decoration: none }
.pie { border-top: 1px solid var(--linea); padding-block: 26px 110px; color: var(--tinta-3); font-size: 13px }
.pie .marco { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px }
.barra-movil { display: none }
.revela { will-change: transform, opacity }

@media (max-width: 900px) {
  .web, .yo { grid-template-columns: minmax(0, 1fr) }
  .barra nav a:not(.nav-cta) { display: none }
  .b-servicios { grid-template-columns: 1fr 1fr }
}
@media (max-width: 560px) {
  .barra nav { display: none }
  .cierre h2 { font-size: clamp(44px, 13vw, 64px) }
  .acepto { font-size: 12.5px; line-height: 1.4 }
  .enviar { flex-direction: column; align-items: stretch; gap: 6px }
  .enviar small { text-align: center }
  .barra-movil { display: flex; position: fixed; inset: auto 0 0 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(var(--fondo-rgb), .9); border-top: 1px solid var(--linea); backdrop-filter: blur(10px) }
  .barra-movil .boton { width: 100% }
  .barra-movil { transition: transform .35s var(--ease) }
  .barra-movil.aparte { transform: translateY(110%) }
}


/* La cortina: sube, tapa el salto entre secciones y se va por arriba. */
.cortina { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; visibility: hidden; pointer-events: none;
           background: linear-gradient(140deg, var(--azul), var(--purpura)) }
.cortina img { width: 64px; height: 64px }

/* La propuesta de corrección del correo (contacto.js): «¿Quisiste decir …?». */
.campo-pista { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--tinta-2) }
.campo-pista[hidden] { display: none }
.campo-pista b { color: var(--tinta) }
.campo-pista button { margin-left: 6px; padding: 3px 10px; border: 1px solid var(--azul); border-radius: 999px; background: none;
                      color: var(--tinta); font: 600 12px/1.2 inherit; cursor: pointer }