/* CercanIA · Hazte visible
Identidad 2026-10-27: ilusión con los pies en el suelo.
Cal de fondo, azul noche para dar peso, naranja atardecer de acento (siempre con
texto azul noche encima, nunca como color de texto sobre claro) y azul azulejo de
apoyo. Tipografía única: Archivo, ancha y gruesa en titulares, normal en texto. */
:root {
--color-principal: #E8733A; /* atardecer: acento (~10 %) */
--color-principal-claro: #FBE7D9;
--color-texto: #16263D; /* azul noche: textos y fondos oscuros */
--color-texto-suave: #45526A;
--color-tinta-claro: #24395A;
--color-acento: #F2B32F; /* oro: solo detalles */
--color-acento-claro: #F3EAD5;
--color-azulejo: #2A5BA6; /* apoyo: patrones, iconos, bloques puntuales */
--color-fondo: #F5F1E8; /* cal */
--color-blanco: #FFFFFF;
--color-suave: #E8DCC0; /* arena */
--color-verde: #25D366;
--fuente-titulos: 'Archivo', 'Segoe UI', system-ui, sans-serif;
--fuente-texto: 'Archivo', 'Segoe UI', system-ui, sans-serif;
--patron-azulejo: url("data:image/svg+xml;utf8,");
--patron-cal-suave: url("data:image/svg+xml;utf8,");
--radio: 16px;
--sombra: 0 18px 40px rgba(31, 42, 68, 0.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
margin: 0;
background: var(--color-fondo);
color: var(--color-texto);
font-family: var(--fuente-texto);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--fuente-titulos); line-height: 1.08; margin: 0 0 16px; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.9rem, 7.2vw, 6rem); font-weight: 850; line-height: 0.95; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 850; }
h3 { font-size: 1.25rem; font-weight: 750; }
/* Archivo ancha (wdth 125) en titulares y cifras; ancho normal en el texto que va dentro */
h1, h2, h3,
.flotante b,
.perfil__nombre,
.cinta__pista span,
.destacado,
.fundador strong,
.fundador__inicial,
.ruta b,
.principios b,
.pasos-mini li::before,
.chips-titulo,
.tarjeta-nfc__logo,
.escena__texto p,
.escena--final p,
.pack-local__precio .cifra,
.plan__precio,
.auto__precio,
.chat__avatar,
.carta__consejo b,
.carta__lista b,
.proceso__pasos li::before,
.calc__titulo,
.pack__nombre,
.pack__precio,
.extras__titulo,
.extra__precio,
.resumen__titulo,
.resumen__total strong,
.preguntas summary::after { font-stretch: 125%; }
.plan__precio small,
.auto__precio small,
.carta__lista b small,
.pack__sello,
.pack__precio small,
.extra__precio small { font-stretch: 100%; }
p { margin: 0 0 12px; }
a { color: var(--color-texto); text-decoration-color: var(--color-principal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
small { font-size: 0.75em; font-weight: 500; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.contenedor { width: min(1180px, 100% - 32px); margin-inline: auto; }
.oculto-accesible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Botones */
.boton {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: var(--color-principal);
color: var(--color-texto);
font-weight: 700;
text-decoration: none;
padding: 15px 28px;
border-radius: 999px;
border: 2px solid var(--color-principal);
transition: background 0.2s, transform 0.1s, color 0.2s, border-color 0.2s;
}
.boton svg { width: 20px; height: 20px; flex-shrink: 0; }
.boton:hover { background: var(--color-texto); color: var(--color-fondo); border-color: var(--color-texto); }
.boton:active { transform: scale(0.98); }
.boton--pequeno { padding: 9px 18px; font-size: 0.92rem; }
.boton--secundario { background: transparent; color: var(--color-texto); border-color: var(--color-texto); }
.boton--secundario:hover { background: var(--color-texto); color: var(--color-blanco); border-color: var(--color-texto); }
.boton--claro { background: var(--color-fondo); color: var(--color-texto); border-color: var(--color-fondo); }
.boton--claro:hover { background: var(--color-acento); color: var(--color-texto); border-color: var(--color-acento); }
.boton--ancho { display: flex; width: 100%; }
a:focus-visible, input:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--color-acento); outline-offset: 3px; }
.sello {
display: inline-block;
background: var(--color-acento);
color: var(--color-texto);
font-weight: 600;
font-size: 0.82rem;
padding: 4px 14px;
border-radius: 999px;
margin-bottom: 12px;
}
.etiqueta {
display: inline-flex; align-items: center; gap: 10px;
font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--color-texto); margin-bottom: 14px;
}
.etiqueta::before { content: ""; width: 26px; height: 3px; background: var(--color-principal); }
.plazo {
display: inline-flex; align-items: center; gap: 5px;
font-size: 0.8rem; font-weight: 600; color: var(--color-texto-suave);
}
.plazo::before {
content: ""; width: 12px; height: 12px; border-radius: 50%;
border: 2px solid currentColor; box-sizing: border-box;
background: linear-gradient(currentColor, currentColor) 50% 25% / 2px 35% no-repeat;
}
/* Logo */
.logo { display: inline-flex; line-height: 0; text-decoration: none; }
.logo img { display: block; height: 34px; width: auto; }
.logo--pequeno img { height: 26px; }
/* Cabecera */
.cabecera {
position: sticky; top: 0; z-index: 30;
background: rgba(245, 241, 232, 0.94);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--color-suave);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; position: relative; }
.menu { display: flex; gap: clamp(12px, 1.1vw, 16px); }
.menu a { color: var(--color-texto); text-decoration: none; font-weight: 500; font-size: 0.9rem; white-space: nowrap; }
.menu a:hover { color: var(--color-principal); }
.cabecera__acciones { display: flex; align-items: center; gap: 10px; }
.menu-boton {
display: none;
width: 42px; height: 42px; border-radius: 12px;
border: 2px solid var(--color-suave); background: var(--color-blanco);
cursor: pointer; padding: 0;
flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menu-boton span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--color-texto); transition: transform 0.2s, opacity 0.2s; }
.menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Portada */
.hero { padding: 64px 0 72px; overflow: hidden; }
.hero__fila { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; }
.hero__texto { min-width: 0; }
.subrayado {
color: var(--color-texto);
background: linear-gradient(var(--color-principal), var(--color-principal)) 0 92% / 100% 0.2em no-repeat;
animation: subrayar 1s 0.3s cubic-bezier(0.6, 0, 0.2, 1) both;
}
.hero__lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); max-width: 32em; margin: 26px 0 30px; color: var(--color-texto-suave); }
.hero__botones { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__test { display: inline-block; margin-top: 18px; color: var(--color-texto-suave); text-decoration: none; font-size: 0.95rem; }
.hero__test strong { color: var(--color-azulejo); text-decoration: underline; text-underline-offset: 3px; }
.hero__test:hover strong { color: var(--color-texto); }
.hero__garantias { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-weight: 600; font-size: 0.92rem; }
.hero__garantias li { display: flex; align-items: center; gap: 8px; }
.hero__garantias li::before {
content: "✓"; width: 22px; height: 22px; border-radius: 50%;
background: var(--color-acento); color: var(--color-texto);
display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem;
}
.hero__visual { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero__visual::before {
content: ""; position: absolute; z-index: -1;
width: min(440px, 95%); aspect-ratio: 1; border-radius: 50%;
background: var(--color-principal-claro); top: 6%;
}
.hero__visual figcaption { font-size: 0.8rem; color: var(--color-texto-suave); }
.flotante {
position: absolute; background: var(--color-blanco); border-radius: 16px;
box-shadow: var(--sombra); padding: 12px 16px; font-size: 0.85rem; line-height: 1.3;
animation: flotar 5s ease-in-out infinite;
}
.flotante b { display: block; font-family: var(--fuente-titulos); }
.flotante--resena { top: 46%; left: -6%; }
.flotante--resena .estrellas { font-size: 1rem; }
.flotante--visitas { bottom: 9%; right: -6%; animation-delay: -2.5s; }
.flotante--visitas b { color: var(--color-azulejo); font-size: 1.3rem; }
/* Web de ejemplo en el móvil de la portada */
.miniweb__barra { background: #F1F3F4; border-radius: 999px; padding: 6px 12px; color: #5F6368; font-size: 0.72rem; text-align: center; }
.miniweb__portada {
display: grid; gap: 6px; padding: 18px 14px; border-radius: 14px;
background: var(--patron-cal-suave) center / 64px 64px, var(--color-texto); color: var(--color-fondo);
}
.miniweb__portada b { font-family: var(--fuente-titulos); font-stretch: 125%; font-weight: 800; font-size: 1.3rem; line-height: 1.1; }
.miniweb__boton { margin-top: 6px; background: var(--color-principal); color: var(--color-texto); border-radius: 999px; padding: 8px; text-align: center; font-weight: 700; }
.miniweb__menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.miniweb__menu span { background: var(--color-fondo); border-radius: 10px; padding: 8px 4px; text-align: center; font-weight: 600; font-size: 0.72rem; color: var(--color-texto); }
/* Móvil reutilizable */
.movil {
width: 270px; max-width: 100%;
background: var(--color-blanco);
border: 10px solid var(--color-texto);
border-radius: 40px;
box-shadow: var(--sombra);
position: relative;
overflow: hidden;
}
.movil::before {
content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
width: 70px; height: 18px; border-radius: 999px; background: var(--color-texto); z-index: 2;
}
.movil__pantalla { padding: 36px 14px 18px; min-height: 420px; display: flex; flex-direction: column; gap: 10px; font-size: 0.82rem; }
.movil--pequeno { width: 190px; border-width: 8px; border-radius: 30px; }
.movil--pequeno .movil__pantalla { min-height: 300px; padding: 30px 12px 14px; }
/* Ficha de Google de ejemplo */
.g-buscador {
display: flex; align-items: center; gap: 8px;
border: 1px solid #DADCE0; border-radius: 999px; padding: 8px 12px; color: #202124; background: var(--color-blanco);
}
.g-buscador::before { content: ""; width: 12px; height: 12px; border: 2px solid #5F6368; border-radius: 50%; flex-shrink: 0; }
.perfil__fotos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 60px 60px; gap: 4px; border-radius: 12px; overflow: hidden; }
.perfil__foto { display: flex; align-items: center; justify-content: center; color: var(--color-blanco); }
.perfil__foto svg { width: 28px; height: 28px; }
.perfil__foto--1 { grid-row: span 2; background: var(--color-principal); color: var(--color-texto); }
.perfil__foto--2 { background: var(--color-acento); color: var(--color-texto); }
.perfil__foto--3 { background: var(--color-texto); }
.perfil__nombre { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.25rem; margin: 4px 0 0; color: #202124; }
.perfil__nota { display: flex; align-items: center; gap: 5px; margin: 0; color: #202124; }
.perfil__nota span:last-child { color: #70757A; }
.estrellas { color: var(--color-acento); letter-spacing: 1px; }
.estrellas--pocas { color: #C8CCD2; }
.perfil__tipo, .perfil__horario { margin: 0; color: #70757A; }
.perfil__horario b { color: #188038; font-weight: 600; }
.perfil__horario--sin b { color: #D93025; }
.perfil__botones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; }
.perfil__botones span {
display: flex; flex-direction: column; align-items: center; gap: 4px;
font-size: 0.68rem; color: #1A73E8; text-align: center;
}
.perfil__botones span::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: #E8F0FE; }
.perfil__resena { background: #F8F9FA; border-radius: 12px; padding: 10px; color: #3C4043; }
.perfil__resena b { color: #202124; }
/* Cinta de servicios */
.cinta { background: var(--color-texto); color: var(--color-blanco); overflow: hidden; padding: 18px 0; }
.cinta__pista { display: flex; width: max-content; animation: cinta 38s linear infinite; }
.cinta__pista span { font-family: var(--fuente-titulos); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.7rem); white-space: nowrap; padding: 0 26px; }
.cinta__pista i { color: var(--color-acento); font-style: normal; font-size: 1.3rem; align-self: center; }
/* Secciones */
.seccion { padding: 96px 0; }
.seccion--blanca { background: var(--color-blanco); }
.seccion--tinta { background: var(--color-texto); color: var(--color-blanco); }
.seccion--tinta .etiqueta { color: var(--color-acento); }
.seccion__cabecera { max-width: 760px; margin-bottom: 48px; }
/* Test "¿Te encuentran tus clientes?" */
.test { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.test__dolores { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 12px; }
.test__dolores li {
position: relative; padding: 14px 18px 14px 50px;
background: var(--color-fondo); border-radius: var(--radio); font-weight: 500;
}
.test__dolores li::before {
content: "?"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
width: 24px; height: 24px; border-radius: 50%;
background: var(--color-azulejo); color: var(--color-blanco);
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem;
}
.test__nota { color: var(--color-texto-suave); margin: 0; }
.test__tarjeta {
background: var(--color-fondo); border: 2px solid var(--color-suave);
border-radius: 24px; padding: 28px; display: grid; gap: 4px;
}
.test__pregunta {
border: 0; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--color-suave);
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
}
.test__pregunta legend { float: left; width: 100%; font-weight: 600; margin-bottom: 4px; padding: 0; }
.test__pregunta label {
position: relative; display: inline-flex; align-items: center; cursor: pointer;
padding: 6px 18px; border: 2px solid var(--color-texto); border-radius: 999px; font-weight: 600; font-size: 0.92rem;
}
.test__pregunta input { position: absolute; opacity: 0; pointer-events: none; }
.test__pregunta label:has(input:checked) { background: var(--color-texto); color: var(--color-fondo); }
.test__pregunta label:has(input:focus-visible) { outline: 3px solid var(--color-acento); outline-offset: 3px; }
.test__progreso { margin: 12px 0 0; color: var(--color-texto-suave); font-weight: 600; }
.test__nota-final { font-family: var(--fuente-titulos); font-weight: 800; font-stretch: 115%; font-size: 1.6rem; line-height: 1.1; margin: 16px 0 6px; }
.test__resultado ul { margin: 10px 0 18px; padding-left: 20px; }
.test__resultado li { margin-bottom: 4px; }
.seccion__intro { font-size: 1.12rem; max-width: 42em; color: var(--color-texto-suave); margin-bottom: 0; }
.seccion--tinta .seccion__intro { color: rgba(255, 255, 255, 0.78); }
.subtitulo { margin: 56px 0 20px; font-size: 1.6rem; }
.nota { font-size: 0.88rem; color: var(--color-texto-suave); margin-top: 16px; }
/* Nosotros */
.nosotros__fila { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.mosaico { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 230px 230px; gap: 14px; }
.foto { position: relative; margin: 0; border-radius: 24px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.foto--grande { grid-row: span 2; }
.foto--terracota { background: var(--color-principal); color: var(--color-texto); }
.foto--tinta { background: var(--color-texto); color: var(--color-blanco); }
.foto--amarillo { background: var(--patron-cal-suave) center / 64px 64px, var(--color-azulejo); color: var(--color-fondo); }
.foto__marca { font-size: 0.9rem; opacity: 0.7; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto figcaption {
position: absolute; left: 14px; bottom: 14px;
background: var(--color-blanco); color: var(--color-texto);
font-weight: 600; font-size: 0.85rem; padding: 4px 12px; border-radius: 999px;
}
.nosotros__texto { min-width: 0; }
.nosotros__texto > p { font-size: 1.08rem; color: var(--color-texto-suave); }
.destacado {
font-family: var(--fuente-titulos); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.7rem) !important;
line-height: 1.25; color: var(--color-texto) !important; margin-top: 22px;
padding-left: 20px; border-left: 5px solid var(--color-principal);
}
.fundadores { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 4px 0 22px; }
.fundador { display: flex; align-items: center; gap: 12px; }
.fundador strong { display: block; font-family: var(--fuente-titulos); font-size: 1.1rem; }
.fundador small { font-size: 0.85rem; color: var(--color-texto-suave); }
.fundador__foto {
position: relative; width: 58px; height: 58px; border-radius: 50%; overflow: hidden;
background: var(--color-principal); color: var(--color-texto);
display: flex; align-items: center; justify-content: center;
border: 3px solid var(--color-suave);
}
.fundador__inicial { font-family: var(--fuente-titulos); font-weight: 800; font-size: 1.4rem; }
.fundador__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.ruta { list-style: none; padding: 0; margin: 72px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.ruta::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; border-top: 2px dashed var(--color-suave); }
.ruta li { position: relative; padding-top: 34px; }
.ruta li::before {
content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%;
background: var(--color-fondo); border: 4px solid var(--color-principal);
}
.ruta li:nth-child(2)::before { background: var(--color-principal); }
.ruta b { display: block; font-family: var(--fuente-titulos); font-size: 1.3rem; margin-bottom: 6px; }
.ruta span { font-size: 0.95rem; color: var(--color-texto-suave); }
/* Pilares y principios */
.pilares__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pilar { border-radius: 24px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; min-height: 290px; }
.pilar h3 { font-size: 1.6rem; margin: auto 0 0; }
.pilar p { font-size: 0.95rem; margin: 0; }
.pilar__icono { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.pilar__icono svg { width: 28px; height: 28px; }
.pilar--terracota { background: var(--color-principal); color: var(--color-texto); }
.pilar--terracota .pilar__icono { background: rgba(22, 38, 61, 0.1); }
.pilar--amarillo { background: var(--color-suave); color: var(--color-texto); }
.pilar--amarillo .pilar__icono { background: rgba(22, 38, 61, 0.1); }
.pilar--crema { background: var(--color-fondo); color: var(--color-texto); }
.pilar--crema .pilar__icono { background: var(--color-principal-claro); color: var(--color-texto); }
.pilar--tinta { background: var(--color-tinta-claro); color: var(--color-blanco); border: 1px solid rgba(255, 255, 255, 0.15); }
.pilar--tinta .pilar__icono { background: rgba(242, 179, 47, 0.18); color: var(--color-acento); }
.principios__titulo { margin: 64px 0 24px; font-size: 1.8rem; }
.principios { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.principios li { padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; }
.principios b { display: block; color: var(--color-blanco); font-family: var(--fuente-titulos); font-size: 1.12rem; margin-bottom: 4px; }
/* Explicaciones: NFC y ficha de Google */
.explica__bloque { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.explica__bloque + .explica__bloque { margin-top: 110px; }
.explica__bloque--invertido .explica__visual { order: 2; }
.explica__visual { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.explica__texto { min-width: 0; }
.explica__texto > p { color: var(--color-texto-suave); font-size: 1.05rem; }
.explica__aviso { font-size: 0.8rem; color: var(--color-texto-suave); margin: 0; }
.pasos-mini { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 10px; counter-reset: paso; }
.pasos-mini li { counter-increment: paso; display: flex; align-items: center; gap: 14px; font-weight: 600; }
.pasos-mini li::before {
content: counter(paso); width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
background: var(--color-principal); color: var(--color-texto);
display: flex; align-items: center; justify-content: center; font-family: var(--fuente-titulos);
}
.chips-titulo { font-family: var(--fuente-titulos); font-weight: 700; margin: 24px 0 10px; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { background: var(--color-acento-claro); border: 1px solid var(--color-acento); border-radius: 999px; padding: 6px 14px; font-size: 0.88rem; font-weight: 500; }
.escena-nfc {
position: relative; width: min(460px, 100%); height: 400px;
background: var(--color-principal-claro); border-radius: 32px; overflow: hidden;
}
.escena-nfc__mesa { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: #E7C9AE; }
.escena-nfc__mesa::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: #D9B08E; }
.tarjeta-nfc {
position: absolute; left: 12%; bottom: 17%;
width: 170px; height: 106px; border-radius: 12px;
background: var(--color-texto); color: var(--color-blanco);
padding: 12px 14px; box-shadow: 0 12px 20px rgba(31, 42, 68, 0.3);
transform: rotate(-6deg);
display: flex; flex-direction: column; justify-content: space-between;
}
.tarjeta-nfc__logo { font-family: var(--fuente-titulos); font-weight: 800; font-size: 0.95rem; }
.tarjeta-nfc__logo span { color: var(--color-acento); }
.tarjeta-nfc__texto { font-size: 0.68rem; line-height: 1.2; }
.tarjeta-nfc__icono { position: absolute; right: 12px; top: 12px; width: 24px; height: 24px; color: var(--color-acento); }
.tarjeta-nfc__estrellas { color: var(--color-acento); font-size: 0.8rem; letter-spacing: 1px; }
.escena-nfc .movil { position: absolute; right: 9%; top: 6%; animation: acercar 6s ease-in-out infinite; }
.onda {
position: absolute; left: 30%; bottom: 31%; width: 60px; height: 60px; border-radius: 50%;
border: 3px solid var(--color-principal); opacity: 0; animation: onda 6s ease-out infinite;
}
.pantalla-resena { text-align: center; align-items: center; justify-content: center; color: #202124; }
.pantalla-resena .estrellas { font-size: 1.5rem; letter-spacing: 2px; }
.pantalla-resena .estrellas span { color: #DADCE0; animation: estrella 6s infinite; }
.pantalla-resena .estrellas span:nth-child(2) { animation-delay: 0.12s; }
.pantalla-resena .estrellas span:nth-child(3) { animation-delay: 0.24s; }
.pantalla-resena .estrellas span:nth-child(4) { animation-delay: 0.36s; }
.pantalla-resena .estrellas span:nth-child(5) { animation-delay: 0.48s; }
.pantalla-resena__boton { background: #1A73E8; color: var(--color-blanco); border-radius: 999px; padding: 6px 16px; font-weight: 600; font-size: 0.75rem; }
.comparar { display: inline-flex; background: var(--color-blanco); border: 2px solid var(--color-suave); border-radius: 999px; padding: 4px; gap: 4px; }
.comparar button {
font: inherit; font-size: 0.88rem; font-weight: 600; border: none; cursor: pointer;
padding: 8px 16px; border-radius: 999px; background: transparent; color: var(--color-texto);
}
.comparar button[aria-pressed="true"] { background: var(--color-principal); color: var(--color-texto); }
.ficha-ejemplo { position: relative; overflow: visible; }
.ficha-ejemplo .movil__pantalla { border-radius: 30px; overflow: hidden; }
.ficha-ejemplo[data-estado="antes"] .solo-despues,
.ficha-ejemplo[data-estado="despues"] .solo-antes { display: none !important; }
.perfil__fotos--vacio { display: flex; align-items: center; justify-content: center; height: 124px; border-radius: 12px; background: #F1F3F4; color: #9AA0A6; font-size: 0.8rem; }
.marca-num {
position: absolute; z-index: 3; width: 26px; height: 26px; border-radius: 50%;
background: var(--color-acento); color: var(--color-texto); font-weight: 700; font-size: 0.8rem;
display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(31, 42, 68, 0.25);
}
.marca-num--1 { left: -22px; top: 228px; }
.marca-num--2 { right: -22px; top: 263px; }
.marca-num--3 { left: -22px; top: 325px; }
.marca-num--4 { right: -22px; top: 368px; }
.marca-num--5 { right: -22px; top: 128px; }
.leyenda { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; counter-reset: leyenda; }
.leyenda li { counter-increment: leyenda; display: grid; grid-template-columns: 30px 1fr; gap: 12px; color: var(--color-texto-suave); }
.leyenda li::before {
content: counter(leyenda); width: 28px; height: 28px; border-radius: 50%;
background: var(--color-acento); color: var(--color-texto); font-weight: 700; font-size: 0.85rem;
display: flex; align-items: center; justify-content: center;
}
.leyenda b { color: var(--color-texto); }
/* Reproductor: animación explicativa */
.reproductor {
position: relative; background: var(--color-texto); color: var(--color-blanco);
border-radius: 32px; overflow: hidden; aspect-ratio: 16 / 9; max-height: 640px;
}
.reproductor video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--color-texto); }
.escena {
position: absolute; inset: 0 0 64px; display: grid; grid-template-columns: 1fr auto; align-items: center;
gap: 40px; padding: 40px 64px; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s;
}
.escena.activa { opacity: 1; visibility: visible; }
.escena__texto { min-width: 0; }
.escena__paso { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--color-acento); }
.escena__texto p { font-family: var(--fuente-titulos); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.15; margin: 10px 0 0; text-wrap: balance; }
.escena .movil { width: 230px; border-color: #0F1626; }
.escena .movil__pantalla { min-height: 380px; }
.escena.activa .anima { animation: aparecer 0.6s 0.4s both; }
.escena--final { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.escena--final .logo img { height: clamp(44px, 8vw, 76px); }
.escena--final p { font-family: var(--fuente-titulos); font-weight: 800; font-size: clamp(1.8rem, 4vw, 3rem); color: var(--color-acento); margin: 6px 0 0; }
.g-buscador__texto { overflow: hidden; white-space: nowrap; border-right: 2px solid #1A73E8; width: 0; }
.escena.activa .g-buscador__texto { animation: escribir 1.6s 0.4s steps(15) forwards; }
.g-sugerencias { display: grid; gap: 8px; margin-top: 6px; }
.g-sugerencias span { height: 12px; border-radius: 6px; background: #F1F3F4; }
.g-sugerencias span:nth-child(2) { width: 80%; }
.g-sugerencias span:nth-child(3) { width: 60%; }
.g-resultado { border: 1px solid #ECEDEF; border-radius: 12px; padding: 10px; color: #202124; display: grid; gap: 2px; }
.g-resultado b { font-size: 0.95rem; }
.g-resultado span, .g-resultado small { color: #70757A; }
.g-resultado--tuyo { border: 2px solid var(--color-principal); background: var(--color-principal-claro); }
.g-resultado--tuyo span { color: #202124; }
.escena.activa .g-resultado--tuyo { animation: rebote 0.6s 0.8s both; }
.g-mapa {
position: relative; height: 250px; border-radius: 12px; overflow: hidden;
background:
linear-gradient(90deg, transparent 46%, #FFFFFF 46%, #FFFFFF 54%, transparent 54%),
linear-gradient(transparent 30%, #FFFFFF 30%, #FFFFFF 37%, transparent 37%),
linear-gradient(transparent 70%, #FFFFFF 70%, #FFFFFF 76%, transparent 76%),
#E8EEF3;
}
.g-mapa__ruta { position: absolute; left: 50%; top: 33%; width: 4px; height: 52%; background: repeating-linear-gradient(#1A73E8 0 8px, transparent 8px 14px); transform: translateX(-50%); }
.g-mapa__pin {
position: absolute; left: 50%; top: 22%; width: 30px; height: 30px; margin-left: -15px;
background: var(--color-principal); border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
}
.escena.activa .g-mapa__pin { animation: pin 1s 0.5s both; }
.g-boton-llegar { background: #1A73E8; color: var(--color-blanco); border-radius: 999px; text-align: center; padding: 10px; font-weight: 600; }
.escena-nfc--mini { height: 380px; width: 400px; max-width: 100%; border-radius: 24px; background: rgba(255, 255, 255, 0.06); }
.reproductor__barra {
position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
display: flex; align-items: center; gap: 16px; padding: 0 24px; background: rgba(15, 22, 38, 0.6);
}
.reproductor__play {
width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
background: var(--color-acento); color: var(--color-texto); display: flex; align-items: center; justify-content: center;
}
.reproductor__play svg { width: 18px; height: 18px; }
.reproductor__play .icono-play { display: none; }
.reproductor__play[data-pausado="true"] .icono-play { display: block; }
.reproductor__play[data-pausado="true"] .icono-pausa { display: none; }
.reproductor__progreso { flex: 1; display: flex; gap: 6px; }
.reproductor__progreso button { flex: 1; height: 6px; border-radius: 3px; border: none; padding: 0; cursor: pointer; background: rgba(255, 255, 255, 0.22); position: relative; overflow: hidden; }
.reproductor__progreso button span { position: absolute; inset: 0; width: 0; background: var(--color-acento); }
/* Pack Local y planes */
.pack-local {
background: var(--patron-cal-suave) center / 80px 80px, var(--color-azulejo);
color: var(--color-fondo);
border-radius: 32px;
padding: 52px;
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 40px;
align-items: center;
}
.pack-local h3 { font-size: clamp(2.4rem, 4.4vw, 3.4rem); font-weight: 800; margin-bottom: 10px; }
.pack-local__texto { font-size: 1.15rem; margin-bottom: 24px; }
.pack-local .plazo { color: var(--color-fondo); font-size: 0.92rem; }
.pack-local__precio { text-align: center; }
.pack-local__precio .cifra { font-family: var(--fuente-titulos); font-weight: 800; font-size: clamp(3.8rem, 7vw, 5.4rem); line-height: 1; margin: 0 0 8px; }
.pack-local__ahorro { text-decoration: line-through; opacity: 0.8; font-size: 0.95rem; margin-bottom: 20px; }
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lista-check li { padding-left: 28px; position: relative; }
.lista-check li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--color-azulejo); }
.lista-check--dos { grid-template-columns: 1fr 1fr; gap: 12px 32px; margin-bottom: 22px; }
.pack-local .lista-check li::before { color: var(--color-fondo); }
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan {
position: relative; background: var(--color-blanco); border: 1px solid var(--color-suave);
border-radius: 24px; padding: 30px; display: flex; flex-direction: column;
}
.plan--destacado { border: 2px solid var(--color-principal); }
.plan__marca {
position: absolute; top: -13px; left: 24px;
background: var(--color-principal); color: var(--color-texto);
font-size: 0.8rem; font-weight: 700; padding: 3px 12px; border-radius: 999px;
}
.plan h3 { font-size: 1.6rem; margin-bottom: 6px; }
.plan__precio { font-family: var(--fuente-titulos); font-weight: 850; font-size: 2.1rem; color: var(--color-texto); margin-bottom: 4px; }
.plan__precio small { font-family: var(--fuente-texto); color: var(--color-texto); font-size: 0.85rem; }
.plan__para { font-size: 0.95rem; color: var(--color-texto-suave); }
.plan ul { padding-left: 18px; margin: 16px 0 20px; display: grid; gap: 6px; font-size: 0.95rem; border-top: 1px solid var(--color-suave); padding-top: 16px; }
.plan li::marker { color: var(--color-azulejo); }
.plan .plazo { margin-top: auto; }
.oferta { background: var(--color-suave); border-radius: var(--radio); padding: 16px 24px; margin-top: 24px; text-align: center; font-weight: 500; }
/* Comparativa: CercanIA frente a otras opciones */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.comparativa__marco { overflow-x: auto; border-radius: 24px; border: 2px solid var(--color-suave); background: var(--color-blanco); }
.comparativa { width: 100%; min-width: 640px; border-collapse: collapse; }
.comparativa th, .comparativa td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-suave); }
.comparativa tr:last-child th, .comparativa tr:last-child td { border-bottom: 0; }
.comparativa thead th { font-family: var(--fuente-titulos); font-weight: 800; font-size: 1.05rem; background: var(--color-fondo); }
.comparativa tbody th { font-weight: 600; width: 22%; }
.comparativa td { color: var(--color-texto-suave); }
.comparativa .comparativa__nuestra { background: var(--color-principal-claro); color: var(--color-texto); font-weight: 600; }
.comparativa thead .comparativa__nuestra { background: var(--color-texto); color: var(--color-fondo); }
/* Automatización */
.automatizacion__fila { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 56px; align-items: start; }
.autos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.auto {
background: var(--color-tinta-claro); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px;
padding: 24px; display: flex; flex-direction: column; gap: 8px;
}
.auto h3 { font-size: 1.25rem; margin: 0; }
.auto p { font-size: 0.93rem; color: rgba(255, 255, 255, 0.75); margin: 0; }
.auto__pie { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.auto__precio { font-family: var(--fuente-titulos); font-weight: 800; color: var(--color-acento); font-size: 1.2rem; }
.auto__precio small { font-family: var(--fuente-texto); color: rgba(255, 255, 255, 0.75); }
.auto .plazo { color: rgba(255, 255, 255, 0.75); }
.chat { position: sticky; top: 100px; background: #ECE5DD; border-radius: 28px; overflow: hidden; color: #111B21; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.chat__cabecera { background: #075E54; color: var(--color-blanco); padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
.chat__avatar { width: 38px; height: 38px; border-radius: 50%; color: var(--color-texto); background: var(--color-principal); display: flex; align-items: center; justify-content: center; font-family: var(--fuente-titulos); font-weight: 800; }
.chat__cabecera b { display: block; font-size: 0.95rem; }
.chat__cabecera small { opacity: 0.8; font-weight: 400; }
.chat__cuerpo { padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 0.88rem; }
.mensaje { max-width: 82%; padding: 8px 12px; border-radius: 12px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
.mensaje--cliente { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 4px; }
.mensaje--negocio { align-self: flex-start; background: var(--color-blanco); border-top-left-radius: 4px; }
.mensaje small { display: block; text-align: right; color: #667781; font-size: 0.68rem; margin-top: 2px; }
.chat.animar .mensaje { animation: aparecer 0.5s both; }
.chat.animar .mensaje:nth-child(2) { animation-delay: 0.8s; }
.chat.animar .mensaje:nth-child(3) { animation-delay: 1.8s; }
.chat.animar .mensaje:nth-child(4) { animation-delay: 2.6s; }
.chat__pie { font-size: 0.75rem; color: #667781; text-align: center; padding: 0 14px 14px; margin: 0; }
/* Servicios sueltos: cartas como las de un bar */
.seccion--servicios { background: var(--color-principal-claro); }
.pack-local + .cartas { margin-top: 32px; }
/* Qué hacemos: la web destacada y el resto alrededor */
.servicios { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.servicio {
display: flex; flex-direction: column; gap: 10px; padding: 26px;
background: var(--color-blanco); color: var(--color-texto); text-decoration: none;
border-radius: 24px; box-shadow: 0 10px 30px rgba(31, 42, 68, 0.08); transition: transform 0.2s;
}
.servicio:hover { transform: translateY(-4px); }
.servicio h3 { margin: 0; font-size: 1.35rem; }
.servicio p { margin: 0; font-size: 0.95rem; color: var(--color-texto-suave); }
.servicio__icono { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--color-principal-claro); color: var(--color-azulejo); margin-bottom: 6px; }
.servicio__icono svg { width: 26px; height: 26px; }
.servicio__precio { margin-top: auto; padding-top: 8px; font-family: var(--fuente-titulos); font-stretch: 125%; font-weight: 800; font-size: 1.15rem; }
.servicio__precio small { font-family: var(--fuente-texto); font-stretch: 100%; color: var(--color-texto-suave); }
.servicio--estrella { grid-row: span 2; background: var(--color-texto); color: var(--color-fondo); padding: 34px; gap: 14px; }
.servicio--estrella h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.servicio--estrella p { font-size: 1.05rem; color: rgba(245, 241, 232, 0.8); }
.servicio--estrella .servicio__icono { background: var(--color-principal); color: var(--color-texto); }
.servicio--estrella .lista-check li::before { color: var(--color-principal); }
.servicio--estrella .servicio__precio { font-size: 1.6rem; color: var(--color-acento); }
.servicio--estrella .servicio__precio small { color: rgba(245, 241, 232, 0.75); }
.servicio--apps { background: var(--patron-cal-suave) center / 72px 72px, var(--color-azulejo); color: var(--color-fondo); }
.servicio--apps p { color: rgba(245, 241, 232, 0.85); }
.servicio--apps .servicio__icono { background: rgba(245, 241, 232, 0.16); color: var(--color-fondo); }
.webs__incluye { margin-bottom: 40px; }
.cartas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.carta { background: var(--color-blanco); border-radius: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(31, 42, 68, 0.08); transition: transform 0.2s; display: flex; flex-direction: column; }
.carta__consejo { margin: auto 24px 24px; background: var(--color-acento-claro); border-radius: 18px; padding: 18px; }
.carta__consejo b { display: block; font-family: var(--fuente-titulos); font-size: 1.05rem; margin-bottom: 4px; }
.carta__consejo p { font-size: 0.88rem; color: var(--color-texto-suave); margin: 0 0 10px; }
.carta__consejo a { font-weight: 600; font-size: 0.9rem; }
.carta:hover { transform: translateY(-4px); }
.carta__cabecera { display: flex; align-items: center; gap: 14px; padding: 22px 24px; }
.carta__cabecera svg { width: 40px; height: 40px; flex-shrink: 0; }
.carta__cabecera h3 { margin: 0; font-size: 1.35rem; }
.carta__cabecera p { margin: 0; font-size: 0.9rem; opacity: 0.85; }
.carta--terracota .carta__cabecera { background: var(--color-principal); color: var(--color-texto); }
.carta--tinta .carta__cabecera { background: var(--color-texto); color: var(--color-blanco); }
.carta--amarillo .carta__cabecera { background: var(--patron-cal-suave) center / 72px 72px, var(--color-azulejo); color: var(--color-fondo); }
.carta__lista { list-style: none; margin: 0; padding: 8px 24px 18px; }
.carta__lista li { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--color-suave); }
.carta__lista li:last-child { border-bottom: none; }
.carta__nombre { display: block; font-weight: 500; line-height: 1.3; }
.carta__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 0.75rem; color: var(--color-texto-suave); }
.carta__lista b { font-family: var(--fuente-titulos); font-weight: 800; font-size: 1.1rem; color: var(--color-texto); white-space: nowrap; }
.carta--tinta .carta__lista b { color: var(--color-texto); }
.carta__lista b small { font-family: var(--fuente-texto); font-weight: 500; color: var(--color-texto-suave); }
.carta__pie { font-size: 0.8rem; color: var(--color-texto-suave); margin: 0; padding: 0 24px 20px; }
/* Cómo trabajamos */
.proceso__pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: proceso; }
.proceso__pasos li { counter-increment: proceso; position: relative; background: var(--color-fondo); border-radius: 24px; padding: 28px 24px; }
.proceso__pasos li::before {
content: counter(proceso, decimal-leading-zero);
display: block; font-family: var(--fuente-titulos); font-weight: 800; font-size: 3.4rem; line-height: 1;
color: var(--color-azulejo); margin-bottom: 18px;
}
.proceso__pasos li:not(:last-child)::after {
content: "→"; position: absolute; right: -16px; top: 36px; z-index: 1;
width: 32px; height: 32px; border-radius: 50%; background: var(--color-acento); color: var(--color-texto);
display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.proceso__cuando { display: inline-block; background: var(--color-texto); color: var(--color-blanco); font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-bottom: 12px; }
.proceso__pasos h3 { margin-bottom: 8px; }
.proceso__pasos p { font-size: 0.95rem; color: var(--color-texto-suave); margin: 0; }
/* Calculadora */
.calc__encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
.calc__encabezado .seccion__cabecera { margin-bottom: 0; }
.sonido {
display: inline-flex; align-items: center; gap: 8px;
font: inherit; font-size: 0.85rem; font-weight: 600;
padding: 8px 14px; border-radius: 999px; cursor: pointer;
background: var(--color-principal-claro); color: var(--color-texto);
border: 2px solid var(--color-principal); transition: background 0.15s, color 0.15s;
}
.sonido svg { width: 20px; height: 20px; }
.sonido[aria-pressed="false"] { background: transparent; color: var(--color-texto); border-color: var(--color-suave); }
.sonido[aria-pressed="true"] .sonido__off, .sonido[aria-pressed="false"] .sonido__on { display: none; }
.calc { display: grid; grid-template-columns: 1fr 350px; gap: 32px; align-items: start; }
.calc__opciones { min-width: 0; }
.calc__grupo + .calc__grupo { margin-top: 36px; }
.calc__titulo { display: flex; align-items: center; gap: 10px; font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.25rem; margin-bottom: 14px; }
.calc__titulo span {
width: 30px; height: 30px; border-radius: 50%; background: var(--color-principal); color: var(--color-texto);
display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.pack {
position: relative; display: flex; flex-direction: column; gap: 12px;
background: var(--color-fondo); border: 2px solid var(--color-suave); border-radius: 18px;
padding: 18px 20px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.pack:hover { border-color: var(--color-principal); }
.pack input { position: absolute; opacity: 0; pointer-events: none; }
.pack:has(input:focus-visible) { outline: 3px solid var(--color-acento); outline-offset: 2px; }
.pack:has(input:checked) { border-color: var(--color-principal); background: var(--color-principal-claro); animation: rebote 0.4s ease; }
.pack__cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pack__nombre { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pack__sello { font-family: var(--fuente-texto); font-size: 0.7rem; font-weight: 600; background: var(--color-acento); padding: 2px 8px; border-radius: 999px; }
.pack__precio { font-family: var(--fuente-titulos); font-weight: 850; font-size: 1.3rem; color: var(--color-texto); white-space: nowrap; }
.pack__precio small { font-family: var(--fuente-texto); font-weight: 500; color: var(--color-texto); font-size: 0.75rem; }
.pack__lista { display: grid; gap: 4px; font-size: 0.88rem; }
.pack__lista span { padding-left: 20px; position: relative; }
.pack__lista span::before { content: "✓"; position: absolute; left: 0; color: var(--color-azulejo); font-weight: 700; }
.pack__boton { margin-top: auto; text-align: center; font-weight: 600; font-size: 0.9rem; padding: 8px; border-radius: 999px; border: 2px solid var(--color-principal); color: var(--color-texto); }
.pack__boton::before { content: "Elegir"; }
.pack:has(input:checked) .pack__boton { background: var(--color-principal); color: var(--color-texto); animation: latido 0.4s ease; }
.pack:has(input:checked) .pack__boton::before { content: "✓ Elegido"; }
.pack--local { display: grid; grid-template-columns: 1fr 1fr 140px; align-items: center; gap: 12px 24px; margin-bottom: 12px; }
.pack--local .pack__cabecera { flex-direction: column; align-items: flex-start; gap: 4px; }
.pack--local .pack__boton { margin-top: 0; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.packs .pack__cabecera { flex-direction: column; align-items: flex-start; gap: 2px; }
.extras { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.extras__columna { background: var(--color-fondo); border-radius: 18px; overflow: hidden; border: 1px solid var(--color-suave); }
.extras__titulo { margin: 0; padding: 10px 16px; font-family: var(--fuente-titulos); font-weight: 700; font-size: 1rem; }
.extras__titulo--terracota { background: var(--color-principal); color: var(--color-texto); }
.extras__titulo--tinta { background: var(--color-texto); color: var(--color-blanco); }
.extras__titulo--amarillo { background: var(--color-azulejo); color: var(--color-fondo); }
.extras__titulo--azul { background: var(--color-tinta-claro); color: var(--color-blanco); }
.extra {
position: relative; display: flex; align-items: center; gap: 10px;
padding: 11px 14px 11px 44px; border-bottom: 1px dashed var(--color-suave);
cursor: pointer; font-size: 0.9rem; transition: background 0.15s;
}
.extra:last-child { border-bottom: none; }
.extra:hover { background: var(--color-principal-claro); }
.extra input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.extra::before {
content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--color-suave); background: var(--color-blanco);
}
.extra:has(input:checked) { background: var(--color-principal-claro); animation: destello 0.6s ease; }
.extra:has(input:checked)::before {
content: "✓"; background: var(--color-principal); border-color: var(--color-principal);
color: var(--color-texto); font-size: 0.75rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
animation: marcar 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.extra:has(input:focus-visible) { outline: 3px solid var(--color-acento); outline-offset: -3px; }
.extra:has(input:disabled) { cursor: default; }
.extra:has(input:disabled) .extra__precio { text-decoration: line-through; opacity: 0.5; }
.extra__nombre { flex: 1; font-weight: 500; line-height: 1.25; min-width: 0; }
.extra__nombre small { display: block; font-size: 0.72rem; font-weight: 400; color: var(--color-texto-suave); margin-top: 2px; }
.extra__nombre .extra__incluido { display: none; color: var(--color-azulejo); font-weight: 600; }
.extra:has(input:disabled) .extra__incluido { display: block; }
.extra__precio { font-family: var(--fuente-titulos); font-weight: 800; color: var(--color-texto); white-space: nowrap; text-align: right; }
.extra__precio small { font-family: var(--fuente-texto); font-size: 0.72rem; color: var(--color-texto-suave); display: block; font-weight: 500; }
.extra--cantidad { cursor: default; padding-left: 14px; flex-wrap: wrap; }
.extra--cantidad::before { display: none; }
.contador { display: flex; align-items: center; gap: 6px; }
.contador button {
width: 30px; height: 30px; border-radius: 50%; border: none;
background: var(--color-principal); color: var(--color-texto);
font-size: 1.2rem; font-weight: 700; cursor: pointer; line-height: 1;
}
.contador button:hover { background: var(--color-texto); color: var(--color-fondo); }
.contador input {
width: 40px; height: 30px; text-align: center; font: inherit; font-weight: 600;
border: 2px solid var(--color-suave); border-radius: 10px; background: var(--color-blanco);
-moz-appearance: textfield;
}
.contador input::-webkit-outer-spin-button, .contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.contador input.cambia { animation: latido 0.3s ease; }
.resumen { position: sticky; top: 96px; background: var(--color-texto); color: var(--color-blanco); border-radius: 24px; padding: 28px; }
.resumen__cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; }
.resumen__cabecera > * { white-space: nowrap; }
.resumen__titulo { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.4rem; margin: 0; }
.resumen__borrar {
display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.8rem; font-weight: 600;
padding: 6px 12px; border-radius: 999px; cursor: pointer; background: transparent; color: var(--color-blanco);
border: 1px solid rgba(255, 255, 255, 0.35); transition: background 0.15s, border-color 0.15s; animation: entrar 0.3s ease;
}
.resumen__borrar:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--color-blanco); }
.resumen__borrar svg { width: 16px; height: 16px; }
.resumen__lista { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; font-size: 0.92rem; }
.resumen__lista li { display: flex; justify-content: space-between; gap: 12px; animation: entrar 0.3s ease both; }
.resumen__lista li span:last-child { white-space: nowrap; }
.resumen__vacio { opacity: 0.7; }
.resumen__aviso { background: var(--color-acento); color: var(--color-texto); border-radius: 10px; padding: 10px 12px; font-size: 0.88rem; font-weight: 500; }
.resumen__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 12px 0 4px; }
.resumen__total strong { font-family: var(--fuente-titulos); font-size: 1.8rem; color: var(--color-acento); }
.resumen__total strong.cambia { animation: latido 0.4s ease; }
.resumen__plazo { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 12px 0 4px; font-size: 0.95rem; }
.resumen__plazo b { color: var(--color-blanco); }
.resumen__iva { font-size: 0.82rem; opacity: 0.8; margin: 8px 0 20px; }
/* Preguntas */
.preguntas__fila { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
.preguntas details { border-bottom: 1px solid var(--color-suave); padding: 18px 0; }
.preguntas summary { font-weight: 600; cursor: pointer; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-family: var(--fuente-titulos); font-size: 1.5rem; line-height: 1; color: var(--color-azulejo); transition: transform 0.2s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { margin: 12px 0 0; color: var(--color-texto-suave); }
/* Llamada final */
.cta-final {
background: var(--color-texto); color: var(--color-fondo); border-radius: 36px;
padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 40px; align-items: end;
}
.cta-final h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin-bottom: 14px; }
.cta-final h2 span { color: var(--color-principal); display: block; }
.cta-final p { font-size: 1.12rem; }
.cta-final__contacto { display: grid; gap: 16px; }
.contacto__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 0.95rem; }
.contacto__lista a { color: var(--color-fondo); }
/* Pie */
.zocalo { height: 56px; background: var(--patron-azulejo) center / 56px 56px, var(--color-fondo); border-top: 3px solid var(--color-azulejo); border-bottom: 3px solid var(--color-azulejo); }
.pie { padding: 32px 0; font-size: 0.9rem; }
.pie__fila { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pie__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie__legal a { color: var(--color-texto); }
.whatsapp-flotante {
position: fixed; right: 20px; bottom: 20px; z-index: 20;
width: 58px; height: 58px; border-radius: 50%;
background: var(--color-verde); color: var(--color-blanco);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
/* Páginas legales */
.legal { padding: 56px 0 72px; }
.legal .contenedor { max-width: 780px; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.1; margin-bottom: 8px; letter-spacing: -0.03em; }
.legal h2 { font-size: 1.4rem; margin: 36px 0 12px; }
.legal p, .legal li { font-size: 1rem; }
.legal ul { padding-left: 20px; }
.legal table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.95rem; }
.legal th, .legal td { text-align: left; padding: 10px; border-bottom: 1px solid var(--color-suave); vertical-align: top; }
.legal__fecha { opacity: 0.7; margin-bottom: 32px; }
.legal__volver { display: inline-block; margin-bottom: 24px; font-weight: 600; text-decoration: none; }
.pendiente { background: var(--color-acento); color: var(--color-texto); padding: 0 4px; border-radius: 4px; }
/* Animaciones */
@keyframes subrayar { from { background-size: 0 0.22em; } to { background-size: 100% 0.22em; } }
@keyframes cinta { to { transform: translateX(-50%); } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes acercar {
0%, 12% { transform: translate(0, 0) rotate(0); }
35%, 70% { transform: translate(-118px, 70px) rotate(-8deg); }
90%, 100% { transform: translate(0, 0) rotate(0); }
}
@keyframes onda {
0%, 30% { opacity: 0; transform: scale(0.6); }
38% { opacity: 1; }
58% { opacity: 0; transform: scale(2.2); }
100% { opacity: 0; }
}
@keyframes estrella { 0%, 40% { color: #DADCE0; transform: scale(1); } 46% { color: var(--color-acento); transform: scale(1.3); } 50%, 92% { color: var(--color-acento); transform: scale(1); } 100% { color: #DADCE0; } }
@keyframes escribir { to { width: 15ch; } }
@keyframes pin { 0% { transform: translateY(-40px) rotate(-45deg); opacity: 0; } 60% { transform: translateY(4px) rotate(-45deg); opacity: 1; } 100% { transform: translateY(0) rotate(-45deg); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rebote { 0% { transform: scale(1); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes latido { 0% { transform: scale(1); } 45% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes marcar { 0% { transform: translateY(-50%) scale(0.4) rotate(-20deg); } 100% { transform: translateY(-50%) scale(1) rotate(0); } }
@keyframes destello { 0% { background: var(--color-acento-claro); } 100% { background: var(--color-principal-claro); } }
@keyframes entrar { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
.g-buscador__texto { width: auto; }
}
/* Adaptación a pantallas */
/* El menú (10 enlaces) pasa a desplegable antes que el resto del diseño, para que no apriete el logo */
@media (max-width: 1240px) {
.menu-boton { display: flex; }
.menu {
display: none; position: absolute; top: 100%; left: -16px; right: -16px;
flex-direction: column; gap: 0; background: var(--color-fondo);
border-bottom: 1px solid var(--color-suave); box-shadow: 0 12px 24px rgba(31, 42, 68, 0.08);
padding: 8px 32px 16px;
}
.menu.abierto { display: flex; animation: entrar 0.2s ease; }
.menu a { padding: 14px 4px; border-bottom: 1px solid var(--color-suave); font-size: 1.05rem; }
.menu a:last-child { border-bottom: none; }
}
@media (max-width: 1080px) {
.pilares__grid { grid-template-columns: 1fr 1fr; }
.cartas { grid-template-columns: 1fr 1fr; }
.servicios { grid-template-columns: 1fr 1fr; }
.servicio--estrella { grid-row: auto; grid-column: 1 / -1; }
.calc { grid-template-columns: 1fr; }
.resumen { position: static; }
.proceso__pasos { grid-template-columns: 1fr 1fr; }
.proceso__pasos li::after { display: none; }
.automatizacion__fila { grid-template-columns: 1fr; }
.chat { position: static; max-width: 440px; }
}
@media (max-width: 900px) {
.seccion { padding: 72px 0; }
.hero { padding: 40px 0 56px; }
.hero__fila, .pack-local, .nosotros__fila, .explica__bloque, .preguntas__fila, .cta-final { grid-template-columns: 1fr; }
.explica__bloque--invertido .explica__visual { order: 0; }
.explica__bloque { gap: 40px; }
.nosotros__fila { gap: 40px; }
.test { grid-template-columns: 1fr; gap: 32px; }
.test__tarjeta { padding: 20px; }
.planes { grid-template-columns: 1fr; gap: 28px; }
.ruta { grid-template-columns: 1fr 1fr; row-gap: 32px; }
.ruta::before { display: none; }
.pack-local { padding: 32px 24px; }
.principios { grid-template-columns: 1fr 1fr; }
.reproductor { aspect-ratio: auto; height: 600px; }
.escena { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; padding: 28px 20px; align-content: center; }
.escena .movil { width: 200px; }
.escena .movil__pantalla { min-height: 320px; }
.escena-nfc--mini { height: 320px; width: 300px; }
.g-mapa { height: 190px; }
}
/* Comparativa en el móvil: una ficha por fila, con el nombre de cada opción delante */
@media (max-width: 700px) {
.comparativa { min-width: 0; }
.comparativa thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.comparativa, .comparativa tbody, .comparativa tr, .comparativa th, .comparativa td { display: block; width: auto; }
.comparativa tr { border-bottom: 2px solid var(--color-suave); }
.comparativa tr:last-child { border-bottom: 0; }
.comparativa tbody th { width: auto; background: var(--color-fondo); font-family: var(--fuente-titulos); font-weight: 800; padding: 12px 18px; border-bottom: 0; }
.comparativa td { padding: 10px 18px; border-bottom: 0; }
.comparativa td::before { content: attr(data-label); display: block; font-size: 0.8rem; font-weight: 700; color: var(--color-texto-suave); }
.comparativa .comparativa__nuestra::before { color: var(--color-azulejo); }
}
@media (max-width: 640px) {
body { font-size: 16px; }
.seccion { padding: 56px 0; }
.lista-check--dos, .cartas, .servicios, .extras, .packs, .pack--local, .autos, .principios, .pilares__grid, .proceso__pasos, .ruta { grid-template-columns: 1fr; }
.pilar { min-height: 0; }
.mosaico { grid-template-rows: 150px 150px; }
.flotante--resena { left: 0; top: 46%; }
.flotante--visitas { right: 0; }
.escena-nfc { height: 340px; }
.escena-nfc .movil { right: 4%; }
.tarjeta-nfc { left: 6%; width: 150px; height: 96px; }
.marca-num--1, .marca-num--3 { left: -14px; }
.marca-num--2, .marca-num--4, .marca-num--5 { right: -14px; }
.reproductor { height: 560px; }
}
/* Web de varias páginas (2026-10-28): Inicio, Webs, Google, WhatsApp, NFC y diseño, Apps y Presupuesto */
.menu a[aria-current="page"] { color: var(--color-texto); font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-principal); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.seccion--primera { padding-top: 64px; }
.titulo-portada { font-size: clamp(2.9rem, 6.4vw, 5.4rem); margin-bottom: 0; }
.titulo-pagina { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1; }
.nosotros__fila--portada { grid-template-columns: 1.05fr 1fr; }
.nosotros__fila--portada .hero__lead { margin: 22px 0 24px; }
.nosotros__fila--portada .hero__botones { margin-top: 28px; }
.hero--corta { padding: 64px 0 56px; }
.hero--corta .hero__texto { max-width: 820px; }
.pack-local--inicio { margin-top: 32px; }
.proximamente {
display: inline-block; font-family: var(--fuente-texto); font-stretch: 100%;
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
background: var(--color-acento); color: var(--color-texto); padding: 4px 12px; border-radius: 999px;
}
.proximamente--grande { font-size: 0.9rem; padding: 6px 16px; margin-bottom: 18px; }
/* Bloque "Qué hacemos / precio" de las páginas de Google y WhatsApp */
.ficha-servicio { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 56px; align-items: start; }
.ficha-servicio .lista-check { font-size: 1.05rem; gap: 12px; }
.precio-caja {
position: sticky; top: 100px; display: grid; gap: 6px; justify-items: start;
background: var(--color-blanco); border: 2px solid var(--color-principal); border-radius: 24px; padding: 28px;
box-shadow: var(--sombra);
}
.precio-caja p { margin: 0; }
.precio-caja__nombre { font-family: var(--fuente-titulos); font-stretch: 125%; font-weight: 800; font-size: 1.2rem; }
.precio-caja__cifra { font-family: var(--fuente-titulos); font-stretch: 125%; font-weight: 850; font-size: 3.4rem; line-height: 1; margin-top: 8px !important; }
.precio-caja .plazo { margin: 8px 0 14px; }
.precio-caja__extra { font-size: 0.88rem; color: var(--color-texto-suave); margin-top: 14px !important; }
/* WhatsApp: el chat de ejemplo dentro del bloque explicativo */
.explica__visual .chat { position: static; width: 100%; max-width: 380px; }
.mensaje--catalogo b { display: block; color: #075E54; }
.explica__texto h3 { margin-top: 28px; }
/* NFC y diseño: "También diseñamos" */
.tambien { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tambien__item { background: var(--color-blanco); border-radius: 24px; padding: 26px; box-shadow: 0 10px 30px rgba(31, 42, 68, 0.08); }
.tambien__item h3 { margin: 0 0 8px; }
.tambien__item p { margin: 0; font-size: 0.95rem; color: var(--color-texto-suave); }
.tambien__item--mas { background: var(--color-principal-claro); box-shadow: none; }
.cartas--dos { grid-template-columns: 1fr 1fr; max-width: 900px; }
.autos--cuatro { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.auto__pie .proximamente { margin-left: auto; }
@media (max-width: 1080px) {
.autos--cuatro { grid-template-columns: 1fr 1fr; }
.tambien { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.seccion--primera { padding-top: 40px; }
.nosotros__fila--portada, .ficha-servicio { grid-template-columns: 1fr; }
.precio-caja { position: static; }
.hero--corta { padding: 40px 0 32px; }
}
@media (max-width: 640px) {
.tambien, .cartas--dos, .autos--cuatro { grid-template-columns: 1fr; }
}
/* Movimiento (2026-10-28): flechas de "Cómo trabajamos", pulsar, cambio de página y scroll */
/* Flechas de "Cómo trabajamos": en dos columnas no se ponen; en una columna, flecha hacia abajo entre tarjetas */
@media (max-width: 1080px) {
.proceso__pasos li:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
.proceso__pasos li:not(:last-child)::after {
display: flex; content: "↓"; top: auto; right: auto; bottom: -26px; left: 50%; transform: translateX(-50%);
}
}
/* Al pulsar: la tarjeta o el botón se hunde un poco y sale una onda */
.servicio, .boton, .plan, .tambien__item, .auto, .carta, .pack, .extra, .comparar button, .test__pregunta label {
position: relative;
transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s, color 0.2s, border-color 0.2s;
}
.onda-capa { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.servicio:active, .plan:active, .tambien__item:active, .auto:active, .carta:active { transform: scale(0.97); }
.boton:active, .comparar button:active, .test__pregunta label:active { transform: scale(0.95); }
.plan:hover, .tambien__item:hover, .auto:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(31, 42, 68, 0.12); }
.onda-pulsar {
position: absolute; border-radius: 50%; pointer-events: none;
background: currentColor; opacity: 0.22; transform: scale(0);
animation: onda-pulsar 0.6s ease-out forwards;
}
@keyframes onda-pulsar { to { transform: scale(1); opacity: 0; } }
/* Cambio de página: la página entra suave y sale suave al pulsar un enlace */
@keyframes pagina-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
main { animation: pagina-entra 0.5s ease both; }
body.saliendo main { transition: opacity 0.22s ease, transform 0.22s ease; opacity: 0; transform: translateY(-10px); }
/* Barra de progreso al hacer scroll */
.progreso-scroll {
position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40;
background: var(--color-principal); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}
.cabecera { transition: box-shadow 0.25s ease; }
.cabecera.con-sombra { box-shadow: 0 8px 24px rgba(31, 42, 68, 0.1); }
/* Al hacer scroll: los bloques aparecen subiendo, uno detrás de otro */
.con-revelado .revelar { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--retraso, 0s); }
.con-revelado .revelar--izquierda { transform: translateX(-36px); }
.con-revelado .revelar--derecha { transform: translateX(36px); }
.con-revelado .revelar--zoom { transform: scale(0.94); }
.con-revelado .revelar.visible { opacity: 1; transform: none; }
.mosaico .foto img { transition: transform 0.2s linear; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
main { animation: none; }
.con-revelado .revelar { opacity: 1; transform: none; transition: none; }
.progreso-scroll, .onda-pulsar { display: none; }
}
/* Qué hacemos (2026-10-28): cada tarjeta con su color; la web, en naranja, es la que más llama */
.servicio--estrella {
background: radial-gradient(circle at 85% 10%, rgba(242, 179, 47, 0.55), transparent 55%), var(--color-principal);
color: var(--color-texto); position: relative;
box-shadow: 0 22px 50px rgba(232, 115, 58, 0.38);
}
.servicio--estrella p { color: rgba(22, 38, 61, 0.85); }
.servicio--estrella .servicio__icono { background: var(--color-texto); color: var(--color-principal); }
.servicio--estrella .lista-check li::before { color: var(--color-texto); }
.servicio--estrella .servicio__precio { color: var(--color-texto); font-size: 1.9rem; }
.servicio--estrella .servicio__precio small { color: rgba(22, 38, 61, 0.75); }
.servicio--estrella:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(232, 115, 58, 0.45); }
.servicio__sello {
position: absolute; top: 22px; right: 22px; background: var(--color-texto); color: var(--color-fondo);
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
}
.servicio--google { background: #FDF1CF; }
.servicio--google .servicio__icono { background: var(--color-acento); color: var(--color-texto); }
.servicio--whatsapp { background: #DFF3E4; }
.servicio--whatsapp .servicio__icono { background: #1FA855; color: var(--color-blanco); }
.servicio--nfc { background: #E2EAF6; }
.servicio--nfc .servicio__icono { background: var(--color-azulejo); color: var(--color-blanco); }
.servicio--google p, .servicio--whatsapp p, .servicio--nfc p { color: var(--color-texto-suave); }
/* Página de packs */
.packs__otro { text-align: center; margin: 28px auto 0; max-width: 620px; color: var(--color-texto-suave); }
.packs__otro a { color: var(--color-azulejo); font-weight: 700; }
/* Webs (2026-10-28): las cartas de precios se abren al tocarlas, crecen y enseñan lo que incluyen */
.planes--abribles { align-items: start; }
.plan--abrible { cursor: pointer; transition: transform 0.18s ease, box-shadow 0.3s ease, border-color 0.3s; }
.plan__tipo { margin: 0 0 4px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-azulejo); }
.plan__precio--texto { font-size: 1.3rem; color: var(--color-texto-suave); }
.plan__ver {
margin-top: 14px; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--color-texto); cursor: pointer;
}
.plan__ver::after {
content: "+"; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: var(--color-principal); color: var(--color-texto); font-size: 1.2rem; transition: transform 0.35s ease;
}
.plan--abierto .plan__ver::after { transform: rotate(45deg); }
.plan--abierto { grid-column: 1 / -1; border-color: var(--color-principal); box-shadow: 0 24px 60px rgba(232, 115, 58, 0.22); cursor: default; }
.plan--abierto:hover { transform: none; }
.plan--abierto .plan__ver { cursor: pointer; }
.plan__detalle { animation: detalle-entra 0.5s 0.12s ease both; }
.plan__detalle ul { margin-bottom: 18px; }
@keyframes detalle-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.plan--latido { animation: plan-latido 0.45s ease; }
@keyframes plan-latido { 0% { transform: scale(1); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } }
::view-transition-group(*) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
/* Negocios online: opciones con precio, otros costes y cómo se paga */
.online__opciones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.online__opcion { position: relative; background: var(--color-fondo); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.online__opcion--estrella { background: var(--color-principal-claro); border: 2px solid var(--color-principal); }
.online__opcion h4 { margin: 0; font-family: var(--fuente-titulos); font-size: 1.1rem; line-height: 1.2; }
.online__opcion p { margin: 0; font-size: 0.9rem; color: var(--color-texto-suave); }
.online__opcion .online__precio { margin-top: auto; padding-top: 8px; font-family: var(--fuente-titulos); font-weight: 850; font-size: 1.35rem; color: var(--color-texto); }
.online__sello { align-self: flex-start; font-size: 0.75rem; font-weight: 700; background: var(--color-principal); color: var(--color-texto); padding: 3px 10px; border-radius: 999px; }
.online__info { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; }
.online__info h4 { margin: 0 0 6px; font-family: var(--fuente-titulos); font-size: 1.1rem; }
.online__info p { margin: 0; font-size: 0.92rem; color: var(--color-texto-suave); }
.plan .online__info ul { margin: 10px 0 0; }
@media (max-width: 900px) { .online__opciones { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .online__opciones, .online__info { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .plan__detalle, .plan--latido { animation: none; } }
/* Que los bloques que entran de lado no ensanchen la página en el móvil */
html, body { overflow-x: clip; }
/* Web Escaparate: lo que lleva cada sección */
.escaparate__secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 18px 0 0; }
.escaparate__secciones div { background: var(--color-fondo); border-radius: 16px; padding: 16px 18px; }
.escaparate__secciones dt { font-family: var(--fuente-titulos); font-weight: 800; font-size: 1.05rem; margin-bottom: 4px; }
.escaparate__secciones dd { margin: 0; font-size: 0.92rem; color: var(--color-texto-suave); }.plan__detalle > .plan__para { margin-top: 16px; }
/* Web Escaparate (v2): las secciones como un recorrido numerado, de arriba abajo, como se ve la web */
.escaparate__secciones { display: none; }
.escaparate__titulo { margin: 22px 0 6px; font-family: var(--fuente-titulos); font-weight: 800; font-size: 1.15rem; }
.plan .escaparate__recorrido {
counter-reset: paso; list-style: none; margin: 8px 0 0; padding: 0; border: 0;
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(4, auto); column-gap: 48px; row-gap: 0;
}
.escaparate__recorrido li {
counter-increment: paso; position: relative; padding: 0 0 20px 58px; min-height: 64px;
display: flex; flex-direction: column; gap: 2px;
}
.escaparate__recorrido li::before {
content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: 0;
width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: var(--color-texto); color: var(--color-principal); font-family: var(--fuente-titulos); font-weight: 850; font-size: 0.95rem;
box-shadow: 0 0 0 5px var(--color-principal-claro);
}
.escaparate__recorrido li::after {
content: ""; position: absolute; left: 19px; top: 46px; bottom: 4px; border-left: 2px dashed var(--color-principal);
}
.escaparate__recorrido li:nth-child(4)::after, .escaparate__recorrido li:last-child::after { display: none; }
.escaparate__recorrido b { font-family: var(--fuente-titulos); font-size: 1.1rem; line-height: 1.3; padding-top: 8px; }
.escaparate__recorrido span { font-size: 0.93rem; color: var(--color-texto-suave); }
.plan--abierto .escaparate__recorrido li { animation: detalle-entra 0.45s ease both; }
.plan--abierto .escaparate__recorrido li:nth-child(2) { animation-delay: 0.18s; }
.plan--abierto .escaparate__recorrido li:nth-child(3) { animation-delay: 0.24s; }
.plan--abierto .escaparate__recorrido li:nth-child(4) { animation-delay: 0.3s; }
.plan--abierto .escaparate__recorrido li:nth-child(5) { animation-delay: 0.36s; }
.plan--abierto .escaparate__recorrido li:nth-child(6) { animation-delay: 0.42s; }
.plan--abierto .escaparate__recorrido li:nth-child(7) { animation-delay: 0.48s; }
.plan .escaparate__recorrido + ul { margin-top: 8px; }
@media (max-width: 760px) {
.plan .escaparate__recorrido { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
.escaparate__recorrido li:nth-child(4)::after { display: block; }
}
@media (prefers-reduced-motion: reduce) { .plan--abierto .escaparate__recorrido li { animation: none; } }
/* Web Escaparate: lo que también incluye */
.plan .escaparate__extras { border: 0; padding: 0; margin: 10px 0 20px; gap: 8px; }
.escaparate__extras li { padding-left: 32px; }
.escaparate__extras li::before { color: var(--color-principal); }
/* Con la carta abierta, "Cerrar ×" va arriba a la derecha */
.plan--abierto .plan__ver { position: absolute; top: 24px; right: 24px; margin: 0; z-index: 2; }@media (max-width: 640px) {
.plan--abierto .plan__ver { top: 18px; right: 18px; }
.plan--abierto .plan__ver span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plan--abierto .plan__tipo, .plan--abierto h3 { padding-right: 42px; }
}
/* Web Escaparate: formas de pago, en una franja con separadores (sin cajas) */
.pagos {
display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px 0 0;
background: linear-gradient(90deg, var(--color-principal-claro), var(--color-acento-claro)); border-radius: 22px; overflow: hidden;
}
.pago { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; }
.pago + .pago { border-left: 2px dashed rgba(232, 115, 58, 0.45); }
.pago__nombre { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-azulejo); }
.pago__cifra { font-family: var(--fuente-titulos); font-weight: 850; font-size: 1.7rem; line-height: 1.15; color: var(--color-texto); }
.pago__cifra small { font-family: var(--fuente-texto); font-weight: 600; font-size: 0.85rem; }
.pago__nota { font-size: 0.9rem; color: var(--color-texto-suave); }
.pago--destacado { background: var(--color-texto); color: var(--color-fondo); }
.pago--destacado .pago__nombre { color: var(--color-acento); }
.pago--destacado .pago__cifra { color: var(--color-principal); }
.pago--destacado .pago__nota { color: rgba(245, 241, 232, 0.82); }
.pago__sello { position: absolute; top: 18px; right: 18px; background: var(--color-principal); color: var(--color-texto); font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pagos__iva { margin: 8px 0 18px; font-size: 0.82rem; color: var(--color-texto-suave); }
@media (max-width: 760px) {
.pagos { grid-template-columns: 1fr; }
.pago + .pago { border-left: 0; border-top: 2px dashed rgba(232, 115, 58, 0.45); }
}
/* Web hecha para ti: qué incluye la cuota (sí / no) */
.cuota { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 12px 0 18px; border-radius: 22px; overflow: hidden; }
.plan .cuota__lista { list-style: none; margin: 0; padding: 22px 24px; border: 0; display: grid; gap: 10px; align-content: start; }
.cuota__lista--si { background: #DFF3E4; }
.cuota__lista--no { background: var(--color-fondo); }
.cuota__lista li { position: relative; padding-left: 30px; font-size: 0.93rem; }
.cuota__lista li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.cuota__lista--si li::before { content: "✓"; color: #1FA855; }
.cuota__lista--no li::before { content: "✕"; color: var(--color-texto-suave); }
.cuota__lista li.cuota__cabeza { padding-left: 0; font-family: var(--fuente-titulos); font-weight: 800; font-size: 1rem; margin-bottom: 2px; }
.cuota__lista li.cuota__cabeza::before { content: none; }
.cuota__lista--no li:not(.cuota__cabeza) { color: var(--color-texto-suave); }
/* Formas de pago por pasos */
.pagos--fases .pago { gap: 6px; }
.plan .pago__pasos { list-style: none; margin: 10px 0 0; padding: 0; border: 0; display: grid; gap: 0; }
.pago__pasos li { position: relative; padding: 0 0 14px 22px; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; font-size: 0.88rem; }
.pago__pasos li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-principal); }
.pago__pasos li::after { content: ""; position: absolute; left: 6px; top: 18px; bottom: 2px; border-left: 2px dashed rgba(232, 115, 58, 0.55); }
.pago__pasos li:last-child { padding-bottom: 0; }
.pago__pasos li:last-child::after { display: none; }
.pago__pasos span { color: var(--color-texto-suave); }
.pago__pasos b { font-family: var(--fuente-titulos); font-weight: 800; white-space: nowrap; }
.pago__pasos small { grid-column: 1 / -1; font-size: 0.78rem; color: var(--color-texto-suave); }
.pago--destacado .pago__pasos span, .pago--destacado .pago__pasos small { color: rgba(245, 241, 232, 0.75); }
.pago--destacado .pago__pasos b { color: var(--color-fondo); }
.pago--destacado .pago__sello { position: static; align-self: flex-start; margin-bottom: 4px; }
@media (max-width: 760px) { .cuota { grid-template-columns: 1fr; } }
/* Aviso de permanencia del mantenimiento */
.pagos__permanencia {
margin: 12px 0 0; padding: 12px 16px 12px 44px; position: relative; border-radius: 14px;
background: var(--color-acento-claro); font-size: 0.9rem; color: var(--color-texto);
}
.pagos__permanencia::before { content: "ℹ"; position: absolute; left: 16px; top: 11px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-azulejo); color: var(--color-blanco); font-size: 0.8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.pagos__permanencia + .pagos__iva { margin-top: 8px; }
/* Formas de pago (v2): más llamativas */
.pagos {
background: linear-gradient(120deg, #FBD9C2 0%, #FDE9C4 100%);
border: 2px solid var(--color-principal); border-radius: 26px;
box-shadow: 0 18px 44px rgba(232, 115, 58, 0.22);
overflow: visible; margin-top: 14px;
}
.pago { padding: 26px 26px 24px; gap: 6px; transition: transform 0.25s ease, background 0.25s ease; }
.pago:first-child { border-radius: 24px 0 0 24px; }
.pago:last-child { border-radius: 0 24px 24px 0; }
.pago:not(.pago--destacado):hover { background: rgba(255, 255, 255, 0.45); }
.pago + .pago { border-left: 2px dashed rgba(232, 115, 58, 0.6); }
.pago__nombre { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--color-texto); }
.pago__nombre::before {
flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: var(--color-principal); color: var(--color-texto); font-family: var(--fuente-titulos); font-size: 1rem; font-weight: 850; letter-spacing: 0;
}
.pago:nth-child(1) .pago__nombre::before { content: "€"; }
.pago:nth-child(2) .pago__nombre::before { content: "÷"; font-size: 1.25rem; }
.pago:nth-child(3) .pago__nombre::before { content: "↻"; }
.pago__cifra { font-size: clamp(1.9rem, 3vw, 2.4rem); margin-top: 4px; }
.pago--destacado {
background: radial-gradient(circle at 90% 0%, rgba(232, 115, 58, 0.35), transparent 60%), var(--color-texto);
transform: scale(1.04); z-index: 1; border-radius: 22px !important;
box-shadow: 0 20px 44px rgba(22, 38, 61, 0.35), 0 0 0 3px var(--color-principal);
}
.pago--destacado .pago__nombre { color: var(--color-acento); }
.pago--destacado .pago__nombre::before { background: var(--color-acento); }
.pago--destacado .pago__cifra { font-size: clamp(2.1rem, 3.4vw, 2.7rem); }
.pago__sello { animation: sello-latido 2.4s ease-in-out infinite; }
@keyframes sello-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (max-width: 760px) {
.pago:first-child { border-radius: 24px 24px 0 0; }
.pago:last-child { border-radius: 0 0 24px 24px; }
.pago--destacado { transform: none; margin: 6px; }
}
@media (prefers-reduced-motion: reduce) { .pago__sello { animation: none; } }
/* Aviso de permanencia (v2): discreto y pequeño */
.pagos__permanencia {
background: none; padding: 0 0 0 20px; margin: 14px 0 0; border-radius: 0;
font-size: 0.78rem; line-height: 1.45; color: var(--color-texto-suave);
}
.pagos__permanencia b { font-weight: 600; }
.pagos__permanencia::before { left: 0; top: 2px; width: 14px; height: 14px; font-size: 0.6rem; background: var(--color-texto-suave); }
.pagos__permanencia + .pagos__iva { margin-top: 4px; }
/* Negocios online: formas de pago con ejemplo */
.online__info--uno { grid-template-columns: 1fr; }
.pagos__ejemplo { margin: 0 0 4px; font-size: 0.9rem; color: var(--color-texto-suave); }
.pago__nota--aviso { margin-top: 10px; font-size: 0.8rem; font-style: italic; }
/* Webs: "Qué incluye" más pequeño y "Elige la web que necesitas" más grande */
.seccion--incluye { padding-top: 56px; padding-bottom: 56px; }
.seccion--incluye h2 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
.seccion--incluye .seccion__intro { font-size: 0.95rem; }
.seccion--incluye .seccion__cabecera { margin-bottom: 22px; }
.seccion--incluye .webs__incluye { font-size: 0.92rem; gap: 8px 28px; margin-bottom: 0; }
#precios { padding-top: 100px; padding-bottom: 100px; background: radial-gradient(ellipse at 50% 0%, rgba(232, 115, 58, 0.14), transparent 65%), var(--color-fondo); }
#precios .seccion__cabecera h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
#precios .seccion__intro { font-size: 1.12rem; }
#precios .planes { gap: 24px; }
#precios .plan { padding: 38px 34px; box-shadow: 0 14px 36px rgba(31, 42, 68, 0.09); }
#precios .plan h3 { font-size: clamp(1.8rem, 2.6vw, 2.15rem); }
#precios .plan__precio { font-size: 2.5rem; }
#precios .plan__precio--texto { font-size: 1.45rem; }
#precios .plan__tipo { font-size: 0.85rem; }
#precios .plan__ver { margin-top: 20px; font-size: 1.05rem; }
#precios .plan__ver::after { width: 36px; height: 36px; font-size: 1.4rem; }
@media (max-width: 640px) {
#precios { padding-top: 72px; padding-bottom: 72px; }
#precios .plan { padding: 30px 24px; }
}
.servicio__plazos { display: block; margin-top: 4px; font-size: 0.82rem; font-weight: 600; }
/* Llamada final: franja de azulejos blancos en la parte de abajo del recuadro azul noche */
.cta-final { position: relative; overflow: hidden; padding-bottom: calc(clamp(36px, 6vw, 72px) + 96px); }
.cta-final > * { position: relative; z-index: 1; }
.cta-final::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none;
background: url("data:image/svg+xml;utf8,") left bottom / 64px 64px repeat-x;
background-repeat: repeat; opacity: 0.85;
-webkit-mask-image: linear-gradient(to top, #000 35%, transparent 100%); mask-image: linear-gradient(to top, #000 35%, transparent 100%);
}
@media (max-width: 640px) {
.cta-final { padding-bottom: calc(36px + 80px); }
.cta-final::after { height: 120px; background-size: 52px 52px; }
}
/* Llamada final (v2): una sola fila de azulejos blancos, sin degradado, como el zócalo del pie */
.cta-final { padding-bottom: calc(clamp(36px, 6vw, 72px) + 80px); }
.cta-final::after {
height: 56px; opacity: 1; background-size: 56px 56px; background-position: left center; background-repeat: repeat-x;
border-top: 3px solid var(--color-blanco);
-webkit-mask-image: none; mask-image: none;
}
@media (max-width: 640px) {
.cta-final { padding-bottom: calc(36px + 68px); }
.cta-final::after { height: 46px; background-size: 46px 46px; }
}
/* Packs (2026-10-29): más packs debajo del Pack Local */
.packs__cabecera { margin-top: 64px; }
.packs__lista { align-items: stretch; }
.pack-tarjeta { gap: 2px; }
.pack-tarjeta__ahorro { margin: 0 0 6px; text-decoration: line-through; color: var(--color-texto-suave); font-size: 0.92rem; }
.pack-tarjeta .plazo { margin-top: auto; }
.pack-tarjeta__boton { margin-top: 18px; align-self: stretch; text-align: center; justify-content: center; }
.pack-tarjeta.plan--destacado { box-shadow: 0 20px 48px rgba(232, 115, 58, 0.22); }
/* Test: tu pack al terminar */
.test__pack { margin: 14px 0; padding: 20px; border-radius: 20px; background: var(--color-principal-claro); border: 2px solid var(--color-principal); }
.test__pack-etiqueta { margin: 0 0 4px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-azulejo); }
.test__pack-nombre { margin: 0 0 6px; font-family: var(--fuente-titulos); font-weight: 850; font-size: 1.5rem; }
.test__pack ul { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.test__pack li { position: relative; padding-left: 26px; display: flex; justify-content: space-between; gap: 12px; font-size: 0.93rem; }
.test__pack li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--color-principal); }
.test__pack li b { white-space: nowrap; }
.test__pack-antes { margin: 6px 0 0; text-decoration: line-through; color: var(--color-texto-suave); font-size: 0.9rem; }
.test__pack-precio { margin: 2px 0 0; font-family: var(--fuente-titulos); font-weight: 850; font-size: 2rem; line-height: 1.1; }
.test__pack-precio small { font-family: var(--fuente-texto); font-weight: 600; font-size: 0.85rem; }
.test__pack-nota { margin: 4px 0 0; font-size: 0.85rem; color: var(--color-texto-suave); }
.test__consejo { font-size: 0.92rem; color: var(--color-texto-suave); }
/* Packs con dos tarjetas (2026-10-29) */
.packs__lista--dos { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
.packs--dos { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .packs__lista--dos, .packs--dos { grid-template-columns: 1fr; } }
/* Packs (v3, 2026-10-29): los tres juntos; el Pack Local en el centro y el más llamativo */
.packs__cabecera { margin-top: 0; text-align: center; margin-inline: auto; }
.packs__lista--tres { grid-template-columns: 1fr 1.12fr 1fr; align-items: center; gap: 22px; }
.pack-tarjeta { border-radius: 26px; }
.pack-tarjeta .plan__marca { left: 50%; transform: translateX(-50%); white-space: nowrap; }
/* Todo en uno: tono naranja suave */
.pack-tarjeta--todo { background: linear-gradient(160deg, #FFFFFF 0%, var(--color-principal-claro) 100%); border: 2px solid rgba(232, 115, 58, 0.55); box-shadow: 0 16px 38px rgba(232, 115, 58, 0.16); }
/* Imagen: tono oro suave */
.pack-tarjeta--imagen { background: linear-gradient(160deg, #FFFFFF 0%, #FDF1CF 100%); border: 2px solid rgba(242, 179, 47, 0.6); box-shadow: 0 16px 38px rgba(242, 179, 47, 0.18); }
/* Pack Local: azul azulejo con el dibujo, más grande y con brillo */
.pack-tarjeta--local {
background: var(--patron-cal-suave) center / 72px 72px, var(--color-azulejo);
color: var(--color-fondo); border: 3px solid var(--color-principal);
padding: 46px 36px 40px; z-index: 1;
box-shadow: 0 28px 60px rgba(42, 91, 166, 0.38), 0 0 0 6px rgba(232, 115, 58, 0.18);
}
.pack-tarjeta--local .plan__marca { font-size: 0.9rem; padding: 5px 16px; top: -16px; }
.pack-tarjeta--local h3 { font-size: clamp(2rem, 3vw, 2.5rem); color: var(--color-blanco); }
.pack-tarjeta--local .plan__tipo { color: var(--color-acento); }
.pack-tarjeta--local .plan__precio { color: var(--color-blanco); font-size: clamp(2.6rem, 4vw, 3.2rem); }
.pack-tarjeta--local .plan__precio small { color: rgba(245, 241, 232, 0.85); }
.pack-tarjeta--local .pack-tarjeta__ahorro { color: rgba(245, 241, 232, 0.75); }
.pack-tarjeta--local .plan__para { color: rgba(245, 241, 232, 0.9); }
.pack-tarjeta--local ul { border-top-color: rgba(245, 241, 232, 0.25); }
.pack-tarjeta--local li::marker { color: var(--color-acento); }
.pack-tarjeta--local .plazo { color: var(--color-fondo); }
.pack-tarjeta--local:hover { box-shadow: 0 32px 70px rgba(42, 91, 166, 0.45), 0 0 0 6px rgba(232, 115, 58, 0.25); }
@media (max-width: 900px) {
.packs__lista--tres { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
.pack-tarjeta--local { order: -1; }
}
/* Packs que se abren al tocarlos (2026-10-29): crecen en su sitio y enseñan lo que incluyen y el pago en 3 meses */
.packs__lista--tres { align-items: start; }
.pack-tarjeta.plan--abierto { grid-column: auto; transform: scale(1.03); z-index: 2; }
.pack-tarjeta .plan__ver { margin: 10px 0 4px; }
/* En los packs, "Cerrar ×" se queda donde estaba "Ver qué incluye" (arriba a la derecha tapaba el título) */
.pack-tarjeta.plan--abierto .plan__ver { position: static; }
.pack-tarjeta.plan--abierto .plan__ver span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.pack-tarjeta.plan--abierto .plan__tipo, .pack-tarjeta.plan--abierto h3 { padding-right: 0; }
.pack-tarjeta--local .plan__ver { color: var(--color-blanco); }
.pack-tarjeta__fraccionar {
margin: 16px 0 0; padding: 12px 14px; border-radius: 14px;
background: var(--color-acento-claro); border: 2px dashed var(--color-acento);
font-size: 0.9rem; line-height: 1.4; color: var(--color-texto);
}
.pack-tarjeta__fraccionar b { display: block; font-family: var(--fuente-titulos); font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .pack-tarjeta.plan--abierto { transform: none; } }
/* NFC y diseño (2026-10-30): recuadro con la foto de la tarjeta saliendo un poco y su precio */
.seccion--oferta-nfc { padding-top: clamp(72px, 9vw, 120px); }
.oferta-nfc {
display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: clamp(24px, 4vw, 56px);
max-width: 920px; margin-inline: auto; padding: 0 clamp(28px, 4vw, 52px);
border-radius: 28px; background: var(--patron-cal-suave) center / 72px 72px, var(--color-azulejo);
color: var(--color-fondo); border: 3px solid var(--color-principal);
box-shadow: 0 28px 60px rgba(42, 91, 166, 0.3);
}
.oferta-nfc__foto { align-self: stretch; position: relative; min-height: 300px; }
.oferta-nfc__foto img {
position: absolute; left: 50%; top: -48px; width: min(118%, 420px); height: auto;
transform: translateX(-50%) translateY(var(--nfc-mover, 0px)) rotate(var(--nfc-girar, -8deg)); border-radius: 18px;
filter: drop-shadow(0 24px 30px rgba(22, 38, 61, 0.45));
transition: transform 0.25s ease-out, filter 0.25s ease; will-change: transform;
}
/* Como los demás cuadrantes: sube al pasar el ratón y se hunde al pulsar; la tarjeta se levanta un poco más */
.oferta-nfc { position: relative; transition: transform 0.18s ease, box-shadow 0.2s ease; }
.oferta-nfc:hover { transform: translateY(-4px); box-shadow: 0 34px 70px rgba(42, 91, 166, 0.38); }
.oferta-nfc:active { transform: scale(0.98); }
.oferta-nfc:hover .oferta-nfc__foto img { translate: 0 -10px; filter: drop-shadow(0 32px 36px rgba(22, 38, 61, 0.5)); }
.oferta-nfc .onda-pulsar { background: var(--color-fondo); }
@media (prefers-reduced-motion: reduce) {
.oferta-nfc__foto img { transform: translateX(-50%) rotate(-8deg); transition: none; }
}
.oferta-nfc__texto { padding: clamp(32px, 4vw, 48px) 0; }
.oferta-nfc .etiqueta { color: var(--color-acento); }
.oferta-nfc__precio { margin: 4px 0 0; font-family: var(--fuente-titulos); font-weight: 900; font-size: clamp(3.4rem, 7vw, 5rem); line-height: 1; color: var(--color-blanco); }
.oferta-nfc__plazo { margin: 6px 0 22px; color: rgba(245, 241, 232, 0.85); }
.oferta-nfc__personalizada {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
margin: 0 0 24px; padding: 16px 18px; border-radius: 16px;
background: rgba(255, 255, 255, 0.12); border: 2px dashed var(--color-acento);
}
.oferta-nfc__personalizada p { margin: 0; line-height: 1.4; }
.oferta-nfc__personalizada b { display: block; font-family: var(--fuente-titulos); font-size: 1.1rem; color: var(--color-blanco); }
.oferta-nfc__precio-personalizada { font-family: var(--fuente-titulos); font-weight: 900; font-size: 2rem; white-space: nowrap; color: var(--color-acento); }
@media (max-width: 760px) {
.oferta-nfc { grid-template-columns: 1fr; text-align: center; }
.oferta-nfc__foto { min-height: 0; height: 170px; }
.oferta-nfc__foto img { width: min(80%, 300px); top: -56px; transform: translateX(-50%) translateY(calc(var(--nfc-mover, 0px) * 0.4)) rotate(var(--nfc-girar, -8deg)); }
.oferta-nfc__texto { padding-top: 8px; }
.oferta-nfc__personalizada { text-align: left; }
}
/* Llamada final y pie en el móvil (2026-11-02): el recuadro ya no se sale por la derecha
(las columnas de la rejilla no encogían por debajo del ancho del titular) */
.cta-final > * { min-width: 0; }
/* Las palabras animadas son : que no hereden el estilo de "Hazte visible." (naranja y en bloque) */
.cta-final h2 .palabra { display: inline-block; color: inherit; }
.cta-final .boton { white-space: normal; text-align: center; }
@media (max-width: 640px) {
.cta-final { border-radius: 28px; padding: 32px 22px calc(32px + 64px); gap: 26px; }
.cta-final h2 { font-size: clamp(1.6rem, 8.4vw, 2.6rem); }
.cta-final p { font-size: 1.02rem; }
.cta-final .boton { display: flex; width: 100%; }
.contacto__lista { font-size: 1rem; gap: 8px; }
.pie { padding: 28px 0 104px; }
.pie__fila { flex-direction: column; text-align: center; gap: 14px; }
.pie__legal { justify-content: center; }
.whatsapp-flotante { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}
/* Movimiento (2026-11-02) */
/* Titulares: las palabras suben una detrás de otra al aparecer el bloque */
.palabra { display: inline-block; }
.con-revelado .revelar .palabra { opacity: 0; transform: translateY(0.45em) rotate(2deg); filter: blur(4px); }
.con-revelado .revelar.visible .palabra {
opacity: 1; transform: none; filter: none;
transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s ease;
transition-delay: calc(var(--retraso, 0s) + 0.12s + var(--p, 0) * 55ms);
}
/* Llamada final: un brillo naranja que se pasea por el fondo y los azulejos que corren despacio */
.cta-final::before {
content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; pointer-events: none;
top: -180px; right: -160px;
background: radial-gradient(circle, rgba(232, 115, 58, 0.38), rgba(232, 115, 58, 0) 65%);
animation: brillo-pasea 14s ease-in-out infinite alternate;
}
.cta-final::after { animation: azulejos-corren 60s linear infinite; }
.zocalo { animation: azulejos-corren 80s linear infinite reverse; }
@keyframes brillo-pasea {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-40vw, 120px) scale(1.25); }
100% { transform: translate(-12vw, 260px) scale(0.9); }
}
/* 1288 px es múltiplo de los dos tamaños de azulejo (56 y 46 px), así la vuelta no da salto */
@keyframes azulejos-corren { to { background-position-x: 1288px; } }
/* Botón flotante de WhatsApp: un aro que late cada pocos segundos */
.whatsapp-flotante::before {
content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-verde);
animation: aro-whatsapp 3.2s ease-out infinite; pointer-events: none;
}
@keyframes aro-whatsapp { 0%, 55% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }
/* Tarjetas de servicios en ordenador: se inclinan un poco siguiendo el ratón */
@media (hover: hover) and (pointer: fine) {
.servicio.inclinar { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); transition: transform 0.12s ease-out, box-shadow 0.2s ease; }
.servicio.inclinar::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.28), transparent 55%);
}
}
/* Demos: webs de ejemplo dentro de un móvil que se recorre solo */
.demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 24px; }
.demo {
position: relative; display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center;
background: var(--color-fondo); border-radius: 28px; padding: 28px; overflow: hidden;
border: 2px solid var(--color-suave); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
}
.demo:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--color-principal); }
.demo__movil {
position: relative; aspect-ratio: 9 / 18.5; border-radius: 30px; padding: 8px;
background: var(--color-texto); box-shadow: 0 24px 40px rgba(22, 38, 61, 0.28);
transform: rotate(-4deg); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.demo:hover .demo__movil { transform: rotate(0deg) scale(1.03); }
.demo__movil::before { content: ""; position: absolute; top: 14px; left: 50%; width: 54px; height: 6px; margin-left: -27px; border-radius: 6px; background: rgba(255, 255, 255, 0.25); z-index: 2; }
.demo__pantalla { position: relative; height: 100%; border-radius: 23px; overflow: hidden; background: linear-gradient(160deg, var(--color-principal), var(--color-texto)); }
.demo__pantalla img { width: 100%; height: auto; display: block; animation: demo-recorre 34s ease-in-out infinite; }
.demo:nth-child(even) .demo__movil { transform: rotate(4deg); }
.demo:nth-child(even):hover .demo__movil { transform: rotate(0deg) scale(1.03); }
.demo:hover .demo__pantalla img { animation-play-state: paused; }
@keyframes demo-recorre { 0%, 8% { transform: translateY(0); } 46%, 54% { transform: translateY(calc(-100% + var(--alto-pantalla, 380px))); } 92%, 100% { transform: translateY(0); } }
.demo__tipo { margin: 0 0 6px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-azulejo); }
.demo h3 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin-bottom: 10px; }
.demo__texto p { color: var(--color-texto-suave); }
.demo__chips { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.demo__chips li { font-size: 0.8rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--color-blanco); border: 1px solid var(--color-suave); }
.demo__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.demos__nota { margin-top: 20px; font-size: 0.9rem; color: var(--color-texto-suave); }
@media (max-width: 640px) {
.demo { grid-template-columns: 1fr; padding: 24px 20px; text-align: center; }
.demo__movil { width: 190px; margin: 0 auto 4px; }
.demo__chips, .demo__botones { justify-content: center; }
.demo__botones .boton { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
.con-revelado .revelar .palabra { opacity: 1; transform: none; filter: none; }
.demo__movil, .demo:nth-child(even) .demo__movil { transform: none; }
}
.demos__oferta { margin-top: 48px; padding: 36px 28px; text-align: center; background: var(--crema, #F5F1E8); border-radius: 20px; }
.demos__oferta h2 { margin: 0 0 10px; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.demos__oferta p { margin: 0 auto 22px; max-width: 520px; }
.extras--una { grid-template-columns: 1fr; }
/* Cuestionario "Tu web, pieza a pieza": botones tipo chip */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip > span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 14px; background: var(--color-fondo); border: 1.5px solid var(--color-suave); border-radius: 14px; transition: border-color .15s, background .15s; }
.chip b { font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.chip small { font-size: 0.74rem; color: var(--color-texto-suave); line-height: 1.25; max-width: 24ch; }
.chip em { font-style: normal; font-family: var(--fuente-titulos); font-weight: 700; font-size: 0.78rem; color: var(--color-azulejo); }
.chip:hover > span { border-color: var(--color-texto); }
.chip:has(input:checked) > span { background: var(--color-principal-claro); border-color: var(--color-texto); box-shadow: 0 0 0 1px var(--color-texto); }
.chip:has(input:focus-visible) > span { outline: 3px solid var(--color-acento); outline-offset: 2px; }
.calc__ayuda { font-family: var(--fuente-texto); font-weight: 400; font-size: 0.82rem; color: var(--color-texto-suave); }
p.calc__ayuda { margin: -6px 0 14px; }
.extras__enlace { margin: 0; padding: 10px 16px 12px; font-size: 0.82rem; color: var(--color-texto-suave); border-top: 1px solid var(--color-suave); }
.extras__enlace a { font-weight: 600; color: var(--color-texto); }
/* Automatizaciones: packs */
.autos-packs { align-items: stretch; }
.autos-pack h3 { margin-bottom: 10px; }
.autos-pack__suelto { margin: 0; font-size: 0.92rem; color: var(--color-texto-suave); }
.autos-pack__suelto s { text-decoration-thickness: 2px; text-decoration-color: var(--color-principal); }
.autos-pack .plan__precio { margin: 2px 0 2px; }
.autos-pack__ahorro { display: inline-block; align-self: flex-start; margin: 4px 0 0; padding: 3px 12px; border-radius: 999px; background: var(--color-acento); font-size: 0.85rem; font-weight: 700; }
.autos-pack .lista-check { margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--color-suave); }
.autos-pack__datos { display: grid; gap: 6px; margin: 0 0 18px; font-size: 0.92rem; }
.autos-pack__datos div { display: flex; justify-content: space-between; gap: 10px; }
.autos-pack__datos dt { color: var(--color-texto-suave); }
.autos-pack__datos dd { margin: 0; font-weight: 700; }
.autos-pack__datos s { font-weight: 400; color: var(--color-texto-suave); margin-right: 4px; }
.autos-pack__boton { margin-top: auto; justify-content: center; }
.autos-packs__nota { margin: 20px 0 0; font-size: 0.88rem; color: var(--color-texto-suave); text-align: center; }
@media (max-width: 900px) { .autos-packs { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
/* Automatizaciones (apps.html) */
#autos-form .chip small { max-width: 30ch; }
p.autos__nota { margin: 24px 0 0; }
/* Al tocar un servicio, la tarjeta ocupa toda la fila y muestra cómo funciona */
.chip__mas { display: none; }
#autos-form .chip.abierta { flex-basis: 100%; }
#autos-form .chip.abierta small { max-width: none; }
#autos-form .chip.abierta > span { padding: 18px 20px; }
#autos-form .chip.abierta b { font-size: 1.15rem; }
#autos-form .chip.abierta em { font-size: 0.9rem; }
#autos-form .chip.abierta .chip__mas {
display: grid; grid-template-columns: 1fr 230px; gap: 24px; align-items: center;
margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--color-suave);
font-size: 0.95rem; line-height: 1.5; color: var(--color-texto);
animation: entrar 0.3s ease both;
}
.chip__texto { display: flex; flex-direction: column; gap: 10px; }
.chip__ideal { font-size: 0.86rem; color: var(--color-texto-suave); }
.chip__ideal b { color: var(--color-texto); font-weight: 600; }
#autos-form .chip.abierta .chip__ideal b { font-size: inherit; }
.chip__video { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.demo-tel__etiqueta { font-size: 0.74rem; font-weight: 600; color: var(--color-texto-suave); }
/* Mini vídeo: móvil con la conversación */
.demo-tel {
display: flex; flex-direction: column; width: 230px; height: 360px;
background: var(--color-texto); border-radius: 30px; padding: 8px;
box-shadow: 0 14px 30px rgba(31, 42, 68, 0.22);
}
/* Cada pantalla del mini vídeo (WhatsApp, Google, web, documento o llamada); solo se ve la activa */
.demo-tel__pantalla { display: none; flex: 1; flex-direction: column; min-height: 0; border-radius: 22px; overflow: hidden; }
.demo-tel__pantalla.activa { display: flex; animation: entrar 0.3s ease both; }
.demo-tel__cabecera {
display: block; flex-shrink: 0; padding: 10px 14px;
background: #075e54; color: #fff; font-size: 0.8rem; font-weight: 700;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-tel__chat {
flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
padding: 10px; overflow: hidden; background: #ece5dd;
}
.demo-tel__pantalla--google .demo-tel__cabecera { background: #fff; color: #1a73e8; border-bottom: 1px solid #e3e3e3; }
.demo-tel__pantalla--google .demo-tel__chat { background: #f1f3f4; justify-content: flex-start; }
.demo-tel__pantalla--web .demo-tel__cabecera { background: #f1f3f4; color: #5f6368; font-weight: 500; font-size: 0.72rem; }
.demo-tel__pantalla--web .demo-tel__chat { background: #fff; justify-content: flex-start; }
.demo-tel__pantalla--doc .demo-tel__cabecera { background: var(--color-principal); color: var(--color-texto); }
.demo-tel__pantalla--doc .demo-tel__chat { background: #f6f6f6; justify-content: flex-start; }
.demo-tel__pantalla--llamada .demo-tel__cabecera { background: #0f1729; color: #8fe3a9; text-align: center; }
.demo-tel__pantalla--llamada .demo-tel__chat { background: linear-gradient(180deg, #1f2a44, #0f1729); }
.demo-tel__pantalla--llamada .burbuja--n { background: rgba(143, 227, 169, 0.18); color: #e9fbef; }
.demo-tel__pantalla--llamada .burbuja--c { background: rgba(255, 255, 255, 0.12); color: #fff; }
.demo-tel__pantalla--llamada .burbuja--s { background: transparent; color: #8fe3a9; box-shadow: none; }
.burbuja--t {
align-self: stretch; max-width: none; display: none; flex-direction: column; gap: 3px;
background: #fff; border-radius: 12px; padding: 10px 12px; border: 1px solid #e3e3e3;
}
.burbuja--t.ver { display: flex; }
.burbuja__titulo, .burbuja__linea { display: block; }
.burbuja__titulo { font-weight: 700; font-size: 0.78rem; }
.burbuja__linea { font-size: 0.72rem; color: #4a5568; }
.burbuja__linea:last-child { font-weight: 600; color: #1f2a44; }
.burbuja {
display: none; max-width: 85%; padding: 6px 10px; border-radius: 10px;
font-size: 0.74rem; line-height: 1.35; color: #1f2a44; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.burbuja.ver { display: block; animation: burbuja 0.35s ease both; }
.burbuja--n { align-self: flex-end; background: #dcf8c6; border-bottom-right-radius: 3px; }
.burbuja--c { align-self: flex-start; background: #fff; border-bottom-left-radius: 3px; }
.burbuja--s { align-self: center; max-width: 95%; background: #fdf4c5; font-size: 0.68rem; font-weight: 600; text-align: center; border-radius: 8px; }
@keyframes burbuja { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
#autos-form .chip.abierta .chip__mas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
#autos-form .chip.abierta .chip__mas, .burbuja.ver { animation: none; }
}
#autos-form .resumen__total + .resumen__total { border-top: none; padding-top: 0; }
/* Configurador: packs como punto de partida, en cuadrícula */
.chips.monta-packs { display: grid; grid-template-columns: repeat(2, 1fr); }
.monta-packs .chip small { max-width: none; }
/* Configurador: apartados plegables */
.plegable { border: 1.5px solid var(--color-suave); border-radius: 14px; background: var(--color-fondo); margin-top: 10px; }
.plegable > summary {
list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
padding: 14px 16px; font-weight: 600;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::after { content: "+"; margin-left: auto; font-family: var(--fuente-titulos); font-size: 1.4rem; line-height: 1; color: var(--color-azulejo); transition: transform 0.2s; }
.plegable[open] > summary::after { transform: rotate(45deg); }
.plegable > summary small { font-size: 0.78rem; font-weight: 600; color: var(--color-texto); background: var(--color-acento); border-radius: 999px; padding: 2px 10px; }
.plegable > summary small:empty { display: none; }
.plegable > summary:focus-visible { outline: 3px solid var(--color-acento); outline-offset: 2px; border-radius: 14px; }
.plegable[open] { padding-bottom: 14px; }
.plegable > .chips, .plegable > p, .plegable > .extra { margin-left: 14px; margin-right: 14px; }
.plegable .extra { border-radius: 12px; border: 1px solid var(--color-suave); background: var(--color-blanco); }
.plegable .extra + .extra { margin-top: 8px; }
/* Configurador: barra con el total en móvil */
.monta-barra {
position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 25;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: var(--color-texto); color: var(--color-blanco);
border-radius: 18px; padding: 10px 10px 10px 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.monta-barra[hidden] { display: none; }
.monta-barra small { display: block; font-size: 0.72rem; opacity: 0.8; }
.monta-barra strong { font-family: var(--fuente-titulos); font-size: 1.4rem; color: var(--color-acento); }
.monta-barra-visible .whatsapp-flotante { display: none; }
.chip--fijo { cursor: default; }
.chip--fijo > span { background: var(--color-principal-claro); border-color: var(--color-texto); box-shadow: 0 0 0 1px var(--color-texto); }
.chip--fijo:hover > span { border-color: var(--color-texto); }
.monta-paginas { margin-top: 14px; background: var(--color-fondo); border: 1.5px solid var(--color-suave); border-radius: 14px; }
.monta-paginas[hidden] { display: none; }
.chip:has(input:disabled) { cursor: default; }
.chip:has(input:disabled:checked) > span { opacity: 0.75; border-style: dashed; }
.chip:has(input:disabled:checked) em { text-decoration: line-through; }