/* ==========================================================================
   Estrategia Security — hoja de estilos única
   --------------------------------------------------------------------------
   Todo el sitio usa las variables de :root. Para cambiar un color, un
   tamaño o una tipografía, edita la variable; no busques valores sueltos.
   Orden del archivo:
     1. Variables (paleta, tipografía, espaciado)
     2. Fuentes autoalojadas
     3. Base y superficies del navegador
     4. Utilidades (contenedor, oculto, aparición)
     5. Cabecera y navegación
     6. Botones y enlaces
     7. Secciones, títulos, separadores curvos
     8. Componentes del Inicio (hero, credibilidad, servicios, eventos,
        pilares, tecnología, clientes, conversión)
     9. Páginas interiores (hero interior, dos columnas, acordeón, tablas,
        casos, noticias, cobertura, placeholders)
    10. Formularios
    11. Pie y botón flotante de WhatsApp
    12. Ajustes responsivos finales
   ========================================================================== */

/* 1. VARIABLES ----------------------------------------------------------- */
:root {
  /* Azul corporativo y derivados (todo sale de #06336F) */
  --azul: #06336F;          /* color corporativo: títulos, botón secundario, íconos */
  --azul-800: #052A5C;      /* hover del botón azul */
  --azul-900: #031F45;      /* hero, secciones oscuras, bloque final */
  --azul-950: #02152F;      /* pie de página y texto del botón ámbar */
  --azul-600: #0A4C9F;      /* enlaces, hover, anillo de foco sobre claro */
  --azul-100: #E4ECF7;      /* fondos teñidos, tiles de íconos */
  --azul-050: #F1F5FB;      /* franjas suaves */
  /* Neutros fríos (mismo tono que el azul, saturación baja) */
  --tinta: #141B26;         /* texto de cuerpo */
  --gris-700: #3A4452;      /* texto de tablas y etiquetas */
  --gris-600: #515C6B;      /* texto secundario */
  --gris-500: #6B7684;      /* pies de foto y placeholders, solo sobre blanco */
  --gris-400: #7B8697;      /* bordes de campos de formulario (3:1 sobre fondos claros) */
  --gris-200: #D9DFE7;      /* bordes de tarjetas y reglas */
  --gris-100: #EAEEF3;      /* fondos alternos */
  --gris-050: #F5F7FA;      /* fondos suaves, grilla de logos */
  --blanco: #FFFFFF;
  --texto-sobre-azul: #C6D4E8;   /* párrafos sobre azul-900 y azul-950 */
  /* Único acento (llamados a la acción). El texto del botón ámbar va SIEMPRE en azul-950:
     blanco sobre ámbar da 2,6:1 y no cumple accesibilidad. */
  --acento: #D9910D;
  --acento-hover: #BF7D08;
  --acento-activo: #A96E06;
  --texto-sobre-acento: var(--azul-950);
  /* Estados */
  --error: #B42318;
  --exito: #1E6B3A;
  --foco-sobre-claro: var(--azul-600);
  --foco-sobre-oscuro: var(--blanco);
  /* Tipografía */
  --fuente: "IBM Plex Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --texto-base: 1rem;                                    /* 16 px */
  --texto-cuerpo: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --texto-bajada: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --texto-chico: 0.875rem;
  --titulo-1: clamp(2rem, 1.35rem + 2.9vw, 3.25rem);     /* 32 → 52 px */
  --titulo-2: clamp(1.625rem, 1.2rem + 1.8vw, 2.375rem); /* 26 → 38 px */
  --titulo-3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);  /* 20 → 24 px */
  --titulo-4: 1.0625rem;
  --cifra: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
  /* Espaciado y medidas */
  --ancho-contenido: 1200px;
  --ancho-texto: 64ch;
  --margen-lateral: clamp(1.25rem, 4vw, 2.5rem);
  --espacio-seccion: clamp(3.5rem, 2.5rem + 4.5vw, 7rem);
  --espacio-bloque: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --alto-cabecera: 76px;
  --radio: 8px;
  --radio-grande: 16px;
  --sombra: 0 1px 2px rgb(2 21 47 / 0.06), 0 12px 32px -14px rgb(2 21 47 / 0.18);
  --sombra-alta: 0 2px 4px rgb(2 21 47 / 0.06), 0 22px 44px -16px rgb(2 21 47 / 0.28);
  --transicion: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 2. FUENTES (IBM Plex Sans, licencia OFL, archivos en assets/fonts) ------ */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 3. BASE ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + 1rem); overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } } /* solo en html: si body también lleva overflow, el navegador convierte a body en el contenedor de scroll y window.scrollY deja de funcionar */
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--texto-cuerpo);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  accent-color: var(--azul);
  caret-color: var(--azul-600);
  scrollbar-color: var(--azul) var(--gris-100);
}
::selection { background: var(--azul); color: var(--blanco); }
img, svg, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; } /* plantillas vacías y bloques desactivados */
img { font-style: italic; color: var(--gris-500); }
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.15; color: var(--azul); text-wrap: balance; font-weight: 700; }
h1 { font-size: var(--titulo-1); line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: var(--titulo-2); letter-spacing: -0.01em; }
h3 { font-size: var(--titulo-3); line-height: 1.25; font-weight: 600; }
h4 { font-size: var(--titulo-4); font-weight: 600; }
p, ul, ol { margin: 0 0 1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
a { color: var(--azul-600); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--azul); }
strong { font-weight: 600; }
small { font-size: var(--texto-chico); }
hr { border: 0; border-top: 1px solid var(--gris-200); margin: var(--espacio-bloque) 0; }
:focus-visible { outline: 3px solid var(--foco-sobre-claro); outline-offset: 2px; border-radius: 2px; }
.seccion--oscura :focus-visible, .seccion--banda :focus-visible, .hero :focus-visible, .pie :focus-visible { outline-color: var(--foco-sobre-oscuro); }
.icono { display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
table { border-collapse: collapse; width: 100%; font-size: var(--texto-base); }
th, td { text-align: left; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--gris-200); vertical-align: top; overflow-wrap: break-word; }
th[scope="row"] { white-space: nowrap; }
@media (max-width: 599px) { /* en teléfonos la tabla se apila: cada fila es un bloque con su encabezado arriba */
  table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table, table tbody, table tr, table th, table td { display: block; }
  table tr { padding: 0.75rem 0; border-bottom: 1px solid var(--gris-200); }
  table th, table td { padding: 0.15rem 0; border: 0; background: transparent; }
  th[scope="row"] { white-space: normal; }
}
th { color: var(--azul); font-weight: 600; background: var(--gris-050); }
td { color: var(--gris-700); font-variant-numeric: tabular-nums; }

/* 4. UTILIDADES ----------------------------------------------------------- */
.contenedor { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--margen-lateral); } /* 1280 = 1200 de contenido + 40 de margen a cada lado; sin cálculos para que iOS lo respete */
.contenedor--angosto { max-width: 880px; }
.texto-medida { max-width: var(--ancho-texto); }
.sin-corte { white-space: nowrap; } /* evita que un código como OS-10 se parta en dos líneas */
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.salto { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--azul); color: var(--blanco); padding: 0.75rem 1rem; border-radius: var(--radio); text-decoration: none; }
.salto:focus { top: 1rem; }
.centrado { text-align: center; }
.centrado .texto-medida { margin-inline: auto; }
.centrado .caso__cabecera { justify-content: center; }
.centrado .lista-check { text-align: left; max-width: 62ch; margin-inline: auto; }
/* Aparición al hacer scroll: main.js agrega .aparece a los elementos con [data-aparece]
   y luego .visible cuando entran en pantalla. Sin JS, todo se ve de inmediato. */
.aparece { opacity: 0; transform: translateY(18px); transition: opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.aparece[data-aparece="izq"] { transform: translateX(-22px); }
.aparece[data-aparece="der"] { transform: translateX(22px); }
.aparece.visible, .aparece.visible[data-aparece] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aparece { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; border-radius: 999px; font-size: var(--texto-chico); font-weight: 600; line-height: 1.3; background: var(--azul-100); color: var(--azul); }
.chip .icono { width: 16px; height: 16px; }
.chip--sobre-oscuro { background: rgb(255 255 255 / 0.14); color: var(--blanco); border: 1px solid rgb(255 255 255 / 0.28); }
.chip--proyecto { background: var(--gris-100); color: var(--gris-700); }
.nota-completar { display: inline; background: #FDF1D8; color: var(--tinta); border: 1px dashed var(--acento-hover); border-radius: 4px; padding: 0.05em 0.4em; font-weight: 600; font-size: 0.9em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* 5. CABECERA ------------------------------------------------------------- */
.cabecera { position: sticky; top: 0; z-index: 60; background: var(--blanco); border-bottom: 1px solid var(--gris-200); transition: box-shadow var(--transicion); }
.cabecera--con-sombra { box-shadow: 0 6px 24px -12px rgb(2 21 47 / 0.25); }
.cabecera__grilla { display: flex; align-items: center; gap: 1.5rem; min-height: var(--alto-cabecera); }
.marca { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--azul); }
.marca__isotipo { width: 44px; height: 44px; }
.marca__texto { display: flex; flex-direction: column; line-height: 1; }
.marca__nombre { font-weight: 700; font-size: 1.125rem; letter-spacing: 0.04em; text-transform: uppercase; }
.marca__apellido { font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris-600); margin-top: 0.2em; }
.nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.nav__lista { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav__enlace { display: inline-block; padding: 0.5rem 0.75rem; font-size: 0.9375rem; font-weight: 500; color: var(--gris-700); text-decoration: none; border-radius: var(--radio); position: relative; }
.nav__enlace:hover { color: var(--azul); background: var(--azul-050); }
.nav__enlace::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.15rem; height: 2px; background: var(--acento); transform: scaleX(0); transform-origin: left; transition: transform var(--transicion); }
/* Ítem activo: el <body data-pagina="..."> de cada página marca su enlace. */
body[data-pagina="index"] .nav__enlace[data-pagina="index"], body[data-pagina="servicios"] .nav__enlace[data-pagina="servicios"], body[data-pagina="tecnologia"] .nav__enlace[data-pagina="tecnologia"], body[data-pagina="cobertura"] .nav__enlace[data-pagina="cobertura"], body[data-pagina="clientes"] .nav__enlace[data-pagina="clientes"], body[data-pagina="nosotros"] .nav__enlace[data-pagina="nosotros"], body[data-pagina="contacto"] .nav__enlace[data-pagina="contacto"], body[data-pagina="trabaja"] .nav__enlace[data-pagina="trabaja"], body[data-pagina="noticias"] .nav__enlace[data-pagina="noticias"] { color: var(--azul); font-weight: 600; }
body[data-pagina="index"] .nav__enlace[data-pagina="index"]::after, body[data-pagina="servicios"] .nav__enlace[data-pagina="servicios"]::after, body[data-pagina="tecnologia"] .nav__enlace[data-pagina="tecnologia"]::after, body[data-pagina="cobertura"] .nav__enlace[data-pagina="cobertura"]::after, body[data-pagina="clientes"] .nav__enlace[data-pagina="clientes"]::after, body[data-pagina="nosotros"] .nav__enlace[data-pagina="nosotros"]::after, body[data-pagina="contacto"] .nav__enlace[data-pagina="contacto"]::after, body[data-pagina="trabaja"] .nav__enlace[data-pagina="trabaja"]::after, body[data-pagina="noticias"] .nav__enlace[data-pagina="noticias"]::after { transform: scaleX(1); }
.nav__acciones { display: flex; align-items: center; gap: 1rem; }
.nav__telefono { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--azul); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nav__telefono:hover { text-decoration: underline; }
.nav__solo-movil { display: none; }
.cabecera__hamburguesa { display: none; margin-left: auto; width: 48px; height: 48px; border: 1px solid var(--gris-200); background: var(--blanco); border-radius: var(--radio); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.hamburguesa__linea { display: block; width: 22px; height: 2px; background: var(--azul); border-radius: 2px; transition: transform var(--transicion), opacity var(--transicion); }
.cabecera__hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cabecera__hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(2) { opacity: 0; }
.cabecera__hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1099px) {
  .cabecera__hamburguesa { display: flex; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--blanco); border-bottom: 1px solid var(--gris-200); box-shadow: 0 24px 40px -20px rgb(2 21 47 / 0.35); padding: 0.5rem var(--margen-lateral) 1.25rem; max-height: calc(100vh - var(--alto-cabecera)); overflow-y: auto; }
  .nav[hidden] { display: none; }
  .nav__lista { flex-direction: column; gap: 0; }
  .nav__enlace { display: block; padding: 0.8rem 0.5rem; font-size: 1.0625rem; border-bottom: 1px solid var(--gris-100); border-radius: 0; }
  .nav__enlace::after { display: none; }
  .nav__solo-movil { display: block; }
  .nav__acciones { flex-direction: column; align-items: stretch; gap: 0.75rem; padding-top: 1rem; }
  .nav__telefono { justify-content: center; padding: 0.6rem; }
  .nav__acciones .boton { width: 100%; min-height: 48px; }
}
@media (min-width: 1100px) { .nav[hidden] { display: flex; } }

/* 6. BOTONES -------------------------------------------------------------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.7rem 1.5rem; border-radius: var(--radio); font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion), transform var(--transicion), box-shadow var(--transicion); }
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton--primario { background: var(--acento); color: var(--texto-sobre-acento); border-color: var(--acento-hover); box-shadow: 0 8px 20px -12px rgb(217 145 13 / 0.7); }
.boton--primario:hover { background: var(--acento-hover); color: var(--texto-sobre-acento); }
.boton--primario:active { background: var(--acento-activo); }
.boton--secundario { background: transparent; color: var(--azul); border: 2px solid var(--azul); }
.boton--secundario:hover { background: var(--azul); color: var(--blanco); }
.boton--secundario.boton--sobre-oscuro, .seccion--oscura .boton--secundario, .seccion--banda .boton--secundario, .hero .boton--secundario, .hero-interior .boton--secundario { color: var(--blanco); border-color: rgb(255 255 255 / 0.85); }
.boton--secundario.boton--sobre-oscuro:hover, .seccion--oscura .boton--secundario:hover, .seccion--banda .boton--secundario:hover, .hero .boton--secundario:hover, .hero-interior .boton--secundario:hover { background: var(--blanco); color: var(--azul); border-color: var(--blanco); }
.boton--azul { background: var(--azul); color: var(--blanco); border-color: var(--azul); }
.boton--azul:hover { background: var(--azul-800); color: var(--blanco); }
.boton--chico { min-height: 42px; padding: 0.5rem 1.1rem; font-size: 0.9375rem; }
.boton--grande { min-height: 54px; padding: 0.9rem 1.9rem; font-size: 1.0625rem; }
.boton .icono { width: 20px; height: 20px; }
.boton:focus-visible { outline: 3px solid var(--foco-sobre-claro); outline-offset: 3px; }
.boton--primario:focus-visible { outline-color: var(--azul-950); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.875rem 1rem; align-items: center; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; text-decoration: none; color: var(--azul-600); }
.enlace-flecha .icono { width: 18px; height: 18px; transition: transform var(--transicion); }
.enlace-flecha:hover { color: var(--azul); text-decoration: underline; }
.enlace-flecha:hover .icono { transform: translateX(3px); }
.seccion--oscura .enlace-flecha, .seccion--banda .enlace-flecha { color: var(--blanco); }

/* 7. SECCIONES Y TÍTULOS -------------------------------------------------- */
.seccion { position: relative; padding-block: var(--espacio-seccion); }
.seccion--suave { background: var(--gris-050); }
.seccion--tenue { background: var(--azul-050); }
.seccion--oscura { background: var(--azul-900); color: var(--texto-sobre-azul); }
.seccion--oscura h2, .seccion--oscura h3, .seccion--oscura h4 { color: var(--blanco); }
.seccion--banda { background: var(--azul); color: var(--texto-sobre-azul); }
.seccion--banda h2, .seccion--banda h3, .seccion--banda h4 { color: var(--blanco); }
.seccion--oscura a:not(.boton), .seccion--banda a:not(.boton) { color: var(--blanco); }
.seccion--sin-arriba { padding-top: 0; }
.seccion__cabecera { margin-bottom: var(--espacio-bloque); }
.seccion__cabecera .texto-medida { color: var(--gris-600); font-size: var(--texto-bajada); }
.seccion--oscura .seccion__cabecera .texto-medida, .seccion--banda .seccion__cabecera .texto-medida { color: var(--texto-sobre-azul); }
.seccion__cabecera--centrada { text-align: center; }
.seccion__cabecera--centrada .texto-medida { margin-inline: auto; }
.seccion__pie { margin-top: var(--espacio-bloque); }
.subrayado-acento { display: inline-block; width: 56px; height: 4px; border-radius: 2px; background: var(--acento); margin-bottom: 1.25rem; }
/* Separador curvo: la forma del fondo siguiente entra sobre el actual. Se usa dos veces en el Inicio. */
.separador { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(24px, 5vw, 84px); line-height: 0; pointer-events: none; z-index: 1; }
.separador svg { width: 100%; height: 100%; display: block; }
.separador--blanco svg { fill: var(--blanco); }
.separador--suave svg { fill: var(--gris-050); }
.separador--banda svg { fill: var(--azul); }
.separador--oscuro svg { fill: var(--azul-900); }
.grilla { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 899px) { .grilla--3, .grilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .grilla--2, .grilla--3, .grilla--4 { grid-template-columns: minmax(0, 1fr); } }

/* Tarjeta base e ícono en tile */
.tarjeta { background: var(--blanco); border: 1px solid var(--gris-200); border-radius: var(--radio-grande); padding: clamp(1.25rem, 2vw, 1.75rem); box-shadow: var(--sombra); transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion); position: relative; }
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--azul-100); }
.tarjeta h3 { margin-bottom: 0.4em; }
.tarjeta p { color: var(--gris-600); font-size: var(--texto-base); }
.icono-tile { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--azul-100); color: var(--azul); margin-bottom: 1rem; }
.icono-tile .icono { width: 26px; height: 26px; }
.seccion--oscura .icono-tile { background: rgb(255 255 255 / 0.1); color: var(--blanco); }
.lista-limpia { list-style: none; padding: 0; margin: 0; }
.lista-check { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 0.6rem; }
.lista-check li { display: grid; grid-template-columns: 22px 1fr; gap: 0.6rem; align-items: start; }
.lista-check .icono { width: 22px; height: 22px; color: var(--azul); margin-top: 0.1em; }
.seccion--oscura .lista-check .icono, .seccion--banda .lista-check .icono { color: var(--acento); }

/* 8. INICIO --------------------------------------------------------------- */
/* Hero: foto real a sangre con velo azul; texto a la izquierda en escritorio. */
.hero { position: relative; background: var(--azul-900); color: var(--blanco); overflow: hidden; isolation: isolate; }
.hero__foto { position: absolute; inset: 0; z-index: -2; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(3 31 69 / 0.94) 0%, rgb(3 31 69 / 0.86) 38%, rgb(3 31 69 / 0.45) 62%, rgb(3 31 69 / 0.2) 100%); }
.hero__contenido { position: relative; z-index: 2; min-height: clamp(520px, 78vh, 720px); display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--espacio-seccion) * 0.9) calc(var(--espacio-seccion) + 3rem); max-width: none; }
.hero__interior { max-width: 540px; animation: hero-entrada 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } /* 540 px: el texto termina antes del guardia de la foto */
.hero h1 { color: var(--blanco); margin: 1rem 0 1.1rem; }
.hero__bajada { font-size: var(--texto-bajada); color: var(--texto-sobre-azul); max-width: 44ch; margin-bottom: 1.75rem; }
.hero__bajada strong { color: var(--blanco); }
.hero__dato { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.75rem; font-size: var(--texto-chico); color: var(--texto-sobre-azul); }
.hero__dato a { color: var(--blanco); }
@keyframes hero-entrada { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .hero__foto { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 5; max-height: 42vh; }
  .hero__foto img { object-position: 50% 30%; }
  .hero__foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: linear-gradient(180deg, rgb(3 31 69 / 0) 0%, rgb(3 31 69 / 0.6) 55%, var(--azul-900) 100%); } /* el degradado va sobre la foto misma: la etiqueta OS-10 queda sobre fondo oscuro */
  .hero__velo { display: none; }
  .hero { display: grid; }
  .hero__contenido { min-height: 0; margin-top: -3.5rem; padding-block: 0 calc(var(--espacio-seccion) + 2rem); }
}

/* Barra de credibilidad: una sola placa dividida en cuatro, superpuesta al hero */
.credibilidad { position: relative; z-index: 3; margin-top: clamp(-3.5rem, -6vw, -2.25rem); }
.credibilidad__placa { background: var(--blanco); border: 1px solid var(--gris-200); border-radius: var(--radio-grande); box-shadow: var(--sombra-alta); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.credibilidad__item { padding: 1.5rem 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; align-items: center; border-left: 1px solid var(--gris-200); }
.credibilidad__item:first-child { border-left: 0; }
.credibilidad__item .icono-tile { margin: 0; grid-row: span 2; width: 48px; height: 48px; }
.credibilidad__cifra { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); font-weight: 700; line-height: 1; color: var(--azul); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.credibilidad__etiqueta { font-size: var(--texto-chico); color: var(--gris-600); line-height: 1.35; font-weight: 500; }
@media (max-width: 899px) { .credibilidad__placa { grid-template-columns: repeat(2, minmax(0, 1fr)); } .credibilidad__item:nth-child(3) { border-left: 0; } .credibilidad__item:nth-child(n+3) { border-top: 1px solid var(--gris-200); } }
@media (max-width: 479px) { .credibilidad__placa { grid-template-columns: minmax(0, 1fr); } .credibilidad__item { border-left: 0; border-top: 1px solid var(--gris-200); } .credibilidad__item:first-child { border-top: 0; } }

/* Servicios: intro a la izquierda, grilla a la derecha */
.servicios { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.servicios__intro { position: sticky; top: calc(var(--alto-cabecera) + 1.5rem); }
.servicios__grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.servicio { display: flex; flex-direction: column; }
.servicio h3 a { color: inherit; text-decoration: none; }
.servicio h3 a::after { content: ""; position: absolute; inset: 0; }
.servicio__control { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--gris-100); font-size: var(--texto-chico); color: var(--gris-700); }
.servicio__control strong { color: var(--azul); }
.servicio .enlace-flecha { margin-top: 0.9rem; font-size: var(--texto-chico); position: relative; z-index: 1; }
@media (max-width: 1023px) { .servicios { grid-template-columns: minmax(0, 1fr); } .servicios__intro { position: static; } }
@media (max-width: 599px) { .servicios__grilla { grid-template-columns: minmax(0, 1fr); } }

/* Eventos de alta complejidad: dos bloques editoriales alternados sobre fondo oscuro */
.evento { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.evento + .evento { margin-top: var(--espacio-bloque); padding-top: var(--espacio-bloque); border-top: 1px solid rgb(255 255 255 / 0.12); }
.evento--invertido .evento__texto { order: -1; }
.evento__media { position: relative; border-radius: var(--radio-grande); overflow: hidden; aspect-ratio: 4 / 3; background: var(--azul-950); box-shadow: var(--sombra-alta); }
.evento__media img { width: 100%; height: 100%; object-fit: cover; }
.evento__texto h3 { font-size: var(--titulo-3); }
.evento__mandante { font-size: var(--texto-chico); color: var(--texto-sobre-azul); margin-bottom: 1rem; }
.evento__mandante strong { color: var(--blanco); }
@media (max-width: 899px) { .evento { grid-template-columns: minmax(0, 1fr); } .evento--invertido .evento__texto { order: 0; } }

/* Cuatro pilares: lista a la izquierda, foto pegajosa a la derecha */
.pilares { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.pilares__lista { display: grid; gap: 1rem; }
.pilar { display: grid; grid-template-columns: 52px 1fr; gap: 1.1rem; align-items: start; padding: 1.1rem 1.25rem; background: var(--blanco); border: 1px solid var(--gris-200); border-radius: var(--radio-grande); }
.pilar .icono-tile { margin: 0; }
.pilar h3 { font-size: 1.125rem; margin-bottom: 0.25em; }
.pilar p { color: var(--gris-600); font-size: var(--texto-base); }
.pilares__foto { position: sticky; top: calc(var(--alto-cabecera) + 1.5rem); border-radius: var(--radio-grande); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--sombra-alta); }
.pilares__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 90%; }
@media (max-width: 899px) { .pilares { grid-template-columns: minmax(0, 1fr); } .pilares__foto { position: relative; top: auto; width: 100%; aspect-ratio: 4 / 3; } .pilares__foto img { object-position: 50% 30%; } }

/* Tecnología: dos paneles de peso distinto */
.tecnologia { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.panel { border-radius: var(--radio-grande); padding: clamp(1.5rem, 3vw, 2.5rem); }
.panel--operacion { background: var(--blanco); border: 1px solid var(--gris-200); box-shadow: var(--sombra); }
.panel--proyecto { background: var(--azul-050); border: 1px solid var(--azul-100); }
.panel .chip { margin-bottom: 1rem; }
.panel h3 { margin-top: 0.25rem; }
.panel__lista { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.panel__item { display: grid; grid-template-columns: 44px 1fr; gap: 0.9rem; align-items: start; }
.panel__item .icono-tile { width: 44px; height: 44px; margin: 0; border-radius: 10px; }
.panel__item .icono-tile .icono { width: 22px; height: 22px; }
.panel__item h4 { margin-bottom: 0.2em; }
.panel__item p { color: var(--gris-600); font-size: var(--texto-base); }
.panel__cumplimiento { margin-top: 1.25rem; padding: 0.9rem 1rem; border-radius: var(--radio); background: var(--blanco); border: 1px solid var(--gris-200); font-size: var(--texto-chico); color: var(--gris-700); }
@media (max-width: 899px) { .tecnologia { grid-template-columns: minmax(0, 1fr); } }

/* Clientes: logos con fondo blanco opaco, siempre sobre claro */
.clientes__grupo + .clientes__grupo { margin-top: var(--espacio-bloque); }
.clientes__grupo h3 { display: flex; align-items: center; gap: 0.75rem; font-size: 1.0625rem; color: var(--gris-700); margin-bottom: 1rem; }
.clientes__grupo h3::after { content: ""; flex: 1; height: 1px; background: var(--gris-200); }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.logo-card { height: 108px; padding: 1rem 1.25rem; display: grid; grid-template-rows: 76px; place-items: center; background: var(--blanco); border: 1px solid var(--gris-200); border-radius: var(--radio); text-decoration: none; transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion); }
.logo-card:hover { border-color: var(--azul-100); box-shadow: var(--sombra); transform: translateY(-2px); }
.logo-card { overflow: hidden; }
.logo-card img { width: 100%; height: 76px; max-height: 76px; object-fit: contain; object-position: center; } /* caja fija: 108 px de tarjeta menos 32 px de relleno */
.logo-card--chico img { width: 130px; max-width: 100%; } /* buses-altas-cumbres.png es de 260x60: no ampliar más de 130 px */
.logo-card--cuadrado img { height: 76px; }

/* Bloque final de conversión sobre banda azul */
.conversion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.conversion__texto h2 { color: var(--blanco); }
.conversion__datos { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0.75rem; }
.conversion__datos li { display: grid; grid-template-columns: 22px 1fr; gap: 0.75rem; align-items: start; color: var(--texto-sobre-azul); }
.conversion__datos .icono { width: 22px; height: 22px; color: var(--acento); margin-top: 0.15em; }
.conversion__datos a { color: var(--blanco); font-weight: 500; }
.conversion__form { background: var(--blanco); color: var(--tinta); border-radius: var(--radio-grande); padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: var(--sombra-alta); }
.conversion__form h3 { margin-bottom: 0.25em; }
.conversion__form > p { color: var(--gris-600); font-size: var(--texto-base); margin-bottom: 1.25rem; }
.seccion--banda .conversion__form a:not(.boton) { color: var(--azul-600); }
@media (max-width: 899px) { .conversion { grid-template-columns: minmax(0, 1fr); } }

/* 9. PÁGINAS INTERIORES --------------------------------------------------- */
.hero-interior { position: relative; background: var(--azul-900); color: var(--blanco); padding-block: clamp(3rem, 6vw, 5.5rem); overflow: hidden; isolation: isolate; }
.hero-interior h1 { color: var(--blanco); max-width: 20ch; margin-bottom: 0.6em; }
.hero-interior__bajada { font-size: var(--texto-bajada); color: var(--texto-sobre-azul); max-width: 58ch; margin: 0; }
.hero-interior__bajada strong { color: var(--blanco); }
.hero-interior .acciones { margin-top: 1.75rem; }
.hero-interior--con-foto .hero-interior__foto { position: absolute; inset: 0; z-index: -2; }
.hero-interior--con-foto .hero-interior__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero-interior--con-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(3 31 69 / 0.95) 0%, rgb(3 31 69 / 0.85) 45%, rgb(3 31 69 / 0.55) 100%); }
.migas { font-size: var(--texto-chico); color: var(--texto-sobre-azul); margin-bottom: 1.25rem; }
.migas a { color: var(--texto-sobre-azul); }
.migas span[aria-current] { color: var(--blanco); }
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.dos-columnas--invertido .dos-columnas__media { order: -1; }
.dos-columnas__media { border-radius: var(--radio-grande); overflow: hidden; position: relative; aspect-ratio: 4 / 3; box-shadow: var(--sombra-alta); background: var(--gris-100); }
.dos-columnas__media--vertical { aspect-ratio: 4 / 5; max-width: 520px; }
.dos-columnas__media img { width: 100%; height: 100%; object-fit: cover; }
.dos-columnas__texto p { color: var(--gris-600); }
.dos-columnas__texto p strong { color: var(--tinta); }
.seccion--oscura .dos-columnas__texto p { color: var(--texto-sobre-azul); }
.seccion--oscura .dos-columnas__texto p strong { color: var(--blanco); }
@media (max-width: 899px) { .dos-columnas { grid-template-columns: minmax(0, 1fr); } .dos-columnas--invertido .dos-columnas__media { order: 0; } .dos-columnas__media--vertical { max-width: none; aspect-ratio: 4 / 3; } }

/* Bloque de servicio (servicios.html) */
.servicio-detalle { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-block: var(--espacio-bloque); border-top: 1px solid var(--gris-200); scroll-margin-top: calc(var(--alto-cabecera) + 1rem); }
.servicio-detalle:first-of-type { border-top: 0; padding-top: 0; }
.servicio-detalle__lateral { display: grid; gap: 1rem; position: sticky; top: calc(var(--alto-cabecera) + 1.5rem); }
.servicio-detalle__foto { border-radius: var(--radio-grande); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--sombra); position: relative; }
.servicio-detalle__foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha { background: var(--gris-050); border: 1px solid var(--gris-200); border-radius: var(--radio-grande); padding: 1.25rem 1.4rem; }
.ficha h4 { font-size: 0.9375rem; color: var(--gris-700); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.6em; }
.ficha ul { padding-left: 1.1rem; margin: 0; color: var(--gris-700); font-size: var(--texto-base); }
.ficha li + li { margin-top: 0.3rem; }
.servicio-detalle h2 { display: flex; align-items: center; gap: 0.9rem; }
.servicio-detalle h2 .icono-tile { margin: 0; flex: none; }
.bloques-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.bloque-control { padding: 1.1rem 1.25rem; border-radius: var(--radio); background: var(--azul-050); border: 1px solid var(--azul-100); }
.bloque-control h3 { font-size: 1rem; margin-bottom: 0.35em; }
.bloque-control p, .bloque-control ul { font-size: var(--texto-base); color: var(--gris-700); margin: 0; }
.bloque-control ul { padding-left: 1.1rem; }
@media (max-width: 899px) { .servicio-detalle { grid-template-columns: minmax(0, 1fr); } .servicio-detalle__lateral { position: static; } }
@media (max-width: 599px) { .bloques-control { grid-template-columns: minmax(0, 1fr); } }

/* Índice de anclas dentro de una página */
.indice { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.indice a { display: inline-block; padding: 0.45rem 0.9rem; border-radius: 999px; background: rgb(255 255 255 / 0.12); color: var(--blanco); text-decoration: none; font-size: var(--texto-chico); font-weight: 500; border: 1px solid rgb(255 255 255 / 0.2); }
.indice a:hover { background: var(--blanco); color: var(--azul); }

/* Acordeón nativo */
.acordeon { border-top: 1px solid var(--gris-200); }
.acordeon details { border-bottom: 1px solid var(--gris-200); }
.acordeon summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0.25rem; font-weight: 600; color: var(--azul); font-size: 1.0625rem; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary .icono { width: 20px; height: 20px; transition: transform var(--transicion); flex: none; }
.acordeon details[open] summary .icono { transform: rotate(180deg); }
.acordeon details[open] summary { background: var(--gris-050); margin-inline: -0.5rem; padding-inline: 0.75rem; border-radius: var(--radio) var(--radio) 0 0; }
.acordeon__cuerpo { padding: 0.25rem 0.25rem 1.25rem; color: var(--gris-700); }
.acordeon__cuerpo p:last-child { margin-bottom: 0; }

/* Pasos numerados (cobertura, proceso) */
.pasos { list-style: none; padding: 0; margin: 0; counter-reset: paso; display: grid; gap: 1rem; }
.paso { counter-increment: paso; display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; padding: 1.1rem 1.25rem; background: var(--blanco); border: 1px solid var(--gris-200); border-radius: var(--radio-grande); }
.paso::before { content: counter(paso); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: var(--blanco); font-weight: 700; font-variant-numeric: tabular-nums; }
.paso h3 { font-size: 1.0625rem; margin-bottom: 0.25em; }
.paso p { color: var(--gris-600); font-size: var(--texto-base); margin: 0; }

/* Mapa de Chile (SVG) en cobertura */
.cobertura-mapa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.mapa-chile { width: 100%; max-width: 300px; margin-inline: auto; }
.mapa-chile path { fill: var(--azul-100); stroke: var(--azul); stroke-width: 1.2; }
.mapa-chile .mapa-chile__base { fill: var(--acento); stroke: var(--azul-950); }
.mapa-chile text { font: 600 12px var(--fuente); fill: var(--azul); }
@media (max-width: 767px) { .cobertura-mapa { grid-template-columns: minmax(0, 1fr); } }

/* Casos de clientes */
.caso { scroll-margin-top: calc(var(--alto-cabecera) + 1rem); }
.caso + .caso { margin-top: var(--espacio-seccion); }
.caso__cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.caso__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.dato { padding: 1rem 1.1rem; background: var(--gris-050); border: 1px solid var(--gris-200); border-radius: var(--radio); }
.dato__etiqueta { display: block; font-size: 0.8125rem; color: var(--gris-600); margin-bottom: 0.2rem; }
.dato__valor { font-weight: 600; color: var(--azul); }
.caso__galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.caso__galeria figure { margin: 0; }
.caso__galeria img { border-radius: var(--radio-grande); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
figcaption { font-size: 0.8125rem; color: var(--gris-500); margin-top: 0.5rem; }
.seccion--oscura figcaption { color: var(--texto-sobre-azul); }
@media (max-width: 699px) { .caso__datos, .caso__galeria { grid-template-columns: minmax(0, 1fr); } }

/* Noticias */
.noticias-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.noticia-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.noticia-card__foto { aspect-ratio: 16 / 10; overflow: hidden; background: var(--gris-100); }
.noticia-card__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.noticia-card:hover .noticia-card__foto img { transform: scale(1.03); }
.noticia-card__cuerpo { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.noticia-card time, .articulo time { font-size: 0.8125rem; color: var(--gris-500); }
.noticia-card h3 { font-size: 1.125rem; }
.noticia-card h3 a { color: inherit; text-decoration: none; }
.noticia-card h3 a::after { content: ""; position: absolute; inset: 0; }
.noticia-card p { flex: 1; }
.noticia-card .enlace-flecha { position: relative; z-index: 1; font-size: var(--texto-chico); }
@media (max-width: 899px) { .noticias-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .noticias-grilla { grid-template-columns: minmax(0, 1fr); } }
.articulo { max-width: 760px; margin-inline: auto; }
.articulo__portada { border-radius: var(--radio-grande); overflow: hidden; aspect-ratio: 16 / 9; margin: 0 0 var(--espacio-bloque); box-shadow: var(--sombra); }
.articulo__portada img { width: 100%; height: 100%; object-fit: cover; }
.articulo p { color: var(--gris-700); font-size: var(--texto-bajada); }
.articulo h2 { font-size: var(--titulo-3); margin-top: 1.5em; }
.articulo blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 1px solid var(--azul); background: var(--azul-050); border-radius: 0 var(--radio) var(--radio) 0; color: var(--azul); font-weight: 500; }
.articulo__pie { margin-top: var(--espacio-bloque); padding-top: 1.5rem; border-top: 1px solid var(--gris-200); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }

/* Placeholder de imagen faltante (no se rellena con fotos de banco) */
.placeholder { display: grid; place-items: center; text-align: center; gap: 0.5rem; padding: 1.5rem; background: var(--gris-050); border: 2px dashed var(--gris-400); border-radius: var(--radio-grande); color: var(--gris-600); font-size: var(--texto-chico); aspect-ratio: 4 / 3; }
.placeholder .icono { width: 32px; height: 32px; color: var(--gris-500); }
.placeholder--ancho { aspect-ratio: 16 / 9; }
.placeholder--vertical { aspect-ratio: 4 / 5; }
.placeholder--pantalla { aspect-ratio: 16 / 10; }

/* Texto legal (privacidad) */
.legal h2 { font-size: var(--titulo-3); margin-top: 2em; }
.legal h3 { font-size: 1.0625rem; margin-top: 1.5em; }
.legal p, .legal li { color: var(--gris-700); }
.legal table { margin: 1rem 0 1.5rem; }
.legal .resumen { background: var(--azul-050); border: 1px solid var(--azul-100); border-radius: var(--radio-grande); padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
.legal .resumen p { margin: 0; color: var(--azul); }

/* Aviso destacado */
.aviso { display: grid; grid-template-columns: 24px 1fr; gap: 0.75rem; padding: 1rem 1.1rem; border-radius: var(--radio); background: var(--azul-050); border: 1px solid var(--azul-100); color: var(--gris-700); font-size: var(--texto-base); }
.aviso .icono { width: 24px; height: 24px; color: var(--azul); }
.aviso--completar { background: #FDF6E6; border-color: #EBCB8B; }
.aviso--completar .icono { color: var(--acento-hover); }

/* 10. FORMULARIOS --------------------------------------------------------- */
.formulario { display: grid; gap: 1.1rem; }
.form-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo { display: grid; gap: 0.35rem; }
.campo label, .campo__leyenda { font-weight: 500; font-size: 0.9375rem; color: var(--gris-700); }
.campo label .obligatorio { color: var(--error); font-weight: 600; }
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; font: inherit; font-size: 1rem; color: var(--tinta); background: var(--blanco); border: 1px solid var(--gris-400); border-radius: var(--radio); transition: border-color var(--transicion), box-shadow var(--transicion); }
.campo textarea { min-height: 128px; resize: vertical; }
.campo { min-width: 0; }
.campo input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; } /* Safari iOS le da ancho propio si no se anula la apariencia nativa */
.campo select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2306336F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.5rem; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--gris-500); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--foco-sobre-claro); outline-offset: 1px; border-color: var(--azul-600); }
.campo input[type="file"] { font: inherit; font-size: 0.9375rem; color: var(--gris-700); padding: 0.6rem; border: 1px dashed var(--gris-400); border-radius: var(--radio); background: var(--gris-050); width: 100%; }
.campo input[type="file"]::file-selector-button { font: inherit; font-weight: 600; color: var(--azul); background: var(--blanco); border: 1px solid var(--azul); border-radius: 6px; padding: 0.45rem 0.9rem; margin-right: 0.75rem; cursor: pointer; }
.campo__ayuda { font-size: 0.8125rem; color: var(--gris-600); }
.campo__error { display: none; font-size: 0.8125rem; color: var(--error); font-weight: 500; align-items: flex-start; gap: 0.35rem; }
.campo__error .icono { width: 16px; height: 16px; margin-top: 0.1em; }
.campo--invalido .campo__error { display: flex; }
.campo--invalido input, .campo--invalido select, .campo--invalido textarea { border-color: var(--error); box-shadow: 0 0 0 3px rgb(180 35 24 / 0.12); }
.campo--casilla { grid-template-columns: 22px 1fr; gap: 0.7rem; align-items: start; }
.campo--casilla input { width: 22px; height: 22px; margin: 0.15rem 0 0; }
.campo--casilla label { font-weight: 400; font-size: 0.9375rem; color: var(--gris-700); }
.campo--casilla .campo__error { grid-column: 1 / -1; }
.campo--radio { gap: 0.5rem; }
.opciones { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.opciones label { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 400; cursor: pointer; }
.opciones input { width: 20px; height: 20px; margin: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
.form-nota { font-size: 0.8125rem; color: var(--gris-600); }
.form-mensaje { display: none; padding: 1rem 1.1rem; border-radius: var(--radio); font-size: var(--texto-base); }
.form-mensaje--error { display: block; background: #FBEDEB; border: 1px solid #E5B2AD; color: var(--error); }
.form-mensaje--exito { display: block; background: #E8F4EC; border: 1px solid #B7DCC3; color: var(--exito); }
.form-mensaje--aviso { display: block; background: #FDF6E6; border: 1px solid #EBCB8B; color: var(--tinta); }
.form-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; } /* aire entre la casilla de consentimiento y el botón */
.form-acciones .boton { min-width: 220px; }
@media (max-width: 599px) { .form-grilla { grid-template-columns: minmax(0, 1fr); } .form-acciones .boton { width: 100%; } }

/* Datos de contacto en contacto.html */
.contacto-grilla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contacto-datos { display: grid; gap: 1rem; position: sticky; top: calc(var(--alto-cabecera) + 1.5rem); }
.contacto-dato { display: grid; grid-template-columns: 44px 1fr; gap: 0.9rem; align-items: start; padding: 1.1rem 1.25rem; background: var(--blanco); border: 1px solid var(--gris-200); border-radius: var(--radio-grande); }
.contacto-dato .icono-tile { margin: 0; width: 44px; height: 44px; border-radius: 10px; }
.contacto-dato .icono-tile .icono { width: 22px; height: 22px; }
.contacto-dato h3 { font-size: 0.9375rem; color: var(--gris-600); font-weight: 500; margin-bottom: 0.2em; }
.contacto-dato p { margin: 0; font-weight: 500; }
.contacto-dato a { text-decoration: none; color: var(--azul); }
.contacto-dato a:hover { text-decoration: underline; }
.mapa { border-radius: var(--radio-grande); overflow: hidden; border: 1px solid var(--gris-200); box-shadow: var(--sombra); aspect-ratio: 16 / 9; background: var(--gris-100); }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 899px) { .contacto-grilla { grid-template-columns: minmax(0, 1fr); } .contacto-datos { position: static; } }

/* 11. PIE Y WHATSAPP ------------------------------------------------------ */
.pie { background: var(--azul-950); color: var(--texto-sobre-azul); padding-top: var(--espacio-seccion); font-size: var(--texto-base); }
.pie__grilla { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-bottom: var(--espacio-bloque); }
.pie__titulo { font-size: 0.875rem; color: var(--blanco); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; font-weight: 600; }
.pie__logo { width: 120px; height: auto; filter: brightness(0) invert(1); margin-bottom: 1rem; }  /* el PNG azul se vuelve blanco */
.pie__razon { color: var(--blanco); font-weight: 500; }
.pie__os10 { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; margin-top: 1rem; }
.pie__os10 img { width: 48px; height: auto; flex: none; background: var(--blanco); border-radius: 50%; padding: 2px; }
.pie__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.pie__lista a { color: var(--texto-sobre-azul); text-decoration: none; }
.pie__lista a:hover { color: var(--blanco); text-decoration: underline; }
.pie__lista--contacto li { display: grid; grid-template-columns: 18px 1fr; gap: 0.6rem; align-items: start; }
.pie__lista--contacto .icono { color: var(--acento); margin-top: 0.2em; }
.pie__lista--doble { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.pie__columna--acciones .boton { width: 100%; margin-top: 0.75rem; }
.pie__columna--acciones p { color: var(--texto-sobre-azul); font-size: 0.9375rem; }
.pie__legal { border-top: 1px solid rgb(255 255 255 / 0.12); padding: 1.25rem 0 4.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; font-size: 0.8125rem; } /* el relleno inferior deja sitio al botón flotante de WhatsApp */
.pie__legal p { margin: 0; }
.pie__legal a { color: var(--texto-sobre-azul); }
.pie__legal a:hover { color: var(--blanco); }
@media (max-width: 1023px) { .pie__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .pie__grilla { grid-template-columns: minmax(0, 1fr); } .pie__lista--doble { grid-template-columns: minmax(0, 1fr); } }
/* Botón flotante de WhatsApp (todas las páginas) */
.whatsapp-flotante { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 56px; padding: 0 1.25rem 0 1rem; border-radius: 999px; background: var(--acento); color: var(--texto-sobre-acento); border: 1px solid var(--acento-hover); font-weight: 700; text-decoration: none; box-shadow: 0 14px 32px -10px rgb(2 21 47 / 0.55); transition: transform var(--transicion), background-color var(--transicion); }
.whatsapp-flotante:hover { background: var(--acento-hover); color: var(--texto-sobre-acento); transform: translateY(-2px); }
.whatsapp-flotante .icono { width: 26px; height: 26px; stroke-width: 1.9; }
.whatsapp-flotante:focus-visible { outline: 3px solid var(--azul-950); outline-offset: 3px; }
@media (max-width: 599px) { .whatsapp-flotante { right: 1rem; bottom: 1rem; width: 56px; min-height: 56px; padding: 0; justify-content: center; } .whatsapp-flotante__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* 12. AJUSTES FINALES ----------------------------------------------------- */
@media (max-width: 599px) {
  .acciones .boton { width: 100%; }
  .hero h1 { max-width: none; }
}
@media print {
  .cabecera, .whatsapp-flotante, .pie__columna--acciones, .separador { display: none !important; }
  .hero__velo { display: none; }
  body { color: #000; }
}

/* 13. COMPLEMENTOS DE LAS PÁGINAS INTERIORES ------------------------------
   Reglas consolidadas desde _trabajo/css-extra/*.css (una sola vez las compartidas). */
/* Hero interior: chip sobre el h1, índice de anclas bajo los botones, foco visible sobre azul */
.hero-interior .chip { margin-bottom: 1rem; }
.hero-interior .indice { margin-top: 1.75rem; }
.hero-interior :focus-visible { outline-color: var(--foco-sobre-oscuro); }
.hero-interior--cobertura .hero-interior__foto img { object-position: 50% 65%; }
.hero-interior--articulo h1 { max-width: 30ch; font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); }
.hero-interior--articulo .hero-interior__bajada { max-width: 64ch; }
/* Figuras sin el margen por defecto del navegador */
.figura, .figura-trabaja, .servicio-detalle__figura, .articulo__figura, figure.dos-columnas__media, figure.pilares__foto { margin: 0; }
/* Banda de conversión sin formulario: botones centrados y línea de contacto */
.acciones--centradas { justify-content: center; }
.seccion--banda .seccion__pie { margin-top: 1.5rem; font-size: var(--texto-chico); color: var(--texto-sobre-azul); }
.seccion .aviso { margin-bottom: var(--espacio-bloque); }
/* Servicios: lateral con figura y pie debajo, variante vertical y encuadres del mapa de fotos */
.servicio-detalle__figura { display: grid; gap: 0.6rem; }
.servicio-detalle__figura figcaption { margin: 0; }
.servicio-detalle__foto--vertical { aspect-ratio: 3 / 4; max-width: 480px; }
.servicio-detalle__foto--pie img { object-position: 50% 100%; }
.servicio-detalle__foto--evento img { object-position: 50% 40%; }
.servicio-detalle__foto--ronda img { object-position: 50% 85%; }
.servicio-detalle__lateral > p { margin: 0; }
.servicio-detalle h3 { margin-top: 1.5rem; }
h3 + .bloques-control { margin-top: 0.75rem; }
.bloque-control h4 { font-size: 1rem; margin-bottom: 0.35em; }
.bloque-control--ancho { grid-column: 1 / -1; }
.servicio-detalle .chip { margin-bottom: 0.9rem; }
.servicio-detalle .aviso { margin-bottom: 1.5rem; }
.servicio-detalle__mas { margin-top: 1.25rem; }
.servicio-detalle .panel__cumplimiento { margin-top: 0; margin-bottom: 1.5rem; }
@media (max-width: 899px) {
  .servicio-detalle__foto--vertical { max-width: none; aspect-ratio: 4 / 5; }
  .servicio-detalle__foto--vertical img { object-position: 50% 18%; } /* encuadre alto: la cara del guardia siempre dentro del recorte */
}
/* Tecnología: tiles sobre el título de cada herramienta y proceso por proyecto */
.dos-columnas__texto .icono-tile { margin-bottom: 0.9rem; }
.dos-columnas__texto h4 { margin-top: 1.25rem; }
.proceso { margin-top: var(--espacio-bloque); }
.proceso > .texto-medida { color: var(--gris-600); margin-bottom: 1.25rem; }
.paso h4 { font-size: 1.0625rem; margin-bottom: 0.25em; }
/* Cobertura: mapa con halo sobre Talca, pasos con ficha lateral pegajosa, foto vertical del Paso Pehuenche */
.cobertura-mapa__figura { text-align: center; }
.cobertura-mapa__figura figcaption { max-width: 300px; margin-inline: auto; margin-top: 1rem; }
.mapa-chile__halo { fill: none; stroke: var(--acento); stroke-width: 1.5; stroke-dasharray: 4 4; }
@media (max-width: 767px) { .mapa-chile { max-width: 160px; overflow: visible; } .mapa-chile text { font-size: 22px; } }
.puesta-grilla { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.puesta-grilla__lateral { position: sticky; top: calc(var(--alto-cabecera) + 1.5rem); }
.ficha--evaluar h3 { font-size: 0.9375rem; color: var(--gris-700); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75em; }
.ficha--evaluar ul { margin-bottom: 1.25rem; }
.ficha--evaluar .boton { width: 100%; }
.ficha--evaluar .boton + .boton { margin-top: 0.75rem; }
.ficha--evaluar .ficha__nota { margin: 1rem 0 0; font-size: var(--texto-chico); color: var(--gris-600); }
@media (max-width: 899px) { .puesta-grilla { grid-template-columns: minmax(0, 1fr); } .puesta-grilla__lateral { position: static; } }
.dos-columnas__media--pehuenche img { object-position: 50% 75%; }
@media (max-width: 899px) { .dos-columnas__media--pehuenche { aspect-ratio: 1 / 1; } .dos-columnas__media--pehuenche img { object-position: 50% 80%; } }
/* Clientes: casos con título propio, cinco datos, logos con pie y plantillas vacías */
.caso + .caso { margin-top: var(--espacio-bloque); padding-top: var(--espacio-seccion); border-top: 1px solid var(--gris-200); }
.caso__titulo { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); letter-spacing: -0.01em; }
.caso__resumen { font-size: var(--texto-bajada); color: var(--gris-600); }
.caso__relato h4 { margin-top: 0.5rem; margin-bottom: 0.75rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gris-700); }
.caso__relato .lista-check { margin-bottom: 1.25rem; }
.caso__relato .lista-check strong { color: var(--azul); }
.caso__relato p { color: var(--gris-700); }
.caso__enlaces { margin-top: 1.25rem; gap: 0.75rem 1.75rem; }
@media (min-width: 1000px) { .caso .caso__datos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 999px) { .caso .caso__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.articulo .caso__datos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 699px) { .articulo .caso__datos { grid-template-columns: minmax(0, 1fr); } }
.dato__valor .nota-completar { font-size: 0.85em; font-weight: 500; }
.caso__foto--chancho { object-position: 50% 40%; }
.caso__foto--guardia { object-position: 50% 45%; }
@media (max-width: 699px) { .caso__foto--chancho { aspect-ratio: 1 / 1; object-position: 50% 60%; } }
.logos--con-pie { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: start; }
.cliente { display: grid; gap: 0.6rem; }
.cliente .logo-card { width: 100%; }
.logos div.logo-card:hover { transform: none; box-shadow: none; border-color: var(--gris-200); }
.cliente__pie { margin: 0; text-align: center; font-size: 0.8125rem; line-height: 1.35; color: var(--gris-600); }
.cliente__pie strong { color: var(--azul); }
.clientes__grupo[id] { scroll-margin-top: calc(var(--alto-cabecera) + 1rem); }
.caso--plantilla { padding: clamp(1.25rem, 3vw, 2rem); border: 2px dashed var(--gris-400); border-radius: var(--radio-grande); background: var(--gris-050); }
.caso--plantilla + .caso--plantilla { margin-top: var(--espacio-bloque); padding-top: clamp(1.25rem, 3vw, 2rem); border-top: 2px dashed var(--gris-400); }
.caso--plantilla .dato, .caso--plantilla .placeholder { background: var(--blanco); }
.caso--plantilla .chip .nota-completar { font-size: 0.8125rem; }
/* Nosotros: foto vertical de "Quiénes somos" */
body[data-pagina="nosotros"] #quienes-somos .dos-columnas__media img { object-position: 50% 18%; } /* retrato: rostro arriba */
/* Trabaja con nosotros y contacto: encuadre de la foto, leyendas de grupos de opciones, notas en tarjetas de datos */
#que-ofrecemos .dos-columnas__media img, .figura-trabaja img { object-position: 50% 90%; }
#trabaja-con-nosotros .dos-columnas__media img { object-position: 50% 12%; }
@media (max-width: 899px) { #que-ofrecemos .dos-columnas__media img, .figura-trabaja img { object-position: 50% 30%; } }
.campo--radio legend { margin-bottom: 0.5rem; }
.campo__leyenda .obligatorio { color: var(--error); font-weight: 600; }
#postular a[href^="mailto:"], #correos a[href^="mailto:"], .contacto-dato p { overflow-wrap: anywhere; }
.contacto-datos > h2 { font-size: var(--titulo-3); margin: 0 0 0.25rem; }
.contacto-dato .contacto-dato__nota { font-weight: 400; font-size: var(--texto-chico); color: var(--gris-600); line-height: 1.45; margin-top: 0.35rem; }
.contacto-dato .contacto-dato__nota a { color: var(--azul-600); text-decoration: underline; }
#cotizar .campo { align-content: start; }
.pasos .paso > div { min-width: 0; }
.pasos .paso p { overflow-wrap: anywhere; }
/* Privacidad: márgenes entre bloques del texto legal y tabla de plazos */
.legal .resumen + section > h2 { margin-top: 0; }
.legal .ficha { margin: 0 0 1.25em; }
.legal .pasos { margin: 0 0 1.5em; }
.legal .paso h4 { margin-bottom: 0.25em; }
.legal .aviso { margin-top: 1.25em; }
.legal th[scope="row"] { white-space: nowrap; }
@media (max-width: 599px) { .legal th[scope="row"] { white-space: normal; } }
/* Noticias: encuadres, fecha con ícono, tarjeta vacía del próximo artículo, metadatos del artículo */
.noticia-card__foto--chancho img { object-position: 50% 40%; }
.noticia-card__foto--pehuenche img { object-position: 50% 58%; }
.noticia-card time { display: inline-flex; align-items: center; gap: 0.4rem; }
.noticia-card time .icono { width: 16px; height: 16px; }
.noticia-card--plantilla { border: 2px dashed var(--gris-400); background: var(--gris-050); box-shadow: none; }
.noticia-card--plantilla:hover { transform: none; box-shadow: none; border-color: var(--gris-400); }
.noticia-card--plantilla .noticia-card__foto .placeholder { aspect-ratio: auto; height: 100%; border: 0; border-bottom: 2px dashed var(--gris-400); border-radius: 0; }
.noticia-card--plantilla h3 { color: var(--gris-700); }
.articulo .articulo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-bottom: 1.25rem; font-size: 0.8125rem; color: var(--gris-500); }
.articulo__meta time, .articulo__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.articulo__meta .icono { width: 16px; height: 16px; color: var(--azul); }
.articulo__figura { margin-bottom: var(--espacio-bloque); }
.articulo__figura .articulo__portada { margin-bottom: 0; }
.articulo__portada--chancho img { object-position: 50% 37%; }
.articulo__portada--pehuenche img { object-position: 50% 58%; }
.articulo .caso__datos { margin: 0 0 var(--espacio-bloque); }
.articulo__cuerpo p strong { color: var(--tinta); }
.articulo blockquote p { color: inherit; font-size: var(--texto-bajada); margin: 0; }
.articulo__pie .enlace-flecha { font-size: var(--texto-base); }
@media (max-width: 599px) { .articulo__portada { aspect-ratio: 4 / 3; } }

/* 14. CAPTURAS DE PANTALLA ----------------------------- */
.figura-pantalla { margin: 0; }
.dos-columnas--apilado { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; } /* capturas de pantalla anchas: imagen arriba a todo el ancho, texto abajo */
.dos-columnas--apilado .figura-pantalla { order: -1; }
.dos-columnas--apilado .dos-columnas__texto { max-width: 72ch; }
.figura-pantalla figcaption a { white-space: nowrap; }
.figura-pantalla img { width: 100%; height: auto; border-radius: var(--radio-grande); box-shadow: var(--sombra); }

/* 15. AVISO DE COOKIES (solo se muestra cuando la analítica está configurada en js/main.js) ---- */
.aviso-cookies { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 80; max-width: 460px; padding: 1rem 1.25rem; background: var(--azul-950); color: var(--texto-sobre-azul); border-radius: var(--radio-grande); box-shadow: var(--sombra-alta); font-size: 0.9375rem; line-height: 1.5; }
.aviso-cookies p { margin: 0 0 0.85rem; }
.aviso-cookies a { color: var(--blanco); }
.aviso-cookies__acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.aviso-cookies .boton { min-height: 44px; padding-inline: 1.1rem; }
body.con-aviso-cookies .whatsapp-flotante { bottom: calc(1rem + var(--alto-aviso-cookies, 0px)); } /* en teléfonos el botón sube para no tapar el aviso */
@media (min-width: 600px) { .aviso-cookies { left: 1.25rem; right: auto; } body.con-aviso-cookies .whatsapp-flotante { bottom: 1.25rem; } }
.pie__cookies { background: none; border: 0; padding: 0; font: inherit; color: var(--texto-sobre-azul); text-decoration: underline; cursor: pointer; }
.pie__cookies:hover { color: var(--blanco); }