/* ════════════════════════════════════════════════════════════════════════
   CIFRA · lo común de las cinco páginas de marca (19-oct-2026)
   La cabecera tiene el color del telón con el que se llega (cifra.js), así que al levantarse
   parece que la puerta de la portada se ha abierto en ella.
   La escena de la derecha es la demo de la marca (.escena-viva, cifra.js): se diseña a
   560 px y se escala entera con unidades de contenedor (cqw), así en el móvil es la misma.
   ════════════════════════════════════════════════════════════════════════ */

/* ── La cabecera de la marca ────────────────────────────────────────────── */
.heroe { position: relative; isolation: isolate; color: var(--sobre-puerta); padding: calc(var(--alto-barra) + clamp(28px, 5vh, 64px)) 0 clamp(56px, 8vh, 96px); }
.heroe__lienzo { position: absolute; inset: 0; z-index: -1; background: var(--puerta); }
.t-consultorias .heroe { --acento: #3ECF8E; --sobre-acento: #0D1F16; --acento-hover: #63DCA5; --vivo: #3ECF8E; --em-color: #E2C77A; }
.t-marketing .heroe { --em-color: #1A120D; --vivo: #1A120D; }
/* sobre el verde profundo de CIFRA (los casos), los botones van en el verde que brilla */
.t-cifra .heroe { --acento: #3ECF8E; --sobre-acento: #0D1F16; --acento-hover: #63DCA5; --vivo: #3ECF8E; --em-color: #3ECF8E; }
/* sobre el naranja, el crema no llega al contraste: el realce va de rotulador, con la letra oscura */
.t-marketing .heroe h1 em { background: linear-gradient(transparent 62%, rgb(251 244 236 / .78) 62% 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.heroe__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; min-height: calc(100svh - var(--alto-barra) - clamp(100px, 14vh, 160px)); }
.heroe__marca { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.heroe__cifra { font: 700 13px/1 "Space Grotesk", sans-serif; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.heroe__nombre { display: inline-block; font-family: var(--f-titulo); font-weight: var(--t-peso); font-style: var(--t-estilo); text-transform: var(--t-mayus); font-stretch: var(--t-ancho); letter-spacing: var(--t-espaciado); font-size: calc(30px * var(--t-escala)); line-height: 1; }
.heroe h1 { margin: 20px 0 22px; font-size: calc(clamp(40px, 5vw, 74px) * var(--t-escala)); color: var(--sobre-puerta); }
/* la búsqueda de Google, dentro del h1 pero en pequeño: el titular grande se queda en dos líneas */
.heroe__clave { display: block; margin-bottom: 18px; font: 500 12.5px/1.45 var(--f-dato); letter-spacing: .12em; text-transform: uppercase; font-style: normal; font-stretch: 100%; color: var(--sobre-puerta-2); }
.heroe__clave .p { padding-bottom: 0; margin-bottom: 0; }
.t-clinicas .heroe h1 { font-size: clamp(42px, 4.6vw, 70px); }
.t-marketing .heroe h1, .t-consultorias .heroe h1 { font-size: clamp(40px, 4.6vw, 68px); }
.heroe__sub { max-width: 580px; font-size: clamp(17px, 1.35vw, 20px); color: color-mix(in oklab, var(--sobre-puerta) 82%, var(--puerta)); text-wrap: pretty; }
.heroe__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.heroe .boton--borde { color: var(--sobre-puerta); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--sobre-puerta) 30%, transparent); }
.heroe .boton--borde:hover { background: color-mix(in oklab, var(--sobre-puerta) 8%, transparent); }
.heroe__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; font-size: 14.5px; color: var(--sobre-puerta-2); }
.heroe .chip { color: var(--sobre-puerta); }
.js .heroe__texto > :not(h1) { opacity: 0; transform: translateY(12px); }
.cargada .heroe__texto > :not(h1) { opacity: 1; transform: none; transition: opacity .9s var(--salida), transform .9s var(--salida); transition-delay: calc(450ms + var(--i, 0) * 90ms); }
.js .heroe__escena { opacity: 0; transform: translateY(24px) scale(.98); }
.cargada .heroe__escena { opacity: 1; transform: none; transition: opacity 1.1s var(--salida) .5s, transform 1.1s var(--salida) .5s; }
@media (max-width: 960px) {
  .heroe__rejilla { grid-template-columns: 1fr; min-height: 0; }
  .heroe h1 { font-size: calc(clamp(36px, 9vw, 54px) * var(--t-escala)); }
}

/* ── La escena: el lienzo de la demo ────────────────────────────────────── */
.escena-viva { position: relative; container-type: inline-size; width: 100%; max-width: 600px; justify-self: center; }
.escena-viva__caja { position: relative; aspect-ratio: 1 / 1.02; font-size: clamp(10.5px, 2.6cqw, 15px); }
.escena-viva__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.escena-viva__pie .demo { color: var(--sobre-puerta-2); }
.escena-viva__pausa { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--sobre-puerta) 22%, transparent); background: transparent; color: var(--sobre-puerta-2); font: 500 11px/1 var(--f-dato); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.escena-viva__pausa::before { content: ""; width: 8px; height: 9px; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; box-sizing: border-box; }
.escena-viva__pausa[aria-pressed="true"]::before { width: 0; height: 0; border: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.escena-viva__pausa:hover { color: var(--sobre-puerta); }

/* lo que entra en la escena: antes de su momento no ocupa sitio */
.js .escena-viva [data-en]:not(.on) { display: none; }
.escena-viva [data-en].on { animation: entra-esc .55s var(--salida) both; }
.escena-viva .fuera { display: none !important; }
@keyframes entra-esc { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* tarjeta de la escena: una ventana del sistema */
.ventana { position: absolute; border-radius: 1.2em; background: var(--esc-papel, #FCFAF5); color: var(--esc-tinta, #14110C); box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 2.2em 4em -2em rgb(0 0 0 / .55); overflow: hidden; }
.ventana__cab { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .85em 1.1em; border-bottom: 1px solid var(--esc-linea, #E1D9C8); font-size: .82em; font-weight: 600; }
.ventana__cab small { font: 500 .86em/1 var(--f-dato); letter-spacing: .06em; color: var(--esc-tinta-2, #635C50); font-weight: 500; }
.ventana__cuerpo { padding: 1em 1.1em 1.1em; }

/* chat: las burbujas de WhatsApp */
.chat { display: flex; flex-direction: column; gap: .5em; }
.burbuja { position: relative; max-width: 88%; padding: .6em .8em .7em; border-radius: .9em; font-size: .92em; line-height: 1.38; box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
.burbuja--el { align-self: flex-start; background: #FFFFFF; color: #111B21; border-top-left-radius: .25em; }
.burbuja--yo { align-self: flex-end; background: #D9FDD3; color: #111B21; border-top-right-radius: .25em; }
.burbuja--cifra { align-self: flex-start; background: #FFFFFF; color: #111B21; border-left: .22em solid #1E9D63; }
.burbuja .h { display: block; margin-top: .25em; text-align: right; font-size: .74em; color: #667781; }
.burbuja b { font-weight: 600; }
.escribiendo { align-self: flex-start; display: inline-flex; gap: .3em; padding: .75em .9em; border-radius: .9em; background: #FFFFFF; }
.escribiendo i { width: .45em; height: .45em; border-radius: 50%; background: #8696A0; animation: punto 1.1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; }
.escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-.2em); } }
.fondo-whatsapp { background: #EFE7DE; }

/* etiqueta flotante de la escena (lo que la IA ha hecho) */
.sello { position: absolute; display: inline-flex; align-items: center; gap: .55em; padding: .55em .85em .55em .65em; border-radius: 999px; background: var(--esc-sello, #14110C); color: var(--esc-sobre-sello, #F6F1E6); font-size: .82em; font-weight: 600; box-shadow: 0 1em 2em -1em rgb(0 0 0 / .6); white-space: nowrap; }
.sello::before { content: ""; width: 1.25em; height: 1.25em; border-radius: 50%; background: #1E9D63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat; flex: none; }
.sello--aviso::before { background: #D69A2D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 70% no-repeat; }

/* ── Las secciones de la página de marca ────────────────────────────────── */
.bloque--lienzo { background: var(--puerta); color: var(--sobre-puerta); }
.galeria { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; }
.galeria figure { margin: 0; display: grid; gap: 10px; scroll-snap-align: start; }
.galeria img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 16px; border: 1px solid var(--linea); background: var(--papel); }
.galeria figcaption { font: 500 12px/1.35 var(--f-dato); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.galeria figcaption span { display: block; margin-top: 4px; text-transform: none; letter-spacing: 0; font: 400 14px/1.4 var(--f-texto); color: var(--tinta-3); }

.cifras-real { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: clamp(32px, 5vw, 56px); border-top: 1px solid var(--linea); }
.cifra-real { padding: 26px 28px 6px 0; }
.cifra-real + .cifra-real { padding-left: 28px; border-left: 1px solid var(--linea); }
.cifra-real b { display: block; font: 500 clamp(34px, 3.6vw, 50px)/1 var(--f-dato); letter-spacing: -0.04em; color: var(--tinta); }
.cifra-real span { display: block; margin-top: 12px; color: var(--tinta-2); font-size: 15.5px; max-width: 32ch; }
.cifra-real small { display: block; margin-top: 8px; font: 500 11.5px/1.3 var(--f-dato); letter-spacing: .04em; color: var(--tinta-3); }
@media (max-width: 760px) { .cifras-real { grid-template-columns: 1fr; } .cifra-real + .cifra-real { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); } }

.garantia { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-grande); border: 1px solid var(--linea); background: var(--papel); }
.garantia__sello { display: grid; place-items: center; width: clamp(150px, 16vw, 200px); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--dorado); text-align: center; padding: 18px; box-shadow: inset 0 0 0 7px var(--papel), inset 0 0 0 8px color-mix(in oklab, var(--dorado) 50%, transparent); }
.garantia__sello b { display: block; font: 500 clamp(30px, 3vw, 40px)/1 var(--f-dato); letter-spacing: -0.04em; color: var(--tinta); }
.garantia__sello span { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.35; color: var(--tinta-2); }
.garantia h2 { font-size: calc(clamp(28px, 3vw, 40px) * var(--t-escala)); margin-bottom: 12px; }
.garantia p { color: var(--tinta-2); max-width: 640px; }
@media (max-width: 640px) { .garantia { grid-template-columns: 1fr; justify-items: start; } }

.otras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.otra { display: grid; gap: 4px; padding: 18px 18px 20px; border-radius: 16px; background: var(--puerta); color: var(--sobre-puerta); text-decoration: none; transition: transform .4s var(--suave); }
.otra:hover { transform: translateY(-3px); }
.otra small { font: 500 11px/1.2 var(--f-dato); letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.otra b { font-family: var(--f-titulo); font-weight: var(--t-peso); font-style: var(--t-estilo); text-transform: var(--t-mayus); font-stretch: var(--t-ancho); letter-spacing: var(--t-espaciado); font-size: calc(24px * var(--t-escala)); line-height: 1.05; }
.otra.t-clinicas { box-shadow: inset 0 0 0 1px var(--linea-2); }
@media (max-width: 860px) { .otras { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .otras { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .js .heroe__texto > :not(h1), .js .heroe__escena { opacity: 1; transform: none; }
  .escena-viva [data-en].on { animation: none; }
}

/* El enlace a la guía de la marca, debajo de las preguntas (las guías, 19-oct) */
.guia-enlace { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 30px; font-size: 17px; }
.guia-enlace span { font: 500 11.5px/1 var(--f-dato); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.guia-enlace a { color: var(--tinta); font-weight: 600; text-decoration-color: var(--vivo); text-decoration-thickness: 2px; text-underline-offset: .25em; }

/* La lista de lo que hace hoy el portal con un cliente real (Automoción y Consultorías) */
.duele-real { display: grid; border-top: 1px solid var(--linea); }
.duele-real li { display: flex; gap: 14px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--linea); color: var(--tinta-2); font-size: 15.5px; }
.duele-real li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; transform: translateY(3px); background: var(--vivo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.t-automocion .duele-real li::before { background-color: #1E9D63; }