/* PORTADA B (prueba, 25/10/2026). Solo la usa /portada-b/.
   Idea del usuario a partir de la portada de Apple: arriba solo la frase y la tablet (que pasa del «antes» al «después»);
   debajo, el H1 de SEO, el subtítulo y los dos botones (pedido del usuario, 25/10/2026: «que al entrar se vea limpio»).
   Colores de la página siempre con variables (dos fondos: blanco y cal). La tablet lleva colores fijos: es un objeto físico
   (aluminio gris oscuro, cristal negro), no parte de la interfaz; su degradado imita el metal visto en ángulo y no es decoración. */

.b-hero { padding: 40px 0 8px; text-align: center; overflow-x: clip; }
.b-hero__titulo { font-family: var(--f-titulo); font-size: clamp(40px, 10vw, 76px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 500; color: var(--texto); margin: 0 auto; max-width: 15em; }
.b-hero__abajo { margin-top: 44px; }
.b-hero__seo { font-family: var(--f-texto); font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--acento); margin: 0 0 10px; }
.b-hero__sub { font-size: 19px; line-height: 1.5; color: var(--texto-2); max-width: 30em; margin: 0 auto 28px; }
.b-hero__botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.b-boton-linea { background: transparent; color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.b-boton-linea:hover { background: var(--acento); color: var(--blanco); }

/* La escena de la tablet */
.b-escena { max-width: 800px; margin: 40px auto 0; padding: 0 var(--gutter); perspective: 1600px; }
.b-tablet { /* canto de aluminio: fino, gris oscuro, y casi invisible a la derecha por el ángulo (indicación del usuario, 25/10/2026) */
  position: relative; isolation: isolate; border-radius: 28px; padding: 1px .5px 1px 1px; /* canto casi imperceptible (pedido del usuario, 25/10/2026) */
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 9%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 44%, rgba(255,255,255,.45) 52%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 18%, rgba(0,0,0,0) 80%, rgba(0,0,0,.25) 100%),
    linear-gradient(90deg, #7C7F86 0%, #A4A7AD 28%, #878A91 60%, #4B4D52 86%, #1C1C1E 100%); /* gris con brillos blancos (pedido del usuario, 25/10/2026) */
  box-shadow: 0 34px 60px -36px rgba(43,40,38,.55);
  transform-origin: 50% 100%;
}
.b-tablet__marco { /* cristal negro alrededor de la pantalla */
  position: relative; border-radius: 27px; padding: 16px; background: #121212;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.b-tablet__camara { position: absolute; top: 6px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #2A2D33; box-shadow: inset 0 0 0 1px #3A3E46; }
.b-tablet__boton { position: absolute; z-index: -1; background: linear-gradient(90deg, #8E9197, #C9CBCF, #8E9197); opacity: .55; border-radius: 1px 1px 0 0; top: -1px; height: 1px; } /* casi imperceptibles: 1 px (pedido del usuario, 25/10/2026) */
.b-tablet__boton--encendido { left: 8%; width: 34px; }
.b-tablet__boton--vol1 { right: 12%; width: 24px; }
.b-tablet__boton--vol2 { right: calc(12% + 32px); width: 24px; }
.b-tablet__pantalla { background: var(--cal); border-radius: 12px; overflow: hidden; position: relative; }
.b-tablet__pantalla::after { /* la pantalla «se enciende» al entrar */
  content: ""; position: absolute; inset: 0; background: var(--texto); opacity: 0; pointer-events: none; transition: opacity .6s ease;
}
.b-informe__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--linea); text-align: left; }
.b-informe__cabecera img { height: 15px; width: auto; display: block; }
.b-informe__cabecera span { font-size: 11px; color: var(--nota); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-informe__foto { border-radius: 0; }
.b-informe__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }
.b-informe__datos p { margin: 0; padding: 9px 14px 11px; font-family: var(--f-titulo); font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--texto); }
.b-informe__datos p + p { border-left: 1px solid var(--linea); }
.b-informe__datos small { display: block; font-family: var(--f-texto); font-size: 10px; font-weight: 500; color: var(--nota); margin-bottom: 2px; }
.b-escena__pie { margin: 16px auto 0; font-size: 14px; color: var(--nota); text-align: center; max-width: 34em; }

@media (max-width: 560px) {
  .b-tablet { border-radius: 18px; padding: .75px .5px .75px .75px; }
  .b-tablet__marco { border-radius: 17.25px; padding: 9px; }
  .b-tablet__camara { top: 3px; width: 4px; height: 4px; margin-left: -2px; }
  .b-tablet__boton { top: -.75px; height: .75px; }
  .b-tablet__boton--encendido { width: 20px; }
  .b-tablet__boton--vol1 { width: 14px; }
  .b-tablet__boton--vol2 { right: calc(12% + 20px); width: 14px; }
  .b-tablet__pantalla { border-radius: 9px; }
  .b-hero__abajo { margin-top: 32px; }
  .b-informe__cabecera { padding: 7px 10px; }
  .b-informe__cabecera img { height: 12px; }
  .b-informe__cabecera span { font-size: 10px; }
  .b-informe__datos p { padding: 7px 8px 8px; font-size: 11px; }
  .b-informe__datos small { font-size: 9px; }
  .b-escena .comparador__etiqueta { font-size: 11px; }
  .b-hero__botones { flex-direction: column; align-items: stretch; gap: 10px; max-width: 340px; margin: 0 auto; }
  .b-hero__sub { font-size: 18px; }
}
@media (min-width: 900px) {
  /* PC: TODO el bloque (frase, tablet, pie, texto y botones) cabe en la primera pantalla (pedido del usuario, 25/10/2026: «se tiene que
     ver de una»). Aire, letra y tablet se ajustan al alto de la ventana (vh). 
     dentro de la tablet todo se mide en cqw (escala como una imagen: alto ≈ 0,835 × ancho), y el ancho = 98,6vh − 330px sale de restar
     al alto de la ventana la cabecera, el aire, la frase, el pie, el texto y los botones. Medido en 1280×720, 1366×657, 1440×789, 1536×730 y 1920×955. */
  .b-hero { padding: clamp(20px, 4.5vh, 56px) 0 64px; --ancho-tablet: clamp(320px, 98.6vh - 330px, 720px); }
  .b-escena { margin-top: clamp(20px, 4.5vh, 52px); max-width: calc(var(--ancho-tablet) + 2 * var(--gutter)); }
  .b-tablet { container-type: inline-size; }
  .b-escena__pie { margin-top: 10px; font-size: 13px; }
  .b-tablet { padding: 1.25px .5px 1.25px 1.25px; border-radius: 30px; }
  .b-tablet__marco { border-radius: 28.75px; padding: 2.5cqw; }
  .b-tablet__camara { top: 7px; }
  /* Debajo de la tablet, en PC (pedido del usuario): texto a la izquierda y los dos botones uno encima del otro a la derecha */
  .b-hero__abajo {
    margin-top: clamp(18px, 3.5vh, 44px); max-width: calc(max(var(--ancho-tablet), 620px) + 2 * var(--gutter)); text-align: left;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "seo botones" "sub botones";
    column-gap: 48px; align-items: center;
  }
  .b-hero__seo { grid-area: seo; align-self: end; }
  .b-hero__seo { font-size: 14px; margin-bottom: 6px; }
  .b-hero__sub { grid-area: sub; align-self: start; margin: 0; font-size: 16px; max-width: 24em; }
  .b-hero__botones { grid-area: botones; flex-direction: column; align-items: stretch; gap: 8px; width: 220px; }
  .b-hero__botones .boton { min-height: 46px; font-size: 15px; }
  .b-hero__titulo { font-size: clamp(34px, 5.2vh, 52px); letter-spacing: -0.025em; } /* letra más pequeña en PC (pedido del usuario: «que no sea tan bruto») */
  .b-informe__cabecera { padding: 1.8cqw 2.8cqw; }
  .b-informe__cabecera img { height: 2.5cqw; }
  .b-informe__cabecera span { font-size: max(10px, 1.7cqw); }
  .b-informe__datos p { padding: 1.7cqw 2.8cqw 1.9cqw; font-size: max(11px, 2.1cqw); }
  .b-informe__datos small { font-size: max(9px, 1.5cqw); }
  .b-escena .comparador__etiqueta { font-size: max(10px, 1.6cqw); }
}

/* Entrada: la tablet se levanta hasta ponerse de frente y se enciende; después la cortina descubre el «después» (portada-b.js) */
.b-anima .b-tablet { transform: rotateX(38deg) translateY(60px) scale(.92); opacity: 0; }
.b-anima .b-tablet__pantalla::after { opacity: .9; }
.b-anima .b-escena__pie { opacity: 0; }
.b-anima.b-entra .b-tablet { transition: transform 1.2s cubic-bezier(.2,.75,.25,1), opacity .5s ease; transform: none; opacity: 1; }
.b-anima.b-encendida .b-tablet__pantalla::after { opacity: 0; }
.b-escena__pie { transition: opacity .6s ease; }
.b-anima.b-fin .b-escena__pie { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .b-anima .b-tablet, .b-anima .b-escena__pie { transform: none; opacity: 1; }
  .b-anima .b-tablet__pantalla::after { opacity: 0; }
}

/* ---------- Honorarios en blanco + móvil del informe (pedido del usuario, 25/10/2026) ----------
   Método en arena y honorarios en blanco (var(--cal), que en la versión «Cal» es la cal), para que no se junten dos franjas iguales.
   El móvil sustituye a la captura del informe: mismo estilo que la tablet (canto fino oscuro que se apaga a la derecha, cristal negro). */
.b-honorarios { background: var(--cal); }
.b-movil-fig { margin: 0; display: flex; flex-direction: column; align-items: center; }
.b-movil-fig figcaption { margin-top: 18px; font-size: 14px; color: var(--nota); text-align: center; }
.b-movil {
  display: block; width: 100%; max-width: 330px; text-decoration: none; color: inherit;
  border-radius: 46px; padding: 1px .5px 1px 1px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 9%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 44%, rgba(255,255,255,.45) 52%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 18%, rgba(0,0,0,0) 80%, rgba(0,0,0,.25) 100%),
    linear-gradient(90deg, #7C7F86 0%, #A4A7AD 28%, #878A91 60%, #4B4D52 86%, #1C1C1E 100%); /* gris con brillos blancos (pedido del usuario, 25/10/2026) */
  box-shadow: 0 34px 60px -36px rgba(43,40,38,.55);
}
.b-movil__marco { display: block; position: relative; border-radius: 45px; padding: 11px; background: #121212; }
.b-movil__camara { position: absolute; top: 20px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #2A2D33; box-shadow: inset 0 0 0 1px #3A3E46; z-index: 2; }
.b-movil__pantalla { display: block; border-radius: 34px; overflow: hidden; background: var(--cal); padding: 44px 20px 22px; text-align: left; }
.b-movil__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.b-movil__cab img { height: 14px; width: auto; display: block; }
.b-movil__cab small { font-size: 10.5px; color: var(--nota); white-space: nowrap; }
.b-movil__titulo { display: block; margin: 16px 0 6px; font-family: var(--f-titulo); font-size: 17px; font-weight: 500; line-height: 1.25; color: var(--texto); }
.b-esc { display: block; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.b-esc__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--texto-2); }
.b-esc__fila strong { font-family: var(--f-titulo); font-size: 16px; font-weight: 500; color: var(--texto); white-space: nowrap; font-variant-numeric: tabular-nums; }
.b-esc__barra { display: block; height: 3px; margin: 9px 0 6px; background: var(--linea); border-radius: 2px; overflow: hidden; }
.b-esc__barra i { display: block; height: 100%; width: calc(var(--x) * 100%); background: var(--texto); border-radius: 2px; transition: width 1.1s cubic-bezier(.2,.75,.25,1); }
.b-esc--rec .b-esc__barra i { background: var(--acento); }
.b-esc__nota { display: block; font-size: 11px; color: var(--nota); }
.b-esc--rec .b-esc__nota { color: var(--acento); font-weight: 600; }
.b-movil__pie { display: block; margin-top: 14px; font-size: 10.5px; color: var(--nota); }
.b-movil:hover { transform: translateY(-2px); transition: transform .25s ease; }
/* animación al aparecer (portada-b.js): las barras crecen y las cifras cuentan */
.b-esc-anima .b-esc__barra i { width: 0; }
@media (prefers-reduced-motion: reduce) { .b-esc-anima .b-esc__barra i { width: calc(var(--x) * 100%); } }


/* ---------- ENTRADA «FOTO GRANDE» (27/10/2026, elegida por el usuario; sustituye a la tablet, cuyos estilos de arriba ya no se usan) ----------
   Copiada de /entradas/ (opción 1). Foto entera 3:2, todo el bloque cabe en la primera pantalla. */
.o-hero { padding: clamp(24px, 4.5vh, 56px) 0 64px; text-align: center; overflow-x: clip; }
.o-titulo { font-family: var(--f-titulo); font-weight: 500; color: var(--texto); letter-spacing: -0.025em; line-height: 1.04;
  font-size: clamp(40px, 10vw, 76px); margin: 0 auto; max-width: 15em; }
@media (min-width: 900px) { .o-titulo { font-size: clamp(36px, 5.2vh, 54px); } }
.o-pie { margin: 10px auto 0; font-size: 14px; color: var(--nota); text-align: center; max-width: 40em; padding: 0 var(--gutter); }

/* Bloque de debajo (igual que la portada B) */
.o-abajo { margin-top: clamp(24px, 4vh, 48px); text-align: center; }
.o-seo { font-family: var(--f-texto); font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--acento); margin: 0 0 8px; }
.o-sub { font-size: 18px; line-height: 1.5; color: var(--texto-2); max-width: 30em; margin: 0 auto 24px; }
.o-botones { display: flex; flex-direction: column; gap: 10px; max-width: 340px; margin: 0 auto; }
@media (min-width: 900px) {
  .o-abajo { max-width: 860px; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 48px; align-items: center; text-align: left; }
  .o-sub { margin: 0; font-size: 16px; }
  .o-botones { margin: 0; }
  .o-botones .boton { min-height: 46px; font-size: 15px; }
}

/* ---------- OPCIÓN 1 · Foto a todo el ancho ---------- */
.o1__foto { margin: clamp(24px, 4vh, 44px) 0 0; }
/* Foto ENTERA, sin recortar (pedido del usuario, 26/10/2026: «en PC se corta la mitad»): mantiene su 3:2 y crece hasta donde deja el alto
   de la pantalla; si la pantalla es alta, llega a todo el ancho. */
.o1 .o-comp { aspect-ratio: 3 / 2; height: clamp(240px, calc(100svh - 440px), 960px); width: auto; max-width: 100%; margin: 0 auto; border-radius: 0; }
@media (min-width: 561px) { .o1 .o-comp { border-radius: 6px; } }
.o1 .o-comp img[data-despues] { transform-origin: 50% 60%; }
.o-anima .o1 .o-comp img[data-despues] { transform: scale(1.06); }
.o-anima.o-revela .o1 .o-comp img[data-despues] { transition: transform 3.2s cubic-bezier(.2,.7,.2,1); transform: scale(1); }
.o-anima .o1 .o-pie { opacity: 0; }
.o1 .o-pie { transition: opacity .6s ease; }
.o-anima.o-fin .o1 .o-pie { opacity: 1; }
@media (max-width: 560px) { .o1 .o-comp { height: auto; width: 100%; } }

.o1 .comparador__etiqueta--antes { transition: opacity .4s; }
.o1-estrecho .o1 .comparador__etiqueta--antes { opacity: 0; } /* con 1 cm de «antes» la etiqueta no cabe; vuelve al mover la cortina */

/* Fondos «Cal y blanco» y «Cal y blanco roto» (31/10/2026, pedido del usuario): en la portada, «Quiénes somos» y las preguntas frecuentes también van en blanco roto */
html[data-fondo="calblanco"] #conocenos, html[data-fondo="calblanco"] .faq,
html[data-fondo="calroto"] #conocenos, html[data-fondo="calroto"] .faq { background: var(--arena); }

/* ---------- ENTRADA CON VÍDEOS DEL ÁTICO (03/11/2026, idea del usuario; sustituye a la «Foto grande», cuyos estilos de arriba quedan sin uso) ----------
   PC: texto a la izquierda y los dos vídeos juntos a la derecha (el usuario vio raro el texto entre los dos). Móvil: frase, vídeos juntos y texto. */
.ov__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px;
  grid-template-areas: "titulo titulo" "antes despues" "pie pie" "h1 h1" "centro centro"; }
.ov__h1 { grid-area: h1; margin: 20px 0 8px; text-align: center; }
.ov .o-titulo { grid-area: titulo; margin-bottom: clamp(20px, 3.5vh, 40px); }
.ov__texto { display: contents; } /* en el móvil sus piezas se colocan solas en la rejilla */
.ov__video { position: relative; margin: 0; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 6px; background: var(--arena); }
.ov__video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ov__video--antes { grid-area: antes; }
.ov__video--despues { grid-area: despues; }
.ov__video--antes .comparador__etiqueta--antes { left: 10px; bottom: 10px; }
.ov__video--despues .comparador__etiqueta--despues { right: 10px; bottom: 10px; }
.ov__pie { grid-area: pie; margin-top: 10px; padding: 0; }
/* enlace a Vender junto al pie (03/11/2026, pedido del usuario): azul y subrayado fino */
.ov__enlace { color: var(--acento); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.ov__enlace:hover { text-decoration-thickness: 2px; }
.ov__centro { grid-area: centro; text-align: center; }
.ov__centro .o-sub { font-size: 17px; }
@media (min-width: 900px) {
  /* el alto de los vídeos lo marca la pantalla para que todo quepa de una vez */
  .ov__rejilla { --alto-video: clamp(360px, calc(100svh - 250px), 570px);
    grid-template-columns: minmax(0, 470px) calc(var(--alto-video) * 9 / 16) calc(var(--alto-video) * 9 / 16);
    grid-template-areas: "texto antes despues" ". pie pie";
    justify-content: center; column-gap: 8px; text-align: left; }
  .ov__texto { grid-area: texto; display: flex; flex-direction: column; justify-content: center; padding-right: clamp(40px, 4.5vw, 72px); }
  .ov__texto .ov__h1 { order: -1; }
  /* PC (pedido del usuario): el H1 en grande y la frase debajo, más pequeña */
  .ov .ov__h1 { margin: 0 0 14px; text-align: left; font-family: var(--f-titulo); font-weight: 500; color: var(--texto);
    letter-spacing: -0.025em; line-height: 1.06; font-size: clamp(36px, 5.2vh, 52px); }
  .ov .o-titulo { margin: 0 0 18px; max-width: none; text-align: left; font-size: clamp(22px, 2.9vh, 28px);
    line-height: 1.2; letter-spacing: -0.015em; color: var(--acento); }
  .ov__centro { margin: 0; text-align: left; }
  .ov__video { height: var(--alto-video); width: auto; }
  .ov__centro .o-sub { margin: 0 0 28px; font-size: 17px; max-width: 24em; }
  .ov__centro .o-botones { margin: 0; width: 240px; }
  .ov__centro .o-botones .boton { min-height: 46px; font-size: 15px; }
  .ov__pie { margin: 10px 0 0; text-align: center; max-width: none; }
}