/* Las páginas del menú y las secundarias. Comparten las piezas de producto de inicio.css (fichas, isla, frontera). */

.cabeza-pagina { padding: clamp(64px, 10vw, 140px) 0 clamp(40px, 6vw, 72px); }
.cabeza-pagina h1, .iphone-cabeza h1 { font-size: clamp(46px, 6.4vw, 96px); line-height: .98; letter-spacing: -.036em; max-width: 14ch; }
.cabeza-pagina h1 span, .iphone-cabeza h1 span { display: block; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.25; letter-spacing: -.016em; margin-top: .7em; max-width: 30ch; }
h1 span, h2 span { color: var(--texto-3); }
[data-noche] h1 span, [data-noche] h2 span { color: var(--c-neutro-400); }
section h2.t-2 { max-width: 20ch; }
.mas { margin-top: 32px; }
.mas a { font-weight: 600; }
.nota-ejemplo { margin-top: 18px; }

section { scroll-margin-top: var(--cabecera); }

/* ------------------------------------------------------------ cómo funciona: el viaje de una frase */

@keyframes pista { 0%, 100% { height: 18%; } 40% { height: 90%; } 70% { height: 45%; } }

/* la reunión que se oye, con su antes y después */

.esencial-vivo li { transition: background-color .3s; border-radius: 8px; }
.esencial-vivo li.suena { background: var(--superficie); box-shadow: 0 0 0 8px var(--superficie); }
.esencial-vivo .min { border: 0; cursor: pointer; font-family: var(--letra-mono); }
.esencial-vivo .min:hover { outline: 1px solid currentColor; }

@media (max-width: 760px) {
  .esencial li { grid-template-columns: 64px 1fr auto; gap: 8px; font-size: 15px; }
}

/* un mes entero */
.mes { padding: clamp(80px, 12vw, 160px) 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.mes .entrada { margin-top: 20px; }
.mes h2.t-2 { font-size: clamp(34px, 3.6vw, 52px); }

@media (max-width: 899px) { .mes { grid-template-columns: 1fr; } }

/* los interruptores de los extras */
.extras { padding: clamp(72px, 10vw, 140px) 0 clamp(80px, 12vw, 160px); }
.extras .entrada { margin-top: 20px; max-width: 60ch; }
.interruptores { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--linea); }
.interruptor { border-bottom: 1px solid var(--linea); padding: 6px 0 14px; }
.interruptor [role="switch"] { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 14px 0 6px; font: 600 clamp(19px, 1.8vw, 24px)/1.2 var(--letra-titulo); letter-spacing: -.012em; color: var(--texto); }
.interruptor [role="switch"]:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; border-radius: 6px; }
.int-boton { flex: none; width: 51px; height: 31px; border-radius: 999px; background: var(--linea-fuerte); position: relative; transition: background-color .25s; }
.int-boton::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / .2); transition: transform .3s var(--muelle); }
[aria-checked="true"] .int-boton { background: var(--c-exito); }
[aria-checked="true"] .int-boton::after { transform: translateX(20px); }
.int-estado { color: var(--texto-3); max-width: 70ch; }
.int-on { display: none; color: var(--texto-2); }
.int-on em { font-style: normal; color: var(--texto-3); margin-left: 4px; white-space: nowrap; }
[aria-checked="true"] + .int-estado .int-on { display: inline; }
[aria-checked="true"] + .int-estado .int-off { display: none; }

/* ------------------------------------------------------------ privacidad */

.guardian { padding: clamp(80px, 12vw, 160px) 0; }
.guardian .entrada { margin-top: 20px; max-width: 62ch; }
.guardian-mesa { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.guardian-rotulo { font-weight: 600; font-size: 15px; color: var(--texto-3); margin-bottom: 12px; }
.guardian-acciones { display: grid; gap: 8px; }
.guardian-acciones button { text-align: left; min-height: 52px; padding: 12px 18px; border-radius: 16px; border: 1px solid var(--linea); background: var(--superficie); color: var(--texto); font: 500 17px/1.35 var(--letra); cursor: pointer; transition: border-color .2s, background-color .2s; }
.guardian-acciones button:hover { border-color: var(--linea-fuerte); }
.guardian-acciones button[aria-checked="true"] { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.guardian-condiciones { margin-top: 18px; display: grid; gap: 10px; }
.casilla { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--texto-2); cursor: pointer; min-height: 32px; }
.casilla input { width: 20px; height: 20px; accent-color: var(--texto); }
.guardian-camino { position: sticky; top: calc(var(--cabecera) + 24px); display: grid; gap: 10px; background: var(--c-negro); color: var(--c-hueso); border-radius: 26px; padding: 18px; }
.paso-g { padding: 14px 16px; border-radius: 16px; background: var(--c-neutro-900); }
.paso-g-rotulo { font-size: 13px; color: var(--c-neutro-400); margin-bottom: 4px; }
.paso-g-valor { font-size: 17px; line-height: 1.4; }
.resultado .paso-g-valor { font-weight: 600; font-size: 17px; }
.resultado .paso-g-rotulo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.veredicto { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--c-neutro-800); color: var(--c-hueso); }
.resultado[data-g-tipo="no"] .veredicto, .resultado[data-g-tipo="nunca"] .veredicto { background: #3a1513; color: #ff8a80; }
.escalera-titulo { margin-top: clamp(56px, 8vw, 96px); }
.peldano { transition: background-color .3s, color .3s, border-color .3s; }
.peldano.activo { background: var(--texto) !important; color: var(--fondo) !important; border-color: var(--texto) !important; }
.peldano.activo p { color: inherit !important; }
@media (max-width: 899px) { .guardian-mesa { grid-template-columns: 1fr; } .guardian-camino { position: static; } }

.clases { background: var(--fondo-2); border-block: 1px solid var(--linea); padding: clamp(72px, 10vw, 140px) 0; }
.escalera { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 12px; }
.peldano { background: var(--superficie); border: 1px solid var(--linea); border-radius: 22px; padding: 22px; display: grid; gap: 10px; align-content: start; }
.peldano:nth-child(1) { min-height: 220px; } .peldano:nth-child(2) { min-height: 270px; } .peldano:nth-child(3) { min-height: 320px; } .peldano:nth-child(4) { min-height: 370px; }
.peldano-nombre { font: 600 21px/1.15 var(--letra-titulo); letter-spacing: -.015em; }
.peldano p:nth-child(2) { color: var(--texto-2); }
.peldano-pide { margin-top: auto; font-weight: 600; font-size: 15px; }
@media (max-width: 899px) { .escalera { grid-template-columns: 1fr 1fr; } .peldano { min-height: 0 !important; } }
@media (max-width: 520px) { .escalera { grid-template-columns: 1fr; } }

.gestos { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--linea); }
.gestos-titulo span { display: block; color: var(--texto-3); font-size: .62em; margin-top: .35em; letter-spacing: -.01em; }
.gestos-filas { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px); }
.gesto p + p { margin-top: 12px; color: var(--texto-2); font-size: 19px; line-height: 1.45; }
@media (max-width: 760px) { .gestos-filas { grid-template-columns: 1fr; } }

.no-hace { background: var(--c-noche); color: var(--c-hueso); padding: clamp(80px, 12vw, 160px) 0; }
.no-lista { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 64px); }
.no-lista li { padding: 16px 0; border-top: 1px solid var(--c-neutro-800); font: 500 clamp(19px, 1.7vw, 23px)/1.3 var(--letra-titulo); letter-spacing: -.01em; }
.no-lista li.no-seguro { grid-column: 1 / -1; color: var(--c-hueso); }
.no-lista li.no-seguro span { display: block; margin-top: 6px; font: 400 17px/1.5 var(--letra); color: var(--c-neutro-300); letter-spacing: 0; max-width: 70ch; }
@media (max-width: 760px) { .no-lista { grid-template-columns: 1fr; } }

.sale { padding: clamp(80px, 12vw, 160px) 0; }
.tabla-sale { margin-top: 32px; border-top: 1px solid var(--linea); }
.fila-sale { display: grid; grid-template-columns: 2fr 1.4fr 1.4fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.fila-sale.cabeza { color: var(--texto-3); font-size: 15px; font-weight: 600; }
.fila-sale.nunca span:last-child { color: var(--texto); font-weight: 700; }
@media (max-width: 760px) {
  .fila-sale { grid-template-columns: 1fr; gap: 2px; }
  .fila-sale.cabeza { display: none; }
  .fila-sale span:nth-child(2), .fila-sale span:nth-child(3) { color: var(--texto-3); font-size: 15px; }
}

/* ------------------------------------------------------------ iPhone */
.iphone-cabeza { background: var(--c-noche); color: var(--c-hueso); padding: clamp(56px, 8vw, 110px) 0 32px; overflow: hidden; }
.iphone-cabeza-dentro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.iphone-cabeza h1 { color: var(--c-hueso); }
.iphone-cabeza .entrada { color: var(--c-neutro-300); margin-top: 22px; }
.iphone-nota { color: var(--c-neutro-400); margin-top: 18px; }
.dos-telefonos { display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, 2.4vw, 32px); }
.dos-telefonos .telefono { width: clamp(220px, 21vw, 290px); }
.dos-telefonos .telefono-b { margin-top: clamp(32px, 4vw, 56px); }
.telefono { border-radius: 40px; padding: 0; background: none; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 40px 70px -30px rgb(0 0 0 / .85); }
.telefono img { border-radius: 0; display: block; width: 100%; height: auto; }
@media (max-width: 899px) {
  .iphone-cabeza-dentro { grid-template-columns: 1fr; }
  .dos-telefonos { margin-top: 24px; }
  .dos-telefonos .telefono { width: min(280px, 78vw); }
  .telefono-b { display: none; }
}

.conectar { padding: clamp(80px, 12vw, 160px) 0 clamp(40px, 6vw, 80px); }
.conectar-escena { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(24px, 6vw, 96px); }
.panel-qr { margin: 0; width: 300px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-2); padding: 22px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.pq-titulo { font-weight: 600; font-size: 17px; }
.pq-sub { color: var(--texto-3); font-size: 15px; }
.panel-qr img { width: 148px; height: 148px; margin: 10px 0 4px; border-radius: 6px; }
.pq-vale { font-size: 13px; color: var(--texto-2); }
.pantalla-par { margin: 0; }
.pp-movil { width: 250px; aspect-ratio: 556 / 1154; border-radius: 52px; background: var(--c-hueso); color: var(--c-tinta); border: 11px solid var(--c-tinta); box-shadow: 0 0 0 2px var(--c-neutro-800), 0 50px 80px -30px rgb(0 0 0 / .6); padding: 64px 18px 22px; display: flex; flex-direction: column; gap: 8px; }
.pp-marca { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--c-neutro-600); }
.pp-titulo { font: 600 24px/1.1 var(--letra-titulo); letter-spacing: -.02em; margin-top: 8px; }
.pp-sub { font-size: 13px; color: var(--c-neutro-500); }
.pp-puede { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13px; color: #4a4a47; }
.pp-puede li { padding: 9px 11px; border-radius: 11px; background: #fff; }
.pp-boton { margin-top: auto; display: grid; place-items: center; min-height: 46px; border-radius: 14px; background: var(--c-tinta); color: var(--c-hueso); font-weight: 600; font-size: 15px; }
.pasos-texto { list-style: none; margin: 40px auto 0; padding: 0; max-width: 760px; display: grid; gap: 10px; }
.pasos-texto li { color: var(--texto-2); font-size: 17px; }
.pasos-texto strong { color: var(--texto); font-weight: 600; }
.conectar .nota-ejemplo { max-width: 760px; margin-inline: auto; }
.llega { padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 12vw, 160px); }
.llega-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
.llega-columnas ul { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
.llega-columnas li { padding: 12px 0; border-bottom: 1px solid var(--linea); color: var(--texto-2); }
@media (max-width: 760px) { .llega-columnas { grid-template-columns: 1fr; } }

.nativa { background: var(--c-noche); color: var(--c-hueso); padding: clamp(80px, 12vw, 160px) 0; overflow: hidden; }
.nativa-dentro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.nativa .entrada { color: var(--c-neutro-300); margin-top: 20px; }
.nativa-lista { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--c-neutro-800); }
.nativa-lista li { padding: 16px 0; border-bottom: 1px solid var(--c-neutro-800); color: var(--c-neutro-300); }
.nativa-lista strong { color: var(--c-hueso); font-weight: 600; }
.bloqueo { justify-self: center; position: relative; width: 300px; aspect-ratio: 556 / 1154; border-radius: 52px; border: 11px solid var(--c-tinta); box-shadow: 0 0 0 2px var(--c-neutro-800), 0 50px 80px -30px var(--c-negro);
  background: linear-gradient(180deg, rgb(8 8 10 / .35), rgb(8 8 10 / .7)), url(/img/cuervo-720.webp?v=8052e4928b) 50% 70% / 150% auto no-repeat, radial-gradient(120% 80% at 30% 20%, #34343a, #0d0d0f 70%); display: flex; flex-direction: column; align-items: center; padding: 14px 16px 22px; }
.bloqueo-isla { display: flex; align-items: center; justify-content: space-between; width: 128px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--c-negro); font-size: 13px; }
.bloqueo-isla .mono { font-variant-numeric: tabular-nums; }
.bloqueo-fecha { margin-top: 26px; font-size: 15px; color: var(--c-neutro-200); font-weight: 500; }
.bloqueo-hora { font: 600 78px/1 var(--letra-titulo); letter-spacing: -.03em; color: var(--c-hueso); margin-top: 2px; }
.widget-rect { margin-top: 14px; width: 100%; border-radius: 18px; background: rgb(255 255 255 / .1); padding: 10px 12px; }
.widget-marca { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--c-neutro-300); }
.widget-titulo { font-weight: 600; font-size: 15px; line-height: 1.25; margin-top: 3px; }
.widget-sub { font-size: 12px; color: var(--c-neutro-300); }
.actividad { margin-top: auto; width: 100%; display: flex; align-items: center; gap: 10px; border-radius: 22px; background: rgb(0 0 0 / .78); padding: 14px; }
.act-titulo { font-weight: 600; font-size: 15px; } .act-sub { font-size: 12px; color: var(--c-neutro-300); }
.act-tiempo { margin-left: auto; font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .nativa-dentro { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ sobre Corvis */
.sobre-cabeza { background: var(--c-noche); color: var(--c-hueso); padding: clamp(64px, 9vw, 120px) 0 clamp(72px, 10vw, 140px); }
.sobre-cabeza h1 { color: var(--c-hueso); font-size: clamp(46px, 6.4vw, 96px); line-height: .98; letter-spacing: -.036em; }
.cuervos-mito { margin-top: clamp(20px, 3vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 32px); }
.cuervo-mito { margin: 0; display: grid; gap: 18px; }
.mito-figura { width: 100%; max-width: 240px; height: auto; }
.cuervo-mito:nth-child(2) .mito-figura { transform: scaleX(-1); margin-left: auto; }

.cuervo-mito figcaption { display: grid; gap: 4px; }
.cuervo-mito:nth-child(2) figcaption { text-align: right; }
.cuervo-mito figcaption span:last-child { color: var(--c-neutro-400); font-size: 17px; }
.mito-texto { color: var(--c-neutro-300); max-width: 48ch; margin-top: clamp(32px, 5vw, 56px); }
.testigo { padding: clamp(80px, 12vw, 160px) 0 clamp(40px, 6vw, 80px); }
.testigo h2.t-2 { max-width: 22ch; }
.testigo .entrada { margin-top: 22px; max-width: 56ch; }
.dibujo { padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 12vw, 160px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.dibujo .entrada { margin-top: 20px; }
.construccion { width: 100%; height: auto; overflow: hidden; border-radius: 26px; background: var(--fondo-2); border: 1px solid var(--linea); }
.construccion .guia { fill: none; stroke: var(--texto-3); stroke-width: 1.4; stroke-dasharray: 7 6; }
.construccion .silueta { fill: var(--texto); }
.construccion .ojo-construccion { fill: var(--ojo); }
.construccion .cota { fill: var(--texto-2); font: 500 21px var(--letra); text-anchor: middle; }
.js .construccion .silueta { opacity: 0; transition: opacity 1s var(--muelle) 1.2s; }
.js .construccion .guia { stroke-dashoffset: 4000; stroke-dasharray: 7 6; opacity: 0; transition: opacity .6s; }
.js .dibujo.en-marcha .construccion .silueta { opacity: 1; }
.js .dibujo.en-marcha .construccion .guia { opacity: 1; }
.js .dibujo.en-marcha .construccion .g2 { transition-delay: .3s; } .js .dibujo.en-marcha .construccion .g3 { transition-delay: .6s; }
@media (max-width: 899px) { .dibujo { grid-template-columns: 1fr; } }
.ojos { background: var(--c-noche); color: var(--c-hueso); padding: clamp(80px, 12vw, 160px) 0; }
.ojos-mesa { margin-top: 40px; display: grid; gap: 22px; justify-items: center; }
.ojos-cuervo { position: relative; width: min(100%, 420px); aspect-ratio: 1280 / 900; margin-inline: auto; }
.ojos-cuervo img, .ojos-cuervo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ojos-cuervo canvas { opacity: 0; transition: opacity .8s var(--muelle); }
.ojos-cuervo.vivo canvas { opacity: 1; } .ojos-cuervo.vivo img { opacity: 0; transition: opacity .8s .1s; }
.ojos-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ojos-botones button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .16); background: transparent; color: var(--c-hueso); font: 500 15px/1 var(--letra); cursor: pointer; }
.ojos-botones button[aria-checked="true"] { background: var(--c-hueso); color: var(--c-tinta); }
.ojos-dice { color: var(--c-neutro-300); min-height: 1.6em; text-align: center; }
.voz-marca { padding: clamp(80px, 12vw, 160px) 0; }
.voz-marca .entrada { margin-top: 20px; max-width: 56ch; }
.voz-marca .oir { margin-top: 28px; background: transparent; color: var(--texto); border: 1px solid var(--linea-fuerte); }

/* ------------------------------------------------------------ instalar */
.instalar-cabeza { padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 6vw, 72px); display: grid; justify-items: center; text-align: center; gap: 14px; }
.instalar-icono { width: clamp(140px, 14vw, 200px); margin-bottom: 8px; }
.instalar-cabeza h1 { font-size: clamp(46px, 6vw, 88px); line-height: 1; letter-spacing: -.034em; }
.instalar-cabeza .entrada { max-width: 40ch; }
.instalar-estado { margin-top: 18px; color: var(--texto-2); font-size: 17px; max-width: 46ch; }
.estado-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ojo); vertical-align: .12em; margin-right: 8px; }
.instalar-acciones { margin: 26px 0 14px; }
.boton-dur { font-weight: 500; font-variant-numeric: tabular-nums; margin-left: 2px; padding-left: 10px; border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent); }

.requisitos, .ocupa, .pasos-instalar { padding: clamp(40px, 7vw, 100px) 0; }
.req-lista { margin: 32px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 64px); }
.req-lista div { padding: 18px 0; border-top: 1px solid var(--linea); }
.req-lista dt { font: 600 21px/1.2 var(--letra-titulo); letter-spacing: -.012em; }
.req-lista dd { margin: 8px 0 0; color: var(--texto-2); }
@media (max-width: 760px) { .req-lista { grid-template-columns: 1fr; } }
.barra-disco { margin-top: 32px; display: flex; height: 76px; border-radius: 18px; overflow: hidden; border: 1px solid var(--linea); font-size: 15px; }
.barra-disco span { display: flex; flex-direction: column; justify-content: center; padding: 0 14px; white-space: nowrap; overflow: hidden; }
.barra-disco b { font-weight: 600; }
.disco-modelos { flex: 14.6; background: var(--c-negro); color: var(--c-hueso); }
.disco-programa { flex: 2; background: var(--c-neutro-700); color: var(--c-hueso); }
.disco-margen { flex: 3; background: repeating-linear-gradient(135deg, var(--fondo-2) 0 8px, var(--fondo) 8px 16px); color: var(--texto-3); }
@media (max-width: 520px) { .disco-programa b { display: none; } .disco-margen { font-size: 0; } }
.pasos { margin: 32px 0 0; padding-left: 1.4em; display: grid; gap: 28px; max-width: 760px; }
.pasos li::marker { font: 600 21px var(--letra-titulo); color: var(--texto-3); }
.pasos p + p { color: var(--texto-2); margin-top: 6px; }

/* ------------------------------------------------------------ preguntas */
.faq { max-width: 820px; padding-bottom: clamp(80px, 12vw, 160px); }
.faq details { border-top: 1px solid var(--linea); }
.faq details:last-child { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font: 600 clamp(19px, 1.8vw, 23px)/1.3 var(--letra-titulo); letter-spacing: -.012em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--muelle); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { color: var(--texto-2); padding: 0 0 24px; max-width: 64ch; }

/* ------------------------------------------------------------ legales y 404 */
.legal { max-width: 760px; padding: clamp(56px, 8vw, 110px) 0 clamp(80px, 12vw, 160px); }
.legal h2 { margin: 36px 0 10px; }
.legal p { color: var(--texto-2); margin-top: 10px; }
.legal-fecha { color: var(--texto-3) !important; font-size: 15px; }
.legal-titular { padding: 14px 18px; border-radius: 14px; background: var(--fondo-2); border: 1px solid var(--linea); color: var(--texto) !important; }
.no-existe { padding: clamp(80px, 14vw, 200px) 0; }
.no-existe-acciones { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
/* cómo funciona: la reunión que se oye es la primera pieza */
.pagina-como .cabeza-pagina { padding: clamp(48px, 7vw, 96px) 0 28px; }

/* privacidad: el titular y, al lado, el panel de lo que sale */
.cabeza-privacidad { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.cabeza-captura { margin: 0; }
.cabeza-captura figcaption { margin-top: 12px; }
@media (max-width: 899px) { .cabeza-privacidad { grid-template-columns: 1fr; } }

/* cómo funciona: la reunión, dentro de una ventana de Corvis */

/* ------------------------------------------------------------ cómo funciona: los tres pasos con las pantallas reales */
.pasos-reales { padding-bottom: clamp(56px, 8vw, 120px); }
.pasos-tres { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(64px, 9vw, 140px); }
.paso-real { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.paso-real:nth-child(even) .paso-texto { order: 2; }
.paso-texto p:not(.paso-num) { color: var(--texto-2); margin-top: 14px; max-width: 44ch; }
.paso-texto .peque { color: var(--texto-3); }
.paso-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea-fuerte); color: var(--texto-2); font-size: 15px; margin-bottom: 18px; }
.paso-medio { position: relative; }
.paso-medio video.pantalla-real { max-width: 560px; margin-inline: auto; }
.extras-avanzado-rotulo { margin-top: 40px; }
@media (max-width: 860px) { .paso-real { grid-template-columns: 1fr; } .paso-real:nth-child(even) .paso-texto { order: 0; } }

/* ------------------------------------------------------------ iPhone: preguntar desde el móvil y los pasos de emparejar */
.pregunta-movil { padding: clamp(72px, 10vw, 136px) 0 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pregunta-movil .entrada { margin-top: 20px; max-width: 42ch; }
.pasos-conectar { list-style: none; margin: 36px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.pasos-conectar li { border-top: 1px solid var(--linea-fuerte); padding-top: 20px; color: var(--texto-2); }
.pasos-conectar strong { color: var(--texto); }
.nativa-nota { margin-top: 24px; color: var(--c-neutro-400); }
@media (max-width: 860px) { .pregunta-movil, .pasos-conectar { grid-template-columns: 1fr; } }

/* el cierre corto de las páginas interiores: el lema y «Ver cómo funciona» */
.cierre-corto { padding: clamp(80px, 10vw, 140px) var(--margen); }
.cierre-corto .cierre-lema { max-width: 18ch; }
.cierre-equipo { margin-top: 18px; color: var(--c-neutro-400); }
.nativa-sola { grid-template-columns: 1fr; max-width: 760px; }

/* cómo funciona: los tres pasos con la palabra fija a la izquierda, como el reloj de «Un día» */
.pasos-dia { padding: clamp(24px, 4vw, 56px) 0 clamp(56px, 8vw, 104px); }
.pasos-dia .dia-cuerpo { margin-top: 0; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
.pasos-dia .reloj { font-size: clamp(52px, 5.4vw, 88px); letter-spacing: -.045em; }
.pasos-dia .escena-pantalla { padding: 0; border: 0; background: none; border-radius: 0; overflow: visible; position: relative; }
.pasos-dia .escena-texto p:not(.escena-hora) { color: var(--texto-2); margin-top: 14px; max-width: 52ch; }
.pasos-dia .escena-texto .peque { color: var(--texto-3); }
.pasos-dia .escena-pantalla video.pantalla-real { max-width: 620px; }
@media (max-width: 899px) { .pasos-dia .dia-cuerpo { grid-template-columns: 1fr; } .pasos-dia .escena-hora { font-size: 44px; } }
.siguiente { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 120px); }
.siguiente a { display: grid; gap: 6px; padding-top: 28px; border-top: 1px solid var(--linea-fuerte); color: var(--texto); text-decoration: none; }
.siguiente a:hover .t-3 { color: var(--enlace); }

.conectar-una { display: grid; grid-template-columns: minmax(0, 7fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; }
.conectar-una .entrada { margin-top: 18px; max-width: 52ch; }
.qr-real { margin: 0; padding: 22px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), var(--sombra-2); display: grid; gap: 10px; justify-items: center; }
.qr-real img { width: 200px; height: 200px; }
.qr-real figcaption { color: #6e6e73; }
@media (max-width: 760px) { .conectar-una { grid-template-columns: 1fr; justify-items: start; } }
.nativa-clara { --texto: inherit; --texto-2: inherit; --texto-3: inherit; --linea: inherit; --linea-fuerte: inherit; --enlace: inherit; --fondo-2: inherit;
  background: var(--fondo); color: var(--texto); padding: clamp(56px, 8vw, 104px) 0; }
.nativa-clara .nativa-lista { border-top-color: var(--linea); }
.nativa-clara .nativa-lista li { border-bottom-color: var(--linea); color: var(--texto-2); }
.nativa-clara .nativa-lista strong { color: var(--texto); }
.no-hace-clara { --texto: inherit; --texto-2: inherit; --texto-3: inherit; --linea: inherit; --linea-fuerte: inherit; --enlace: inherit; --fondo-2: inherit;
  background: var(--fondo-2); color: var(--texto); padding: clamp(64px, 9vw, 120px) 0; }
.no-hace-clara .no-lista li { border-top-color: var(--linea); }
.no-hace-clara .no-lista li.no-seguro { color: var(--texto); }
.no-hace-clara .no-lista li.no-seguro span { color: var(--texto-2); }
/* Sobre Corvis, entera de noche (un solo tono, sin franjas) */
.pagina-sobre main { --fondo: var(--c-noche); --fondo-2: var(--c-neutro-850); --texto: var(--c-hueso); --texto-2: var(--c-neutro-300); --texto-3: var(--c-neutro-400);
  --linea: var(--c-neutro-800); --linea-fuerte: var(--c-neutro-700); --enlace: var(--m-marca-300); background: var(--c-noche); color: var(--c-hueso); }
.pagina-sobre .construccion .guia { stroke: rgb(255 255 255 / .35); }
/* las cotas del dibujo, legibles aunque pasen por encima de la cabeza */
.construccion .cota { paint-order: stroke; stroke: var(--fondo-2); stroke-width: 7px; stroke-linejoin: round; }
.construccion .cota-ojo { paint-order: normal; stroke: none; }

/* cómo funciona: el titular y, a su lado, el vídeo del recorrido (abre la hoja) */
.cabeza-con-video { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.cabeza-video { position: relative; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; background: #0f0f11;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 30px 70px -30px rgb(12 11 13 / .55); }
.cabeza-video video { display: block; width: 100%; height: auto; }
.cabeza-video-play { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 18px;
  border-radius: 999px; background: var(--c-acento); color: var(--c-sobre-acento); font: 600 17px/1 var(--letra); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .6); }
@media (max-width: 860px) { .cabeza-con-video { grid-template-columns: 1fr; } }

/* iPhone: las capturas, dentro de un marco de iPhone con su isla */
.telefono { padding: 8px; border-radius: 48px; background: #0b0b0c; overflow: visible; position: relative;
  box-shadow: 0 0 0 1.5px #4a4a4e, 0 0 0 3px #1c1c1e, 0 40px 70px -30px rgb(0 0 0 / .85); }
.telefono::after { content: ''; position: absolute; left: 50%; top: 18px; width: 31%; height: 24px; transform: translateX(-50%); border-radius: 999px; background: #000; }
.telefono img { border-radius: 40px; }
/* Sobre: los cuervos con luz de borde, para que no sean negro sobre negro; las cotas, fuera en el móvil */
.mito-figura { filter: drop-shadow(0 0 1px rgb(255 255 255 / .45)) drop-shadow(0 0 28px color-mix(in srgb, var(--c-marca) 45%, transparent)); }
@media (max-width: 640px) { .construccion .cota { display: none; } }
.testigo { padding-top: clamp(56px, 8vw, 104px); }
.dibujo { padding-bottom: clamp(56px, 8vw, 104px); }
/* Cómo funciona: la captura de «Al grabar», a su tamaño (sin ampliarla) */
.pasos-dia .escena:first-child .pantalla-real { max-width: 560px; }
.extras { padding-bottom: clamp(24px, 4vw, 48px); }

.cabeza-video-caja { display: grid; gap: 14px; justify-items: start; }
@media (max-width: 860px) { .cabeza-video { display: none; } }
/* los pasos: las capturas, como mucho a su tamaño (nunca ampliadas) */
.pasos-dia .pantalla-real { max-width: 680px; }

/* capturas que siguen por abajo: se funden en vez de cortar */
.cabeza-captura img, .pasos-dia .escena:first-child .pantalla-real { -webkit-mask-image: linear-gradient(#000 85%, transparent); mask-image: linear-gradient(#000 85%, transparent); }
.cabeza-video-caja { position: relative; }
.cabeza-video-boton { position: absolute; left: 16px; bottom: 16px; }
@media (max-width: 860px) { .cabeza-video-boton { position: static; } }
.construccion .cota-ojo { paint-order: normal; stroke: none; }
.construccion .guia-cota { stroke: var(--texto-3); stroke-width: 1.2; }