/* ============================================================================= ASCOR SECURITY — Componentes REGLA CENTRAL DEL REDISEÑO (agosto 2026): menos cajas, más flujo. El contenido fluye en listas, líneas de tiempo y texto directo sobre el marino. Solo TRES superficies pueden dibujar un fondo: 1. .section--zona banda de sección (#0E1830, curva superior) — layout.css 2. .cta-tarjeta la tarjeta de cierre (#16306B, radio asimétrico) 3. .input/.select/.textarea los campos de formulario Cualquier otra cosa va sin fondo y sin borde. Si al agregar un bloque nuevo necesitas dibujarle un rectángulo alrededor para que se entienda, el problema es la jerarquía del contenido, no la falta de una caja. ========================================================================== */ /* ----------------------------------------------------------------------------- BOTONES — píldora, mínimo táctil 48px -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); min-height: 48px; padding: 14px 26px; border-radius: var(--radius-pill); border: 1px solid transparent; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.01em; text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out); } .btn:active { transform: scale(0.98); } .btn svg { flex: none; } .btn--primary { background: var(--royal-500); color: var(--text-on-royal); /* blanco sobre royal-500: 5.13:1 */ } .btn--primary:hover { background: var(--royal-400); color: var(--text-on-royal); } .btn--ghost { background: rgba(255, 255, 255, 0.05); color: var(--claridad); } .btn--ghost:hover { background: rgba(255, 255, 255, 0.10); color: var(--claridad); } /* Aquí estaba .btn--wa. Se eliminó con los botones de WhatsApp: la vía informal es ahora la burbuja flotante y nada más, para que cada pantalla tenga un solo CTA primario. Si algún día vuelve un botón de WhatsApp en línea, el par de colores auditado es fondo #25D366 con texto #06210F — 4.5:1. El blanco sobre ese verde da 3.09:1 y no cumple. */ .btn--lg { min-height: 52px; padding: 16px 30px; font-size: var(--fs-base); } .btn--block { width: 100%; } .btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* NO poner `white-space: nowrap` aquí: en móvil los botones ocupan el 100% y un texto largo tiene que poder envolver. El único que lo lleva es .header__cta, que vive dentro de un contenedor flex que sí lo comprime (ver layout.css). */ .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); } @media (max-width: 420px) { .btn-row > .btn { width: 100%; } } /* Enlace con flecha */ .link-arrow { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap-min); font-weight: 600; font-size: var(--fs-sm); color: var(--royal-300); text-decoration: none; } .link-arrow svg { transition: transform var(--dur) var(--ease-out); } .link-arrow:hover svg { transform: translateX(4px); } /* ----------------------------------------------------------------------------- CHIP — zonas de cobertura y atributos de marca -------------------------------------------------------------------------- */ .pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .pill { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 34px; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.05); font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); white-space: nowrap; } .pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--royal-400); flex: none; } /* ----------------------------------------------------------------------------- HERO -------------------------------------------------------------------------- */ .hero { position: relative; padding-top: calc(var(--header-h) + var(--safe-top) + var(--sp-7)); padding-bottom: var(--sp-8); overflow: hidden; /* recorta el orbe: sin esto, scroll lateral en móvil */ isolation: isolate; } /* Sube el contenido por encima del orbe, que va en z-index 0. EL :not(.hero__media) NO ES DECORATIVO — quitarlo rompe los seis heroes interiores. `.hero > *:not(.orbe)` pesa dos clases y `.hero__media` una, así que esta regla le ganaba por especificidad y le devolvía `position: relative` a la foto de fondo. Al salir de `position: absolute`, la fotografía dejaba de cubrir el hero y pasaba a ocupar su propio hueco en el flujo: en escritorio quedaba a la izquierda empujando el texto a la derecha, y en móvil quedaba como una miniatura al costado del titular. Entró con el rediseño de agosto de 2026 y se publicó: la regla se agregó para el orbe de la portada —el único hero que tiene orbe— sin ver que también alcanzaba a la foto de los otros seis. Compiló limpio, no dio scroll lateral y no rompió ninguna prueba automática, igual que el bug de los íconos de `SVG.documento`: solo se ve mirando una captura. */ .hero > *:not(.orbe):not(.hero__media) { position: relative; z-index: 1; } /* --- Hero de portada: sin caja y sin foto de fondo -------------------------- El titular va directo sobre el marino y la fotografía baja a ocupar su propio bloque con máscara orgánica. Antes la imagen iba de fondo a pantalla completa con un overlay que se comía casi toda la foto: se pagaba el peso de una imagen de 2048px para mostrar, en la práctica, un rectángulo azul. */ .hero__cols { display: grid; gap: var(--sp-7); } .hero__content { max-width: var(--measure); } .hero h1 { font-size: var(--fs-hero); margin-bottom: var(--sp-5); } .hero__sub { font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--text-muted); max-width: var(--measure-narrow); margin-bottom: var(--sp-6); } @media (min-width: 1024px) { /* Escritorio: dos columnas derivadas del móvil, no un diseño aparte. El texto se acota a 620px como pide el sistema; la foto toma el resto. Eran 560px hasta la corrección de PC. Con la segunda rampa tipográfica el h1 mide 45–48px en vez de 40, y a 560px de ancho «Protegemos lo que más te importa» se partía en tres líneas cortas con la palabra-acento sola en la última: el titular más importante del sitio quedaba escalonado. */ .hero__cols { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); align-items: center; gap: var(--sp-9); } .hero__cols .hero__content { max-width: 620px; } /* EL HERO OCUPA LA PRIMERA PANTALLA — y solo el de portada. En PC el hero medía unos 560px de alto dentro de una ventana de 900: la sección siguiente asomaba cortada por abajo y la primera impresión del sitio era una franja a media altura con marino vacío debajo. En móvil el problema no existe porque el contenido ya llena la pantalla de sobra. El tope de 820px es lo que impide que en un monitor de 1440px de alto el hero se estire hasta separar el titular de las cifras. `min-height` y no `height`: si el contenido crece —una traducción más larga, un titular de tres líneas— el hero crece con él en vez de desbordarse. El :not() deja fuera a los heroes interiores, que tienen su propia altura calculada sobre la fotografía de fondo. */ .hero:not(.hero--inner) { display: flex; align-items: center; min-height: min(92svh, 820px); padding-bottom: var(--sp-9); } .hero:not(.hero--inner) > .container { width: 100%; } } /* --- Hero interior: conserva la fotografía de fondo ------------------------- Aquí la foto SÍ va de fondo, con el overlay ya aligerado en tokens.css. Se mantiene por dos razones: es la única imagen de esas páginas —quitarla perdería su texto alternativo, que es contenido indexado— y sostiene el ancho completo que un hero corto necesita para no verse anémico. */ .hero--inner { display: flex; align-items: flex-end; min-height: min(52svh, 460px); padding-top: calc(var(--header-h) + var(--safe-top) + var(--sp-8)); padding-bottom: var(--sp-8); } .hero__media { position: absolute; inset: 0; z-index: -2; } /* es un contenedor en línea por defecto: lo forzamos a llenar el contenedor para que object-fit del tenga altura de referencia. */ .hero__media picture, .gallery picture { display: block; width: 100%; height: 100%; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } .hero__media::after { content: ''; position: absolute; inset: 0; background: var(--overlay-full); } /* Barra acento royal a la izquierda — firma de marca (manual p.6). Va fuera del flujo: así el texto arranca en la MISMA columna que el resto de las secciones y toda la página queda alineada a una sola retícula. */ .bar-accent { position: relative; } .bar-accent::before { content: ''; position: absolute; left: calc(-1 * var(--bar-offset)); top: 0.2em; bottom: 0.2em; width: var(--bar-accent-w); border-radius: 2px; background: var(--royal-500); } /* ----------------------------------------------------------------------------- FOTOGRAFÍA DE CONTENIDO — máscara orgánica -------------------------------------------------------------------------- */ /* Dos siluetas alternadas para que dos fotos seguidas no repitan la misma forma. `overflow: hidden` en el es lo que recorta la imagen: el border-radius sobre el contenedor no afecta al hijo por sí solo. */ .media-organica { position: relative; display: block; overflow: hidden; border-radius: var(--mascara-a); background: var(--marino-700); } /* La silueta alterna (--mascara-b) la aplica hoy la foto destacada de la galería sobre su propia regla. Si algún día hay dos fotos de contenido en una misma página, la segunda alterna con: .media-organica--alt { border-radius: var(--mascara-b); } */ .media-organica img, .media-organica picture { display: block; width: 100%; height: 100%; } .media-organica img { object-fit: cover; aspect-ratio: 4 / 3; } @media (max-width: 400px) { /* A 375px una esquina de 120px se come un tercio del ancho y la foto queda irreconocible. La silueta se conserva, atenuada. */ .media-organica { border-radius: 76px 24px 76px 24px; } .media-organica--alt { border-radius: 24px 76px 24px 76px; } } /* ----------------------------------------------------------------------------- FRANJA DE MÉTRICAS — tres cifras con divisores verticales, sin tarjetas -------------------------------------------------------------------------- */ .metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--divisor); } /* El divisor va como borde izquierdo de los ítems 2 y 3: así nunca sobra una línea al final de la fila, que es lo que pasa al ponerlo como borde derecho. */ .metricas > * + * { border-left: 1px solid var(--divisor); padding-left: var(--sp-4); margin-left: var(--sp-4); } .metrica__valor { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.75rem); line-height: 1.1; letter-spacing: var(--tracking-display); color: var(--claridad); overflow-wrap: normal; /* nunca partir una cifra a la mitad */ word-break: keep-all; } .metrica__etiqueta { margin-top: var(--sp-2); font-size: var(--fs-xs); line-height: 1.35; color: var(--text-muted); } /* En escritorio la franja es el pie del hero y lo que sostiene visualmente el titular. Con las cifras a 28px se leía como una nota al pie: el peso lo tenía el botón y las tres cifras quedaban de relleno. Sube solo el valor, no la etiqueta — si suben las dos, el bloque compite con el h1. */ @media (min-width: 1024px) { .metricas { margin-top: var(--sp-8); padding-top: var(--sp-6); } /* El separador NO se agranda con el resto. La franja vive dentro de la columna de texto del hero (620px), así que cada cifra dispone de unos 175px: cada píxel que se le da al divisor se le quita a la cifra, y a 32px de separación «3 zonas» se partía en dos líneas. Una cifra partida es exactamente lo que el chequeo de titulares prohíbe. */ .metricas > * + * { padding-left: var(--sp-5); margin-left: var(--sp-5); } /* Tope 36px por lo mismo: es el cuerpo más grande con el que la cifra más larga de la portada («3 zonas») entra en una línea. */ .metrica__valor { font-size: clamp(2rem, 1.556rem + 0.694vw, 2.25rem); } } /* ----------------------------------------------------------------------------- LISTA FLUIDA — el patrón que reemplaza a las grillas de tarjetas -------------------------------------------------------------------------- */ /* Una fila = ícono en círculo con tinte + título + subtítulo + chevron, separada de la siguiente por una línea de 1px. Sirve para servicios, riesgos, segmentos, requisitos y vías de contacto: seis figuras que antes se resolvían con cuatro componentes distintos (.card, .step, .checks, .pathswitch) y que en pantalla se leían como cuatro lenguajes en una misma página. */ .lista { list-style: none; padding: 0; margin: 0; } .lista > li { border-top: 1px solid var(--divisor); } .lista > li:first-child { border-top: 0; } .lista__item { display: grid; grid-template-columns: var(--circulo-icono) minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; min-height: 64px; padding-block: var(--sp-4); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color var(--dur-fast) var(--ease-out); } /* Sin chevron el hueco de la tercera columna descuadraba el texto respecto de las filas que sí lo llevan. */ .lista__item--simple { grid-template-columns: var(--circulo-icono) minmax(0, 1fr); } .lista__icono { display: inline-flex; align-items: center; justify-content: center; width: var(--circulo-icono); height: var(--circulo-icono); border-radius: 50%; background: var(--tinte-royal); color: var(--royal-300); /* 7.50:1 sobre el círculo con tinte */ flex: none; } .lista__icono svg { width: 20px; height: 20px; } /* min-width: 0 — sin esto un título largo sin espacios estira la columna y empuja al chevron fuera de la fila. */ .lista__texto { min-width: 0; } /* El título puede venir como o como

según lo pida el esquema de encabezados de la página: los estilos se declaran completos para que el h3 no herede el peso 800 ni la tipografía display de base.css. */ .lista__t { display: block; font-family: var(--font-body); font-size: var(--fs-fila); font-weight: 500; line-height: 1.35; letter-spacing: 0; color: var(--claridad); text-wrap: pretty; transition: color var(--dur-fast) var(--ease-out); } .lista__d { display: block; margin-top: 3px; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-muted); } .lista__item .chev { color: var(--text-subtle); flex: none; transition: color var(--dur-fast) var(--ease-out); } a.lista__item:hover .lista__t, a.lista__item:focus-visible .lista__t { color: var(--royal-300); } a.lista__item:hover .chev { color: var(--royal-300); } /* Variante de verificación: el ícono es un check y no hay destino al que ir. */ .lista--checks .lista__icono { color: var(--royal-300); } @media (min-width: 1024px) { /* Dos columnas donde hay 6 o más ítems. Los dos primeros pierden el divisor superior porque ambos son primera fila. */ .lista--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); } .lista--2col > li:nth-child(-n+2) { border-top: 0; } } /* ----------------------------------------------------------------------------- LÍNEA DE TIEMPO — compromisos, proceso, postulación -------------------------------------------------------------------------- */ /* El nodo numera visualmente, así que los pasos NO llevan "01 ·" escrito. El primero va relleno en royal para marcar el punto de entrada; el resto usa el mismo tinte que los íconos de lista. */ .hitos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-6); } .hitos > li { position: relative; display: grid; grid-template-columns: var(--nodo) minmax(0, 1fr); gap: var(--sp-4); } /* La línea une el nodo de esta fila con el de la siguiente. Va en ::before del propio ítem —no en un elemento aparte— para que el último no la dibuje. */ .hitos > li:not(:last-child)::before { content: ''; position: absolute; top: var(--nodo); bottom: calc(-1 * var(--sp-6)); left: calc(var(--nodo) / 2 - 1px); width: 2px; background: rgba(107, 128, 254, 0.3); } .hitos__nodo { display: inline-flex; align-items: center; justify-content: center; width: var(--nodo); height: var(--nodo); border-radius: 50%; background: var(--tinte-royal); color: var(--royal-300); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); flex: none; } .hitos > li:first-child .hitos__nodo { background: var(--royal-500); color: var(--text-on-royal); /* 5.13:1 */ } .hitos__nodo svg { width: 20px; height: 20px; } .hitos__t { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; padding-top: 0.35em; /* alinea la primera línea con el centro del nodo */ } .hitos__d { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); } @media (min-width: 1024px) { /* En escritorio la línea de tiempo NO se pasa a columnas: se mantiene vertical con más aire. Partirla en dos rompe la lectura secuencial, que es lo único que este patrón aporta sobre una lista. */ .hitos { gap: var(--sp-7); } .hitos > li:not(:last-child)::before { bottom: calc(-1 * var(--sp-7)); } } /* ----------------------------------------------------------------------------- ACORDEÓN / FAQ —
nativo, funciona sin JS -------------------------------------------------------------------------- */ .faq { display: grid; gap: 0; } .faq details { border: 0; border-bottom: 1px solid var(--divisor); background: none; } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 56px; padding: var(--sp-4) 0; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-fila); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--royal-300); border-bottom: 2px solid var(--royal-300); rotate: 45deg; margin-top: -4px; transition: rotate var(--dur) var(--ease-out); } .faq details[open] summary::after { rotate: 225deg; margin-top: 4px; } .faq__body { padding: 0 0 var(--sp-5); color: var(--text-muted); font-size: var(--fs-sm); } /* ----------------------------------------------------------------------------- FORMULARIOS -------------------------------------------------------------------------- */ .form { display: grid; gap: var(--sp-5); } .form__row { display: grid; gap: var(--sp-5); } @media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } } .field { display: flex; flex-direction: column; gap: var(--sp-2); } /* Etiqueta en Inter, caja de oración. Antes iba en monoespaciada, mayúsculas y con tracking: catorce etiquetas gritadas es lo que hacía que el formulario pareciera un formulario de trámite. */ .field label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); } .field .opcional { color: var(--text-subtle); font-weight: 400; } .input, .select, .textarea { width: 100%; min-height: 52px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--borde-campo); border-radius: var(--radius-campo); background: rgba(255, 255, 255, 0.05); color: var(--claridad); font-size: 16px; /* 16px evita el zoom automático en iOS Safari */ line-height: 1.4; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); appearance: none; -webkit-appearance: none; } .textarea { min-height: 132px; resize: vertical; padding-top: var(--sp-4); } .input::placeholder, .textarea::placeholder { color: var(--text-subtle); } .input:focus, .select:focus, .textarea:focus { border-color: var(--royal-500); box-shadow: 0 0 0 3px rgba(61, 90, 254, 0.25); outline: none; } .input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); } .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23A8B3C7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-4) center; padding-right: var(--sp-8); } .select option { background: var(--marino-800); color: var(--claridad); } .field__error { display: none; font-size: var(--fs-xs); color: var(--danger); } .field__error.is-visible { display: block; } /* Envoltorio del consentimiento. Reproduce la caja de .field pero SIN heredar `.field label`, que impondría el tamaño y el color de una etiqueta al párrafo legal. Aquí solo hace falta un sitio donde mostrar el error. */ .consent { display: flex; flex-direction: column; gap: var(--sp-2); } .field__hint { font-size: var(--fs-xs); color: var(--text-subtle); } .checkbox { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-3); align-items: start; font-size: var(--fs-xs); line-height: 1.55; color: var(--text-muted); cursor: pointer; min-height: var(--tap-min); padding-block: var(--sp-2); } .checkbox input { width: 24px; height: 24px; margin-top: 0.1em; accent-color: var(--royal-500); cursor: pointer; } /* Honeypot anti-spam: oculto para humanos, visible para bots. Tiene que seguir siendo invisible para funcionar — no aplica tamaño táctil. */ .hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .form__status { display: none; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-campo); font-size: var(--fs-sm); } .form__status.is-visible { display: block; } .form__status--ok { background: rgba(47, 191, 113, 0.12); color: #9BE9C0; } .form__status--error { background: rgba(255, 92, 108, 0.12); color: #FFB3BB; } .spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ----------------------------------------------------------------------------- MARCO DE EMBEDS DE GOHIGHLEVEL -------------------------------------------------------------------------- */ /* El calendario y el mapa viven en un iframe de otro dominio: su tipografía, su espaciado y sus colores se configuran en el builder de GoHighLevel, no aquí. Lo único que hace este marco es darles el radio y el fondo del sitio para que no se lean como un recorte pegado encima. SIN altura fija: form_embed.js de GHL mide el contenido y ajusta el alto del iframe. Un contenedor con `height` propia deja el calendario cortado o flotando en un hueco. */ .ghl-embed { width: 100%; padding: 12px; border-radius: var(--radius-media); overflow: hidden; background: var(--bg-elevated); min-height: 200px; } /* El widget de reservas se estiraba a todo el ancho del contenedor (1087px en un notebook) y se veía desproporcionado: es un calendario mensual, no una tabla de datos. Acotado y centrado se lee como un bloque intencional. */ [data-ghl-calendar] { max-width: 820px; margin-inline: auto; } .ghl-embed iframe { width: 100%; border: 0; display: block; border-radius: var(--radius-campo); } .ghl-embed__fallback { padding: var(--sp-6); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); } /* Preventivo: las pistas de configuración citan rutas largas y sin espacios (assets/js/config.js, ghl.forms.cotizacion.url) que en 360px no caben. Solo se muestran en localhost, así que esto no afecta al visitante. */ .ghl-embed__fallback code { overflow-wrap: anywhere; word-break: break-word; } /* ----------------------------------------------------------------------------- VIDEO -------------------------------------------------------------------------- */ .video-block { margin: 0 auto; max-width: 860px; } .video-block video { display: block; width: 100%; /* Sin esto el navegador usa el width/height del atributo como tamaño fijo antes de tener los metadatos, y en móvil se desborda. La proporción declarada reserva el hueco igual, sin el desbordamiento. */ height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-media); background: var(--marino-900); } .video-block figcaption { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); } /* ----------------------------------------------------------------------------- GALERÍA -------------------------------------------------------------------------- */ .gallery { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1024px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); } } .gallery figure { position: relative; margin: 0; border-radius: var(--radius-foto); overflow: hidden; aspect-ratio: 4 / 5; background: var(--marino-700); } /* La primera foto va a ancho completo y con máscara orgánica: ancla la retícula y evita que nueve rectángulos iguales se lean como una hoja de contactos. Usa la silueta ALTERNA: la del hero de la portada es la A, y repetir la misma curva en las dos fotos grandes del sitio delataría la plantilla. */ .gallery figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; border-radius: var(--mascara-b); } @media (max-width: 400px) { .gallery figure:first-child { border-radius: 24px 76px 24px 76px; } } @media (min-width: 1024px) { .gallery figure:first-child { grid-column: span 2; aspect-ratio: 8 / 5; } } .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .gallery figure:hover img { transform: scale(1.04); } .gallery figcaption { position: absolute; inset: auto 0 0 0; padding: var(--sp-6) var(--sp-4) var(--sp-4); background: var(--overlay-bottom); font-size: var(--fs-xs); font-weight: 500; color: var(--claridad); } /* LA FOTO GRANDE NECESITA MÁS RELLENO A LA IZQUIERDA QUE LAS DEMÁS. Es la única que usa la máscara orgánica, y en --mascara-b la esquina inferior IZQUIERDA tiene 120px de radio. La leyenda va pegada al fondo con `inset: auto 0 0 0`, así que el `overflow: hidden` de la figura le recorta el arranque: a la altura del texto, la curva se come unos 57px y en pantalla se leía «nal en terreno» en vez de «Personal en terreno». No se arregla quitando el recorte —la máscara ES el recorte— sino sacando el texto de la curva. */ .gallery figure:first-child figcaption { padding-left: 4.5rem; } @media (max-width: 400px) { /* Ahí la máscara baja a 76px de radio y el relleno baja con ella. */ .gallery figure:first-child figcaption { padding-left: 3rem; } } /* ----------------------------------------------------------------------------- BREADCRUMB -------------------------------------------------------------------------- */ /* Oculta en móvil: ocupaba una línea completa sobre el h1 de cada página interior para repetir una ruta de dos niveles que el menú ya da. En escritorio no compite con nada y sí ayuda a ubicarse. El marcado sigue en el HTML, así que el schema BreadcrumbList y los lectores de pantalla no pierden nada: solo deja de pintarse. */ .crumbs { display: none; } @media (min-width: 768px) { .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); } } .crumbs a { color: var(--text-subtle); text-decoration: none; } .crumbs a:hover { color: var(--claridad); } .crumbs span[aria-current] { color: var(--text-muted); } /* --text-subtle, no --plomo: a 12.8px el token de marca daba 3.88:1 contra el marino, bajo los 4.5:1 que WCAG exige a un texto normal. --text-subtle da 5.53:1 y es el color que el resto del texto secundario pequeño ya usa. */ .crumbs .sep { color: var(--text-subtle); } .crumbs a, .crumbs span[aria-current] { display: inline-flex; align-items: center; min-height: 32px; /* WCAG 2.5.8 pide 24px: cumplen */ } /* ----------------------------------------------------------------------------- TARJETA CTA — la única tarjeta que queda en el sitio -------------------------------------------------------------------------- */ /* Radio asimétrico 24/24/24/6: la esquina viva de abajo a la izquierda es lo que la distingue de un rectángulo redondeado genérico y la ancla al lado por el que se lee. OJO CON LA PALABRA-ACENTO AQUÍ. El fondo es --azul-600, y sobre él: --royal-500 2.45:1 no cumple --royal-400 3.68:1 solo como texto grande --royal-300 5.73:1 cumple AA como texto normal Por eso .cta-tarjeta redefine .accent. Es el mismo problema que tenía la antigua banda CTA, resuelto por color en vez de por fondo: aquel bloque oscurecía la base hasta --marino-900 para salvar al royal-500. */ .cta-tarjeta { position: relative; padding: var(--sp-7) var(--sp-5); border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 6px; background: var(--azul-600); overflow: hidden; } .cta-tarjeta .accent { color: var(--royal-300); } .cta-tarjeta h2 { margin-bottom: var(--sp-4); } .cta-tarjeta p { color: #D5DDEA; max-width: var(--measure-narrow); margin-bottom: var(--sp-6); } @media (min-width: 1024px) { /* En PC la tarjeta pasa a horizontal: el texto a la izquierda y el botón a la derecha, alineado al centro. Apilada ocupaba 1160px de ancho con el contenido metido en el 40% izquierdo y el resto vacío — el bloque de cierre de CADA página se veía a medio llenar. */ .cta-tarjeta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-8); padding: var(--sp-8) var(--sp-8); } .cta-tarjeta h2 { grid-column: 1; margin-bottom: var(--sp-3); } .cta-tarjeta p { grid-column: 1; margin-bottom: 0; max-width: 52ch; } /* El botón ocupa la segunda columna y las dos filas del texto. */ .cta-tarjeta .btn { grid-column: 2; grid-row: 1 / -1; white-space: nowrap; } } /* ----------------------------------------------------------------------------- AVISOS -------------------------------------------------------------------------- */ /* Descargo legal: texto pequeño y apagado bajo el bloque que acota. Sin caja, sin borde punteado y sin ícono de advertencia. Los dos que existen —el de la portada, que acota los compromisos de 60 minutos y 72 horas, y el de Nosotros, que aclara que la referencia normativa no es asesoría legal— están a la espera del visto bueno de un abogado por decisión del cliente. Se les cambió la presentación; el texto NO se toca. */ .aviso-legal { margin-top: var(--sp-5); padding-left: var(--sp-4); border-left: 2px solid var(--divisor); font-size: var(--fs-xs); line-height: 1.5; color: var(--text-subtle); max-width: var(--measure); } /* Aviso operativo: el bloque