/* Campus Cognitionis · demo r9 · Escaparate (W13, index.html) y kit de páginas de producto (§5 de Arquitectura_web_r9.md)
Ilustración: no es código del proyecto. Se carga después de r8.css en la portada y en todas las páginas de producto.
r8 · CC-40: inicio escaparate (antes inicio-escaparate.html).
Composición como la portada de apple.com: teselas a todo lo ancho («rectángulos») y filas de dos («cuadrados»),
con 12 px de separación; nombre del producto y titular en Newsreader 800, texto y enlaces en Inter.
La web vende, no se consume: las aplicaciones se abren desde el dock (W0103).
Colores: neutros de tokens.css y tintes de categoría del Registro (§6.4). Contraste AA medido en cada variante.
Cristal solo en las tres tarjetas de la Biblioteca (sobre la foto) y nunca anidado.
CC-52: Biblioteca, Archives Management y Persona.earth rehechas según Esquema_Campus_servicios_r2.md §10–12. */
.escaparate { display: grid; gap: 12px; padding: 48px 12px 96px; } /* 48 px arriba: la fecha de W0001 cuelga sobre el fondo, no sobre la primera tesela */
.escaparate__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* ---------- Tesela ---------- */
.tesela {
/* Variante por defecto: oscura (#1E2025) */
--t-fondo: var(--c-azul);
--t-texto: var(--c-blanco);
--t-suave: #BDBDC2; /* 8,7:1 sobre #1E2025 */
--t-enlace: var(--c-arena); /* 11,7:1 */
--t-boton-fondo: var(--c-arena);
--t-boton-texto: var(--c-azul); /* 11,7:1 */
--t-boton-hover: #F2E8CC;
--t-foco: var(--c-arena);
position: relative; overflow: hidden; isolation: isolate;
display: flex; flex-direction: column; align-items: center;
padding: clamp(40px, 4.4vw, 60px) clamp(20px, 3vw, 40px) 0;
border-radius: var(--radio-grande);
background: var(--t-fondo); color: var(--t-texto); text-align: center;
}
.tesela--rect { min-height: clamp(560px, 48vw, 692px); }
.tesela--cuadro { min-height: clamp(520px, 44vw, 640px); }
.tesela--oscura { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } /* borde fino: la tesela oscura no se funde con el fondo de la página */
.tesela :focus-visible { outline: 2px solid var(--t-foco); outline-offset: 3px; }
.tesela--clara { /* #F5F5F7 */
--t-fondo: #F5F5F7; --t-texto: var(--c-azul); --t-suave: #4A4D55; /* 7,8:1 */
--t-enlace: #6B5418; /* 6,6:1 */
--t-boton-fondo: var(--c-azul); --t-boton-texto: var(--c-blanco); --t-boton-hover: #383B43; --t-foco: var(--c-azul);
}
.tesela--pergamino { /* Historiográfica (#C9AA61) muy aclarada */
--t-fondo: #EFE7D3; --t-texto: var(--c-azul); --t-suave: #4A4D55; /* 6,9:1 */
--t-enlace: #6B5418; /* 5,8:1 */
--t-boton-fondo: var(--c-azul); --t-boton-texto: var(--c-blanco); --t-boton-hover: #383B43; --t-foco: var(--c-azul);
}
.tesela--crema { /* Antropológica (#F4EFE4, Registro §6.4) */
--t-fondo: #F4EFE4; --t-texto: var(--c-azul); --t-suave: #4A4D55; /* 7,4:1 */
--t-enlace: #6B5418;
--t-boton-fondo: #4A2E1A; --t-boton-texto: var(--c-blanco); --t-boton-hover: #61402A; --t-foco: #4A2E1A;
}
.tesela--vino { /* Literaria (#8E3B3F) */
--t-fondo: #8E3B3F; --t-texto: var(--c-blanco); --t-suave: #F2DCDD; /* 5,6:1 */
--t-enlace: var(--c-arena); /* 5,3:1 */
--t-boton-fondo: #F5F5F7; --t-boton-texto: #8E3B3F; --t-boton-hover: var(--c-blanco); --t-foco: var(--c-arena);
}
.tesela--teal { /* Científica (#3C6A69) */
--t-fondo: #3C6A69; --t-texto: var(--c-blanco); --t-suave: #E4EFEE; /* 5,4:1 */
--t-enlace: var(--c-blanco); /* 6,1:1 */
--t-boton-fondo: #F5F5F7; --t-boton-texto: #2C4F4E; --t-boton-hover: var(--c-blanco); --t-foco: var(--c-blanco);
}
/* ---------- Texto: nombre, titular, frase y dos acciones ---------- */
.tesela__texto { position: relative; z-index: 1; display: grid; justify-items: center; max-width: 720px; }
.tesela__logo { width: clamp(56px, 5vw, 72px); height: auto; margin-bottom: 14px; border-radius: 50%; }
.tesela__app { width: clamp(64px, 6vw, 80px); height: auto; margin-bottom: 14px; border-radius: 18px; box-shadow: var(--sombra-2); }
.tesela__app--sin-marco { border-radius: 50%; box-shadow: none; }
.tesela__antetitulo {
margin: 0 0 6px; font: 700 0.78rem/1.2 var(--f-interfaz); letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-suave);
}
.tesela__nombre {
margin: 0; font-family: var(--f-titular); font-weight: 800;
font-size: clamp(2.4rem, 4.2vw, 3.5rem); line-height: 1.04; letter-spacing: -0.01em;
overflow-wrap: break-word;
}
.tesela--cuadro .tesela__nombre { font-size: clamp(2.1rem, 3.3vw, 2.9rem); }
.tesela__titular {
margin: 8px 0 0; font-family: var(--f-titular); font-weight: 800;
font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.18; letter-spacing: 0;
}
.tesela--cuadro .tesela__titular { font-size: clamp(1.15rem, 1.6vw, 1.5rem); }
.tesela__frase { max-width: 50ch; margin: 12px 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--t-suave); }
.tesela--cuadro .tesela__frase { max-width: 42ch; font-size: 1rem; }
.tesela__acciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 26px; margin: 22px 0 0; }
.tesela__enlace {
display: inline-flex; align-items: center; min-height: 44px;
font-size: 1.0625rem; font-weight: 500; color: var(--t-enlace); text-decoration: none;
}
.tesela__enlace::after { content: "›"; margin-left: 6px; font-size: 1.25em; line-height: 1; }
.tesela__enlace:hover { text-decoration: underline; text-underline-offset: 4px; }
.tesela__enlace[aria-disabled="true"] { cursor: default; text-decoration: none; opacity: 0.62; }
.tesela__boton {
display: inline-flex; align-items: center; min-height: 44px; padding: 10px 24px; border-radius: 999px;
background: var(--t-boton-fondo); color: var(--t-boton-texto);
font-size: 1.0625rem; font-weight: 600; text-decoration: none;
transition: background-color 0.2s ease;
}
.tesela__boton:hover { background: var(--t-boton-hover); }
/* Imagen: siempre abajo, centrada */
.tesela__imagen { position: relative; z-index: 1; display: grid; justify-items: center; width: 100%; margin-top: auto; padding: 28px 0 clamp(28px, 3.4vw, 44px); }
.tesela__imagen--foto { padding-bottom: 0; }
.tesela__imagen--foto img {
width: min(500px, 100%); aspect-ratio: 16 / 9; object-fit: cover;
border-radius: 16px 16px 0 0; box-shadow: var(--sombra-2);
}
/* ---------- 01 · Campus Cognitionis: tres profundidades y siete isotipos ---------- */
.tesela--campus .tesela__nombre { color: var(--c-oro); }
.campus-capas { gap: 26px; }
.campus-capas__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(920px, 100%); margin: 0; padding: 0; list-style: none; }
.campus-capas__capa {
display: grid; align-content: end; gap: 6px; min-height: 132px; padding: 18px 20px; border-radius: 16px;
text-align: left; border: 1px solid rgba(255, 255, 255, 0.1);
}
.campus-capas__capa--1 { background: #2A2D34; }
.campus-capas__capa--2 { background: #353944; }
.campus-capas__capa--3 { background: #424754; }
.campus-capas__revista { font: 800 clamp(1.3rem, 2vw, 1.7rem)/1.1 var(--f-titular); color: var(--c-blanco); }
.campus-capas__nivel { font-size: 0.92rem; line-height: 1.4; color: #C9C9CE; } /* ≥ 7:1 sobre las tres capas */
.campus-capas__isotipos { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.6vw, 18px); margin: 0; padding: 0; list-style: none; }
.campus-capas__isotipos img { width: clamp(32px, 3vw, 44px); height: auto; border-radius: 50%; }
/* ---------- 02 · Navega.earth: los siete isotipos en heptágono ---------- */
.hepta {
--radio-hepta: clamp(88px, 8.4vw, 112px); --lado: clamp(48px, 4.2vw, 58px);
position: relative; width: calc(2 * var(--radio-hepta) + var(--lado)); aspect-ratio: 1; margin: 0; padding: 0; list-style: none;
}
.hepta li { position: absolute; left: 50%; top: 50%; width: var(--lado); height: var(--lado); margin: calc(var(--lado) / -2) 0 0 calc(var(--lado) / -2); }
.hepta img { width: 100%; height: 100%; border-radius: 50%; box-shadow: var(--sombra-3); }
.hepta li:nth-child(1) { transform: rotate(0deg) translateY(calc(-1 * var(--radio-hepta))) rotate(0deg); }
.hepta li:nth-child(2) { transform: rotate(51.43deg) translateY(calc(-1 * var(--radio-hepta))) rotate(-51.43deg); }
.hepta li:nth-child(3) { transform: rotate(102.86deg) translateY(calc(-1 * var(--radio-hepta))) rotate(-102.86deg); }
.hepta li:nth-child(4) { transform: rotate(154.29deg) translateY(calc(-1 * var(--radio-hepta))) rotate(-154.29deg); }
.hepta li:nth-child(5) { transform: rotate(205.71deg) translateY(calc(-1 * var(--radio-hepta))) rotate(-205.71deg); }
.hepta li:nth-child(6) { transform: rotate(257.14deg) translateY(calc(-1 * var(--radio-hepta))) rotate(-257.14deg); }
.hepta li:nth-child(7) { transform: rotate(308.57deg) translateY(calc(-1 * var(--radio-hepta))) rotate(-308.57deg); }
.hepta-caja { position: relative; }
.hepta__centro {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
margin: 0; font: 800 clamp(3.4rem, 5vw, 4.4rem)/1 var(--f-titular); color: var(--c-dorado-texto);
}
/* ---------- 03 · Escritorio: incluido y con licencia ---------- */
.planes { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 12px; }
.planes__plan { padding: 22px 24px; border-radius: 16px; background: var(--c-blanco); text-align: left; box-shadow: 0 1px 3px rgba(30, 32, 37, 0.08); }
.planes__plan--licencia { background: var(--c-azul); color: var(--c-blanco); }
.planes__titulo { margin: 0 0 10px; font: 800 1.3rem/1.15 var(--f-titular); }
.planes__lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 0.98rem; line-height: 1.4; }
.planes__lista li { display: flex; gap: 10px; }
.planes__lista li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.45em; border-radius: 50%; background: #6B5418; }
.planes__plan--licencia .planes__lista li::before { background: var(--c-arena); }
.planes__nota { margin: 14px 0 0; font-size: 0.85rem; color: #BDBDC2; }
/* ---------- 04 · Mensa AI: conversación de muestra ---------- */
.charla { gap: 10px; width: min(460px, 100%); justify-self: center; }
.charla__burbuja { max-width: 86%; margin: 0; padding: 12px 16px; border-radius: 18px; font-size: 0.98rem; line-height: 1.45; text-align: left; }
.charla__burbuja--tu { justify-self: end; background: var(--c-arena); color: var(--c-azul); border-bottom-right-radius: 6px; }
.charla__burbuja--mensa { justify-self: start; background: #2E3138; color: var(--c-blanco); border-bottom-left-radius: 6px; }
.charla__burbuja small { display: block; margin-top: 6px; font-size: 0.8rem; color: #BDBDC2; }
/* ---------- 04 · Archives Management: un disco con las materias elegidas (CC-52) ---------- */
.disco {
display: grid; gap: 6px; width: min(400px, 100%); padding: 16px 20px; border-radius: 20px; text-align: left;
background: var(--c-blanco); color: var(--c-azul);
box-shadow: 0 1px 3px rgba(30, 32, 37, 0.08), 0 12px 30px rgba(74, 46, 26, 0.14);
}
.disco__cabeza { display: flex; align-items: center; gap: 14px; }
.disco__placa { /* disco dibujado en CSS: agujero, etiqueta dorada, brillo y surcos */
flex: none; width: 60px; height: 60px; border-radius: 50%; box-shadow: var(--sombra-2);
background:
radial-gradient(circle, #FFFFFF 0 8%, #C9AA61 8.5% 26%, transparent 26.5%),
conic-gradient(from 30deg, rgba(255, 255, 255, 0.2), transparent 25%, rgba(255, 255, 255, 0.14) 50%, transparent 75%, rgba(255, 255, 255, 0.2)),
repeating-radial-gradient(circle, #24272D 0 2px, #383B43 2px 3px);
}
.disco__titulo { margin: 0; font: 800 1.35rem/1.15 var(--f-titular); }
.disco__espec { margin: 3px 0 0; font-size: 0.88rem; line-height: 1.35; color: #4A4D55; } /* 8,6:1 sobre blanco */
.disco__rotulo { margin: 2px 0 0; font: 700 0.72rem/1.2 var(--f-interfaz); letter-spacing: 0.12em; text-transform: uppercase; color: #6B5418; } /* 7,3:1 */
.disco__materias { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.disco__materias li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; border-radius: 999px; background: #EFE7D3; font-size: 0.84rem; font-weight: 600; }
.disco__materias img { width: 24px; height: 24px; border-radius: 50%; }
.disco__entrega { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.disco__opcion { padding: 5px 12px; border: 1px solid #B9B2A0; border-radius: 999px; font-size: 0.84rem; font-weight: 600; }
.disco__opcion--elegida { border-color: var(--c-azul); background: var(--c-azul); color: var(--c-blanco); }
/* ---------- 05 · Persona.earth: tres perfiles apilados, cada uno con su enlace (CC-52) · Parabole.me: precio ---------- */
.perfiles { display: grid; width: min(340px, 100%); text-align: left; color: var(--c-azul); }
.perfiles__ficha { position: relative; padding: 12px 18px 26px; border-radius: 16px; box-shadow: 0 -4px 14px rgba(40, 10, 12, 0.22); }
.perfiles__ficha + .perfiles__ficha { margin-top: -14px; } /* la de delante tapa el pie de la de detrás */
.perfiles__ficha--3 { margin-inline: 28px; background: #E8C9CB; } /* texto #1E2025 10:1, enlace #4A4D55 5,5:1 */
.perfiles__ficha--2 { margin-inline: 14px; background: #F2DCDD; }
.perfiles__ficha--1 { padding-bottom: 16px; background: var(--c-blanco); }
.perfiles__rol { margin: 0; font: 800 1.05rem/1.2 var(--f-titular); }
.perfiles__enlace { margin: 2px 0 0; font-size: 0.82rem; line-height: 1.3; color: #4A4D55; overflow-wrap: anywhere; }
.perfiles__cuerpo { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #E3E1E2; }
.perfiles__foto { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #E3E1E2; }
.perfiles__nombre { margin: 0; font: 800 1.15rem/1.2 var(--f-titular); }
.perfiles__nombre small { display: block; margin-top: 2px; font: 500 0.8rem/1.3 var(--f-interfaz); color: #4A4D55; }
.precio { align-content: center; gap: 6px; }
.precio__cifra { margin: 0; font: 800 clamp(3.6rem, 7vw, 5.6rem)/1 var(--f-titular); letter-spacing: -0.02em; color: var(--c-azul); }
.precio__cifra span { margin-left: 6px; font: 600 clamp(1.1rem, 1.6vw, 1.4rem)/1 var(--f-interfaz); letter-spacing: 0; color: #4A4D55; }
.precio__nota { margin: 0; font-size: 0.95rem; color: #4A4D55; }
/* ---------- 06 · Biblioteca: foto a sangre, velo y tres bibliotecas en cristal (CC-52) ---------- */
.tesela--foto { --t-fondo: #17191D; justify-content: space-between; }
.tesela__fondo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.tesela--foto::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(180deg, rgba(23, 25, 29, 0.9) 0%, rgba(23, 25, 29, 0.78) 50%, rgba(23, 25, 29, 0.42) 100%);
}
.tesela--foto .tesela__frase { color: #E2E2E6; }
.bibliotecas {
position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
width: min(1040px, 100%); margin: 36px 0 clamp(28px, 4vw, 48px); padding: 0; list-style: none; text-align: left;
}
.bibliotecas__ficha { /* tres cristales hermanos, ninguno dentro de otro */
display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.16); color: var(--c-blanco);
background: rgba(30, 32, 37, 0.58);
-webkit-backdrop-filter: var(--cristal-desenfoque); backdrop-filter: var(--cristal-desenfoque);
}
.bibliotecas__numero {
display: grid; place-items: center; width: 30px; height: 30px; margin: 0 0 4px; border-radius: 50%;
background: var(--c-arena); color: var(--c-azul); font: 700 0.85rem/1 var(--f-interfaz);
}
.bibliotecas__nombre { margin: 0; font: 800 1.4rem/1.15 var(--f-titular); }
.bibliotecas__texto { margin: 0; font-size: 0.95rem; line-height: 1.45; color: #E2E2E6; }
.bibliotecas__etiqueta { margin: auto 0 0; padding-top: 10px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--c-arena); }
.bibliotecas__etiqueta--enciclopedia {
margin-top: auto; padding: 10px 12px; border-left: 3px solid var(--c-oro); border-radius: 4px 10px 10px 4px;
background: rgba(232, 218, 178, 0.12); color: var(--c-blanco); font: 800 1rem/1.25 var(--f-titular); letter-spacing: 0;
}
.bibliotecas__etiqueta--enciclopedia small { display: block; margin-bottom: 3px; font: 700 0.68rem/1.2 var(--f-interfaz); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-arena); }
/* ---------- 07 · For Work Spaces: tres aplicaciones ---------- */
.trio { display: flex; justify-content: center; gap: clamp(18px, 3vw, 36px); margin-block: auto 0; list-style: none; }
.trio li { display: grid; justify-items: center; gap: 10px; font-size: 0.95rem; font-weight: 600; }
.trio img { width: clamp(72px, 7vw, 96px); height: auto; border-radius: 22px; box-shadow: var(--sombra-3); }
.trio li:last-child img { border-radius: 50%; box-shadow: none; }
/* ---------- Móvil: una columna ---------- */
@media (max-width: 833.98px) {
.escaparate__fila { grid-template-columns: minmax(0, 1fr); }
.tesela--rect, .tesela--cuadro { min-height: 0; }
.tesela { border-radius: 18px; }
.campus-capas__lista, .planes, .bibliotecas { grid-template-columns: minmax(0, 1fr); width: min(420px, 100%); }
.campus-capas__capa { min-height: 0; }
}
@media (max-width: 480px) {
.escaparate { padding-inline: 8px; gap: 8px; }
.escaparate__fila { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .tesela__boton { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .bibliotecas__ficha { background: #1E2025; -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* =====================================================================================================
r9 · KIT DE PÁGINAS DE PRODUCTO (Arquitectura_web_r9.md §5) · lo usan las páginas de B, C y D
Ilustración: no es código del proyecto. Composición como una página de producto de apple.com:
paneles redondeados a todo lo ancho (los mismos 12 px de separación que el escaparate), héroe centrado,
secciones que alternan claro y oscuro, rasgos, comparativa de planes, preguntas frecuentes y banda final.
Estructura mínima:
(claro: + producto-heroe--clara)
![]()
(opcional)
Lentes.io
Titular corto.
Una o dos frases.
ProbarMás información
(opcional, abajo)
(--clara · --oscura · sin modificador = azul #1E2025)
…
…
…
Botones: los del escaparate, .tesela__boton (relleno) y .tesela__enlace (texto con «›»); funcionan dentro de todos estos paneles.
Colores: cualquier variante de tesela sirve también aquí (p. ej. class="producto-seccion tesela--vino").
Relleno pendiente: añadir .lorem al elemento (borde punteado fino y etiqueta «pendiente»).
Contraste AA: el mismo juego de variables --t-* de las teselas (medido arriba en cada variante).
===================================================================================================== */
/* Valores por defecto con especificidad 0: cualquier modificador o variante de tesela los sustituye */
:where(.producto, .producto-heroe, .producto-seccion, .cta-banda) {
--t-fondo: var(--c-azul); --t-texto: var(--c-blanco); --t-suave: #BDBDC2; /* 8,7:1 */
--t-enlace: var(--c-arena); --t-boton-fondo: var(--c-arena); --t-boton-texto: var(--c-azul); --t-boton-hover: #F2E8CC;
--t-foco: var(--c-arena); --t-linea: #3A3D45; --t-caja: #2A2D34; --t-marca: var(--c-arena);
--t-borde: rgba(255, 255, 255, 0.08);
}
/* Líneas, cajas y marca para las variantes de tesela reutilizadas en el kit */
.tesela--clara, .tesela--pergamino, .tesela--crema { --t-linea: #D6D4D0; --t-caja: var(--c-blanco); --t-marca: #6B5418; --t-borde: transparent; }
.tesela--vino { --t-linea: #A65A5E; --t-caja: #9C4B4F; --t-marca: var(--c-arena); --t-borde: transparent; }
.tesela--teal { --t-linea: #5A8584; --t-caja: #477776; --t-marca: var(--c-blanco); --t-borde: transparent; }
/* Variantes propias del kit */
.producto-heroe--clara, .producto-seccion--clara, .cta-banda--clara { /* #F5F5F7 */
--t-fondo: #F5F5F7; --t-texto: var(--c-azul); --t-suave: #4A4D55; /* 7,8:1 */
--t-enlace: #6B5418; --t-boton-fondo: var(--c-azul); --t-boton-texto: var(--c-blanco); --t-boton-hover: #383B43;
--t-foco: var(--c-azul); --t-linea: #D6D4D0; --t-caja: var(--c-blanco); --t-marca: #6B5418; --t-borde: transparent;
}
.producto-heroe--blanca, .producto-seccion--blanca, .cta-banda--blanca { /* #FFFFFF */
--t-fondo: var(--c-blanco); --t-texto: var(--c-azul); --t-suave: #4A4D55; /* 8,6:1 */
--t-enlace: #6B5418; --t-boton-fondo: var(--c-azul); --t-boton-texto: var(--c-blanco); --t-boton-hover: #383B43;
--t-foco: var(--c-azul); --t-linea: #E3E1E2; --t-caja: #F5F5F7; --t-marca: #6B5418; --t-borde: transparent;
}
.producto-heroe--oscura, .producto-seccion--oscura, .cta-banda--oscura { /* casi negro, para alternar con el azul */
--t-fondo: #111215; --t-texto: var(--c-blanco); --t-suave: #C2C2C7; /* 11:1 */
--t-enlace: var(--c-arena); --t-boton-fondo: var(--c-arena); --t-boton-texto: var(--c-azul); --t-boton-hover: #F2E8CC;
--t-foco: var(--c-arena); --t-linea: #2C2E34; --t-caja: #1E2025; --t-marca: var(--c-arena);
--t-borde: rgba(255, 255, 255, 0.08);
}
/* ---------- .producto · contenedor (misma geometría que .escaparate) ---------- */
.producto { display: grid; gap: 12px; padding: 48px 12px 96px; } /* 48 px: la fecha de W0001 cuelga sobre el fondo */
.producto > * { min-width: 0; }
.producto-heroe, .producto-seccion, .cta-banda {
position: relative; overflow: hidden; isolation: isolate;
border-radius: var(--radio-grande);
background: var(--t-fondo); color: var(--t-texto);
box-shadow: inset 0 0 0 1px var(--t-borde);
}
.producto :focus-visible { outline: 2px solid var(--t-foco); outline-offset: 3px; }
/* Botones dentro de los paneles: los de las teselas, sin cambios */
.producto-heroe__acciones, .producto-seccion__acciones, .cta-banda__acciones {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 26px; margin: 30px 0 0;
}
/* ---------- .producto-heroe ---------- */
.producto-heroe {
display: flex; flex-direction: column; align-items: center; text-align: center;
min-height: clamp(540px, 72vh, 780px);
padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 48px) 0;
}
.producto-heroe__icono { width: clamp(72px, 7vw, 96px); height: auto; margin: 0 0 20px; border-radius: 22px; box-shadow: var(--sombra-2); }
.producto-heroe__antetitulo, .producto-seccion__antetitulo {
margin: 0 0 10px; font: 700 0.8rem/1.2 var(--f-interfaz); letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-marca);
}
.producto-heroe__nombre {
margin: 0; max-width: 16ch; font-family: var(--f-titular); font-weight: 800;
font-size: clamp(3rem, 7.4vw, 6.2rem); line-height: 1; letter-spacing: -0.015em; overflow-wrap: break-word;
}
.producto-heroe__titular {
margin: 14px 0 0; max-width: 24ch; font-family: var(--f-titular); font-weight: 800;
font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.14;
}
.producto-heroe__frase {
margin: 18px 0 0; max-width: 54ch; font-size: clamp(1.0625rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--t-suave);
}
.producto-heroe__imagen { display: grid; justify-items: center; width: 100%; margin-top: auto; padding-top: clamp(40px, 5vw, 64px); }
.producto-heroe__imagen img { width: min(920px, 100%); border-radius: 18px 18px 0 0; box-shadow: var(--sombra-3); }
.producto-heroe:not(:has(.producto-heroe__imagen)) { justify-content: center; padding-bottom: clamp(64px, 8vw, 120px); }
/* ---------- .producto-seccion ---------- */
.producto-seccion {
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 72px);
}
.producto-seccion__titular {
margin: 0; max-width: 22ch; font-family: var(--f-titular); font-weight: 800;
font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -0.01em; overflow-wrap: break-word;
}
.producto-seccion__texto {
margin: 20px 0 0; max-width: 62ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--t-suave);
}
.producto-seccion__texto > :first-child { margin-top: 0; }
.producto-seccion__texto > :last-child { margin-bottom: 0; }
.producto-seccion__imagen { width: min(1040px, 100%); margin: clamp(36px, 5vw, 56px) 0 0; }
.producto-seccion__imagen img { width: 100%; border-radius: 18px; box-shadow: var(--sombra-3); }
.producto-seccion > .rasgos, .producto-seccion > .comparativa, .producto-seccion > .faq { margin-top: clamp(36px, 5vw, 56px); }
/* ---------- .rasgos / .rasgo · rejilla de 3 (o 2 y 4 según cuántos haya) ---------- */
.rasgos {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
width: min(1080px, 100%); margin: 40px 0 0; padding: 0; list-style: none; text-align: left;
}
.rasgos:has(> :nth-child(2):last-child), .rasgos:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(860px, 100%); }
@media (min-width: 1100px) { .rasgos:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(1180px, 100%); } }
.rasgo { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px 30px; border-radius: 18px; background: var(--t-caja); }
.rasgo__icono {
display: grid; place-items: center; flex: none; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 14px;
background: var(--t-fondo); color: var(--t-marca); box-shadow: inset 0 0 0 1px var(--t-linea); font-size: 1.5rem; line-height: 1;
}
.rasgo__icono img, .rasgo__icono svg { width: 30px; height: 30px; }
img.rasgo__icono { padding: 0; object-fit: contain; border-radius: 50%; box-shadow: none; }
.rasgo__titulo { margin: 0; font: 800 clamp(1.25rem, 1.6vw, 1.45rem)/1.2 var(--f-titular); }
.rasgo__texto { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--t-suave); }
/* ---------- .comparativa · tabla de planes con ✓ y — ---------- */
.comparativa { width: min(960px, 100%); margin: 40px 0 0; }
div.comparativa { overflow-x: auto; } /* envoltorio opcional: desplaza en horizontal si no cabe */
table.comparativa, .comparativa table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.4; text-align: center; }
.comparativa caption { margin-bottom: 14px; font-size: 0.95rem; color: var(--t-suave); }
.comparativa th, .comparativa td { padding: 14px 14px; border-bottom: 1px solid var(--t-linea); vertical-align: middle; }
.comparativa thead th { padding-bottom: 18px; font: 800 clamp(1.1rem, 1.6vw, 1.35rem)/1.2 var(--f-titular); vertical-align: bottom; }
.comparativa thead th small { display: block; margin-top: 6px; font: 500 0.88rem/1.3 var(--f-interfaz); color: var(--t-suave); }
.comparativa tbody th { font-weight: 500; text-align: left; }
.comparativa td { color: var(--t-suave); }
.comparativa__si { color: var(--t-marca) !important; font-weight: 700; font-size: 1.15rem; }
.comparativa__no { color: var(--t-suave); }
.comparativa__precio { font: 800 1.35rem/1.2 var(--f-titular); color: var(--t-texto) !important; }
.comparativa__destacada { background: var(--t-caja); }
/* ---------- .faq · preguntas frecuentes en ---------- */
.faq { width: min(820px, 100%); margin: 40px 0 0; text-align: left; border-top: 1px solid var(--t-linea, #3A3D45); }
.faq details, details.faq__pregunta { border-bottom: 1px solid var(--t-linea, #3A3D45); }
.faq summary, details.faq__pregunta > summary, summary.faq__pregunta {
display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 44px;
padding: 20px 4px; cursor: pointer; list-style: none;
font: 600 1.125rem/1.4 var(--f-interfaz);
}
.faq summary::-webkit-details-marker, details.faq__pregunta > summary::-webkit-details-marker { display: none; }
.faq summary::after, details.faq__pregunta > summary::after {
content: "+"; flex: none; font: 400 1.6rem/1 var(--f-interfaz); color: var(--t-marca, var(--c-arena)); transition: transform 0.2s ease;
}
.faq details[open] > summary::after, details.faq__pregunta[open] > summary::after { transform: rotate(45deg); }
.faq summary:hover, details.faq__pregunta > summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq details > :not(summary), details.faq__pregunta > :not(summary), .faq__respuesta {
max-width: 68ch; margin: 0 4px 22px; font-size: 1.0625rem; line-height: 1.6; color: var(--t-suave, #BDBDC2);
}
/* ---------- .cta-banda · banda final: titular y dos botones ---------- */
.cta-banda {
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: clamp(64px, 8vw, 112px) clamp(20px, 4vw, 48px);
}
:where(.cta-banda):not(.cta-banda--clara, .cta-banda--blanca, .cta-banda--oscura, [class*="tesela--"]) {
background: radial-gradient(120% 140% at 50% 0%, #2E313A 0%, var(--t-fondo) 62%);
}
.cta-banda__titular, :where(.cta-banda) > h2 {
margin: 0; max-width: 20ch; font-family: var(--f-titular); font-weight: 800;
font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -0.01em;
}
.cta-banda__texto { margin: 16px 0 0; max-width: 52ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--t-suave); }
/* ---------- .lorem · relleno pendiente: borde punteado fino y etiqueta «pendiente» ---------- */
.lorem {
position: relative;
outline: 1px dotted color-mix(in srgb, currentColor 60%, transparent); outline-offset: 6px; border-radius: 2px;
}
.lorem::after {
content: "pendiente"; position: absolute; z-index: 2; top: -6px; right: -6px; transform: translateY(-50%);
padding: 2px 8px; border-radius: 999px; background: #6B5418; color: var(--c-blanco); /* 7,3:1 */
font: 700 0.62rem/1.4 var(--f-interfaz); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
/* ---------- Kit · móvil ---------- */
@media (max-width: 833.98px) {
.producto-heroe, .producto-seccion, .cta-banda { border-radius: 18px; }
.producto-heroe { min-height: 0; }
.rasgos, .rasgos:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.rasgos, .rasgos:has(> :nth-child(2):last-child), .rasgos:has(> :nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); }
.comparativa th, .comparativa td { padding: 12px 8px; font-size: 0.92rem; }
.comparativa thead th { font-size: 1rem; }
}
@media (max-width: 480px) { .producto { padding-inline: 8px; gap: 8px; } }
@media (prefers-reduced-motion: reduce) {
.faq summary::after, details.faq__pregunta > summary::after { transition: none; }
}