/* Sistema editorial compartido. Las miniaturas conservan su escala de dispositivo. */
:root {
  --fuente: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto: var(--fuente);
  --display: var(--fuente);
  --mano: var(--fuente);
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s16: 64px;
  --s24: 96px;
  --tipo-nota: .75rem;
  --tipo-pequeno: .875rem;
  --tipo-texto: 1rem;
  --tipo-entrada: 1.125rem;
  --tipo-h3: 1.25rem;
  --tipo-h2: clamp(2rem, 1.3rem + 2.5vw, 3rem);
  --tipo-h1: clamp(2.75rem, 1.2rem + 4vw, 5rem);
  --interlineado-texto: 1.6;
  --interlineado-titulo: 1.08;
  --ancho: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --seccion-espacio: clamp(64px, 8vw, 96px);
  --grupo-espacio: clamp(32px, 4vw, 48px);
  --radio-tarjeta: 20px;
  --radio-campo: 12px;
}
body { font: 400 var(--tipo-texto)/var(--interlineado-texto) var(--fuente); }
button, input, select, textarea, svg text { font-family: var(--fuente); }
h1, h2, h3 { font-family: var(--fuente); font-weight: 600; }
strong, b { font-weight: 600; }
/* Un mismo borde de contenido, desde la cabecera hasta el pie. */
.envoltura, .cinema-inner {
  width: min(calc(100% - 2 * var(--gutter)), var(--ancho));
  margin-inline: auto;
}
.cinema-bottom {
  width: min(calc(100% - 2 * var(--gutter)), var(--ancho));
  left: 50%; right: auto; translate: -50% 0;
}
.bloque, .intro-statement { padding-block: var(--seccion-espacio); }
.intro-statement { padding-inline: 0; }
.bloque-cabeza { gap: var(--s6); margin-bottom: var(--grupo-espacio); max-width: 46rem; }
.bloque-cabeza h2, .intro-statement h2 {
  font-size: var(--tipo-h2);
  line-height: var(--interlineado-titulo);
  font-weight: 600;
  letter-spacing: -.04em;
}
.bloque-cabeza p, .intro-statement p:not(.eyebrow) {
  font-size: var(--tipo-entrada);
  line-height: var(--interlineado-texto);
  max-width: 40rem;
}
.intro-statement p:not(.eyebrow) { margin: var(--s6) auto 0; }
.intro-statement .eyebrow { margin-bottom: var(--s6); }
.intro-statement > .envoltura > span { margin-top: var(--s8); font-size: var(--tipo-pequeno); }
/* Portada: misma familia, pesos y espaciado, con el título principal como primer nivel. */
.cinema h1 { font-size: var(--tipo-h1); line-height: 1.04; letter-spacing: -.055em; }
.cinema-copy .eyebrow, .intro-statement .eyebrow {
  font-size: var(--tipo-nota); font-weight: 600; letter-spacing: .12em;
}
.cinema-copy .eyebrow { margin-bottom: var(--s6); }
.cinema-description { font-size: var(--tipo-entrada); line-height: var(--interlineado-texto); margin-block: var(--s6); }
.cinema-secondary { font-size: var(--tipo-pequeno); margin-top: var(--s4); }
.cinema-caption { gap: var(--s4); margin-top: var(--s8); padding-top: var(--s6); }
.cinema .chapter-title { font-size: var(--tipo-pequeno); line-height: 1.4; }
.chapter-index, .motion-toggle, .scroll-hint { font-size: var(--tipo-nota); }
.chapter-controls { padding: var(--s1); gap: var(--s1); }
.chapter-controls button { font-size: var(--tipo-nota); padding: var(--s3) var(--s4); min-height: 40px; }
/* Controles: texto 14 px, altura 48 px y espaciado en múltiplos de ocho. */
.boton, .cinema-cta {
  min-height: 48px; padding: var(--s3) var(--s6); gap: var(--s4);
  font: 600 var(--tipo-pequeno)/1.4 var(--fuente);
  border-radius: 999px;
}
.cabecera .boton { min-height: 40px; padding: var(--s2) var(--s4); font-size: var(--tipo-pequeno); }
.cabecera .envoltura, .menu { gap: var(--s6); }
.menu, .telefono { font-size: var(--tipo-pequeno); font-weight: 500; }
.menu.abierto { padding: var(--s6) var(--gutter); gap: var(--s6); }
/* Proceso */
.proceso { color: var(--tinta); background: #fff; }
.proceso .bloque-cabeza p, .paso > p, .despues p { color: var(--tinta-2); }
.pasos { gap: var(--s8) var(--s6); }
.paso { gap: var(--s4); }
.paso h3 { font-size: var(--tipo-h3); line-height: 1.25; letter-spacing: -.02em; }
.paso > p { font-size: var(--tipo-texto); line-height: var(--interlineado-texto); }
.paso-num { font: 600 var(--tipo-pequeno)/1.4 var(--fuente); color: #70538b; }
.paso .aprobado { color: #287354; font-size: var(--tipo-pequeno); font-weight: 500; }
.despues {
  margin-top: var(--grupo-espacio); padding: var(--s8); gap: var(--s6);
  border-radius: var(--radio-tarjeta); background: var(--lienzo); box-shadow: none;
}
.despues h3 { font-size: var(--tipo-h3); line-height: 1.25; margin-bottom: var(--s2); }
.despues .version { font: 600 var(--tipo-h2)/1.08 var(--fuente); }
/* Servicios y fichas: los mismos títulos y distancias entre bloques. */
.servicios { gap: 0 var(--s12); }
.servicio { grid-template-columns: 56px 1fr; gap: var(--s6); padding-block: var(--s8); }
.servicio .icono { width: 56px; height: 56px; border-radius: 16px; }
.servicio h3, .tambien h3, .precio h3 {
  font-size: var(--tipo-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.02em;
}
.servicio h3 { margin-bottom: var(--s3); }
.servicio p, .tambien li span, .capa-casa span, .precio p {
  font-size: var(--tipo-texto); line-height: var(--interlineado-texto);
}
.servicio a { margin-top: var(--s4); font-size: var(--tipo-pequeno); font-weight: 600; }
.tambien { margin-top: var(--grupo-espacio); padding-top: var(--s8); gap: var(--s8); }
.tambien ul { gap: var(--s6) var(--s8); }
.tambien li b, .capa-casa b { font-size: var(--tipo-texto); font-weight: 600; margin-bottom: var(--s1); }
.casa .envoltura, .contacto .envoltura { gap: var(--s16); align-items: start; }
.casa:not(#preguntas) .bloque-cabeza { margin-bottom: 0; }
.pila-capas { gap: var(--s4); }
.capa-casa { gap: var(--s4); padding: var(--s6); border-radius: var(--radio-tarjeta); }
.capa-casa .n { font-family: var(--fuente); font-size: var(--tipo-pequeno); border-radius: var(--radio-campo); }
.precios-tabla { gap: var(--s6); }
.precio { padding: var(--s6); gap: var(--s4); border-radius: var(--radio-tarjeta); }
.precio h3 { min-height: 3.75em; }
.precio .cifra { font: 600 2rem/1.15 var(--fuente); letter-spacing: -.03em; }
.precio .cifra small { font: 400 var(--tipo-pequeno)/1.4 var(--fuente); }
.aviso-precios { margin-top: var(--s6); font-size: var(--tipo-pequeno); line-height: var(--interlineado-texto); }
/* Preguntas y contacto */
.preguntas { max-width: 52rem; }
.preguntas summary { font: 600 var(--tipo-h3)/1.4 var(--fuente); padding: var(--s6) var(--s12) var(--s6) 0; }
.preguntas details p { padding-bottom: var(--s6); font-size: var(--tipo-texto); line-height: var(--interlineado-texto); }
.contacto-datos { gap: var(--s2); font-size: var(--tipo-texto); }
form.idea { border-radius: var(--radio-tarjeta); padding: var(--s8); gap: var(--s6); }
.campos { gap: var(--s6) var(--s4); }
label.campo { gap: var(--s2); font-size: var(--tipo-pequeno); }
label.campo input, label.campo textarea {
  min-height: 48px; border-radius: var(--radio-campo); padding: var(--s3) var(--s4);
  font: 400 var(--tipo-texto)/1.5 var(--fuente);
}
label.campo textarea { min-height: 144px; }
fieldset.chips { gap: var(--s3); }
fieldset.chips legend { font-size: var(--tipo-pequeno); margin-bottom: var(--s3); }
.chips-lista { gap: var(--s2); }
.chips-lista span { font-size: var(--tipo-pequeno); padding: var(--s2) var(--s4); line-height: 1.5; }
.legal-check { font-size: var(--tipo-pequeno); gap: var(--s2); }
.rgpd { font-size: var(--tipo-nota); line-height: 1.6; }
/* Pie */
.pie { padding-block: var(--s16) var(--s8); font-size: var(--tipo-pequeno); }
.pie .envoltura { gap: var(--s8); }
.pie h3 { font: 600 var(--tipo-texto)/1.4 var(--fuente); margin-bottom: var(--s4); }
.pie img { margin-bottom: var(--s4); }
.pie ul { gap: var(--s2); }
.pie .legal { padding-top: var(--s6); font-size: var(--tipo-nota); }
@media (max-width: 900px) {
  .casa .envoltura, .contacto .envoltura { gap: var(--s12); }
}
@media (max-width: 700px) {
  :root { --tipo-h1: clamp(2.5rem, 10vw, 3rem); --tipo-entrada: 1rem; }
  .cinema-copy { padding-top: var(--s6); }
  .cinema-copy .eyebrow { font-size: .625rem; margin-bottom: var(--s4); }
  .cinema-description { margin-block: var(--s4); }
  .cinema-cta { min-height: 44px; padding: var(--s2) var(--s6); }
  .cinema-bottom { gap: var(--s2); }
  .chapter-controls button { font-size: .625rem; padding: var(--s2) var(--s3); }
  .motion-toggle { font-size: .625rem; }
  .cabecera .envoltura { gap: var(--s4); }
  .pasos { gap: var(--s8) var(--s4); }
  .paso h3 { font-size: var(--tipo-h3); }
  .paso > p { font-size: var(--tipo-texto); }
  .despues, form.idea, .capa-casa { padding: var(--s6); }
  .servicio { grid-template-columns: 48px 1fr; gap: var(--s4); }
  .servicio .icono { width: 48px; height: 48px; border-radius: var(--radio-campo); }
  .servicio .icono svg { width: 28px; height: 28px; }
  .precio h3 { min-height: 0; }
}
/* Legibilidad y acceso por teclado, también sobre fondos oscuros. */
.intro-statement p:not(.eyebrow), .intro-statement > .envoltura > span { color: #68616f; }
.despues .version { color: #70538b; background: none; -webkit-text-fill-color: currentColor; }
label.campo input, label.campo textarea { border-color: #8b8194; }
.chips-lista span { box-shadow: inset 0 0 0 1.5px #8b8194; }
label.campo input::placeholder, label.campo textarea::placeholder { color: #6b6472; opacity: 1; }
:focus-visible, .chips-lista input:focus-visible + span {
  outline: 3px solid #7951a2; outline-offset: 3px; box-shadow: 0 0 0 3px #fff;
}
.saltar-contenido {
  position: fixed; top: var(--s4); left: var(--s4); z-index: 100;
  background: #fff; color: #24102e; padding: var(--s3) var(--s6);
  border-radius: var(--radio-campo); transform: translateY(-180%);
}
.saltar-contenido:focus { transform: translateY(0); }
.motion-toggle { min-height: 44px; min-width: 44px; }
.form-demo-aviso { color: #68616f; font-size: var(--tipo-pequeno); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
/* Identidad Wualapp. Colores originales del SVG y variantes de lectura. */
:root {
  --marca-ciruela: #660066;
  --marca-violeta: #852c86;
  --marca-morado: #683fa4;
  --marca-magenta: #ff0069;
  --marca-azul: #0099ff;
  --marca-turquesa: #00c7d1;
  --marca-menta: #00e9af;
  --marca-fondo-oscuro: #1d0a26;
  --marca-superficie-oscura: #32163f;
  --marca-texto-oscuro: #f8f3fb;
  --marca-secundario-oscuro: #d8c7df;
  --marca-enlace: #b70058;
  --marca-azul-texto: #0068b2;
  --marca-turquesa-texto: #006d73;
  --marca-borde: #8b7598;
  --lienzo: #f7f4fa;
  --tinta: #24102e;
  --tinta-2: #62516d;
  --linea: #e2d8e9;
  --marca-degradado: linear-gradient(125deg, #660066, #852c86 55%, #b70058);
  --marca-degradado-vivo: linear-gradient(125deg, #660066, #852c86 48%, #ff0069);
  --marca-degradado-frio: linear-gradient(130deg, #683fa4, #0099ff 60%, #00c7d1);
}
.cabecera { background: rgba(255,255,255,.9); border-color: var(--linea); }
.menu a:hover, .telefono:hover { color: var(--marca-ciruela); }
.boton-principal, .cinema-cta {
  background: var(--marca-degradado); color: #fff;
  box-shadow: 0 6px 22px -14px var(--marca-magenta);
}
.boton-principal::before, .boton-principal::after { display: none; }
.boton-principal:hover, .cinema-cta:hover { background: var(--marca-ciruela); }
.boton-secundario { color: var(--marca-ciruela); box-shadow: inset 0 0 0 1px var(--marca-borde); }
.cinema { color: var(--marca-texto-oscuro); background: var(--marca-fondo-oscuro); }
.cinema-grain {
  background: radial-gradient(ellipse at 84% 72%, #0099ff1c, transparent 46%),
    radial-gradient(ellipse at 68% 30%, #852c8640, transparent 58%),
    linear-gradient(130deg, #291030, #1d0a26 70%);
}
.cinema h1 span {
  background: linear-gradient(100deg, #ff66a5, #e5a3de 45%, #5acaff);
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
.cinema-description, .cinema-copy .eyebrow, .cinema-secondary,
.motion-toggle, .scroll-hint { color: var(--marca-secundario-oscuro); }
.cinema-secondary:hover { color: #fff; }
.cinema-caption { border-color: #8b759866; }
.cinema .chapter-title { color: var(--marca-texto-oscuro); }
.chapter-index { color: #65d5fa; }
.stage-word {
  width: 112%; height: auto; max-width: none; left: -6%; top: 24%;
  opacity: .3; -webkit-text-stroke: 0; pointer-events: none;
}
.stage-glow { background: radial-gradient(ellipse, #ff006925, #0099ff12 50%, transparent 72%); }
.note-symbol { color: #ff80b4; }
.note-dot { background: var(--marca-menta); box-shadow: 0 0 18px #00e9af44; }
.floating-note { background: #32163fdd; border-color: #a777a259; }
.floating-note small { color: var(--marca-secundario-oscuro); }
.demo-disclaimer { color: var(--marca-secundario-oscuro); }
.chapter-controls { background: #32163faa; border-color: #8b759880; }
.chapter-controls button { color: var(--marca-secundario-oscuro); }
.chapter-controls button[aria-pressed=true] { background: #fff; color: var(--marca-ciruela); }
.cinema-progress i { background: linear-gradient(90deg, #ff0069, #852c86, #0099ff, #00c7d1); }
/* La interfaz de demostración utiliza los mismos colores que la web. */
.demo-app, .demo-success { background: #fbf8fd; color: var(--tinta); }
.demo-avatar, .demo-date { background: #f1deef; color: var(--marca-ciruela); }
.demo-hello, .demo-booking small, .demo-row>span, .demo-success>span { color: var(--tinta-2); }
.demo-art { background: var(--marca-degradado-vivo); }
.demo-art>span { color: #fff; text-shadow: 0 2px 8px #24102e; }
.demo-art>b { background: #511247; color: #fff; }
.art-orbit { border-color: #0099ff; box-shadow: inset 6px 6px 12px #ffffff77, 7px 10px 16px #1d0a2666; }
.orbit-two { border-color: #00c7d1; }
.orbit-three { border-color: #683fa4; }
.demo-reserve { background: var(--marca-degradado); color: #fff; }
.demo-reserve:hover { background: var(--marca-ciruela); }
.demo-nav { color: #766580; }
.demo-nav span:first-child, .demo-back { color: var(--marca-ciruela); }
.success-check { background: #d9f6ef; color: #00694e; }
.wire-overlay, .wire-picture span { background: #f3edf7; color: var(--tinta-2); }
/* Colores semánticos compartidos por todas las secciones y fichas. */
.intro-statement { background: var(--lienzo); }
.intro-statement h2, .bloque-cabeza h2, .servicio h3, .tambien h3 { color: var(--tinta); }
.intro-statement .eyebrow { color: var(--marca-ciruela); }
.intro-statement p:not(.eyebrow), .intro-statement > .envoltura > span { color: var(--tinta-2); }
.proceso { color: var(--marca-texto-oscuro); background: var(--marca-fondo-oscuro); }
.proceso .bloque-cabeza h2 { color: var(--marca-texto-oscuro); }
.proceso .bloque-cabeza p, .paso > p, .despues p { color: var(--marca-secundario-oscuro); }
.paso-num { color: #65d5fa; }
.paso .aprobado { color: #64e8c9; }
.despues { background: var(--marca-superficie-oscura); }
.despues .version { color: #65d5fa; }
.servicio .icono { background: #fff; box-shadow: 0 8px 24px -18px var(--marca-violeta); }
.servicio a { color: var(--marca-enlace); }
.servicio a:hover { color: var(--marca-ciruela); }
.capa-casa { background: var(--lienzo); }
.precio.destacado { background: var(--marca-degradado); color: #fff; }
.precio.destacado p, .precio.destacado .cifra small { color: #fff; }
.contacto { background: var(--marca-fondo-oscuro); color: var(--marca-texto-oscuro); }
.contacto .bloque-cabeza h2 { color: var(--marca-texto-oscuro); }
.contacto .bloque-cabeza p { color: var(--marca-secundario-oscuro); }
.chips-lista input:checked + span { background: var(--marca-ciruela); color: #fff; }
label.campo input, label.campo textarea { border-color: var(--marca-borde); }
.chips-lista span { box-shadow: inset 0 0 0 1.5px var(--marca-borde); }
label.campo input::placeholder, label.campo textarea::placeholder, .form-demo-aviso { color: var(--tinta-2); }
.legal-check input { accent-color: var(--marca-ciruela); }
:focus-visible, .chips-lista input:focus-visible + span { outline-color: var(--marca-azul-texto); }
.pie { background: #150619; color: var(--marca-secundario-oscuro); }
@media(max-width:700px) { .stage-word { width: 120%; left: -10%; top: 26%; } }
@media(max-width:700px) {
  .device-pivot { scale: .60; translate: 0 -20px; }
  .demo-disclaimer { font-size: 10px; }
}
/* Los enlaces cierran cada fila a la misma altura aunque cambie la longitud del texto. */
.servicio > div { display: flex; flex-direction: column; align-items: flex-start; }
.servicio a { margin-top: auto; padding-top: var(--s4); }
/* Portada editorial: dos líneas y controles integrados en el propio prototipo. */
.cinema-copy { container-type: inline-size; }
.cinema h1 { font-size: clamp(28px, 10.7cqw, 68px); line-height: 1.08; }
.cinema h1 > span { display: block; white-space: nowrap; }
.cinema h1 .titulo-servicio { color: var(--marca-texto-oscuro); background: none; -webkit-text-fill-color: currentColor; }
.cinema h1 .titulo-marca { margin-top: 4px; }
.cinema-inner { height: 100%; padding-block: 32px 48px; }
.device-caption { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--marca-secundario-oscuro); font-size: var(--tipo-nota); }
.device-caption .motion-toggle { display: grid; place-items: center; min-width: 44px; min-height: 44px; max-width: none; padding: 0; border: 0; border-radius: 8px; color: inherit; background: none; }
.device-caption .motion-toggle:hover { color: #fff; background: #ffffff0a; }
.motion-toggle .motion-play { display: none; }
.motion-toggle[aria-pressed=true] .motion-pause { display: none; }
.motion-toggle[aria-pressed=true] .motion-play { display: block; }
@media(max-width:700px) {
 .cinema-copy { width: 100%; max-width: 360px; flex-shrink: 0; }
 .cinema h1 { font-size: clamp(26px, 10.7cqw, 39px); }
 .cinema-inner { padding-block: 0 24px; }
 .device-stage { min-height: 380px; }
 .device-caption { font-size: 11px; }
}

/* Servicios complementarios con sección y jerarquía propias. */
.otras-soluciones { background: #fff; border-bottom: 1px solid var(--linea); }
.otras-soluciones .tambien { display: block; border: 0; margin: 0; padding: 0; }
.otras-soluciones .tambien ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); }
.otras-soluciones .tambien li { border-top: 1px solid var(--linea); padding-top: var(--s6); }
.otras-soluciones h3 { font-size: var(--tipo-h3); font-weight: 600; line-height: 1.25; margin-bottom: var(--s3); letter-spacing: -.02em; }
.otras-soluciones .tambien li:hover { border-top-color: var(--marca-violeta); }
@media(max-width:1000px) { .otras-soluciones .tambien ul { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(max-width:600px) { .otras-soluciones .tambien ul { grid-template-columns: 1fr; } }