/* ========================================================================== CHECADOR DE ASISTENCIA — Hoja principal -------------------------------------------------------------------------- Orden del archivo: 1. Tokens (variables — la única fuente de verdad) 2. Reset 3. Base tipográfica 4. Layout / contenedores 5. Componentes reutilizables 5B. Secciones del home 6. Placeholders de assets pendientes 7. Accesibilidad y utilidades Los valores marcados con [MB-03] / [MB-04] son ESTIMADOS de los layouts. Cuando llegue la marca definitiva se cambian AQUÍ y solo aquí. ========================================================================== */ /* ========================================================================== 1. TOKENS ========================================================================== */ :root { /* --- Color: azul de marca [MB-03 · CONFIRMADO en el manual de identidad] -- Escala derivada de #03475E mezclando con blanco y negro. El 600 es el color oficial; el resto son tintes para fondos, bordes y estados. */ --c-primary-50: #F0F4F5; --c-primary-100: #DEE7EA; --c-primary-200: #BDCFD5; --c-primary-300: #90AEB8; --c-primary-400: #598695; --c-primary-500: #2B6478; --c-primary-600: #03475E; /* Oficial. Botones, enlaces y títulos sobre claro */ --c-primary-700: #033D51; /* Hover del botón primario */ --c-primary-800: #023242; --c-primary-900: #022633; /* --- Color: verde de acento [MB-03 · CONFIRMADO] ---------------------- OJO con dónde se usa. El verde de marca (400) sobre blanco da 2.1:1 y no sirve para texto; sobre el azul da 4.8:1 y sí. Por eso: · Verde → acentos, íconos y botones SOBRE FONDO OSCURO. · Azul → texto, enlaces y botones SOBRE FONDO CLARO. El 600 es el verde oscurecido para las palomitas sobre blanco, que como elemento no textual necesita 3:1 y llega a 3.95:1. */ --c-accent-100: #E4F7F0; --c-accent-300: #92DDC2; --c-accent-400: #4AC79A; /* Oficial. Solo sobre fondo oscuro */ --c-accent-500: #40AB84; --c-accent-600: #358F6F; /* Palomitas e íconos sobre fondo claro */ --c-accent-700: #2B7359; /* --- Color: azules oscuros (header, banda de Seguridad, footer) -------- Son sombras del mismo azul de marca, no un color aparte. */ --c-navy-700: #033D51; --c-navy-800: #023242; --c-navy-900: #022633; /* Fondo de header, footer y bandas oscuras */ --c-navy-950: #011B24; /* --- Color: neutros ---------------------------------------------------- La marca solo define el azul y el verde; los grises los pone el sistema. El cliente pidió mantener la tonalidad gris/negro en tipografías, así que esta escala no cambió de familia — solo se oscurecieron dos tonos por el degradado de página (ver la nota de abajo). */ --c-ink: #0F172A; /* Titulares */ --c-body: #475569; /* Texto corrido */ /* Estos dos subieron de tono por el degradado de página. El lavado verde llega al 20% abajo, y con el tinte de sección encima el fondo más claro posible de la página es #CFEAE3. Sobre él, el #64748B anterior caía a 3.8:1 y el #94A3B8 a 2.0:1 — este último ya venía fallando desde antes, incluso sobre blanco puro (2.6:1). */ --c-muted: #556376; /* Texto secundario, pies de tarjeta */ --c-faint: #51607A; /* Labels, metadatos, fechas */ --c-line: #E2E8F0; /* Bordes de tarjeta y separadores */ --c-line-soft: #F1F5F9; /* Separadores muy sutiles */ --c-surface: #FFFFFF; /* Fondo de tarjeta */ --c-canvas: #F7FAFA; /* Fondo de sección alterna */ --c-canvas-alt: #EAF1F3; /* Banda "Diferentes formas de checar" */ /* --- Color: semánticos -------------------------------------------------- */ --c-success: #358F6F; /* = accent-600. Palomitas sobre fondo claro */ --c-success-bg: #E4F7F0; --c-warning: #D97706; --c-danger: #DC2626; --c-whatsapp: #25D366; /* --- Color: dataviz (dona, gauge y barras de los mockups) -------------- */ --c-data-1: #03475E; /* Presentes */ --c-data-2: #F59E0B; /* Retardos */ --c-data-3: #EF4444; /* Ausencias */ --c-data-4: #8B5CF6; /* Faltas */ --c-data-5: #4AC79A; /* Positivo / tendencia al alza */ /* --- Tipografía [MB-04 · PENDIENTE DE CONFIRMAR] ----------------------- */ /* Los layouts usan una grotesca geométrica tipo Inter. Se mantiene Inter como stand-in hasta que llegue la tipografía de marca. Al cambiarla, revisar la escala: una tipografía más estrecha permitirá subir tamaños. */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Escala tipográfica — móvil primero, se reajusta en el breakpoint lg */ --fs-display: 2rem; /* 32px — H1 del hero */ --fs-h2: 1.5rem; /* 24px — Títulos de sección */ --fs-h3: 1.125rem; /* 18px — Títulos de tarjeta */ --fs-h4: 1rem; /* 16px — Subtítulos dentro de tarjeta */ --fs-body: 1rem; /* 16px — Texto corrido */ --fs-sm: 0.875rem; /* 14px — Texto secundario, listas */ --fs-xs: 0.8125rem; /* 13px — Badges, pies, metadatos */ --fs-2xs: 0.75rem; /* 12px — Etiquetas de gráfica */ --lh-tight: 1.15; /* Titulares grandes */ --lh-snug: 1.3; /* Titulares de tarjeta */ --lh-normal: 1.5; /* Texto de interfaz */ --lh-relaxed: 1.65; /* Texto corrido largo */ --ls-tight: -0.02em; /* Titulares — la grotesca pide tracking negativo */ --ls-normal: 0; /* --- Espaciado (base 4px) ---------------------------------------------- */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ --sp-24: 6rem; /* 96px */ /* Respiro vertical entre secciones */ --section-y: var(--sp-12); --section-y-lg: var(--sp-20); /* --- Layout ------------------------------------------------------------ */ --container: 1280px; /* El SPEC decía 1200; se subió tras ver la maqueta a 1920 */ --container-narrow: 760px; /* Texto corrido de artículos */ --gutter: var(--sp-5); --header-h: 72px; /* --- Bordes y radios ---------------------------------------------------- */ --radius-sm: 6px; /* Chips, badges cuadrados */ --radius-md: 8px; /* Botones, inputs */ --radius-lg: 12px; /* Tarjetas */ --radius-xl: 16px; /* Paneles grandes */ --radius-full: 999px; /* Pills, avatares */ --border: 1px solid var(--c-line); --border-soft: 1px solid var(--c-line-soft); /* --- Tamaños de ícono ---------------------------------------------------- */ /* Los íconos aparecen en seis secciones con cuatro tamaños. Con token, el trazo se ajusta en un solo lugar. */ --icon-xs: 14px; /* Badge del hero */ --icon-sm: 16px; /* Microbeneficios, metadatos */ --icon-md: 18px; /* Botones, palomitas de checklist */ --icon-lg: 24px; /* Beneficios, seguridad, footer */ /* --- Sombras (discretas: los layouts casi no usan elevación) ---------- */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10); /* --- Transiciones ------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 120ms var(--ease); --t-base: 200ms var(--ease); /* --- Capas -------------------------------------------------------------- */ --z-dropdown: 100; --z-header: 200; --z-drawer: 300; --z-modal: 400; } /* Escala tipográfica en desktop */ @media (min-width: 1024px) { :root { --fs-display: 3.25rem; /* 52px */ --fs-h2: 2rem; /* 32px */ --fs-h3: 1.1875rem; /* 19px */ --section-y: var(--section-y-lg); --gutter: var(--sp-6); } } /* ========================================================================== 2. RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Degradado de página. Un lavado de verde que crece conforme se baja: imperceptible arriba, presente al llegar al cotizador y al footer. Va en el , que envuelve todo el documento, así que cubre la altura real de la página sin importar cuánto crezca. Las paradas son bajas a propósito. El verde de marca a más del 12% sobre blanco empieza a ensuciar los grises del texto y a pelearse con las fotos; el efecto de "subir de intensidad" lo cargan las bandas oscuras del final —seguridad, cotizador, CTA y footer—, que ya existen. El degradado solo las anuncia. Para que se vea, las secciones claras dejaron de tener fondo opaco: sus tintes ahora son translúcidos (ver .section--canvas y .section--tint). */ body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--c-body); background: linear-gradient( 180deg, rgba(74, 199, 154, 0) 0%, rgba(74, 199, 154, 0.03) 30%, rgba(74, 199, 154, 0.07) 60%, rgba(74, 199, 154, 0.13) 85%, rgba(74, 199, 154, 0.20) 100% ), var(--c-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } /* solo envuelve la WebP: que no altere el layout del . */ picture { display: contents; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } table { border-collapse: collapse; width: 100%; } /* ========================================================================== 3. BASE TIPOGRÁFICA ========================================================================== */ h1, h2, h3, h4 { color: var(--c-ink); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); text-wrap: balance; } h1 { font-size: var(--fs-display); line-height: var(--lh-tight); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); } h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); } p { text-wrap: pretty; } /* Los layouts colorean parte del titular en azul. Viene del diseño entregado, no es decoración libre. */ /* Sep 2026 · Merca pidió el verde menta exacto de marca en los acentos y en los detalles chicos (palomitas, íconos pequeños). Sobre blanco da ~2:1 de contraste: se usa solo en títulos grandes y adornos, nunca en texto de lectura, enlaces ni botones. */ .u-accent { color: var(--c-accent-400); } .u-lead { font-size: var(--fs-body); color: var(--c-body); max-width: 46ch; } /* ========================================================================== 4. LAYOUT ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section-y); } /* Translúcidos, no opacos: si fueran sólidos taparían el degradado del body y la página volvería a verse por franjas. El azul al 3-5% sigue separando una sección de la siguiente. */ .section--canvas { background: rgba(3, 71, 94, 0.030); } .section--tint { background: rgba(3, 71, 94, 0.055); } .section--navy { background: var(--c-navy-900); color: #CBD5E1; } .section--navy h2, .section--navy h3, .section--navy h4 { color: #FFFFFF; } /* Sobre fondo oscuro manda el verde de marca; sobre claro manda el azul. No es decoración, es contraste: el azul --c-primary-600 sobre el azul oscuro da 1.6:1 —ilegible— y el verde --c-accent-400 da 6.5:1. Es además lo que pide la identidad: "verde claro en acentos". */ .section--navy .link-arrow, .section--navy .icon-check, .section--navy .u-accent { color: var(--c-accent-400); } /* Botón primario sobre fondo oscuro. El azul de marca sobre la banda oscura da 1.6:1 y el botón desaparece; en verde con texto azul oscuro da 7.8:1. */ .section--navy .btn--primary, .site-header .btn--primary, .s-cta .btn--primary { background: var(--c-accent-400); color: var(--c-navy-900); } .section--navy .btn--primary:hover, .site-header .btn--primary:hover, .s-cta .btn--primary:hover { background: var(--c-accent-300); } /* Encabezado de sección centrado, como en los layouts */ .section__head { text-align: center; margin-bottom: var(--sp-10); } .section__head--compacto { margin-bottom: var(--sp-8); } .section__head .u-lead { margin-inline: auto; margin-top: var(--sp-3); } /* Rejilla base */ .grid { display: grid; gap: var(--sp-5); } @media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--5 { grid-template-columns: repeat(5, 1fr); } .grid--2-panel { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } } /* ========================================================================== 5. COMPONENTES ========================================================================== */ /* --- Botones -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1; border: 1px solid transparent; transition: background-color var(--t-base), border-color var(--t-base), color var(--t-base); } .btn--primary { background: var(--c-primary-600); color: #FFFFFF; } .btn--primary:hover { background: var(--c-primary-700); } .btn--ghost { background: var(--c-surface); color: var(--c-primary-600); border-color: var(--c-line); } .btn--ghost:hover { border-color: var(--c-primary-300); } .btn--outline-light { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.35); } .btn--outline-light:hover { border-color: #FFFFFF; } /* Botón sólido sobre fondo oscuro. Blanco funciona, pero el verde de marca da el mismo contraste (7.8:1) y sí dice de quién es el sitio. */ .btn--on-navy { background: var(--c-accent-400); color: var(--c-navy-900); } .btn--on-navy:hover { background: var(--c-accent-300); } .btn--block { width: 100%; } /* Íconos dentro de botones (flecha del primario, play del fantasma) */ .btn__flecha, .btn__play { flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); } .btn__flecha { transition: translate var(--t-fast); } .btn--primary:hover .btn__flecha { translate: 2px 0; } /* --- Badge del hero ------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-full); background: var(--c-primary-50); color: var(--c-primary-700); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1; } /* --- Tarjeta -------------------------------------------------------------- */ .card { background: var(--c-surface); border: var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); } .card--flush { padding: 0; overflow: hidden; } .panel { background: var(--c-surface); border: var(--border); border-radius: var(--radius-xl); padding: var(--sp-6); } /* --- Lista con palomita --------------------------------------------------- */ .checklist { display: grid; gap: var(--sp-3); } .checklist li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-body); } .checklist .icon-check { flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); color: var(--c-accent-400); margin-top: 2px; } /* --- Enlace con flecha (viene del diseño entregado) ----------------------- */ .link-arrow { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-primary-600); font-size: var(--fs-sm); font-weight: var(--fw-medium); } .link-arrow:hover { text-decoration: underline; } /* --- Antetítulo ----------------------------------------------------------- */ .eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-faint); text-align: center; } /* --- Tira de logos -------------------------------------------------------- Rejilla, no flex: con flex las filas se centran sueltas y los logos no se alinean en columna entre una fila y otra. La usan S02 y S06. ------------------------------------------------------------------------ */ .tira-logos { display: grid; align-items: center; gap: var(--sp-8) var(--sp-5); } .tira-logos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tira-logos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tira-logos__item { display: grid; place-items: center; min-width: 0; } /* El grayscale es una red de seguridad: la solicitud pide los logotipos en versión monocroma (CL-01), pero si llega uno a color la tira no se rompe. No hay hover: no son enlaces, y un cambio al pasar el cursor sugiere que sí. */ /* Alto explícito, no max-height. Con width:auto y height:auto una imagen en lazy que todavía no carga colapsa a 0x0 aunque el traiga width y height: el aspect-ratio existe, pero no hay ninguna dimensión de la cual derivar la otra. La fila quedaba sin alto y saltaba al cargar los logos. Fijando el alto, el ancho sale del aspect-ratio antes de que llegue el archivo y la fila reserva su espacio desde el primer pintado. */ .tira-logos img, .tira-logos svg { height: 34px; width: auto; max-width: 100%; /* Red de seguridad para los logotipos de integraciones, que aún no llegan y pueden venir a color. Los de clientes ya vinieron monocromos. */ filter: grayscale(1); opacity: 0.85; } /* --- Marquesina de logos --------------------------------------------------- Doce logotipos no caben legibles en una fila, así que la tira se desplaza sola. La animación mueve el 50% del ancho y la lista va duplicada en el HTML, de modo que el ciclo cierra sin costura. ------------------------------------------------------------------------ */ .marquesina { overflow: hidden; /* Se desvanece en los extremos para que los logotipos no aparezcan y desaparezcan de golpe contra el borde. */ mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .tira-logos--marquesina { display: flex; width: max-content; gap: var(--sp-10); animation: marquesina 45s linear infinite; } .tira-logos--marquesina .tira-logos__item { flex: 0 0 auto; } .marquesina:hover .tira-logos--marquesina { animation-play-state: paused; } @keyframes marquesina { from { translate: 0 0; } /* La mitad del ancho es una vuelta completa a la lista original. Se resta medio gap porque el último elemento también lo lleva. */ to { translate: calc(-50% - var(--sp-10) / 2) 0; } } /* Sin movimiento: la tira se queda quieta y se recorre a mano. */ @media (prefers-reduced-motion: reduce) { .tira-logos--marquesina { animation: none; } .marquesina { overflow-x: auto; mask-image: none; } } @media (min-width: 640px) { .tira-logos--2, .tira-logos--3 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .tira-logos--2, .tira-logos--3 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-6); } .tira-logos img, .tira-logos svg { height: 40px; } } /* --- Miniatura de video --------------------------------------------------- */ .video-thumb { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-line-soft); aspect-ratio: 16 / 9; } /* --- Carrusel (solo móvil) ------------------------------------------------ El desplazamiento es CSS puro (scroll-snap). Estos puntos los inserta assets/js/main.js; si el JS no corre, el carrusel se sigue deslizando. ------------------------------------------------------------------------ */ .carrusel__puntos { display: flex; justify-content: center; gap: var(--sp-1); margin-top: var(--sp-5); } /* El punto visible mide 8px, pero el área táctil mide 28x24: por debajo de eso el dedo falla más de lo que acierta. */ .carrusel__punto { width: 28px; height: 24px; display: grid; place-items: center; } .carrusel__punto::before { content: ""; display: block; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--c-line); transition: width var(--t-base), background-color var(--t-base); } .carrusel__punto[aria-current="true"]::before { width: 20px; background: var(--c-primary-600); } @media (min-width: 640px) { .carrusel__puntos { display: none; } } .video-thumb img { width: 100%; height: 100%; object-fit: cover; } /* Retrato: los testimonios usan foto vertical, no un fotograma 16:9. */ .video-thumb--retrato { aspect-ratio: 3 / 4; } .video-thumb__play { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: 48px; height: 48px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.92); color: var(--c-primary-600); display: grid; place-items: center; box-shadow: var(--shadow-md); transition: scale var(--t-base), background-color var(--t-base); } .video-thumb__play svg { width: 20px; height: 20px; } .video-thumb__play--sm { width: 36px; height: 36px; } .video-thumb__play--sm svg { width: 15px; height: 15px; } .video-thumb:hover .video-thumb__play { scale: 1.06; background: #FFFFFF; } /* ========================================================================== 5B. SECCIONES DEL HOME -------------------------------------------------------------------------- Una subsección por archivo de template-parts/home/, en el orden de front-page.php. Aquí solo va lo exclusivo de una sección: si un patrón aparece en dos, sube a la sección 5. ========================================================================== */ /* --- Logotipo -------------------------------------------------------------- El isotipo es archivo real de marca; el wordmark se compone con la tipografía del sitio, porque en los assets no vino un logotipo de Checador con texto. Cuando llegue el definitivo [MB-01], este bloque se borra. ------------------------------------------------------------------------ */ .logotipo { display: inline-flex; align-items: center; gap: var(--sp-3); } .logotipo__marca { flex: 0 0 auto; height: 34px; width: auto; } .logotipo__texto { display: grid; gap: 2px; line-height: 1; } .logotipo__nombre { font-size: 1.1875rem; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: #FFFFFF; } .logotipo__bajada { font-size: 0.5625rem; font-weight: var(--fw-semibold); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-accent-400); } /* --- Header ---------------------------------------------------------------- Barra azul marino fija arriba. El menú y los CTAs viven en el mismo contenedor (.site-header__menu) porque en móvil bajan juntos en el panel desplegable; separarlos obligaría a duplicar los botones. ------------------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--c-navy-900); color: #FFFFFF; transition: translate var(--t-base), box-shadow var(--t-base); } /* Se esconde al bajar y vuelve al subir; lo controla assets/js/main.js. Sin JS el header simplemente se queda fijo, que es un estado válido. */ .site-header.is-oculto { translate: 0 -100%; } /* Solo cuando ya se despegó de la parte superior: arriba del todo no hay nada de qué separarse. */ .site-header.is-desplazado { box-shadow: 0 6px 20px rgba(7, 18, 41, 0.35); } /* Con movimiento reducido el header no se desliza: desaparece de golpe. */ @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } } .site-header__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); } .site-header__logo { display: flex; align-items: center; margin-right: auto; } .site-header__logo-img { width: 160px; height: auto; } .site-header__toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); color: #FFFFFF; } .site-header__icono--cerrar { display: none; } .is-menu-abierto .site-header__icono--abrir { display: none; } .is-menu-abierto .site-header__icono--cerrar { display: block; } /* Móvil: panel desplegable bajo la barra. */ .site-header__menu { display: none; position: absolute; inset: 100% 0 auto 0; background: var(--c-navy-900); border-top: 1px solid var(--c-navy-700); padding: var(--sp-4) var(--gutter) var(--sp-8); box-shadow: var(--shadow-lg); } .is-menu-abierto .site-header__menu { display: block; } .site-nav__list { display: grid; } .site-nav__list a { display: block; padding: var(--sp-3) 0; font-size: var(--fs-body); font-weight: var(--fw-medium); color: #E2E8F0; transition: color var(--t-fast); } .site-nav__list a:hover { color: #FFFFFF; } /* Sección actual: en el blog, "Blog" queda marcado en verde. */ .site-nav__list .current-menu-item > a, .site-nav__list a[aria-current="page"] { color: var(--c-accent-400); } /* Indicador de submenú. Funciona con la clase que pone WordPress y con la estructura provisional, que usa la misma. */ .site-nav__list .menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: var(--sp-2); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -2px; } .site-header__actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--c-navy-700); } /* Los submenús solo se despliegan en desktop; en móvil el segundo nivel se resolverá cuando exista el menú real [CP-04]. */ .site-nav__list .sub-menu { display: none; } @media (min-width: 1024px) { .site-header__toggle { display: none; } .site-header__logo { margin-right: var(--sp-8); } .site-header__menu { display: flex; flex: 1 1 auto; align-items: center; gap: var(--sp-6); position: static; padding: 0; border: 0; background: none; box-shadow: none; } .site-nav__list { display: flex; align-items: center; gap: var(--sp-1); } .site-nav__list > li { position: relative; } .site-nav__list a { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); } .site-header__actions { display: flex; gap: var(--sp-3); margin: 0 0 0 auto; padding: 0; border: 0; } /* Submenú. :focus-within lo abre con teclado sin necesidad de JS. */ .site-nav__list .sub-menu { display: grid; position: absolute; top: 100%; left: 0; min-width: 220px; padding: var(--sp-2); background: var(--c-surface); border: var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity var(--t-fast), translate var(--t-fast), visibility var(--t-fast); } .site-nav__list > li:hover > .sub-menu, .site-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; translate: 0 0; } .site-nav__list .sub-menu a { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--c-body); font-weight: var(--fw-regular); } .site-nav__list .sub-menu a:hover { background: var(--c-canvas); color: var(--c-primary-700); } } /* --- Footer ----------------------------------------------------------------- */ /* Cierre del degradado: el mismo resplandor verde del cotizador, para que la página termine en el punto más alto de la escala y no de golpe. */ .site-footer { padding-block: var(--sp-16) var(--sp-8); background: radial-gradient(70% 90% at 15% 0%, rgba(74, 199, 154, 0.16), transparent 68%), var(--c-navy-900); } .site-footer__superior { display: grid; gap: var(--sp-12); } .site-footer__brand { display: grid; gap: var(--sp-4); justify-items: start; max-width: 40ch; } .site-footer__logo-img { width: 170px; height: auto; } .site-footer__desc { font-size: var(--fs-sm); color: #94A3B8; } .site-footer__social { display: flex; gap: var(--sp-2); } .site-footer__social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.08); color: #CBD5E1; transition: background-color var(--t-base), color var(--t-base); } .site-footer__social a:hover { background: var(--c-primary-600); color: #FFFFFF; } .site-footer__social svg { width: var(--icon-sm); height: var(--icon-sm); } /* Flex, no rejilla fija: el número de columnas ya no es constante —hoy solo está contacto, y las de enlaces aparecen si alguien asigna sus menús—. Con grid-template-columns habría que corregir el número cada vez. */ .site-footer__cols { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-10); } .site-footer__col { min-width: 180px; } .site-footer__col h4 { font-size: var(--fs-sm); margin-bottom: var(--sp-4); } .site-footer__list { display: grid; gap: var(--sp-3); font-size: var(--fs-sm); } .site-footer__list a { color: #94A3B8; transition: color var(--t-fast); } .site-footer__list a:hover { color: #FFFFFF; } .site-footer__contacto li { display: flex; align-items: flex-start; gap: var(--sp-2); color: #94A3B8; } .site-footer__contacto svg { flex: 0 0 auto; width: var(--icon-sm); height: var(--icon-sm); margin-top: 3px; } /* El logotipo en el footer va un punto más grande: ahí no compite con el menú y es el último remate de marca de la página. */ .logotipo--footer .logotipo__marca { height: 40px; } .logotipo--footer .logotipo__nombre { font-size: 1.375rem; } /* Crédito del desarrollador. Discreto: acompaña, no compite. */ .site-footer__credito { display: inline-flex; align-items: center; gap: var(--sp-3); color: #64748B; } .site-footer__feedbak { height: 18px; width: auto; opacity: 0.75; transition: opacity var(--t-base); } .site-footer__credito a:hover .site-footer__feedbak { opacity: 1; } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid rgba(255, 255, 255, 0.10); font-size: var(--fs-xs); color: #64748B; } .site-footer__flags { display: flex; gap: var(--sp-3); } .site-footer__flags img { border-radius: 2px; } @media (min-width: 1024px) { .site-footer__superior { grid-template-columns: 300px 1fr; gap: var(--sp-16); } /* Contacto se alinea a la derecha para equilibrar con la marca a la izquierda; si mañana vuelven las columnas de enlaces, se acomodan entre las dos sin tocar nada. */ .site-footer__cols { justify-content: flex-end; } } /* --- S01 · Hero ----------------------------------------------------------- */ .s-hero__imagen { width: 100%; height: auto; } .s-hero { /* Pega con el header, así que arriba lleva menos aire que el respiro estándar de sección. */ padding-block: var(--sp-8) var(--sp-12); } .s-hero__inner { display: grid; gap: var(--sp-10); } .s-hero__badge { margin-bottom: var(--sp-5); } .s-hero__badge-icono { flex: 0 0 auto; color: var(--c-accent-400); width: var(--icon-xs); height: var(--icon-xs); } .s-hero__titulo { margin-bottom: var(--sp-4); } /* El acento azul es una segunda línea en el layout, no un cambio de color a media frase: se fuerza el salto para que no dependa del ancho. */ .s-hero__titulo .u-accent { display: block; } .s-hero__lead { margin-bottom: var(--sp-6); } .s-hero__checklist { margin-bottom: var(--sp-8); } /* Móvil: botones a todo lo ancho y apilados, como en el layout responsive. */ .s-hero__acciones { display: flex; flex-direction: column; gap: var(--sp-3); } .s-hero__acciones .btn { padding-block: var(--sp-4); } .s-hero__micro { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-6); } .s-hero__micro li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-faint); line-height: var(--lh-normal); } .s-hero__micro svg { flex: 0 0 auto; color: var(--c-accent-400); width: var(--icon-sm); height: var(--icon-sm); } @media (min-width: 640px) { .s-hero__acciones { flex-direction: row; flex-wrap: wrap; } .s-hero__acciones .btn { padding-inline: var(--sp-8); } .s-hero__checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); } } /* Desktop: copy a la izquierda, mockup a la derecha. Merca pidió la imagen más grande (sep 2026): la columna del mockup pasó de 1.15 a 1.4 y la imagen se extiende hacia el margen derecho (ver abajo). El overflow: clip de .s-hero evita cualquier scroll horizontal. La checklist baja a dos columnas porque en la columna de texto, ahora más angosta, tres no caben. */ @media (min-width: 1024px) { .s-hero { overflow-x: clip; } .s-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: var(--sp-10); } /* Crece hacia el margen derecho, pero siempre deja 24px de aire contra el borde de la ventana: la composición termina en el iPad y cortarlo se ve como error. En pantallas de 1280px o menos no hay margen que usar. */ .s-hero__imagen { width: calc(100% + max(0px, min(120px, (100vw - var(--container)) / 2 + var(--gutter) - 24px))); max-width: none; } .s-hero__checklist { grid-template-columns: repeat(2, max-content); column-gap: var(--sp-8); row-gap: var(--sp-4); } } /* --- S03 · Beneficios ------------------------------------------------------ */ /* Móvil: los cinco puntos se agrupan en UNA tarjeta con separadores, como en el layout responsive. Desktop: se abren a cinco columnas y la tarjeta desaparece. Es la misma lista, no dos maquetados distintos. */ .s-beneficios__lista { display: grid; background: var(--c-surface); border: var(--border); border-radius: var(--radius-lg); padding-inline: var(--sp-5); } .s-beneficios__item { display: flex; align-items: flex-start; gap: var(--sp-4); padding-block: var(--sp-5); border-top: var(--border-soft); } .s-beneficios__item:first-child { border-top: 0; } .s-beneficios__icono { flex: 0 0 auto; width: var(--icon-lg); height: var(--icon-lg); color: var(--c-primary-600); /* Alinea el trazo con la primera línea del título, no con el borde de la caja de texto. */ margin-top: 2px; } .s-beneficios__titulo { margin-bottom: var(--sp-1); } .s-beneficios__desc { font-size: var(--fs-sm); color: var(--c-muted); line-height: var(--lh-normal); text-wrap: pretty; } /* Tablet: dos columnas dentro de la tarjeta. El quinto punto ocupa el ancho completo en lugar de quedar solo en media fila. */ @media (min-width: 640px) { .s-beneficios__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); } .s-beneficios__item:nth-child(2) { border-top: 0; } .s-beneficios__item:last-child { grid-column: 1 / -1; } } /* Desktop: cinco columnas, sin tarjeta y sin separadores. El ícono se queda a la izquierda del texto, como en el layout. Con contenedor de 1200 y gap de 32, a la descripción le quedan ~170px: entra en tres líneas de 14px. Si el copy real crece, el ajuste es bajar el gap a --sp-6, no partir la columna. */ @media (min-width: 1024px) { .s-beneficios__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8); background: none; border: 0; border-radius: 0; padding-inline: 0; } .s-beneficios__item { gap: var(--sp-3); padding-block: 0; border-top: 0; } .s-beneficios__item:last-child { grid-column: auto; } } /* --- S04 · Diferentes formas de checar ------------------------------------- */ /* Móvil: carrusel horizontal con scroll-snap. */ .s-formas__lista { display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); /* Sangra hasta el borde de la pantalla: se anula el gutter del contenedor con margen negativo y se devuelve como padding. Sin esto, la tarjeta que asoma se corta contra el borde del contenedor en vez de salirse. */ margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .s-formas__lista::-webkit-scrollbar { display: none; } .s-formas__item { flex: 0 0 78%; scroll-snap-align: center; display: flex; flex-direction: column; } .s-formas__media { background: var(--c-line-soft); } .s-formas__imagen { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .s-formas__cuerpo { padding: var(--sp-5); } .s-formas__titulo { margin-bottom: var(--sp-2); } .s-formas__desc { font-size: var(--fs-sm); color: var(--c-muted); line-height: var(--lh-normal); text-wrap: pretty; } /* Tablet y desktop: deja de ser carrusel y pasa a rejilla. Hay que revertir el sangrado y el scroll, no solo cambiar las columnas. */ @media (min-width: 640px) { .s-formas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); overflow: visible; margin-inline: 0; padding-inline: 0; padding-bottom: 0; } .s-formas__item { flex: initial; } } @media (min-width: 1024px) { /* Dos tarjetas, no cinco: ahora cada una es un lugar donde se checa y aguanta una imagen grande. */ .s-formas__lista { gap: var(--sp-6); } .s-formas__cuerpo { padding: var(--sp-6); } .s-formas__titulo { font-size: var(--fs-h2); } .s-formas__desc { font-size: var(--fs-body); } } /* --- S04b · Retícula de tecnologías ---------------------------------------- */ .s-formas__tecnologias { margin-top: var(--sp-12); padding-top: var(--sp-10); border-top: var(--border); } .s-formas__tec-titulo { margin-bottom: var(--sp-8); } .s-formas__tec-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); } .s-formas__tec { display: flex; align-items: center; gap: var(--sp-3); } .s-formas__tec-icono { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--c-surface); border: var(--border); color: var(--c-primary-600); } .s-formas__tec-icono svg { width: var(--icon-md); height: var(--icon-md); } .s-formas__tec-nombre { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-body); line-height: var(--lh-snug); } @media (min-width: 640px) { .s-formas__tec-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .s-formas__tec-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --- S05 · Horarios y reportes --------------------------------------------- */ .s-paneles__panel { display: flex; flex-direction: column; gap: var(--sp-5); } /* Titular de panel: más chico que un H2 de sección porque compite con la captura que lleva debajo, no con el resto de la página. */ .s-paneles__titulo { font-size: var(--fs-h3); line-height: var(--lh-snug); } .s-paneles__media { border: var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--c-canvas); } .s-paneles__imagen { width: 100%; height: auto; } /* --- S02 · Logos de clientes ----------------------------------------------- */ /* Banda delgada: es un respiro entre el hero y los beneficios, no una sección con peso propio. Por eso no usa --section-y. */ .s-clientes { padding-block: var(--sp-10); } .s-clientes__eyebrow { margin-bottom: var(--sp-8); } /* El contador subió 2pt respecto al texto secundario: es el dato que sostiene toda la tira de logotipos, no un pie de foto. */ .s-clientes__nota { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0.4em; margin-top: var(--sp-10); text-align: center; font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: var(--fw-medium); color: var(--c-ink); } /* La cifra va en el azul de marca, no en el verde: sobre blanco el verde da 2.1:1 y no pasa ni en bold. El verde se reserva para fondo oscuro. */ .s-clientes__cifra { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: var(--fw-bold); line-height: 1; letter-spacing: var(--ls-tight); color: var(--c-primary-600); } /* --- S06 · Integraciones ----------------------------------------------------- Tarjetas tipográficas, no tira de logotipos: los logotipos de las plataformas no han llegado y no se inventan. Cuando lleguen, la misma tarjeta muestra la imagen y el nombre desaparece. ------------------------------------------------------------------------ */ .s-integraciones__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } .s-integraciones__item { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 74px; padding: var(--sp-4); text-align: center; background: var(--c-surface); border: var(--border); border-radius: var(--radius-lg); transition: border-color var(--t-base), box-shadow var(--t-base); } .s-integraciones__item:hover { border-color: var(--c-primary-200); box-shadow: var(--shadow-sm); } .s-integraciones__nombre { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); text-wrap: balance; } .s-integraciones__logo { height: 30px; width: auto; filter: grayscale(1); opacity: 0.85; } /* El comodín no es una marca sino una capacidad, así que se distingue: borde punteado y acento de color. Va a todo lo ancho en cualquier tamaño (1 / -1). Antes ocupaba solo los cuatro huecos que dejan nueve sistemas en filas de cinco, y el escalón que quedaba a la derecha se leía como un error de maquetado en vez de como el cierre de la lista. */ .s-integraciones__item--abierto { grid-column: 1 / -1; background: var(--c-primary-50); border: 1px dashed var(--c-primary-300); } .s-integraciones__item--abierto svg { flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); color: var(--c-primary-600); } .s-integraciones__item--abierto .s-integraciones__nombre { color: var(--c-primary-700); } .s-integraciones__pie { margin-top: var(--sp-6); text-align: center; font-size: var(--fs-sm); color: var(--c-muted); text-wrap: pretty; } @media (min-width: 640px) { .s-integraciones__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .s-integraciones__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* --- S07 · Seguridad y cumplimiento ---------------------------------------- */ .s-seguridad__inner { display: grid; gap: var(--sp-10); } .s-seguridad__titulo { max-width: 20ch; margin-bottom: var(--sp-8); } .s-seguridad__puntos { display: grid; gap: var(--sp-6); } .s-seguridad__punto { display: flex; align-items: flex-start; gap: var(--sp-4); } .s-seguridad__icono { flex: 0 0 auto; width: var(--icon-lg); height: var(--icon-lg); color: var(--c-primary-300); margin-top: 2px; } .s-seguridad__punto-titulo { font-size: var(--fs-h4); margin-bottom: var(--sp-1); } .s-seguridad__punto-detalle { font-size: var(--fs-sm); color: #94A3B8; line-height: var(--lh-normal); } /* Panel de cumplimiento: se despega del fondo con una superficie translúcida, no con un color nuevo. Así sigue funcionando si cambia el navy. */ .s-seguridad__panel { position: relative; overflow: hidden; padding: var(--sp-6); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-xl); background: rgba(255, 255, 255, 0.06); } /* El escudo es decoración de fondo: todo el contenido del panel se apila por encima. Sin esto, la ilustración compite con el texto en vez de acompañarlo. */ .s-seguridad__panel > * { position: relative; z-index: 1; } .s-seguridad__panel-titulo { margin-bottom: var(--sp-5); } .s-seguridad__cumplimiento { gap: var(--sp-4); margin-bottom: var(--sp-6); } .s-seguridad__cumplimiento li { color: #CBD5E1; } .s-seguridad__panel-pie svg { width: var(--icon-sm); height: var(--icon-sm); } /* El escudo es decorativo: se ancla a la esquina del panel y se recorta. En móvil no aparece — ahí el panel ya es suficientemente alto sin él. */ .s-seguridad__escudo { display: none; } @media (min-width: 640px) { .s-seguridad__puntos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .s-seguridad__inner { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-12); align-items: start; } /* Los cinco puntos en una sola fila, con el ícono arriba: a ~130px de columna, ícono y texto lado a lado dejan el detalle en dos palabras. */ .s-seguridad__puntos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-5); } .s-seguridad__punto { flex-direction: column; gap: var(--sp-3); } .s-seguridad__icono { margin-top: 0; } /* El escudo se ancla a la esquina inferior derecha y se sale del panel; el overflow:hidden lo recorta contra la esquina redondeada. Va detrás del contenido (z-index 0 frente al 1 de los hijos), así que si el copy real crece y lo alcanza, el texto le pasa por encima y sigue legible. La versión anterior reservaba el hueco con padding-right en el texto, pero ese sacado aplicaba a TODAS las líneas —incluidas las de arriba, donde el escudo ni llega— y convertía la lista en una columna angosta. */ .s-seguridad__escudo { display: block; position: absolute; right: -30px; bottom: -40px; width: 140px; z-index: 0; /* Opacidad baja a propósito. Con el copy real la última línea de la lista puede alcanzar la esquina; al 55% el escudo se funde lo suficiente con el fondo del panel para que el texto encima siga pasando AA (4.7:1 medido). Al 85% no pasaba. */ opacity: 0.55; pointer-events: none; } .s-seguridad__panel { padding-bottom: var(--sp-8); } } /* --- S08 · Videos verticales ------------------------------------------------- Formato 9:16, como pidió Marketing. El texto va debajo del póster y sobre el fondo de la sección, no dentro de una tarjeta: así el video es lo único que tiene peso visual y las tres columnas se leen como una tira de reels. ------------------------------------------------------------------------ */ .s-videos__lista { display: flex; gap: var(--sp-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .s-videos__lista::-webkit-scrollbar { display: none; } .s-videos__item { flex: 0 0 74%; scroll-snap-align: center; } .s-videos__enlace { display: grid; gap: var(--sp-4); } .s-videos__media { position: relative; display: block; overflow: hidden; border-radius: var(--radius-xl); background: var(--c-navy-900); aspect-ratio: 9 / 16; } .s-videos__poster { width: 100%; height: 100%; object-fit: cover; transition: scale var(--t-base); } .s-videos__enlace:hover .s-videos__poster { scale: 1.03; } /* El botón vive sobre la imagen, así que no puede depender de qué tan clara sea: círculo blanco sólido con sombra propia. */ .s-videos__play { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; display: grid; place-items: center; width: 76px; height: 76px; border-radius: var(--radius-full); background: #FFFFFF; color: var(--c-primary-600); box-shadow: 0 8px 24px rgba(2, 38, 51, 0.35); transition: scale var(--t-base); } .s-videos__play svg { width: 28px; height: 28px; translate: 2px 0; } .s-videos__enlace:hover .s-videos__play { scale: 1.08; } .s-videos__duracion { position: absolute; right: var(--sp-4); bottom: var(--sp-4); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-sm); background: rgba(2, 38, 51, 0.82); color: #FFFFFF; font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; } .s-videos__cuerpo { display: grid; gap: var(--sp-2); } .s-videos__titulo { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-ink); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); text-wrap: balance; transition: color var(--t-fast); } .s-videos__enlace:hover .s-videos__titulo { color: var(--c-primary-600); } .s-videos__resumen { font-size: var(--fs-body); color: var(--c-muted); line-height: var(--lh-normal); text-wrap: pretty; } @media (min-width: 768px) { .s-videos__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); overflow: visible; margin-inline: 0; padding-inline: 0; padding-bottom: 0; } .s-videos__item { flex: initial; } } /* --- S10 · Casos de éxito ---------------------------------------------------- */ /* Este encabezado no va centrado: lleva un enlace a la derecha, y centrar el texto con un enlace alineado a un costado se lee desbalanceado. */ .s-casos__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4); text-align: left; } .s-casos__head .u-lead { margin-top: var(--sp-3); } .s-casos__head svg { width: var(--icon-sm); height: var(--icon-sm); } /* Móvil: mismo carrusel que S04. */ .s-casos__lista { display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .s-casos__lista::-webkit-scrollbar { display: none; } /* Tarjeta en columna: retrato arriba a todo lo ancho, texto abajo. */ .s-casos__item { flex: 0 0 82%; scroll-snap-align: center; display: flex; flex-direction: column; transition: border-color var(--t-base), box-shadow var(--t-base); } .s-casos__item:hover { border-color: var(--c-primary-200); box-shadow: var(--shadow-md); } .s-casos__video { aspect-ratio: 4 / 3; border-radius: 0; } .s-casos__retrato { width: 100%; height: 100%; object-fit: cover; transition: scale var(--t-base); } .s-casos__item:hover .s-casos__retrato { scale: 1.04; } /* Etiqueta sobre la foto: dice qué pasa al hacer clic, que el botón de play solo insinúa. Sobre un velo, porque el retrato que llegue puede ser claro. */ .s-casos__ver { position: absolute; inset: auto 0 0 0; padding: var(--sp-8) var(--sp-4) var(--sp-4); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: #FFFFFF; background: linear-gradient(transparent, rgba(2, 38, 51, 0.85)); } .s-casos__cuerpo { flex: 1 1 auto; display: grid; align-content: start; gap: var(--sp-4); padding: var(--sp-6); } /* El logotipo subió de 22 a 34px: a 22 no se distinguía de qué empresa era, que es justo lo único que ese elemento tiene que comunicar. */ .s-casos__logo img { height: 34px; width: auto; filter: grayscale(1); opacity: 0.9; } /* La cita es el contenido de la tarjeta, no un pie: sube a cuerpo y estrena comilla decorativa para que se lea como testimonio y no como descripción. */ .s-casos__cita { position: relative; padding-top: var(--sp-5); font-size: var(--fs-body); color: var(--c-body); line-height: var(--lh-relaxed); text-wrap: pretty; } .s-casos__cita::before { content: "“"; position: absolute; top: calc(var(--sp-2) * -1); left: -2px; font-size: 3.5rem; line-height: 1; color: var(--c-accent-400); opacity: 0.55; } .s-casos__persona { display: grid; gap: 2px; margin-top: auto; padding-top: var(--sp-4); border-top: var(--border-soft); } .s-casos__nombre { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); } .s-casos__puesto { font-size: var(--fs-xs); color: var(--c-faint); } @media (min-width: 640px) { .s-casos__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); overflow: visible; margin-inline: 0; padding-inline: 0; padding-bottom: 0; } .s-casos__item { flex: initial; } } @media (min-width: 1024px) { .s-casos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- S09 · Presencia internacional ------------------------------------------ */ .s-presencia__panel { display: grid; gap: var(--sp-8); background: var(--c-canvas); } .s-presencia__titulo { font-size: var(--fs-h3); color: var(--c-primary-600); margin-bottom: var(--sp-3); } .s-presencia__paises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-6); } .s-presencia__paises li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-body); } .s-presencia__paises img { flex: 0 0 auto; border-radius: 2px; } .s-presencia__pie { margin-top: var(--sp-6); } .s-presencia__pie svg { width: var(--icon-sm); height: var(--icon-sm); } /* Los pines se posicionan en porcentaje sobre este contenedor, así que el mapa manda el alto y los pines lo siguen a cualquier tamaño. */ .s-presencia__mapa { position: relative; justify-self: center; width: 100%; max-width: 420px; } .s-presencia__svg { display: block; width: 100%; height: auto; overflow: visible; } .s-presencia__pin { position: absolute; width: 16px; height: 16px; translate: -50% -92%; /* la punta del ícono queda justo en la coordenada */ color: var(--c-primary-600); filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.25)); } .s-presencia__pin svg { width: 100%; height: 100%; display: block; } /* Color y sombra, igual que tu estilo actual */ .s-presencia__svg .pin__cuerpo { fill: var(--c-primary-600); } .s-presencia__svg #pines { filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.25)); } /* Tamaño: cada pin crece desde su punta, así que no se mueve de su lugar */ .s-presencia__svg .pin { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(1.6); } @media (min-width: 1024px) { .s-presencia__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--sp-12); padding: var(--sp-10); } .s-presencia__paises { grid-template-columns: repeat(2, max-content); } } /* --- S11 · CTA final --------------------------------------------------------- */ /* Degradado del azul de marca, de esquina a esquina. Va de borde a borde: es la última banda de la página y cierra contra el footer navy. */ .s-cta { background: linear-gradient(115deg, var(--c-navy-950), var(--c-primary-600) 55%, var(--c-primary-500)); color: #DBE6FE; } .s-cta__inner { display: grid; gap: var(--sp-10); } .s-cta__titulo { color: #FFFFFF; font-size: var(--fs-h2); margin-bottom: var(--sp-3); } .s-cta__lead { color: rgba(255, 255, 255, 0.82); max-width: 46ch; } /* Sobre el degradado el azul de marca no se distingue del fondo. */ .s-cta__enlace { color: #FFFFFF; margin-top: var(--sp-5); } .s-cta__enlace svg { width: var(--icon-sm); height: var(--icon-sm); } .s-cta__acciones { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); } .s-cta__garantias { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); } .s-cta__garantias li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.75); } .s-cta__garantias svg { flex: 0 0 auto; width: var(--icon-sm); height: var(--icon-sm); } /* Móvil: el bloque de demo va arriba del de planes (SPEC §4). Se invierte con `order` y no en el HTML: así el orden de lectura y el de tabulación siguen el del contenido, no el de la presentación. */ .s-cta__demo { order: 1; } .s-cta__planes { order: 2; } @media (min-width: 640px) { .s-cta__garantias { grid-auto-flow: column; justify-content: start; gap: var(--sp-6); } .s-cta__acciones { grid-auto-flow: column; justify-content: start; } .s-cta__acciones .btn { width: auto; } } @media (min-width: 1024px) { .s-cta__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-16); align-items: center; } .s-cta__planes { order: 1; } .s-cta__demo { order: 2; } } /* --- S12 · Blog -------------------------------------------------------------- */ .s-blog__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4); text-align: left; } .s-blog__head .u-lead { margin-top: var(--sp-3); } .s-blog__head svg { width: var(--icon-sm); height: var(--icon-sm); } .s-blog__lista { display: grid; gap: var(--sp-5); } .s-blog__item { overflow: hidden; transition: border-color var(--t-base), box-shadow var(--t-base), translate var(--t-base); } .s-blog__item:hover { border-color: var(--c-primary-200); box-shadow: var(--shadow-md); translate: 0 -2px; } .s-blog__enlace { display: flex; flex-direction: column; height: 100%; } /* Zona de imagen: existe siempre, haya foto o no. Es lo que convierte tres rectángulos blancos en tres artículos reconocibles. */ .s-blog__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-canvas); } .s-blog__imagen { width: 100%; height: 100%; object-fit: cover; transition: scale var(--t-base); } .s-blog__item:hover .s-blog__imagen { scale: 1.05; } /* Sin foto: degradado de marca con la huella como filigrana. */ .s-blog__media--generica { display: grid; place-items: center; background: linear-gradient(135deg, var(--c-primary-600), var(--c-navy-900)); } .s-blog__marca { height: 62%; width: auto; opacity: 0.35; } .s-blog__categoria { position: absolute; top: var(--sp-4); left: var(--sp-4); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full); background: var(--c-accent-400); color: var(--c-navy-900); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; } .s-blog__cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-4); } .s-blog__titulo { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-ink); line-height: var(--lh-snug); text-wrap: pretty; transition: color var(--t-fast); } a.s-blog__enlace:hover .s-blog__titulo { color: var(--c-primary-600); } .s-blog__extracto { font-size: var(--fs-sm); color: var(--c-muted); line-height: var(--lh-normal); text-wrap: pretty; } .s-blog__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-4); border-top: var(--border-soft); } .s-blog__fecha { font-size: var(--fs-xs); color: var(--c-faint); } .s-blog__leer { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-primary-600); } .s-blog__leer svg { width: var(--icon-sm); height: var(--icon-sm); transition: translate var(--t-fast); } a.s-blog__enlace:hover .s-blog__leer svg { translate: 3px 0; } @media (min-width: 640px) { .s-blog__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- S11a · Cotizador -------------------------------------------------------- Va sobre banda oscura a propósito. Es lo único de la página con lo que se interactúa, y en blanco sobre blanco parecía una tabla de precios impresa. El fondo oscuro lo separa del resto y lo hace leer como un instrumento: chasis oscuro, lectura brillante. ------------------------------------------------------------------------ */ .s-cotizador { /* Un resplandor del verde de marca detrás del panel, para que el bloque no sea un rectángulo plano. */ background: radial-gradient(60% 70% at 78% 10%, rgba(74, 199, 154, 0.16), transparent 70%), var(--c-navy-900); } .s-cotizador__panel { display: grid; gap: var(--sp-8); max-width: 1120px; margin-inline: auto; padding: var(--sp-6); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); } /* align-content: space-between, no start. La columna de controles es más corta que la de resultado, y con los campos apilados arriba quedaba un hueco muerto de casi 300px debajo. Repartiéndolos a lo alto, las dos columnas terminan a la misma altura y el panel se lee como una sola pieza. */ .s-cotizador__controles { display: grid; align-content: space-between; gap: var(--sp-8); } /* --- Campos ---------------------------------------------------------------- */ .campo__etiqueta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: #FFFFFF; margin-bottom: var(--sp-3); } .campo__valor { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-accent-400); font-variant-numeric: tabular-nums; line-height: 1; } .campo__pista { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: #94A3B8; } /* Atajos por tamaño de equipo */ .s-cotizador__atajos { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); } .chip { padding: var(--sp-2) var(--sp-5); border-radius: var(--radius-full); border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; color: #E2E8F0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .chip:hover { border-color: var(--c-accent-400); color: #FFFFFF; } .chip[aria-pressed="true"] { background: var(--c-accent-400); border-color: var(--c-accent-400); color: var(--c-navy-900); } /* Deslizador. El recorrido se colorea con un degradado cuyo punto de corte lo actualiza el JS en --recorrido: los navegadores no exponen la parte recorrida de un input[range] al CSS. Los pseudoelementos de WebKit y Firefox no se pueden agrupar en un mismo selector: si un motor no entiende el del otro, descarta la regla completa. */ .campo__rango { width: 100%; height: 8px; border-radius: var(--radius-full); appearance: none; cursor: pointer; background: linear-gradient(var(--c-accent-400), var(--c-accent-400)) 0 / var(--recorrido, 5%) 100% no-repeat, rgba(255, 255, 255, 0.16); } .campo__rango::-webkit-slider-thumb { appearance: none; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--c-accent-400); border: 4px solid var(--c-navy-900); box-shadow: 0 0 0 1px var(--c-accent-400); cursor: grab; } .campo__rango::-moz-range-thumb { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--c-accent-400); border: 4px solid var(--c-navy-900); box-shadow: 0 0 0 1px var(--c-accent-400); cursor: grab; } /* Interruptor de reconocimiento facial */ .campo--switch input { position: absolute; opacity: 0; pointer-events: none; } .campo--switch label { display: flex; align-items: center; gap: var(--sp-4); cursor: pointer; } .campo--switch strong { display: block; font-size: var(--fs-sm); color: #FFFFFF; } .campo--switch .campo__pista { margin-top: 2px; } .campo__switch { flex: 0 0 auto; width: 46px; height: 28px; padding: 3px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.18); transition: background-color var(--t-base); } .campo__switch::after { content: ""; display: block; width: 22px; height: 22px; border-radius: var(--radius-full); background: #FFFFFF; transition: translate var(--t-base); } .campo--switch input:checked + label .campo__switch { background: var(--c-accent-400); } .campo--switch input:checked + label .campo__switch::after { translate: 18px 0; } .campo--switch input:focus-visible + label .campo__switch { outline: 2px solid var(--c-accent-400); outline-offset: 2px; } /* --- Lectura --------------------------------------------------------------- */ .s-cotizador__resultado { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-6); border-radius: var(--radius-lg); background: var(--c-navy-950); border: 1px solid rgba(255, 255, 255, 0.10); } /* Nombre del plan detectado: es la primera respuesta que busca el visitante, antes que el precio. */ .s-cotizador__plan { display: grid; gap: 2px; padding-bottom: var(--sp-4); margin-bottom: var(--sp-2); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .s-cotizador__plan-nombre { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: #FFFFFF; letter-spacing: var(--ls-tight); } .s-cotizador__plan-rango { font-size: var(--fs-xs); color: #94A3B8; } /* El ahorro en verde: es la única cifra buena de la lista. */ .s-cotizador__ahorro { color: var(--c-accent-400); } .s-cotizador__incluye { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--fs-xs); color: #94A3B8; } .s-cotizador__incluye strong { color: #FFFFFF; font-variant-numeric: tabular-nums; } .s-cotizador__linea { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); color: #94A3B8; } .s-cotizador__linea strong { color: #FFFFFF; font-variant-numeric: tabular-nums; } .s-cotizador__linea em { font-style: normal; color: #64748B; } .s-cotizador__linea--fuerte { margin-top: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, 0.12); color: #E2E8F0; font-weight: var(--fw-semibold); } .s-cotizador__total { display: flex; align-items: baseline; gap: var(--sp-2); margin-block: var(--sp-2); color: var(--c-accent-400); } .s-cotizador__moneda { font-size: var(--fs-h3); font-weight: var(--fw-semibold); } .s-cotizador__total strong { font-size: 3rem; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: 1; font-variant-numeric: tabular-nums; } .s-cotizador__periodo { font-size: var(--fs-sm); color: #94A3B8; } .s-cotizador__cta { margin-top: var(--sp-4); } .s-cotizador__nota { font-size: var(--fs-xs); color: #64748B; text-wrap: pretty; } @media (min-width: 900px) { .s-cotizador__panel { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-12); /* stretch, no start: la columna de resultado marca el alto y la de controles lo iguala repartiendo sus campos. */ align-items: stretch; padding: var(--sp-8); } } /* --- Formulario de contacto del popup ---------------------------------------- Campos apilados y etiquetas visibles arriba: un placeholder como única etiqueta desaparece al escribir y deja al visitante sin saber qué puso. ------------------------------------------------------------------------ */ .popup-form { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); text-align: left; } .popup-form__campo { display: grid; gap: var(--sp-2); } .popup-form__campo label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); } .popup-form input[type="text"], .popup-form input[type="email"], .popup-form input[type="numeric"] { width: 100%; padding: var(--sp-3) var(--sp-4); border: var(--border); border-radius: var(--radius-md); background: var(--c-surface); font-size: var(--fs-body); color: var(--c-ink); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .popup-form input:focus { outline: none; border-color: var(--c-primary-600); box-shadow: 0 0 0 3px var(--c-primary-100); } /* El error se marca con color Y con texto: el color solo no llega a quien no lo distingue. */ .popup-form input[aria-invalid="true"] { border-color: var(--c-danger); } .popup-form__error:empty { display: none; } .popup-form__error { font-size: var(--fs-xs); color: var(--c-danger); } .popup-form__privacidad label { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--c-muted); line-height: var(--lh-normal); cursor: pointer; } .popup-form__privacidad input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-primary-600); } .popup-form__privacidad a { color: var(--c-primary-600); text-decoration: underline; } /* Trampa para robots. No usa display:none ni visibility:hidden porque varios bots los detectan y saltan el campo; sacarlo del lienzo lo deja invisible para una persona y llenable para el robot, que es lo que se busca. */ .popup-form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .popup-form__aviso:empty { display: none; } .popup-form__aviso { font-size: var(--fs-sm); color: var(--c-muted); } .popup-form__aviso.is-error { color: var(--c-danger); } .popup-form__gracias { margin-top: var(--sp-5); padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--c-accent-100); color: var(--c-accent-700); font-size: var(--fs-body); font-weight: var(--fw-semibold); text-wrap: pretty; } /* --- Reproductor de video vertical (S08) -------------------------------------- Los videos son 9:16, así que el límite lo pone el ALTO de la ventana, no el ancho: dimensionar por ancho en escritorio deja un video más alto que la pantalla. De ahí el height en vh y el ancho derivado del aspecto. ------------------------------------------------------------------------ */ /* OJO con el display: el navegador oculta un cerrado con una regla propia, `dialog:not([open]) { display: none }`. Declarar `display: grid` en .video-modal a secas la pisa y el reproductor se pinta dentro de la página como una caja negra. Por eso el display vive en [open] y nada más ahí. */ .video-modal { max-width: none; max-height: none; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; overflow: hidden; } .video-modal[open] { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--sp-4); } .video-modal::backdrop { background: rgba(2, 38, 51, 0.92); /* --c-navy-900 con alfa */ backdrop-filter: blur(4px); } .video-modal__video { display: block; width: 100%; max-width: 100%; max-height: 78vh; aspect-ratio: 9 / 16; background: var(--c-navy-900); object-fit: contain; } .video-modal__titulo { max-width: 34ch; margin: 0; padding: 0 var(--sp-5); color: #FFFFFF; font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-align: center; text-wrap: balance; } .video-modal__titulo:empty { display: none; } /* El cierre va fijo a la ventana, no al video: sobre un 9:16 pegado al borde superior, un botón dentro del video tapa la primera parte de la imagen. */ .video-modal__cerrar { position: fixed; top: var(--sp-4); right: var(--sp-4); display: grid; place-items: center; width: 44px; /* Mínimo táctil. */ height: 44px; padding: 0; border: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.16); color: #FFFFFF; cursor: pointer; transition: background var(--t-fast); } .video-modal__cerrar:hover { background: rgba(255, 255, 255, 0.28); } .video-modal__cerrar:focus-visible { outline: 3px solid var(--c-accent-400); outline-offset: 2px; } .video-modal__cerrar svg { width: 20px; height: 20px; } @media (min-width: 640px) { .video-modal__video { width: auto; height: 82vh; border-radius: var(--radius-lg); } } /* La tarjeta sin URL no es clicable: que no finja que lo es. */ div.s-videos__enlace { cursor: default; } /* ========================================================================== 6. PLACEHOLDERS DE ASSETS PENDIENTES -------------------------------------------------------------------------- Todo hueco que espera un asset real lleva .ph y su ID visible. Buscar "ph--" en el proyecto lista todo lo que falta por sustituir. Al entregar: esta sección completa debe quedar sin uso. ========================================================================== */ .ph { position: relative; overflow: hidden; display: grid; place-items: center; background: repeating-linear-gradient( 45deg, #F1F5F9 0 10px, #E7EDF5 10px 20px ); border: 1px dashed #B6C4D6; border-radius: var(--radius-lg); color: #64748B; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em; text-align: center; padding: var(--sp-4); min-height: 80px; } .ph::after { content: attr(data-id); font-weight: var(--fw-semibold); color: #475569; } /* Proporciones para reservar el espacio correcto desde ahora */ .ph--hero { aspect-ratio: 16 / 11; } .ph--video { aspect-ratio: 16 / 9; } .ph--card { aspect-ratio: 4 / 3; } .ph--logo { aspect-ratio: 5 / 2; min-height: 48px; } .ph--avatar { aspect-ratio: 1 / 1; border-radius: var(--radius-full); } .ph--map { aspect-ratio: 3 / 2; } .ph--icon { aspect-ratio: 1 / 1; min-height: 40px; } /* Topes de ancho: red de seguridad, no layout. .ph es un elemento de bloque, así que sin un contenedor que lo limite ocupa todo el ancho disponible — y entonces el aspect-ratio lo vuelve gigante. Eso pasa en cuanto un placeholder cae en un contexto cuyo CSS todavía no existe (header y footer se maquetan al final del plan). Estos máximos evitan que la maqueta se vea rota mientras tanto. Cuando la sección que lo contiene tenga su layout, ese layout manda: aquí solo queda el techo. Al sustituir los assets reales, esta sección completa se borra. */ .ph--logo { max-width: 180px; } /* = width del custom-logo en functions.php */ .ph--icon { max-width: 40px; } .ph--avatar { max-width: 96px; } /* En los huecos chicos la etiqueta no cabe al tamaño normal. */ .ph--logo::after, .ph--avatar::after { font-size: var(--fs-2xs); } .ph--icon::after { content: ""; } /* Texto lorem: marcar que aún no es copy real, sin gritar. Se apaga solo al poner CHECADOR_DRAFT en false (quita .is-draft del body). Antes era un fondo amarillo fijo, pensado únicamente para fondo blanco: sobre la banda azul marino se leía casi blanco y competía con el contenido. Ahora el subrayado sale de currentColor, así que se adapta a cualquier fondo, y va punteado para que se distinga de un enlace. La primera declaración es el respaldo para navegadores sin color-mix. */ /* ========================================================================== 7. ACCESIBILIDAD Y UTILIDADES ========================================================================== */ /* Margen de desplazamiento para las anclas del menú. El header es fijo y mide 72px: sin esto, al saltar a una sección el navegador la deja pegada al borde superior y el titular queda debajo de la barra. scroll-margin-top empuja el destino justo lo necesario. */ :target, [id] { scroll-margin-top: calc(var(--header-h) + var(--sp-6)); } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--c-primary-600); outline-offset: 2px; border-radius: var(--radius-sm); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: var(--sp-3); left: var(--sp-3); z-index: var(--z-modal); padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* --- WhatsApp flotante ----------------------------------------------------- */ /* Esquina inferior derecha, respetando la barra de gestos de iOS. En móvil es solo el círculo; desde tablet asoma la etiqueta al pasar el cursor. */ .wa-flotante { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 90; display: inline-flex; align-items: center; height: 56px; min-width: 56px; padding: 0 15px; border-radius: 999px; background: var(--c-whatsapp); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; box-shadow: 0 8px 24px rgba(2, 38, 51, 0.22); transition: transform .2s ease, box-shadow .2s ease; } .wa-flotante:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(2, 38, 51, 0.28); } .wa-flotante:focus-visible { outline: 3px solid var(--c-primary-600); outline-offset: 3px; } .wa-flotante__icono { width: 26px; height: 26px; flex: none; } /* La etiqueta se oculta visualmente pero se conserva para lectores. */ .wa-flotante__texto { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .25s ease, margin .25s ease; } @media (hover: hover) and (min-width: 768px) { .wa-flotante:hover .wa-flotante__texto, .wa-flotante:focus-visible .wa-flotante__texto { max-width: 180px; margin-left: 10px; } } @media (prefers-reduced-motion: reduce) { .wa-flotante, .wa-flotante__texto { transition: none; } .wa-flotante:hover { transform: none; } } @media print { .wa-flotante { display: none; } } /* ========================================================================== BLOG — listado y entrada ========================================================================== */ /* --- Tarjeta destacada (primera del listado) ------------------------------- */ @media (min-width: 900px) { .s-blog__item--destacada { grid-column: 1 / -1; } .s-blog__item--destacada .s-blog__enlace { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .s-blog__item--destacada .s-blog__media { aspect-ratio: auto; min-height: 340px; } .s-blog__item--destacada .s-blog__cuerpo { justify-content: center; padding: var(--sp-10); gap: var(--sp-4); } .s-blog__item--destacada .s-blog__titulo { font-size: 1.75rem; line-height: var(--lh-tight); } .s-blog__item--destacada .s-blog__extracto { font-size: var(--fs-body); } .s-blog__item--destacada .s-blog__pie { margin-top: var(--sp-4); } } /* --- Cabecera del listado ---------------------------------------------------- */ .blog__cabecera, .entrada__cabecera { background: radial-gradient(90% 120% at 100% 0%, rgba(74, 199, 154, 0.16), transparent 60%), var(--c-navy-900); color: #CBD5E1; } .blog__cabecera { padding-block: var(--sp-12) var(--sp-10); } .blog__antetitulo { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent-400); margin-bottom: var(--sp-3); } .blog__antetitulo a:hover { text-decoration: underline; } .blog__titulo { color: #FFFFFF; max-width: 20ch; } .blog__descripcion { margin-top: var(--sp-4); max-width: 56ch; font-size: 1.0625rem; color: #CBD5E1; } .blog__filtros { display: flex; gap: var(--sp-2); margin-top: var(--sp-8); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .blog__filtros::-webkit-scrollbar { display: none; } .blog__filtro { flex: none; padding: var(--sp-2) var(--sp-4); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: #E2E8F0; transition: background var(--t-fast), border-color var(--t-fast); } .blog__filtro:hover { border-color: rgba(255, 255, 255, 0.45); } .blog__filtro.is-activo { background: var(--c-accent-400); border-color: var(--c-accent-400); color: var(--c-navy-900); } .blog__cuerpo { padding-top: var(--sp-10); } .blog__paginacion, .blog__cuerpo .pagination { margin-top: var(--sp-10); } .blog__cuerpo .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); } .blog__cuerpo .page-numbers { min-width: 40px; padding: var(--sp-2) var(--sp-3); border: var(--border); border-radius: var(--radius-md); background: var(--c-surface); text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink); } .blog__cuerpo .page-numbers.current { background: var(--c-primary-600); border-color: var(--c-primary-600); color: #FFFFFF; } .blog__cuerpo a.page-numbers:hover { border-color: var(--c-primary-300); } .blog__vacio { max-width: 520px; margin-inline: auto; padding-block: var(--sp-12); text-align: center; } .blog__vacio p { margin-block: var(--sp-3) var(--sp-5); } /* --- Entrada: cabecera ------------------------------------------------------- */ .entrada__cabecera { padding-block: var(--sp-12); } /* Con portada, la foto sube y monta el borde de la banda oscura. */ .entrada__cabecera--con-portada { padding-bottom: calc(var(--sp-12) + 120px); } .entrada__migas { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: #94A3B8; } .entrada__migas a { color: var(--c-accent-400); } .entrada__migas a:hover { text-decoration: underline; } .entrada__titulo { color: #FFFFFF; font-size: clamp(1.875rem, 4.2vw, 2.75rem); line-height: 1.15; } .entrada__bajada { margin-top: var(--sp-5); font-size: 1.1875rem; line-height: var(--lh-normal); color: #CBD5E1; } .entrada__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); font-size: var(--fs-sm); color: #94A3B8; } .entrada__meta span:first-child { color: #E2E8F0; font-weight: var(--fw-medium); } /* --- Entrada: portada -------------------------------------------------------- */ .entrada__portada-marco { max-width: calc(1040px + 2 * var(--gutter)); margin-top: -120px; } .entrada__portada-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xl); box-shadow: 0 24px 48px rgba(2, 38, 51, 0.22); background: var(--c-canvas); } .entrada__portada figcaption { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-faint); text-align: center; } /* --- Entrada: texto ---------------------------------------------------------- */ .entrada__contenido { padding-block: var(--sp-12) var(--sp-8); } /* Columna de lectura. Reproducida en assets/css/editor.css para que el editor se vea igual: si cambias una, cambia la otra. */ .prosa { font-size: 1.125rem; line-height: 1.75; color: #334155; } .prosa > * + * { margin-top: 1.25em; } .prosa p:empty { display: none; } .prosa h2, .prosa h3, .prosa h4 { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); } .prosa h2 { font-size: 1.75rem; margin-top: 2.25em; } .prosa h3 { font-size: 1.375rem; margin-top: 2em; } .prosa h4 { font-size: 1.125rem; margin-top: 1.75em; } .prosa h2 + *, .prosa h3 + *, .prosa h4 + * { margin-top: 0.6em; } .prosa strong, .prosa b { color: var(--c-ink); font-weight: var(--fw-semibold); } .prosa a { color: var(--c-primary-600); text-decoration: underline; text-decoration-color: var(--c-accent-400); text-decoration-thickness: 2px; text-underline-offset: 3px; } .prosa a:hover { text-decoration-color: var(--c-primary-600); } .prosa ul, .prosa ol { padding-left: 1.4em; } .prosa ul { list-style: disc; } .prosa ol { list-style: decimal; } .prosa li + li { margin-top: 0.4em; } .prosa ul li::marker { color: var(--c-accent-400); } .prosa ol li::marker { color: var(--c-primary-600); font-weight: var(--fw-semibold); } .prosa blockquote { margin-block: 2em; padding: 0.25em 0 0.25em 1.25em; border-left: 4px solid var(--c-accent-400); font-size: 1.2rem; color: var(--c-ink); } .prosa blockquote cite { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); font-style: normal; color: var(--c-muted); } .prosa .wp-block-pullquote { padding-block: var(--sp-6); border-block: 4px solid var(--c-accent-400); text-align: center; } .prosa .wp-block-pullquote blockquote { border: 0; padding: 0; margin: 0; font-size: 1.4rem; } .prosa figure, .prosa .wp-block-image { margin-block: 2em; } .prosa img { border-radius: var(--radius-lg); } .prosa figcaption, .prosa .wp-element-caption { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-muted); text-align: center; } .prosa .alignwide { width: min(1040px, 100vw - 2 * var(--gutter)); margin-inline: 50%; translate: -50% 0; max-width: none; } .prosa .alignfull { width: 100vw; margin-inline: 50%; translate: -50% 0; max-width: none; } .prosa .alignfull img { border-radius: 0; } .prosa hr, .prosa .wp-block-separator { border: 0; border-top: var(--border); margin-block: 2.5em; } .prosa table { font-size: 0.95rem; } .prosa .wp-block-table { overflow-x: auto; } .prosa th, .prosa td { border-bottom: var(--border); padding: 0.6em 0.75em; text-align: left; } .prosa th { color: var(--c-ink); font-weight: var(--fw-semibold); background: var(--c-canvas); } .prosa code { font-family: var(--font-mono); font-size: 0.9em; background: var(--c-line-soft); padding: 0.15em 0.35em; border-radius: 4px; } .prosa .wp-block-embed { margin-block: 2em; } .prosa iframe { max-width: 100%; border-radius: var(--radius-lg); } /* --- Entrada: etiquetas y compartir ----------------------------------------- */ .entrada__etiquetas { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); } .entrada__etiquetas a { display: inline-block; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full); background: var(--c-primary-50); color: var(--c-primary-700); font-size: var(--fs-xs); font-weight: var(--fw-medium); } .entrada__compartir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); padding-block: var(--sp-6); border-top: var(--border); } .entrada__compartir ul { display: flex; gap: var(--sp-2); } .entrada__compartir-titulo { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); } .entrada__red { display: grid; place-items: center; width: 40px; height: 40px; border: var(--border); border-radius: var(--radius-full); background: var(--c-surface); color: var(--c-primary-600); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .entrada__red svg { width: 18px; height: 18px; } .entrada__red:hover { background: var(--c-primary-600); border-color: var(--c-primary-600); color: #FFFFFF; } .entrada__red--whatsapp:hover { background: var(--c-whatsapp); border-color: var(--c-whatsapp); } .entrada__copiado { font-size: var(--fs-sm); color: var(--c-success); } /* --- Entrada: cierre con CTA ------------------------------------------------- */ .entrada__cta { display: grid; gap: var(--sp-5); align-items: center; margin-block: var(--sp-4) var(--sp-16); padding: var(--sp-8); border-radius: var(--radius-xl); background: radial-gradient(80% 140% at 100% 100%, rgba(74, 199, 154, 0.22), transparent 60%), var(--c-navy-900); color: #CBD5E1; } .entrada__cta-titulo { font-size: 1.375rem; font-weight: var(--fw-bold); line-height: var(--lh-snug); color: #FFFFFF; margin-bottom: var(--sp-2); } .entrada__cta-texto { font-size: var(--fs-sm); } .entrada__cta .btn { justify-self: start; } @media (min-width: 720px) { .entrada__cta { grid-template-columns: 1fr auto; } } .entrada__relacionadas .s-blog__head { margin-bottom: var(--sp-8); } /* ========================================================================== POPUPS (inc/popups.php) Tres tamaños: pequeño = tarjeta en la esquina inferior izquierda, sin fondo y sin bloquear la página (la derecha es del botón de WhatsApp); mediano = ventana centrada; grande = ventana amplia con la imagen a un lado. ========================================================================== */ html.popup-abierto { overflow: hidden; } .popup[hidden] { display: none; } .popup { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--sp-4); } .popup__fondo { position: absolute; inset: 0; background: rgba(1, 27, 36, 0.62); backdrop-filter: blur(3px); opacity: 0; transition: opacity 250ms var(--ease); } .popup__caja { position: relative; width: min(100%, 480px); max-height: calc(100dvh - 2 * var(--sp-4)); overflow: auto; background: var(--c-surface); border-radius: var(--radius-xl); box-shadow: 0 24px 64px rgba(1, 27, 36, 0.35); opacity: 0; translate: 0 16px; scale: 0.98; transition: opacity 250ms var(--ease), translate 250ms var(--ease), scale 250ms var(--ease); } .popup.is-visible .popup__fondo { opacity: 1; } .popup.is-visible .popup__caja { opacity: 1; translate: 0 0; scale: 1; } .popup__cerrar { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.92); color: var(--c-ink); box-shadow: var(--shadow-sm); transition: background var(--t-fast); } .popup__cerrar:hover { background: #FFFFFF; } .popup__cerrar:focus-visible { outline: 3px solid var(--c-accent-400); outline-offset: 2px; } .popup__cerrar svg { width: 18px; height: 18px; } .popup__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-canvas); } .popup__imagen { width: 100%; height: 100%; object-fit: cover; } .popup__cuerpo { padding: var(--sp-6) var(--sp-6) var(--sp-8); } .popup:not(.popup--con-imagen) .popup__cuerpo { padding-top: var(--sp-8); } .popup__antetitulo { margin-bottom: var(--sp-2); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent-600); } .popup__titulo { font-size: 1.375rem; line-height: var(--lh-snug); padding-right: var(--sp-8); } .popup--con-imagen .popup__titulo { padding-right: 0; } .popup__texto { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--c-muted); } .popup__boton { margin-top: var(--sp-5); } .popup__medios { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); } .popup__medio { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; padding: var(--sp-3) var(--sp-4); border: var(--border); border-radius: var(--radius-md); font-weight: var(--fw-semibold); color: var(--c-primary-600); transition: border-color var(--t-fast), background var(--t-fast); } .popup__medio:hover { border-color: var(--c-primary-300); background: var(--c-primary-50); } .popup__medio svg { width: 20px; height: 20px; flex: none; } .popup__medio--whatsapp { border-color: var(--c-whatsapp); background: var(--c-whatsapp); color: #FFFFFF; } .popup__medio--whatsapp:hover { background: #1FBE5A; border-color: #1FBE5A; } /* --- Pequeño: tarjeta en la esquina, la página sigue usable -------------- */ .popup--pequeno { inset: auto auto max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display: block; padding: 0; pointer-events: none; } .popup--pequeno .popup__caja { width: min(360px, calc(100vw - 32px)); pointer-events: auto; box-shadow: 0 16px 40px rgba(1, 27, 36, 0.25); border: var(--border); } .popup--pequeno .popup__cuerpo { padding: var(--sp-5); } .popup--pequeno:not(.popup--con-imagen) .popup__cuerpo { padding-top: var(--sp-5); } .popup--pequeno .popup__titulo { font-size: 1.0625rem; } .popup--pequeno .popup__boton { margin-top: var(--sp-4); padding-block: var(--sp-2); font-size: var(--fs-sm); } .popup--pequeno .popup__medios { margin-top: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); } .popup--pequeno .popup__medio { min-height: 42px; font-size: var(--fs-sm); padding-inline: var(--sp-2); } .popup--pequeno .popup__cerrar { width: 32px; height: 32px; top: var(--sp-2); right: var(--sp-2); } /* En celular sube sobre el botón flotante de WhatsApp para no taparlo. */ @media (max-width: 639px) { .popup--pequeno { inset: auto 16px calc(88px + env(safe-area-inset-bottom)) 16px; } .popup--pequeno .popup__caja { width: 100%; } .popup--pequeno .popup__media { display: none; } } /* --- Grande: imagen a la izquierda, texto a la derecha -------------------- */ .popup--grande .popup__caja { width: min(100%, 880px); } @media (min-width: 720px) { .popup--grande.popup--con-imagen .popup__caja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .popup--grande .popup__media { aspect-ratio: auto; min-height: 360px; } .popup--grande .popup__cuerpo { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-10); } .popup--grande .popup__titulo { font-size: 1.75rem; line-height: var(--lh-tight); } .popup--grande .popup__texto { font-size: var(--fs-body); } .popup--grande .popup__boton { align-self: flex-start; } } @media (prefers-reduced-motion: reduce) { .popup__fondo, .popup__caja { transition: none; } } @media print { .popup { display: none !important; } }