/*
Theme Name: Seguridad Atlantis
Theme URI: https://seguridadatlantis.com.co
Description: Tema hijo de Astra para el sitio de Seguridad Atlantis Ltda. Contiene el sistema de diseno aprobado en el mockup V4.
Author: Solext SAS
Author URI: https://solext.com.co
Template: astra
Version: 5.1.0
Text Domain: atlantis-child
*/

/* ============================================================
   SEGURIDAD ATLANTIS — SISTEMA DE DISENO
   ------------------------------------------------------------
   Este archivo es la base visual de TODO el sitio.
   Se organiza en bloques numerados. Cada bloque dice que hace
   y por que existe, para que puedas ubicarlo despues.

   ORDEN DEL ARCHIVO:
     1. Variables de marca (colores, sombras, medidas)
     2. Tipografias base
     3. Contenedor central
     4. Botones
     5. Utilidades de seccion (etiquetas, encabezados)
     6. Barra superior (topbar)
     7. Header (logo, menu, boton WhatsApp)
     8. Menu movil
     9. Boton flotante de WhatsApp
    10. Footer
    11. Neutralizar el relleno de Elementor en header y footer
    12. Franja de certificaciones (Inicio)
    13. Fotografias del sitio (variables reutilizables)
    14. Hero de Inicio
    15. Franja de confianza
    16. Tarjetas de servicios
    17. Por que elegirnos
    18. Banner CTA final
    19. Ajustes responsive de la pagina de Inicio
    20. Banner de paginas internas
    21. Fila de dos columnas con foto
    22. Tarjetas de valor
    23. Rejilla de servicios en dos filas (4 + 3)
    24. Cajas de informacion
    25. Tarjetas de documento y contacto
    26. Sellos de certificacion sobre fondo claro
    27. Variantes para Sobre Nosotros
    28. Valores, principios y compromiso (Sobre Nosotros)
    29. Sello de Icontec en el header
    30. Formularios (Contact Form 7)
    31. Paginas de documentos legales
    32. Marca de agua del logo
    33. Iconos de redes sociales
    34. Dos sellos en el header
    35. Animaciones
    36. Animacion de entrada en paginas internas
    37. Trabaja con nosotros
    38. Boton "volver arriba"
    39. Eventos — listado y entradas
    40. Entrada individual de evento

   Los componentes de las demas paginas se iran agregando en
   bloques nuevos numerados del 24 en adelante.
   ============================================================ */


/* ============================================================
   1. VARIABLES DE MARCA
   ------------------------------------------------------------
   Aqui viven TODOS los colores y medidas del sitio.
   Si el cliente pide cambiar un color, se cambia UNA sola vez
   aqui y se actualiza en las 7 paginas automaticamente.
   Nunca escribas un color suelto en otro bloque: usa var(--...).
   ============================================================ */
:root {
	/* Colores principales de la marca */
	--atl-navy:        #00135D; /* azul marino: titulos y fondos oscuros */
	--atl-navy-2:      #061A6E; /* azul marino claro: barra superior */
	--atl-blue:        #0083D7; /* azul de acento: botones principales */
	--atl-blue-dark:   #006BAF; /* azul de acento oscuro: hover de botones */

	/* Colores de texto y fondo */
	--atl-ink:         #1B2430; /* texto principal */
	--atl-muted:       #5B6478; /* texto secundario / parrafos */
	--atl-bg:          #F4F6FA; /* fondo gris claro de las secciones */
	--atl-border:      #E1E6EE; /* lineas y bordes suaves */
	--atl-white:       #FFFFFF;

	/* Colores de WhatsApp (botones de contacto) */
	--atl-whatsapp:      #25D366;
	--atl-whatsapp-dark: #1DA851;

	/* Color de apoyo (avisos, destacados) */
	--atl-amber:       #E8A93B;

	/* Medidas repetidas en todo el sitio */
	--atl-radius:      14px;                              /* redondeo de tarjetas */
	--atl-radius-sm:   9px;                               /* redondeo de botones */
	--atl-shadow:      0 10px 30px rgba(0, 19, 93, 0.10); /* sombra estandar */
	--atl-ancho:       1180px;                            /* ancho maximo del contenido */

	/* Alturas de la cabecera. Se usan en el header pegajoso del
	   bloque 7; si cambias una, el header se reajusta solo. */
	--atl-topbar-h:    38px; /* alto de la barra azul superior */
	--atl-header-h:    96px; /* alto del header blanco */
}


/* ============================================================
   2. TIPOGRAFIAS BASE
   ------------------------------------------------------------
   Montserrat para titulos, Inter para todo lo demas.
   Las fuentes se cargan desde functions.php.
   ============================================================ */

body {
	font-family: 'Inter', sans-serif;
	color: var(--atl-ink);
	background: var(--atl-bg);
	-webkit-font-smoothing: antialiased; /* letras mas nitidas en Mac */
}

/* Titulos: siempre Montserrat y siempre azul marino,
   salvo que un bloque posterior diga lo contrario. */
h1, h2, h3, h4,
.entry-content h1, .entry-content h2,
.entry-content h3, .entry-content h4 {
	font-family: 'Montserrat', sans-serif;
	color: var(--atl-navy);
}

/* Parrafos: color gris de lectura y altura de linea comoda. */
p {
	line-height: 1.65;
	color: var(--atl-muted);
}

/* Los enlaces heredan el color del texto que los rodea.
   El color propio se define en cada componente (menu, footer, etc.). */
a {
	text-decoration: none;
}


/* ============================================================
   3. CONTENEDOR CENTRAL
   ------------------------------------------------------------
   Todo el contenido del sitio se alinea a un mismo ancho maximo
   (1180px) con 24px de aire a los lados en moviles.
   Esta clase se aplicara a los contenedores de Elementor.
   ============================================================ */
.atl-container {
	max-width: var(--atl-ancho);
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}


/* ============================================================
   4. BOTONES
   ------------------------------------------------------------
   Cuatro variantes tomadas del mockup. Se usan poniendo dos
   clases juntas, por ejemplo: class="atl-btn atl-btn-primary"
     - primary  : azul, accion principal
     - whatsapp : verde, contacto directo
     - outline  : borde blanco, solo sobre fondos oscuros
     - navy     : azul marino, acciones secundarias
   ============================================================ */

/* Astra subraya todos los enlaces del contenido. Esta regla lo
   impide en nuestros botones y en los enlaces de las tarjetas,
   donde el subrayado se ve como un error de maquetacion. */
.atl-btn,
.atl-btn:hover,
.atl-more,
.atl-more:hover,
.atl-nav a,
.atl-header-cta,
.atl-footer a,
.atl-topbar a {
	text-decoration: none !important;
}

/* Base comun a todos los botones: forma, tamano y animacion. */
.atl-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: var(--atl-radius-sm);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1;
	border: none;
	cursor: pointer;
	transition: all .15s;
}

/* Boton azul: la accion principal de cada pantalla. */
.atl-btn-primary {
	background: var(--atl-blue);
	color: #fff;
	box-shadow: 0 8px 20px rgba(0, 131, 215, .30);
}
.atl-btn-primary:hover {
	background: var(--atl-blue-dark);
	color: #fff;
	transform: translateY(-1px); /* leve elevacion al pasar el mouse */
}

/* Boton verde de WhatsApp: contacto comercial inmediato. */
.atl-btn-whatsapp {
	background: var(--atl-whatsapp);
	color: #fff;
	box-shadow: 0 8px 20px rgba(37, 211, 102, .30);
}
.atl-btn-whatsapp:hover {
	background: var(--atl-whatsapp-dark);
	color: #fff;
	transform: translateY(-1px);
}

/* Boton de contorno: SOLO sobre fondos oscuros (hero, banners CTA).
   Sobre fondo blanco se vuelve invisible. */
.atl-btn-outline {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, .55);
}
.atl-btn-outline:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

/* Boton azul marino: acciones secundarias sobre fondo claro. */
.atl-btn-navy {
	background: var(--atl-navy);
	color: #fff;
}
.atl-btn-navy:hover {
	background: var(--atl-navy-2);
	color: #fff;
}


/* ============================================================
   5. UTILIDADES DE SECCION
   ------------------------------------------------------------
   Piezas pequenas que se repiten al inicio de casi todas las
   secciones del mockup: la etiqueta pequena en mayusculas
   ("NUESTROS SERVICIOS") y el bloque de encabezado centrado.
   ============================================================ */

/* Etiqueta pequena azul sobre fondo claro.
   Va justo encima del titulo de seccion. */
.atl-eyebrow {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--atl-blue);
	margin-bottom: 10px;
}

/* Version clara de la etiqueta, para usar sobre fondos oscuros. */
.atl-eyebrow-claro {
	color: #7EC6F2;
}

/* Bloque de encabezado de seccion: etiqueta + titulo + parrafo,
   centrado y con ancho limitado para que el texto no se estire. */
.atl-section-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 46px;
}
.atl-section-head h2 {
	font-size: 32px;
	line-height: 1.25;
	margin: 0 0 14px;
}
.atl-section-head p {
	font-size: 16px;
	margin: 0;
}

/* En pantallas pequenas el titulo de seccion se reduce
   para que no se corte ni desborde. */
@media (max-width: 768px) {
	.atl-section-head h2 {
		font-size: 25px;
	}
	.atl-section-head {
		margin-bottom: 32px;
	}
}


/* ============================================================
   6. BARRA SUPERIOR (TOPBAR)
   ------------------------------------------------------------
   La franja azul marino delgada que va sobre el header.
   Izquierda: WhatsApp y correo. Derecha: redes sociales.

   NOTA: el mockup original tenia aqui un telefono PBX. El cliente
   no tiene PBX, asi que ese espacio lo ocupa el WhatsApp.
   ============================================================ */

.atl-topbar {
	background: var(--atl-navy-2);
	color: #C9D3EE;
	font-size: 12.5px;
}

/* Fila interna: contenido repartido a los extremos, alto fijo. */
.atl-topbar .atl-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: var(--atl-topbar-h);
}

/* Grupo izquierdo: los datos de contacto, separados entre si. */
.atl-topbar-left {
	display: flex;
	gap: 22px;
	align-items: center;
}

/* Cada dato lleva su icono pegado al texto. */
.atl-topbar-left a,
.atl-topbar-left span {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #C9D3EE;
}
.atl-topbar-left a:hover {
	color: #fff;
}

/* Grupo derecho: enlaces a redes sociales. */
.atl-topbar-right {
	display: flex;
	gap: 14px;
	align-items: center;
}
.atl-topbar-right a {
	color: #C9D3EE;
	opacity: .85;
}
.atl-topbar-right a:hover {
	opacity: 1;
	color: #fff;
}

/* Sello de certificacion de la barra superior.
   DESACTIVADO: el cliente aun no confirma la certificacion ISO 9001.
   El estilo queda listo; el HTML esta comentado en el header.
   NO activar sin certificado vigente. */
.atl-badge-iso {
	background: rgba(255, 255, 255, .12);
	padding: 4px 10px;
	border-radius: 20px;
	font-weight: 600;
	font-size: 11.5px;
}


/* ============================================================
   7. HEADER (LOGO, MENU, BOTON WHATSAPP)
   ------------------------------------------------------------
   Franja blanca con el logo a la izquierda, el menu al centro y
   el boton verde de WhatsApp a la derecha.

   SOBRE EL COMPORTAMIENTO PEGAJOSO:
   el mockup deja el header blanco fijo arriba al hacer scroll,
   mientras la barra azul se va. Para lograrlo en WordPress hay
   que fijar el contenedor exterior que crea el plugin HFE
   (.ehf-header) y desplazarlo hacia arriba justo el alto de la
   barra azul, con top:-38px. Asi la barra azul sale de vista y
   el header blanco queda anclado en el borde superior.
   ============================================================ */

/* Contenedor exterior del header creado por HFE. Es el elemento
   que realmente se queda pegado. Se apunta por sus dos nombres
   posibles para que funcione aunque el plugin cambie de version. */
.ehf-header,
#masthead.ehf-header {
	position: sticky;
	top: calc(-1 * var(--atl-topbar-h)); /* = -38px: oculta la barra azul */
	z-index: 150;
}

/* Elementor a veces recorta el contenido de sus contenedores, y eso
   rompe el efecto pegajoso. Esta regla se lo impide dentro del header. */
.ehf-header .elementor-section,
.ehf-header .e-con,
.ehf-header .elementor-widget-wrap,
.ehf-header .elementor-container {
	overflow: visible;
}

/* Franja blanca del header. */
.atl-header {
	background: var(--atl-white);
	box-shadow: 0 2px 14px rgba(0, 19, 93, 0.07);
}

/* Fila interna del header: logo | menu | boton, alto fijo.
   position:relative es necesario para anclar el menu movil. */
.atl-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--atl-header-h);
	position: relative;
}

/* Logo. La altura fija evita que el header salte si algun dia
   se reemplaza por una imagen de otro tamano. */
.atl-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0; /* el logo nunca se comprime aunque falte espacio */
}
.atl-brand img {
	height: 64px;
	width: auto;
	display: block;
}

/* Menu principal. */
.atl-nav {
	display: flex;
	align-items: center;
}
.atl-nav > ul {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none; /* quita las vinetas que pone WordPress */
	margin: 0;
	padding: 0;
}
.atl-nav li {
	margin: 0;
}

/* Cada opcion del menu. Se usa tanto en enlaces (<a>) como en la
   etiqueta del desplegable (<label>), por eso el cursor explicito. */
.atl-nav .atl-nav-link {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 12px 14px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--atl-navy);
	border-radius: 8px;
	letter-spacing: .2px;
	transition: background .15s;
	cursor: pointer;
	white-space: nowrap; /* impide que "PORTAL EMPLEADOS" se parta en dos */
}
.atl-nav .atl-nav-link:hover,
.atl-nav li.atl-active > .atl-nav-link {
	background: #EEF3FB;
	color: var(--atl-blue-dark);
}

/* --- Desplegable "EMPRESA" --- */

.atl-has-dropdown {
	position: relative;
}

/* Caja del desplegable: oculta por defecto, aparece al pasar el mouse.
   Se usa visibility en vez de display para poder animar la entrada. */
.atl-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	background: var(--atl-white);
	box-shadow: var(--atl-shadow);
	border: 1px solid var(--atl-border);
	border-radius: 10px;
	padding: 8px;
	min-width: 210px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all .18s;
}
.atl-has-dropdown:hover .atl-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.atl-dropdown a {
	display: block;
	padding: 10px 12px;
	border-radius: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--atl-ink);
}
.atl-dropdown a:hover {
	background: var(--atl-bg);
	color: var(--atl-blue-dark);
}

/* Flechita del desplegable. */
.atl-caret {
	font-size: 9px;
	opacity: .7;
}

/* Boton verde de WhatsApp del header. */
.atl-header-cta {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--atl-whatsapp);
	color: #fff;
	font-weight: 700;
	font-size: 13.5px;
	padding: 11px 18px;
	border-radius: 9px;
	box-shadow: 0 6px 16px rgba(37, 211, 102, .28);
	flex-shrink: 0;
	white-space: nowrap;
}
.atl-header-cta:hover {
	background: var(--atl-whatsapp-dark);
	color: #fff;
}


/* ============================================================
   8. MENU MOVIL
   ------------------------------------------------------------
   El menu de hamburguesa funciona SIN JavaScript, con dos casillas
   de verificacion ocultas:
     #atl-nav-check  -> abre y cierra el menu completo
     .atl-sub-check  -> abre y cierra el submenu "EMPRESA"
   Al pulsar la etiqueta (<label>) se marca la casilla, y el CSS
   muestra el bloque correspondiente. Es mas robusto que usar
   JavaScript, porque no se rompe con los plugins de cache.
   ============================================================ */

/* Las casillas existen en el HTML pero nunca se ven. */
.atl-nav-check,
.atl-sub-check {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

/* Boton de hamburguesa: oculto en escritorio, visible en movil. */
.atl-mobile-toggle {
	display: none;
	font-size: 26px;
	line-height: 1;
	background: none;
	border: none;
	color: var(--atl-navy);
	cursor: pointer;
	padding: 4px 6px;
}

@media (max-width: 900px) {

	/* El menu se convierte en un panel desplegable bajo el header. */
	.atl-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		box-shadow: 0 12px 20px rgba(0, 19, 93, .12);
		border-top: 1px solid var(--atl-border);
		padding: 10px;
	}

	/* Cuando la casilla oculta esta marcada, el panel aparece. */
	.atl-nav-check:checked ~ .atl-nav {
		display: block;
	}

	/* Las opciones pasan de fila a columna. */
	.atl-nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.atl-nav .atl-nav-link {
		padding: 13px 12px;
		border-radius: 8px;
	}

	/* El submenu deja de flotar y queda indentado dentro del panel. */
	.atl-has-dropdown .atl-dropdown {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		display: none;
		margin: 0 0 6px 14px;
		padding: 0;
		min-width: 0;
	}
	.atl-sub-check:checked ~ .atl-dropdown {
		display: block;
	}

	/* Aparece la hamburguesa. */
	.atl-mobile-toggle {
		display: block;
	}

	/* El boton de WhatsApp se reduce al icono para ganar espacio. */
	.atl-header-cta .atl-label {
		display: none;
	}
	.atl-header-cta {
		padding: 11px 13px;
	}
}

/* En pantallas muy pequenas se oculta el correo de la barra azul,
   que es el dato mas largo y el primero que desborda. */
@media (max-width: 560px) {
	.atl-topbar-left .atl-correo {
		display: none;
	}
	.atl-brand img {
		height: 42px;
	}
}


/* ============================================================
   9. BOTON FLOTANTE DE WHATSAPP
   ------------------------------------------------------------
   Circulo verde fijo en la esquina inferior derecha, presente en
   todas las paginas. El anillo que late llama la atencion sin
   tapar contenido.
   ============================================================ */

.atl-wa-float {
	position: fixed;
	bottom: 26px;
	right: 26px;
	z-index: 300;
	background: var(--atl-whatsapp);
	color: #fff;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
	animation: atl-pulse 2.4s infinite;
}
.atl-wa-float:hover {
	background: var(--atl-whatsapp-dark);
	color: #fff;
}

/* Anillo que se expande y se desvanece en bucle. */
@keyframes atl-pulse {
	0%   { box-shadow: 0 10px 26px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, .55); }
	70%  { box-shadow: 0 10px 26px rgba(37, 211, 102, .45), 0 0 0 18px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 10px 26px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Si el visitante activo "reducir movimiento" en su sistema, la
   animacion se apaga. Es un requisito basico de accesibilidad. */
@media (prefers-reduced-motion: reduce) {
	.atl-wa-float { animation: none; }
}

/* En movil el boton se encoge para no tapar contenido. */
@media (max-width: 560px) {
	.atl-wa-float {
		width: 52px;
		height: 52px;
		font-size: 24px;
		bottom: 18px;
		right: 18px;
	}
}


/* ============================================================
   10. FOOTER
   ------------------------------------------------------------
   Bloque azul muy oscuro con cuatro columnas:
     1. Logo + descripcion + redes sociales
     2. Navegacion
     3. Empresa
     4. Contacto
   Debajo, una linea separadora y la franja de creditos.
   ============================================================ */

.atl-footer {
	background: #000D3D; /* azul aun mas oscuro que el navy de marca */
	color: #AEB9DC;
	padding: 64px 0 0;
}

/* Rejilla de 4 columnas con anchos desiguales: la primera y la
   ultima son mas anchas porque llevan mas texto. */
.atl-footer-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
	gap: 32px;
	padding-bottom: 44px;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
}

/* Logo del footer. El filtro lo convierte a blanco puro sin
   necesidad de subir un segundo archivo: brightness(0) lo vuelve
   negro solido e invert(1) lo pasa a blanco. */
.atl-footer-brand img {
	height: 44px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: .92;
	margin-bottom: 14px;
	display: block;
}
.atl-footer-brand p {
	color: #8E9AC4;
	font-size: 13px;
	max-width: 260px;
	margin: 0;
}

/* Redes sociales: circulos con la inicial dentro. */
.atl-footer-social {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}
.atl-footer-social a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: #AEB9DC;
	transition: background .15s;
}
.atl-footer-social a:hover {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}

/* Titulos de columna. */
.atl-footer h5 {
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	letter-spacing: .5px;
	text-transform: uppercase;
	margin: 0 0 16px;
}

/* Listas de enlaces. Se quitan las vinetas que pone WordPress. */
.atl-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.atl-footer ul li {
	margin-bottom: 11px;
}
.atl-footer ul li a {
	font-size: 13.5px;
	color: #AEB9DC;
}
.atl-footer ul li a:hover {
	color: #fff;
}

/* Columna de contacto: cada dato lleva su icono al lado, alineado
   arriba para que las direcciones de dos lineas no se descuadren. */
.atl-footer-contact li {
	display: flex;
	gap: 10px;
	font-size: 13.5px;
	margin-bottom: 14px;
	align-items: flex-start;
	color: #AEB9DC;
}
.atl-footer-contact li a {
	color: #AEB9DC;
}
.atl-footer-contact li a:hover {
	color: #fff;
}

/* Franja inferior: copyright a la izquierda, creditos a la derecha. */
.atl-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 22px 0;
	font-size: 12px;
	color: #7C89B5;
	flex-wrap: wrap; /* en movil las dos frases se apilan solas */
	gap: 10px;
}
.atl-footer-bottom a {
	color: #7C89B5;
}
.atl-footer-bottom a:hover {
	color: #fff;
}

/* En tablet las 4 columnas pasan a 2. */
@media (max-width: 900px) {
	.atl-footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* En movil todo queda en una sola columna. */
@media (max-width: 560px) {
	.atl-footer-grid {
		grid-template-columns: 1fr;
	}
	.atl-footer {
		padding-top: 48px;
	}
	.atl-footer-bottom {
		justify-content: center;
		text-align: center;
	}
}


/* ============================================================
   11. NEUTRALIZAR EL RELLENO DE ELEMENTOR EN HEADER Y FOOTER
   ------------------------------------------------------------
   Elementor mete por defecto un relleno lateral y un ancho maximo
   en sus contenedores. Eso dejaba una franja blanca a los lados de
   la barra azul y del footer, que deben ir de borde a borde.

   Esta regla anula ese relleno SOLO dentro del header y el footer
   creados con HFE. El resto del sitio no se ve afectado: dentro de
   las paginas seguimos usando los contenedores normales.

   Se usa !important porque Elementor escribe sus medidas como
   estilos en linea, y de otra forma siempre ganarian.

   Se apuntan varios nombres de clase a proposito (e-con, e-con-inner,
   elementor-container) porque Elementor cambia de nomenclatura entre
   el editor clasico y el V4, y asi funciona con ambos.
   ============================================================ */

.ehf-header .e-con,
.ehf-header .e-con-inner,
.ehf-header .elementor-section,
.ehf-header .elementor-container,
.ehf-header .elementor-widget-wrap,
.ehf-footer .e-con,
.ehf-footer .e-con-inner,
.ehf-footer .elementor-section,
.ehf-footer .elementor-container,
.ehf-footer .elementor-widget-wrap {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* El header y el footer ocupan todo el ancho de la ventana.
   El contenido de adentro se centra con .atl-container. */
.ehf-header,
.ehf-footer {
	width: 100%;
}

/* Astra reserva un espacio en blanco bajo el contenido de la pagina
   cuando esta vacia. Se elimina para que el footer no quede flotando
   separado del contenido. */
.ehf-footer {
	margin-top: 0;
}


/* ============================================================
   12. FRANJA DE CERTIFICACIONES (INICIO)
   ------------------------------------------------------------
   Bloque azul marino con cuatro recuadros de respaldo:
     1. ISO 9001  -> dos logos juntos (Icontec + IQNet)
     2. Supervigilancia
     3. PTEE
     4. SG-SST

   Cada recuadro lleva una caja BLANCA donde va el logo. Es
   necesario: los logos oficiales estan disenados para fondo claro
   y sobre el azul marino se perderian o mostrarian manchas.

   La caja blanca tiene alto fijo (92px) para que los cuatro
   recuadros queden alineados aunque los logos tengan proporciones
   muy distintas (uno vertical, otro circular, otro apaisado).
   ============================================================ */

/* Espaciado vertical estandar de todas las secciones del sitio.
   Se define aqui porque es la primera seccion que lo usa; lo
   heredaran las demas secciones que construyamos. */
.atl-section {
	padding: 78px 0;
}

/* Fondo azul marino de la franja. */
.atl-cert-strip {
	background: var(--atl-navy);
	color: #fff;
}

/* Sobre fondo oscuro, el titulo y el parrafo del encabezado
   cambian de color. */
.atl-cert-strip .atl-section-head h2 {
	color: #fff;
}
.atl-cert-strip .atl-section-head p {
	color: #B9C4E2;
}

/* Rejilla de cuatro recuadros. */
.atl-cert-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

/* Cada recuadro: fondo translucido con borde suave. */
.atl-cert-badge {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 12px;
	padding: 22px 16px;
	text-align: center;
}

/* Caja blanca que contiene el o los logos.
   El alto fijo es lo que mantiene los cuatro recuadros parejos. */
.atl-cert-logo {
	background: #fff;
	border-radius: 10px;
	height: 92px;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;          /* separacion cuando hay dos logos (recuadro 1) */
	padding: 12px 14px;
}

/* Los logos se ajustan dentro de la caja sin deformarse.
   max-height limita el alto y width:auto conserva la proporcion. */
.atl-cert-logo img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	display: block;
}

/* El logo circular de IQNet se percibe mas grande que el
   rectangulo de Icontec a igual altura, por eso se reduce al 80%. */
.atl-cert-logo .atl-logo-secundario {
	max-height: 80%;
}

/* Textos bajo el logo. */
.atl-cert-badge strong {
	display: block;
	font-size: 13.5px;
	margin-bottom: 4px;
	color: #fff;
}
.atl-cert-badge span {
	font-size: 11.5px;
	color: #AEBAE0;
}

/* Boton centrado al final de la franja. */
.atl-cert-cta {
	text-align: center;
	margin-top: 36px;
}

/* En tablet los cuatro recuadros pasan a dos filas de dos. */
@media (max-width: 900px) {
	.atl-cert-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* En movil quedan uno debajo de otro. */
@media (max-width: 560px) {
	.atl-cert-grid {
		grid-template-columns: 1fr;
	}
	.atl-section {
		padding: 52px 0;
	}
}


/* ============================================================
   13. FOTOGRAFIAS DEL SITIO
   ------------------------------------------------------------
   Todas las fotos son del personal e instalaciones reales de
   Seguridad Atlantis (sesion de septiembre de 2026). Ya no queda
   ninguna imagen de banco en el sitio.

   Se declaran UNA sola vez aqui como variables y se reutilizan en
   todas las secciones: para cambiar una foto basta con reemplazar
   su URL en este bloque.

   NOTA DE PRIVACIDAD: en cinco de estas fotos se difumino el
   carne del personal, porque mostraba el numero de cedula. Si
   algun dia se reemplazan por fotos nuevas, hay que revisar lo
   mismo antes de publicarlas.

   ORGANIZACION:
     - banners: fotos apaisadas, para las cabeceras de pagina
     - sectores: fotos verticales, para las tarjetas de servicio
     - laterales: fotos verticales, para las filas de dos columnas
   ============================================================ */
:root {

	/* --- Banners de cabecera (apaisadas) --- */
	--atl-banner-certificaciones: url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/banner-certificaciones.jpg');
	--atl-banner-servicios:       url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-banner-servicios.jpg');
	--atl-banner-cumplimiento:    url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-banner-cumplimiento.jpg');
	--atl-banner-nosotros:        url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-banner-sobre-nosotros.jpg');
	--atl-banner-pqrs:            url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-banner-pqrs.jpg');
	--atl-banner-trabaja:         url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-banner-trabaja.jpg');

	/* Banner de respaldo, para cualquier pagina que no tenga el suyo. */
	--atl-foto-banner:            url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-banner-servicios.jpg');

	/* --- Hero de Inicio y bloques destacados ---
	   El hero usa DOS fotos distintas: una de fondo (que queda muy
	   cubierta por el degradado azul y apenas se percibe) y otra en
	   el recuadro de la derecha, que es la que realmente se ve. */
	--atl-foto-hero-fondo:        url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/10/atlantis-historia.jpg');
	--atl-foto-guardia:           url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/10/atlantis-comercial.jpg');

	/* Foto de la central de monitoreo, usada en la columna lateral
	   de Certificaciones. */
	--atl-foto-monitoreo:         url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-banner-servicios.jpg');
	--atl-foto-porque:            url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-banner-cumplimiento.jpg');

	/* El primer plano del escudo del uniforme quedo libre al pasar
	   "Por que elegirnos" a la foto de la minuta. Se conserva aqui
	   por si se quiere recuperar mas adelante. */
	--atl-foto-escudo:            url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-porque-elegirnos-1.jpg');

	/* --- Tarjetas de sector --- */
	--atl-foto-residencial:       url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/10/atlantis-residencial-lobby.jpg');
	--atl-foto-bancaria:          url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-bancaria.jpg');
	--atl-foto-industrial:        url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/10/atlantis-industrial.jpg');
	--atl-foto-hospitalaria:      url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-hospitalaria.jpg');
	--atl-foto-tecnologica:       url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-banner-servicios.jpg');

	/* Dos fotos que quedaron libres al reasignar las tarjetas. Se
	   conservan declaradas por si se usan mas adelante (galeria de
	   eventos u otra seccion):
	     telefono-perfil -> la vigilante al telefono, de perfil
	     puesto-monitor  -> el vigilante en el puesto con el monitor */
	--atl-foto-telefono-perfil:   url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-tecnologica.jpg');
	--atl-foto-puesto-monitor:    url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-residencial.jpg');
	/* Estatal recibe la foto que antes estaba en la columna de
	   Servicios (los dos vigilantes en el lobby). */
	--atl-foto-estatal:           url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/10/atlantis-historia.jpg');

	/* Foto nocturna de los dos vigilantes, libre tras el cambio. */
	--atl-foto-estatal-noche:     url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/10/atlantis-estatal.jpg');
	--atl-foto-comercial:         url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/10/atlantis-comercial.jpg');

	/* --- Columnas laterales de las paginas internas --- */
	/* Columna lateral de Servicios: los dos vigilantes, foto nueva
	   de octubre de 2026. */
	--atl-foto-equipo:            url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/10/Servicios-nueva.jpeg');
	--atl-foto-pqrs:              url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-pqrs-lateral.jpg');
	--atl-foto-trabaja:           url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/10/atlantis-trabaja-lateral.jpg');
	--atl-foto-firma:             url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/atlantis-hero.jpg');
	/* Columna derecha de Sobre Nosotros: la sala de monitoreo.
	   Es apaisada, asi que llena el marco sin recortes verticales. */
	--atl-foto-sala:              url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/10/Sobre-nosotros-derecha.jpeg');
}

/* Utilidad: rellena por completo su contenedor con una foto,
   recortandola sin deformarla. Se usa en casi todas las secciones. */
.atl-photo-fill {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Clases de cada foto. Se aplican junto a .atl-photo-fill. */
.atl-foto-guardia      { background-image: var(--atl-foto-guardia); }
.atl-foto-banner       { background-image: var(--atl-foto-banner); }
.atl-foto-equipo       { background-image: var(--atl-foto-equipo); }
.atl-foto-porque       { background-image: var(--atl-foto-porque); }
.atl-foto-escudo       { background-image: var(--atl-foto-escudo); }
.atl-foto-firma        { background-image: var(--atl-foto-firma); }
.atl-foto-sala         { background-image: var(--atl-foto-sala); }
.atl-foto-residencial  { background-image: var(--atl-foto-residencial); }
.atl-foto-bancaria     { background-image: var(--atl-foto-bancaria); }
.atl-foto-industrial   { background-image: var(--atl-foto-industrial); }
.atl-foto-hospitalaria { background-image: var(--atl-foto-hospitalaria); }
.atl-foto-tecnologica  { background-image: var(--atl-foto-tecnologica); }
.atl-foto-estatal      { background-image: var(--atl-foto-estatal); }
.atl-foto-comercial    { background-image: var(--atl-foto-comercial); }
.atl-foto-pqrs         { background-image: var(--atl-foto-pqrs); }
.atl-foto-trabaja      { background-image: var(--atl-foto-trabaja); }
.atl-foto-monitoreo    { background-image: var(--atl-foto-monitoreo); }

/* ENCUADRE DE LAS FOTOS VERTICALES
   ------------------------------------------------------------
   Las fotos son verticales y los marcos apaisados, asi que solo
   se ve una franja de cada una. El porcentaje indica que parte de
   la foto queda a la vista.

   Se calculo uno por uno con este criterio: la franja arranca
   justo ENCIMA de la cabeza, para que no quede cortada, y baja
   todo lo que el marco permite. Asi se ve rostro y torso, y en la
   mayoria tambien el escudo del uniforme.

   Si algun dia se cambia una foto, hay que recalcular su valor:
   depende de donde este la persona dentro del encuadre. */

/* Columnas laterales de las paginas internas (marco de 400 px).
   Los valores salen de medir en que porcentaje de cada foto esta
   la persona:
     equipo  -> las dos cabezas estan entre el 33% y el 44%
     firma   -> la cabeza esta entre el 28% y el 46%
     pqrs    -> la cabeza esta entre el 30% y el 48%
     trabaja -> la cabeza esta entre el 15% y el 28%
     sala    -> es apaisada, no se recorta en vertical */
.atl-row-2col .atl-foto-pqrs     { background-position: center 47%; }
/* La foto nueva de Servicios tiene las cabezas muy arriba
   (entre el 10% y el 28%), por eso el valor es tan bajo. */
.atl-row-2col .atl-foto-equipo   { background-position: center 14%; }
.atl-row-2col .atl-foto-trabaja  { background-position: center 20%; }
.atl-row-2col .atl-foto-firma    { background-position: center 42%; }
.atl-row-2col .atl-foto-sala     { background-position: center 42%; }
/* La de monitoreo es apaisada: llena el marco casi sin recorte. */
.atl-foto-monitoreo              { background-position: center 45%; }
/* La foto de la minuta es apaisada: llena el marco de "Por que
   elegirnos" sin franjas ni recorte de la persona. */
.atl-why-img .atl-foto-porque    { background-position: center 45%; }

/* Recuadro del hero (marco de 380 px, mas alto que los demas). */
.atl-hero-visual .atl-foto-guardia { background-position: center 36%; }

/* Tarjetas de sector (franja de 220 px). Mismo criterio: la franja
   empieza encima de la cabeza y baja hasta donde el marco permite,
   de modo que se vean el rostro y el escudo del uniforme.

   Residencial, Hospitalaria y Tecnologica llevan un valor mas bajo
   que el resto porque en esas fotos la persona esta mas arriba en
   el encuadre; con un valor mayor se les cortaba la cabeza.
   Tecnologica lleva 38%: es el unico valor donde entran a la vez
   la cabeza completa y el escudo de la manga. Por debajo se corta
   el escudo y por encima, el peinado. */
/* La de Residencial ahora es apaisada: no se recorta en vertical,
   solo un poco a los lados. Se desplaza al 54% horizontal para
   dejar centradas a las dos personas. */
.atl-foto-residencial  { background-position: 54% center; }
.atl-foto-bancaria     { background-position: center 55%; }
.atl-foto-industrial   { background-position: center 45%; }
.atl-foto-hospitalaria { background-position: center 27%; }
/* La de Tecnologica ahora es apaisada: llena el marco sin franjas.
   Se desplaza al 78% horizontal porque el vigilante esta en el
   lado derecho de la foto. */
.atl-foto-tecnologica  { background-position: 78% center; }
.atl-foto-estatal      { background-position: center 55%; }
.atl-foto-comercial    { background-position: center 31%; }


/* ============================================================
   14. HERO DE INICIO
   ------------------------------------------------------------
   Bloque principal de la portada: foto de fondo cubierta por un
   degradado azul, titular, dos botones, cuatro cifras y una
   tarjeta flotante con foto al costado derecho.

   El degradado NO es decorativo: sin el, el texto blanco seria
   ilegible sobre la foto. Va como capa ::before para no tener que
   meter un div extra en el HTML.
   ============================================================ */

.atl-hero {
	position: relative;
	color: #fff;
	overflow: hidden;
	background: var(--atl-navy) var(--atl-foto-hero-fondo) center 32% / cover no-repeat;
}

/* Capa de degradado sobre la foto: opaca a la izquierda, donde va
   el texto, y mas transparente a la derecha, donde se ve la foto. */
.atl-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(6, 26, 110, .93) 0%,
		rgba(6, 26, 110, .80) 45%,
		rgba(0, 107, 175, .55) 100%);
	pointer-events: none; /* deja pasar los clics a los botones */
}

/* Circulo decorativo del mockup, abajo a la derecha. */
.atl-hero::after {
	content: '';
	position: absolute;
	bottom: -160px;
	right: 220px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .15);
	pointer-events: none;
}

/* Contenido del hero: dos columnas, texto y tarjeta con foto.
   z-index:2 lo mantiene por encima del degradado. */
.atl-hero-inner {
	position: relative;
	z-index: 2;
	padding: 96px 0 76px;
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 40px;
	align-items: center;
}

/* Etiqueta en pastilla sobre el titular. */
.atl-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .25);
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .4px;
	margin-bottom: 20px;
	color: #fff;
}

.atl-hero h1 {
	color: #fff;
	font-size: 42px;
	line-height: 1.18;
	font-weight: 800;
	max-width: 640px;
	margin: 0;
}

/* Palabra resaltada en celeste dentro del titular. */
.atl-hero h1 span {
	color: #7EC6F2;
}

.atl-hero p.atl-lead {
	color: #D6DEF2;
	font-size: 16.5px;
	margin-top: 18px;
	max-width: 560px;
}

.atl-hero-ctas {
	display: flex;
	gap: 14px;
	margin-top: 32px;
	flex-wrap: wrap;
}

/* Fila de cifras, separada por una linea superior.
   Se usa GRID y no flex para que las cuatro columnas midan
   exactamente lo mismo: con flex, cada una se ajustaba al largo de
   su texto y quedaban desalineadas. */
.atl-hero-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 48px;
	border-top: 1px solid rgba(255, 255, 255, .18);
	padding-top: 26px;
	max-width: 620px;
}
.atl-hero-stat b {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 4px;
}
/* min-height reserva el alto de DOS lineas en todas las etiquetas,
   aunque solo ocupen una. Asi "Monitoreo y respuesta", que se parte
   en dos, no descuadra la fila respecto a las demas. */
.atl-hero-stat span {
	display: block;
	font-size: 11.5px;
	line-height: 1.35;
	color: #B9C4E2;
	min-height: 2.7em;
}

/* Tarjeta translucida que enmarca la foto del costado. */
.atl-hero-visual {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 20px;
	padding: 14px;
	backdrop-filter: blur(2px);
}
.atl-hero-visual .atl-photo-fill {
	border-radius: 14px;
	height: 380px;
}


/* ============================================================
   15. FRANJA DE CONFIANZA
   ------------------------------------------------------------
   Banda blanca bajo el hero con cuatro argumentos cortos,
   separados por lineas verticales.
   ============================================================ */

.atl-trust-strip {
	background: var(--atl-white);
	border-bottom: 1px solid var(--atl-border);
}
.atl-trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.atl-trust-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 26px 18px;
	border-left: 1px solid var(--atl-border);
}
/* El primero no lleva linea a la izquierda. */
.atl-trust-item:first-child {
	border-left: none;
}
.atl-trust-ico {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: #EAF3FC;
	color: var(--atl-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 19px;
}
.atl-trust-item strong {
	display: block;
	font-size: 13.5px;
	color: var(--atl-navy);
	font-weight: 700;
}
.atl-trust-item span {
	font-size: 12px;
	color: var(--atl-muted);
}


/* ============================================================
   16. TARJETAS DE SERVICIOS
   ------------------------------------------------------------
   Rejilla de tarjetas blancas con foto arriba y texto abajo.
   Se usa en Inicio (4 tarjetas) y se reutilizara en Servicios
   (6 tarjetas) cambiando solo el numero de columnas.
   ============================================================ */

.atl-services-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
/* Variante de 3 columnas para la pagina Servicios. */
.atl-services-grid.atl-cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.atl-service-card {
	background: #fff;
	border-radius: var(--atl-radius);
	overflow: hidden; /* recorta la foto a las esquinas redondeadas */
	box-shadow: var(--atl-shadow);
	border: 1px solid var(--atl-border);
	transition: transform .18s;
}
/* La tarjeta se eleva ligeramente al pasar el mouse. */
.atl-service-card:hover {
	transform: translateY(-5px);
}

/* Franja de foto de alto fijo en la parte superior.
   220 px y no 150: con 150 la cara y el escudo del uniforme no
   caben juntos en una foto vertical, y quedaba fuera uno de los
   dos. A 220 px entran ambos y la tarjeta se ve mejor proporcionada. */
.atl-service-card .atl-img-wrap {
	height: 220px;
	overflow: hidden;
}

.atl-service-card .atl-card-body {
	padding: 22px 20px 24px;
}
.atl-service-card h3 {
	font-size: 16.5px;
	font-weight: 700;
	margin: 0 0 8px;
}
.atl-service-card p {
	font-size: 13.5px;
	margin: 0;
}
.atl-service-card .atl-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-weight: 700;
	font-size: 13px;
	color: var(--atl-blue-dark);
}


/* ============================================================
   17. POR QUE ELEGIRNOS
   ------------------------------------------------------------
   Dos columnas: foto grande a la izquierda y lista de cuatro
   argumentos con vineta de verificacion a la derecha.
   ============================================================ */

.atl-why {
	background: var(--atl-white);
}
.atl-why-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}
.atl-why-img {
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--atl-shadow);
	height: 420px;
}
.atl-why-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.atl-why-point {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
/* Cuadrito azul marino con el chulo. */
.atl-why-check {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--atl-navy);
	color: #fff;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
}
.atl-why-point h4 {
	font-size: 15.5px;
	margin: 0 0 4px;
}
.atl-why-point p {
	font-size: 13.5px;
	margin: 0;
}


/* ============================================================
   18. BANNER CTA FINAL
   ------------------------------------------------------------
   Franja de cierre con degradado azul y dos botones.
   Se reutilizara al final de varias paginas.
   ============================================================ */

.atl-cta-banner {
	background: linear-gradient(120deg, var(--atl-navy), var(--atl-blue-dark));
	color: #fff;
	text-align: center;
	padding: 64px 0;
}
.atl-cta-banner h2 {
	color: #fff;
	font-size: 28px;
	font-weight: 800;
	margin: 0;
}
.atl-cta-banner p {
	color: #D6DEF2;
	margin-top: 12px;
}
.atl-cta-banner .atl-btns {
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-top: 28px;
	flex-wrap: wrap;
}


/* ============================================================
   19. AJUSTES RESPONSIVE DE LA PAGINA DE INICIO
   ------------------------------------------------------------
   Reglas para tablet y movil de todas las secciones anteriores.
   Se agrupan aqui para no repetir consultas de medios en cada
   bloque y poder revisarlas de un vistazo.
   ============================================================ */

@media (max-width: 980px) {

	/* El hero pasa a una sola columna y la foto sube al principio,
	   para que en movil se vea primero la imagen y luego el texto. */
	.atl-hero-inner {
		grid-template-columns: 1fr;
		padding: 64px 0 56px;
	}
	.atl-hero-visual {
		order: -1;
	}
	.atl-hero h1 {
		font-size: 30px;
	}

	/* La franja de confianza pasa a dos columnas y cambia las
	   lineas verticales por horizontales. */
	.atl-trust-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.atl-trust-item {
		border-left: none;
		border-top: 1px solid var(--atl-border);
	}

	/* Las tarjetas de servicios pasan a dos columnas. */
	.atl-services-grid,
	.atl-services-grid.atl-cols-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* "Por que elegirnos" se apila y la foto se reduce. */
	.atl-why-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.atl-why-img {
		height: 280px;
	}
}

@media (max-width: 620px) {

	/* Las cuatro cifras del hero pasan a dos filas de dos. */
	.atl-hero-stats {
		flex-wrap: wrap;
		gap: 20px 0;
	}
	.atl-hero-stat {
		flex: 0 0 50%;
	}

	/* Una sola columna para confianza y servicios. */
	.atl-trust-grid,
	.atl-services-grid,
	.atl-services-grid.atl-cols-3 {
		grid-template-columns: 1fr;
	}

	.atl-hero h1 {
		font-size: 26px;
	}
	.atl-cta-banner h2 {
		font-size: 22px;
	}
	.atl-cta-banner {
		padding: 48px 0;
	}
}


/* ============================================================
   20. BANNER DE PAGINAS INTERNAS
   ------------------------------------------------------------
   Cabecera azul con foto de fondo que llevan las 6 paginas
   distintas de Inicio: migas de pan, titulo y bajada.

   Igual que en el hero, el degradado no es decorativo: sin el,
   el texto blanco seria ilegible sobre la foto.
   ============================================================ */

.atl-page-banner {
	position: relative;
	color: #fff;
	padding: 64px 0 54px;
	overflow: hidden;
	background: var(--atl-navy) var(--atl-foto-banner) center / cover no-repeat;
}

/* Capa de color sobre la foto. */
.atl-page-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(6, 26, 110, .88), rgba(0, 107, 175, .72));
}

/* El contenido va por encima del degradado. */
.atl-page-banner .atl-container {
	position: relative;
	z-index: 2;
}

/* Banner propio por pagina. Se pone la clase junto a
   .atl-page-banner, por ejemplo:
     <div class="atl-page-banner atl-banner-servicios">
   Una pagina sin clase propia usa la foto general de respaldo. */
.atl-page-banner.atl-banner-certificaciones { background-image: var(--atl-banner-certificaciones); }
.atl-page-banner.atl-banner-servicios       { background-image: var(--atl-banner-servicios); }
.atl-page-banner.atl-banner-cumplimiento    { background-image: var(--atl-banner-cumplimiento); }
.atl-page-banner.atl-banner-nosotros        { background-image: var(--atl-banner-nosotros); }
.atl-page-banner.atl-banner-pqrs            { background-image: var(--atl-banner-pqrs); }
.atl-page-banner.atl-banner-trabaja         { background-image: var(--atl-banner-trabaja); }

/* Migas de pan: "Inicio / Servicios". */
.atl-breadcrumb {
	font-size: 12.5px;
	color: #B9C4E2;
	margin-bottom: 14px;
	font-weight: 600;
}
.atl-breadcrumb a {
	color: #B9C4E2;
}
.atl-breadcrumb a:hover {
	color: #fff;
}

.atl-page-banner h1 {
	color: #fff;
	font-size: 34px;
	font-weight: 800;
	margin: 0;
}
.atl-page-banner p.atl-lead-sm {
	color: #D6DEF2;
	font-size: 15px;
	margin-top: 12px;
	max-width: 600px;
}


/* ============================================================
   21. FILA DE DOS COLUMNAS CON FOTO
   ------------------------------------------------------------
   Bloque de texto a un lado y foto al otro. Se repite en casi
   todas las paginas internas (Servicios, Certificaciones,
   Portal, Cumplimiento, Sobre Nosotros, PQRS), por eso se
   define una sola vez aqui.
   ============================================================ */

.atl-row-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.atl-row-2col .atl-photo-fill {
	border-radius: 16px;
	/* 400 px y no 300: con 300 solo se veia la cabeza de la persona
	   en las fotos verticales. A 400 entran cabeza, torso y el
	   escudo del uniforme. */
	height: 400px;
	box-shadow: var(--atl-shadow);
}

/* En movil se apila: primero el texto, despues la foto. */
@media (max-width: 720px) {
	.atl-row-2col {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.atl-row-2col .atl-photo-fill {
		height: 280px;
	}
}


/* ============================================================
   22. TARJETAS DE VALOR
   ------------------------------------------------------------
   Tarjetas blancas con icono circular, titulo y parrafo. Se usan
   en Servicios ("cuando contratarnos"), y se reutilizaran en
   Sobre Nosotros y otras paginas.
   Por defecto van 3 por fila; la variante atl-cols-2 las pone
   de a dos.
   ============================================================ */

.atl-value-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.atl-value-grid.atl-cols-2 {
	grid-template-columns: 1fr 1fr;
}

.atl-value-card {
	background: #fff;
	border: 1px solid var(--atl-border);
	border-radius: 14px;
	padding: 28px 24px;
	text-align: center;
}

/* Variante alineada a la izquierda, usada en Servicios. */
.atl-value-card.atl-izquierda {
	text-align: left;
}
.atl-value-card.atl-izquierda .atl-ico {
	margin-left: 0;
}

/* Circulo celeste con el icono. */
.atl-value-card .atl-ico {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #EAF3FC;
	color: var(--atl-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin: 0 auto 16px;
}
.atl-value-card h3 {
	font-size: 16px;
	margin: 0 0 10px;
}
.atl-value-card p {
	font-size: 13.5px;
	margin: 0;
}

/* En movil, una tarjeta por fila. */
@media (max-width: 720px) {
	.atl-value-grid,
	.atl-value-grid.atl-cols-2 {
		grid-template-columns: 1fr;
	}
}

/* Utilidades de espaciado para secciones que deben pegarse a la
   siguiente o a la anterior, sin escribir estilos en el HTML. */
.atl-section-sin-abajo { padding-bottom: 0; }
.atl-section-sin-arriba { padding-top: 0; }


/* ============================================================
   23. REJILLA DE SERVICIOS EN DOS FILAS (4 + 3)
   ------------------------------------------------------------
   La pagina de Servicios tiene SIETE tarjetas. Se reparten en dos
   filas que ocupan cada una el ancho completo: cuatro arriba y
   tres abajo. Las de abajo salen mas anchas porque se reparten el
   mismo ancho entre tres, y el conjunto queda equilibrado sin dar
   mas importancia visual a unos sectores que a otros.

   Se reutilizan las clases del bloque 16:
     .atl-services-grid            -> 4 columnas
     .atl-services-grid.atl-cols-3 -> 3 columnas

   Lo unico que hace falta es separar las dos filas.
   ============================================================ */

/* Separacion entre la fila de cuatro y la de tres. */
.atl-services-fila-1 {
	margin-bottom: 22px;
}

/* Todas las tarjetas de una misma fila quedan del mismo alto,
   aunque unas descripciones sean mas largas que otras. */
.atl-services-grid > .atl-service-card {
	display: flex;
	flex-direction: column;
}
.atl-services-grid .atl-card-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
/* El enlace "Cotizar" se pega al fondo de la tarjeta, asi queda
   a la misma altura en todas. */
.atl-services-grid .atl-more {
	margin-top: auto;
}


/* ============================================================
   24. CAJAS DE INFORMACION
   ------------------------------------------------------------
   Cajas celestes de tres en fila con un titulo corto y un
   parrafo. Se usaran en Cumplimiento y PQRS.
   ============================================================ */

.atl-info-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
/* Variante de dos columnas. */
.atl-info-row.atl-cols-2 {
	grid-template-columns: 1fr 1fr;
}

.atl-info-box {
	background: #EEF3FB;
	border-radius: 12px;
	padding: 22px;
}
.atl-info-box h4 {
	font-size: 14px;
	margin: 0 0 6px;
	color: var(--atl-navy);
}
.atl-info-box p {
	font-size: 12.5px;
	margin: 0;
}


/* ============================================================
   25. TARJETAS DE DOCUMENTO Y CONTACTO
   ------------------------------------------------------------
   Tarjetas horizontales con icono a la izquierda, texto en el
   centro y (opcionalmente) un enlace de descarga a la derecha.
   Se usaran en Certificaciones y Cumplimiento para los PDFs
   descargables.
   ============================================================ */

.atl-doc-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.atl-doc-card {
	background: #fff;
	border: 1px solid var(--atl-border);
	border-radius: 12px;
	padding: 20px 22px;
	display: flex;
	align-items: center;
	gap: 16px;
	transition: box-shadow .15s;
}
.atl-doc-card:hover {
	box-shadow: var(--atl-shadow);
}

/* Cuadro celeste del icono. */
.atl-doc-ico {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: #EAF3FC;
	color: var(--atl-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}
.atl-doc-card h4 {
	font-size: 14.5px;
	margin: 0 0 3px;
}
.atl-doc-card span {
	font-size: 12px;
	color: var(--atl-muted);
	word-break: break-word; /* impide que un correo largo desborde */
}

/* Enlace de descarga, pegado al extremo derecho de la tarjeta. */
.atl-doc-card .atl-dl {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--atl-blue-dark);
	white-space: nowrap;
	flex-shrink: 0;
}

/* En movil, una tarjeta por fila y el enlace debajo del texto. */
@media (max-width: 720px) {
	.atl-doc-grid,
	.atl-info-row,
	.atl-info-row.atl-cols-2 {
		grid-template-columns: 1fr;
	}
	.atl-doc-card .atl-dl {
		margin-left: 0;
	}
}


/* ============================================================
   26. SELLOS DE CERTIFICACION SOBRE FONDO CLARO
   ------------------------------------------------------------
   Misma pieza que la franja del Inicio (bloque 12), pero para la
   pagina Certificaciones, donde el fondo es claro.

   Reutiliza .atl-cert-logo del bloque 12 (la caja blanca con los
   logos); lo unico que cambia son los colores del recuadro y de
   los textos. Por eso este bloque es corto: no se repite nada.
   ============================================================ */

/* Recuadro claro, con borde en vez de fondo translucido. */
.atl-cert-badge-claro {
	background: #EEF3FB;
	border: 1px solid var(--atl-border);
	border-radius: 12px;
	padding: 22px 16px;
	text-align: center;
}
.atl-cert-badge-claro strong {
	display: block;
	font-size: 13.5px;
	margin-bottom: 4px;
	color: var(--atl-navy);
}
.atl-cert-badge-claro span {
	font-size: 11.5px;
	color: var(--atl-muted);
}

/* Sobre fondo claro la caja del logo lleva un borde suave, porque
   si no, el blanco sobre el celeste casi no se distingue. */
.atl-cert-badge-claro .atl-cert-logo {
	border: 1px solid var(--atl-border);
}


/* ============================================================
   27. VARIANTES PARA SOBRE NOSOTROS
   ------------------------------------------------------------
   Dos piezas pequenas que solo usa esta pagina:
     - la rejilla de tres sellos estrecha, para las zonas de
       operacion (reutiliza .atl-cert-badge del bloque 12)
     - la caja de marcador de posicion del organigrama, mientras
       el cliente entrega la imagen
   ============================================================ */

/* Tres sellos centrados y con ancho limitado. Sin el max-width,
   tres elementos repartidos en 1180px quedan demasiado separados. */
.atl-cert-grid.atl-cols-3-narrow {
	grid-template-columns: repeat(3, 1fr);
	max-width: 760px;
	margin: 0 auto;
}

/* Caja de marcador de posicion.
   PROVISIONAL: se elimina cuando se inserte la imagen real del
   organigrama. El borde punteado deja claro que falta contenido,
   en vez de disimularlo. */
.atl-placeholder {
	border: 2px dashed var(--atl-border);
	border-radius: 14px;
	background: #fff;
	color: var(--atl-muted);
	font-size: 13.5px;
	text-align: center;
	padding: 48px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* La imagen del organigrama, cuando exista, se adapta al ancho
   disponible sin deformarse ni desbordar en movil. */
.atl-organigrama img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	border-radius: 14px;
}

@media (max-width: 720px) {
	.atl-cert-grid.atl-cols-3-narrow {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   28. VALORES, PRINCIPIOS Y COMPROMISO (SOBRE NOSOTROS)
   ------------------------------------------------------------
   El mockup tenia tres tarjetas cortas (mision, vision, valores).
   El cliente entrego textos reales mucho mas extensos: mision y
   vision largas, ocho valores, ocho principios y una declaracion
   de compromiso. Tres tarjetas no alcanzan para ese volumen sin
   quedar ilegibles, asi que cada bloque tiene su propia pieza:
     - valores: rejilla de 4 columnas con tarjetas pequenas
     - principios: lista numerada a dos columnas
     - compromiso: bloque destacado de cierre
   ============================================================ */

/* Mision y vision: los textos son largos, se lee mejor alineado
   a la izquierda y con un poco mas de altura de linea. */
.atl-mv-card p {
	font-size: 14px;
	line-height: 1.75;
}

/* --- Valores --- */
.atl-valores-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
/* Tarjeta de valor con una linea azul superior como acento. */
.atl-valor {
	background: #fff;
	border: 1px solid var(--atl-border);
	border-top: 3px solid var(--atl-blue);
	border-radius: 12px;
	padding: 20px 18px;
}
.atl-valor h4 {
	font-size: 15px;
	margin: 0 0 8px;
}
.atl-valor p {
	font-size: 12.8px;
	line-height: 1.6;
	margin: 0;
}

/* --- Principios --- */
.atl-principios {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.atl-principios li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin: 0;
}
/* Circulo azul marino con el numero del principio. */
.atl-principios .atl-num {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--atl-navy);
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.atl-principios h4 {
	font-size: 15px;
	margin: 4px 0 4px;
}
.atl-principios p {
	font-size: 13.2px;
	margin: 0;
}

/* --- Compromiso: bloque de cierre destacado --- */
.atl-compromiso {
	background: linear-gradient(120deg, var(--atl-navy), var(--atl-blue-dark));
	border-radius: 18px;
	padding: 44px 48px;
	color: #fff;
	text-align: center;
}
.atl-compromiso h3 {
	color: #fff;
	font-size: 22px;
	margin: 0 0 14px;
}
.atl-compromiso p {
	color: #D6DEF2;
	font-size: 15.5px;
	line-height: 1.75;
	max-width: 780px;
	margin: 0 auto;
}

@media (max-width: 980px) {
	.atl-valores-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 720px) {
	.atl-principios {
		grid-template-columns: 1fr;
	}
	.atl-compromiso {
		padding: 32px 22px;
	}
}
@media (max-width: 560px) {
	.atl-valores-grid {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   29. SELLO DE ICONTEC EN EL HEADER
   ------------------------------------------------------------
   Junto al logo de Atlantis va el sello de Icontec, enlazado al
   certificado. Se separa con una linea vertical fina para que se
   lea como un respaldo externo y no como parte del logo.

   El sello es vertical, asi que a la misma altura ocupa poco
   ancho; aun asi, en pantallas medianas se reduce y en moviles
   muy pequenos se oculta, porque ahi el espacio del header lo
   necesitan el logo y el boton de WhatsApp.
   ============================================================ */

.atl-brand-sello {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

/* Linea divisoria entre el logo y el sello. */
.atl-brand-sep {
	width: 1px;
	height: 54px;
	background: var(--atl-border);
	flex-shrink: 0;
}

.atl-sello-icontec img {
	height: 46px;
	width: auto;
	display: block;
	transition: opacity .15s;
}
.atl-sello-icontec:hover img {
	opacity: .78;
}

@media (max-width: 1100px) {
	.atl-sello-icontec img { height: 38px; }
	.atl-brand-sello { gap: 10px; }
}
@media (max-width: 620px) {
	/* En movil se oculta: el header no tiene ancho para logo,
	   sello, hamburguesa y boton de WhatsApp a la vez. */
	.atl-sello-icontec,
	.atl-brand-sep { display: none; }
}


/* ============================================================
   30. FORMULARIOS (CONTACT FORM 7)
   ------------------------------------------------------------
   Se usan en PQRS y en la Linea Anticorrupcion.

   IMPORTANTE: Contact Form 7 genera sus campos dentro de
   etiquetas <p>. NO se deben envolver los campos en <div>
   propios porque CF7 los rompe. Por eso la rejilla de dos
   columnas se aplica al propio <form> y cada <p> es una celda.
   ============================================================ */

/* Tarjeta blanca que contiene el formulario. */
.atl-form-card {
	background: #fff;
	border: 1px solid var(--atl-border);
	border-radius: 16px;
	padding: 34px 32px;
	box-shadow: var(--atl-shadow);
}
.atl-form-card h3 {
	font-size: 20px;
	margin: 0 0 6px;
}
.atl-form-card .atl-form-intro {
	font-size: 13.5px;
	margin: 0 0 24px;
}

/* Rejilla aplicada al formulario: dos columnas en escritorio. */
.atl-form-card .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
}
/* Los <p> que deben ocupar el ancho completo llevan class="full". */
.atl-form-card .wpcf7-form p.full {
	grid-column: 1 / -1;
}
/* CF7 inserta <p> vacios y bloques ocultos; se sacan de la
   rejilla para que no dejen huecos. */
.atl-form-card .wpcf7-form p:empty,
.atl-form-card .screen-reader-response {
	display: none;
}

.atl-form-card label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--atl-navy);
	margin-bottom: 0;
}

/* Campos de texto. box-sizing evita que el relleno interno
   desborde el ancho de la columna. */
.atl-form-card input[type="text"],
.atl-form-card input[type="email"],
.atl-form-card input[type="tel"],
.atl-form-card select,
.atl-form-card textarea {
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
	padding: 12px 14px;
	border: 1px solid var(--atl-border);
	border-radius: 9px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--atl-ink);
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.atl-form-card textarea {
	resize: vertical;
	min-height: 110px;
}
.atl-form-card input:focus,
.atl-form-card select:focus,
.atl-form-card textarea:focus {
	outline: none;
	border-color: var(--atl-blue);
	box-shadow: 0 0 0 3px rgba(0, 131, 215, .15);
}

/* Los navegadores pintan de rojo los campos de correo en cuanto
   se escribe una letra, antes de terminar. Esto lo neutraliza:
   el error solo se muestra cuando CF7 valida al enviar. */
.atl-form-card input[type="email"]:invalid {
	border-color: var(--atl-border);
	box-shadow: none;
}

/* Casilla de autorizacion de datos. */
.atl-form-card .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}
.atl-form-card .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	font-size: 12.5px;
	color: var(--atl-muted);
	line-height: 1.5;
}
.atl-form-card .wpcf7-acceptance input[type="checkbox"] {
	margin-top: 2px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.atl-form-card .wpcf7-acceptance a {
	color: var(--atl-blue-dark);
	font-weight: 600;
	text-decoration: underline;
}

/* Boton de envio. */
.atl-form-card input[type="submit"] {
	background: var(--atl-blue);
	color: #fff;
	border: none;
	border-radius: 9px;
	padding: 14px 30px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0, 131, 215, .30);
	transition: background .15s;
}
.atl-form-card input[type="submit"]:hover {
	background: var(--atl-blue-dark);
}
/* Boton azul marino a todo el ancho, para la linea de denuncias. */
.atl-form-navy input[type="submit"] {
	background: var(--atl-navy);
	box-shadow: none;
	width: 100%;
}
.atl-form-navy input[type="submit"]:hover {
	background: var(--atl-navy-2);
}

/* Indicador giratorio que CF7 muestra mientras envia. */
.atl-form-card .wpcf7-spinner {
	margin-left: 12px;
}

/* --- Mensajes de respuesta de CF7 ---
   CF7 marca el estado con una clase en el propio <form>.
   Verificado en el proyecto anterior: los valores utiles son
   "sent" (enviado) y los de error. Clases como "mail-sent"
   no funcionan en las versiones actuales. */
.atl-form-card .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 4px 0 0;
	padding: 14px 16px;
	border-radius: 9px;
	font-size: 13.5px;
	border: 1px solid var(--atl-border);
}
.atl-form-card form.sent .wpcf7-response-output {
	background: #E8F7EE;
	border-color: #9FD9B5;
	color: #15683A;
}
.atl-form-card form.invalid .wpcf7-response-output,
.atl-form-card form.failed .wpcf7-response-output,
.atl-form-card form.aborted .wpcf7-response-output {
	background: #FDECEC;
	border-color: #F0B5B5;
	color: #A32020;
}
/* Mensaje de error bajo cada campo. */
.atl-form-card .wpcf7-not-valid-tip {
	color: #A32020;
	font-size: 12px;
	margin-top: 5px;
	display: block;
}
.atl-form-card .wpcf7-not-valid {
	border-color: #E39A9A !important;
}

/* Nota bajo el formulario. */
.atl-form-nota {
	font-size: 12px;
	color: var(--atl-muted);
	margin-top: 16px;
	text-align: center;
}

/* En movil, una sola columna. */
@media (max-width: 720px) {
	.atl-form-card .wpcf7-form {
		grid-template-columns: 1fr;
	}
	.atl-form-card {
		padding: 24px 20px;
	}
}


/* ============================================================
   31. PAGINAS DE DOCUMENTOS LEGALES
   ------------------------------------------------------------
   Formato de lectura para la Politica de Tratamiento de Datos y
   la Politica del Sistema Integrado de Gestion.

   El ancho se limita a 820px a proposito: un texto legal a todo
   lo ancho de la pantalla es practicamente ilegible.
   ============================================================ */

.atl-legal {
	max-width: 820px;
	margin: 0 auto;
}
.atl-legal h2 {
	font-size: 22px;
	margin: 38px 0 14px;
	padding-top: 22px;
	border-top: 1px solid var(--atl-border);
}
/* El primer titulo no lleva linea arriba. */
.atl-legal h2:first-of-type {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}
.atl-legal h3 {
	font-size: 16.5px;
	margin: 24px 0 10px;
}
.atl-legal p {
	font-size: 14.5px;
	line-height: 1.8;
	margin: 0 0 14px;
}
.atl-legal ul,
.atl-legal ol {
	margin: 0 0 18px;
	padding-left: 22px;
}
.atl-legal li {
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--atl-muted);
	margin-bottom: 9px;
}
.atl-legal strong {
	color: var(--atl-navy);
}

/* Recuadro destacado: datos del responsable, canales, vigencia. */
.atl-legal-box {
	background: #EEF3FB;
	border-radius: 12px;
	padding: 24px 26px;
	margin: 0 0 30px;
}
.atl-legal-box p {
	margin: 0 0 8px;
	font-size: 14px;
}
.atl-legal-box p:last-child {
	margin-bottom: 0;
}

/* Aviso del documento completo en PDF. */
.atl-legal-descarga {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--atl-border);
	border-radius: 12px;
	padding: 20px 22px;
	margin-top: 34px;
}

/* Tarjeta de documento que ocupa la fila completa. */
.atl-doc-ancha {
	grid-column: 1 / -1;
}

@media (max-width: 720px) {
	.atl-legal-descarga {
		flex-wrap: wrap;
	}
}


/* ============================================================
   32. MARCA DE AGUA DEL LOGO
   ------------------------------------------------------------
   Logo a tamano completo, centrado y muy tenue, detras de todo
   el contenido.

   COMO FUNCIONA: va en el <body>, asi que solo se ve a traves de
   las secciones que NO tienen fondo propio (las de fondo gris).
   Las secciones blancas y las azules la tapan. El efecto es que
   aparece de forma intermitente al desplazarse, en vez de quedar
   pegada detras de todos los textos.

   z-index:0 con el contenido en z-index:1 la mantiene siempre al
   fondo, y pointer-events:none evita que intercepte clics.

   EL TAMANO se define en unidades de pantalla (vmin), asi ocupa
   la misma proporcion en un monitor grande que en un portatil.

   LA OPACIDAD es del 5%: por encima de eso empieza a restarle
   legibilidad al texto. Si el cliente la quiere mas o menos
   visible, se cambia UNICAMENTE el valor de "opacity" de abajo.
   ============================================================ */

body::before {
	content: '';
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* 95% del lado mas corto de la pantalla, con topes para que no
	   se desborde en monitores muy grandes ni desaparezca en
	   pantallas pequenas.
	   El porcentaje es alto a proposito: el archivo del logo trae
	   un margen interno de unos 190 px por lado, asi que el dibujo
	   ocupa solo el 79% del recuadro. */
	width: clamp(320px, 95vmin, 1200px);
	height: clamp(320px, 95vmin, 1200px);
	background-image: url('https://www.seguridadatlantis.com.co/wp-content/uploads/2026/09/Logo-Seguridad-Atlantis-1800-x-1800.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	opacity: .05;
	pointer-events: none;
	z-index: 0;
}

/* El contenido del sitio se mantiene por encima de la marca. */
#page,
.ehf-header,
.ehf-footer,
.site-content {
	position: relative;
	z-index: 1;
}

/* En movil se reduce: la pantalla es estrecha y una marca grande
   queda justo detras del texto. */
@media (max-width: 820px) {
	body::before {
		width: 76vmin;
		height: 76vmin;
		opacity: .04;
	}
}


/* ============================================================
   33. ICONOS DE REDES SOCIALES
   ------------------------------------------------------------
   Reemplazan el texto "Facebook" / "Instagram" de la barra
   superior y las iniciales del footer por los iconos reales,
   dibujados como SVG.

   Se usa fill:currentColor para que el icono tome el color del
   texto que lo rodea: asi el mismo dibujo sirve en la barra azul
   y en el footer oscuro, sin duplicar archivos.
   ============================================================ */

.atl-topbar-right a svg,
.atl-footer-social a svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	display: block;
}
.atl-footer-social a svg {
	width: 15px;
	height: 15px;
}

/* En la barra superior los iconos necesitan algo mas de aire
   entre si que el que tenia el texto. */
.atl-topbar-right {
	gap: 16px;
}
.atl-topbar-right a {
	display: flex;
	align-items: center;
}


/* ============================================================
   34. DOS SELLOS EN EL HEADER
   ------------------------------------------------------------
   Ajuste del bloque 29: ahora van Icontec e IQNet juntos. IQNet
   es circular, asi que a igual altura se percibe mas grande; se
   reduce al 80%, igual que en la franja de certificaciones.

   Al quitar el boton "Cotizar por WhatsApp" del header quedo
   espacio suficiente para los dos sellos sin apretar el menu.
   ============================================================ */

.atl-sellos {
	display: flex;
	align-items: center;
	gap: 12px;
}
/* Los dos sellos van al MISMO alto por peticion del cliente.
   Nota: un circulo se percibe mas grande que un rectangulo de
   igual altura, asi que IQNet se vera visualmente mayor. Si algun
   dia se quiere equilibrar opticamente, basta con bajar el alto
   de IQNet a un 80% del de Icontec. */
.atl-sellos .atl-sello-icontec img,
.atl-sellos .atl-sello-iqnet img {
	height: 56px;
	width: auto;
	display: block;
	transition: opacity .15s;
}
.atl-sellos a:hover img {
	opacity: .78;
}

@media (max-width: 1100px) {
	.atl-sellos .atl-sello-icontec img,
	.atl-sellos .atl-sello-iqnet img { height: 44px; }
	.atl-sellos { gap: 9px; }
	.atl-brand img { height: 52px; }
	.atl-brand-sep { height: 44px; }
}
@media (max-width: 760px) {
	/* En pantallas pequenas se ocultan los sellos: el header solo
	   tiene sitio para el logo y la hamburguesa. */
	.atl-sellos,
	.atl-brand-sep { display: none; }
}


/* ============================================================
   35. ANIMACIONES
   ------------------------------------------------------------
   Movimiento discreto, sin JavaScript y sin plugins.

   COMO FUNCIONA LA APARICION AL DESPLAZAR:
   se usa animation-timeline: view(), que vincula la animacion a
   la posicion del elemento dentro de la pantalla. No hace falta
   codigo: el navegador la ejecuta al entrar el elemento en vista,
   y una sola vez.

   POR QUE VA DENTRO DE @supports:
   los navegadores que no reconocen esta funcion simplemente no
   aplican nada y el contenido se ve normal, completo y visible.
   Es deliberado: si el estado inicial "invisible" se declarara
   fuera del @supports, en esos navegadores el contenido quedaria
   oculto para siempre. Con este orden, lo peor que puede pasar es
   que no haya animacion, nunca que falte contenido.

   ACCESIBILIDAD: al final del bloque se desactiva todo para quien
   tenga "reducir movimiento" activado en su sistema operativo.
   No es un adorno: el movimiento produce mareo a algunas personas.
   ============================================================ */

/* Entrada: desvanecido con un desplazamiento corto hacia arriba. */
@keyframes atl-aparecer {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}

@supports (animation-timeline: view()) {

	/* Elementos que aparecen al entrar en pantalla.
	   Se apunta a las clases que ya usan las paginas, por eso no
	   hace falta cambiar ningun HTML. */
	.atl-section-head,
	.atl-service-card,
	.atl-value-card,
	.atl-valor,
	.atl-cert-badge,
	.atl-cert-badge-claro,
	.atl-doc-card,
	.atl-info-box,
	.atl-trust-item,
	.atl-why-point,
	.atl-why-img,
	.atl-compromiso,
	.atl-principios li,
	.atl-row-2col > *,
	.atl-legal-box,
	.atl-form-card,
	.atl-portal-card {
		animation: atl-aparecer both;
		animation-timeline: view();
		/* Empieza cuando el elemento asoma y termina cuando ha
		   subido un 32% de la pantalla: asi acaba de animarse
		   antes de quedar centrado, y no distrae al leer. */
		animation-range: entry 0% cover 32%;
	}

	/* Escalonado: dentro de una misma fila, cada tarjeta arranca un
	   poco despues que la anterior. Con animaciones ligadas al
	   scroll no se usa animation-delay sino un desfase en el rango,
	   porque el "tiempo" aqui es la posicion de la pagina. */
	.atl-services-grid > *:nth-child(2),
	.atl-valores-grid > *:nth-child(2),
	.atl-cert-grid > *:nth-child(2),
	.atl-value-grid > *:nth-child(2),
	.atl-trust-grid > *:nth-child(2) {
		animation-range: entry 4% cover 36%;
	}
	.atl-services-grid > *:nth-child(3),
	.atl-valores-grid > *:nth-child(3),
	.atl-cert-grid > *:nth-child(3),
	.atl-value-grid > *:nth-child(3),
	.atl-trust-grid > *:nth-child(3) {
		animation-range: entry 8% cover 40%;
	}
	.atl-services-grid > *:nth-child(4),
	.atl-valores-grid > *:nth-child(4),
	.atl-cert-grid > *:nth-child(4),
	.atl-trust-grid > *:nth-child(4) {
		animation-range: entry 12% cover 44%;
	}

	/* El hero no se anima al desplazar (ya esta visible al cargar):
	   entra una sola vez al abrir la pagina. */
	.atl-hero-inner > div {
		animation: atl-aparecer .7s ease-out both;
		animation-timeline: auto;
	}
	.atl-hero-visual {
		animation: atl-aparecer .7s ease-out .15s both;
		animation-timeline: auto;
	}
}


/* ------------------------------------------------------------
   INTERACCION CON EL MOUSE
   Funciona en todos los navegadores, sin depender de lo anterior.
   ------------------------------------------------------------ */

/* La foto de la tarjeta de servicio se acerca lentamente.
   overflow:hidden ya estaba en .atl-img-wrap, asi que la imagen
   crece por dentro del marco sin desbordarlo. */
.atl-service-card .atl-img-wrap .atl-photo-fill {
	transition: transform 3.5s ease-out;
}
.atl-service-card:hover .atl-img-wrap .atl-photo-fill {
	transform: scale(1.07);
}

/* El enlace "Ver mas" se desplaza un poco a la derecha, como si
   siguiera a su propia flecha. */
.atl-more {
	transition: transform .18s ease-out;
}
.atl-more:hover {
	transform: translateX(4px);
}

/* Las tarjetas de documento se levantan y marcan su borde. */
.atl-doc-card {
	transition: box-shadow .18s, transform .18s, border-color .18s;
}
.atl-doc-card:hover {
	transform: translateY(-3px);
	border-color: #C7D6EC;
}

/* Los sellos de certificacion reaccionan al pasar el mouse. */
.atl-cert-badge,
.atl-cert-badge-claro {
	transition: transform .18s, background .18s;
}
.atl-cert-badge:hover {
	transform: translateY(-3px);
	background: rgba(255, 255, 255, .11);
}
.atl-cert-badge-claro:hover {
	transform: translateY(-3px);
	background: #E5EDF9;
}

/* Tarjetas de valor y cajas de informacion: elevacion minima. */
.atl-value-card,
.atl-valor,
.atl-info-box {
	transition: transform .18s, box-shadow .18s;
}
.atl-value-card:hover,
.atl-valor:hover,
.atl-info-box:hover {
	transform: translateY(-3px);
	box-shadow: var(--atl-shadow);
}

/* Subrayado que crece bajo las opciones del menu al pasar el
   mouse. Se dibuja con ::after para no alterar el alto del header. */
.atl-nav .atl-nav-link {
	position: relative;
}
.atl-nav .atl-nav-link::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 6px;
	height: 2px;
	background: var(--atl-blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease-out;
}
.atl-nav .atl-nav-link:hover::after {
	transform: scaleX(1);
}
/* En el menu movil el subrayado sobra: ahi las opciones son filas
   completas y el fondo ya marca cual se esta tocando. */
@media (max-width: 900px) {
	.atl-nav .atl-nav-link::after { display: none; }
}


/* ------------------------------------------------------------
   RESPETO A "REDUCIR MOVIMIENTO"
   Si la persona lo activo en su sistema, se apaga TODO: las
   apariciones, los acercamientos y el latido del boton flotante.
   El sitio queda completo y estatico.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
	.atl-service-card:hover .atl-img-wrap .atl-photo-fill {
		transform: none;
	}
}


/* ============================================================
   36. ANIMACION DE ENTRADA EN PAGINAS INTERNAS
   ------------------------------------------------------------
   PROBLEMA QUE RESUELVE:
   la aparicion del bloque 35 se dispara cuando un elemento ENTRA
   en pantalla. En las paginas internas, el banner y la primera
   seccion ya estan visibles al cargar, asi que nunca "entran" y
   se veian completamente quietas. El efecto solo se notaba en
   Inicio, que es larga.

   SOLUCION: a esos elementos se les da una animacion normal, de
   las que corren al cargar la pagina (animation-timeline: auto),
   con un pequeno escalonado. Del segundo bloque en adelante sigue
   mandando la aparicion por desplazamiento del bloque 35.

   El selector ".atl-page-banner + section" significa "la seccion
   que va inmediatamente despues del banner", asi que no hace
   falta marcar nada en el HTML de cada pagina.
   ============================================================ */

/* El banner de cabecera entra al cargar. */
.atl-page-banner .atl-breadcrumb {
	animation: atl-aparecer .55s ease-out both;
	animation-timeline: auto;
}
.atl-page-banner h1 {
	animation: atl-aparecer .55s ease-out .08s both;
	animation-timeline: auto;
}
.atl-page-banner p.atl-lead-sm {
	animation: atl-aparecer .55s ease-out .16s both;
	animation-timeline: auto;
}

/* La primera seccion despues del banner tambien entra al cargar,
   porque en pantallas grandes ya es visible sin desplazarse. */
.atl-page-banner + section .atl-section-head,
.atl-page-banner + section .atl-row-2col > * {
	animation: atl-aparecer .6s ease-out .24s both;
	animation-timeline: auto;
}
/* La foto de esa primera fila entra un poco despues que el texto. */
.atl-page-banner + section .atl-row-2col > *:last-child {
	animation-delay: .34s;
}

/* Sin esta regla, los navegadores que no soportan las animaciones
   por desplazamiento aplicarian igual las de arriba; se mantiene
   asi a proposito, porque estas son animaciones normales y
   funcionan en todos los navegadores. */

@media (prefers-reduced-motion: reduce) {
	.atl-page-banner .atl-breadcrumb,
	.atl-page-banner h1,
	.atl-page-banner p.atl-lead-sm,
	.atl-page-banner + section .atl-section-head,
	.atl-page-banner + section .atl-row-2col > * {
		animation: none !important;
	}
}


/* ============================================================
   37. TRABAJA CON NOSOTROS
   ------------------------------------------------------------
   Piezas propias de esta pagina:
     - variante de dos columnas alineadas arriba (el formulario y
       el texto tienen alturas distintas y centrarlos los descuadra)
     - rejilla de tres motivos
     - bloque del boton de WhatsApp bajo los motivos
     - aspecto del campo de archivo de Contact Form 7
   ============================================================ */

/* Dos columnas alineadas por arriba, no al centro. */
.atl-row-2col.atl-align-top {
	align-items: start;
}

/* Tres motivos en fila. Reutiliza .atl-valor del bloque 28. */
.atl-motivos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

/* Bloque del boton de WhatsApp, separado de los motivos por una
   linea para que se lea como una alternativa y no como parte de
   la lista de argumentos. */
.atl-wa-bloque {
	margin-top: 28px;
	border-top: 1px solid var(--atl-border);
	padding-top: 24px;
}
.atl-wa-bloque p {
	font-size: 13.5px;
	margin: 0 0 14px;
}

/* --- Campo de archivo de Contact Form 7 ---
   El control nativo de subida se ve distinto en cada navegador y
   desentona con el resto del formulario. Estas reglas le dan el
   mismo marco que a los demas campos y convierten su boton en uno
   con los colores del sitio.
   ::file-selector-button es la parte del boton "Examinar"; en
   navegadores basados en WebKit se llama distinto, por eso se
   declaran las dos versiones. */
.atl-form-card input[type="file"] {
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid var(--atl-border);
	border-radius: 9px;
	background: #fff;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: var(--atl-muted);
	cursor: pointer;
}
.atl-form-card input[type="file"]::file-selector-button,
.atl-form-card input[type="file"]::-webkit-file-upload-button {
	background: #EEF3FB;
	color: var(--atl-blue-dark);
	border: none;
	border-radius: 7px;
	padding: 9px 15px;
	margin-right: 12px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	transition: background .15s;
}
.atl-form-card input[type="file"]::file-selector-button:hover,
.atl-form-card input[type="file"]::-webkit-file-upload-button:hover {
	background: #E0EAF7;
}

/* Aclaracion bajo el campo de archivo (formatos y peso). */
.atl-form-ayuda {
	display: block;
	margin-top: 6px;
	font-size: 11.5px;
	color: var(--atl-muted);
}

/* En pantallas medianas los motivos pasan a una sola columna,
   porque la columna izquierda ya es estrecha. */
@media (max-width: 980px) {
	.atl-motivos-grid {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   38. BOTON "VOLVER ARRIBA"
   ------------------------------------------------------------
   Astra coloca su boton de volver arriba en la esquina inferior
   derecha, justo encima del boton flotante de WhatsApp. Los dos
   quedaban montados y era facil pulsar el que no era.

   Se mueve al centro del borde derecho: sigue a mano, no tapa
   nada y deja la esquina libre para WhatsApp, que es la accion
   comercial importante.

   Se apunta por sus dos nombres (#ast-scroll-top y
   .ast-scroll-top) porque Astra ha usado ambos segun la version.
   ============================================================ */

#ast-scroll-top,
.ast-scroll-top {
	/* Centrado vertical: top al 50% y se sube la mitad de su
	   propia altura con translateY. */
	top: 50% !important;
	bottom: auto !important;
	right: 18px !important;
	left: auto !important;
	transform: translateY(-50%);
	z-index: 290; /* por debajo del boton de WhatsApp (300) */
}

/* En movil se deja mas cerca del borde: la pantalla es estrecha
   y el boton estorba menos pegado. */
@media (max-width: 560px) {
	#ast-scroll-top,
	.ast-scroll-top {
		right: 10px !important;
	}
}


/* ============================================================
   39. EVENTOS — LISTADO Y ENTRADAS
   ------------------------------------------------------------
   La pagina /eventos/ no se arma con Elementor sino con el editor
   de bloques de WordPress, porque el bloque que lista entradas
   ("Bucle de consulta") solo existe ahi y es gratuito. El widget
   equivalente de Elementor es de pago.

   Funcionamiento: la pagina tiene tres bloques, uno por categoria
   (Reconocimientos, Capacitaciones, Cumpleanos). Cada uno lista
   solo las entradas de su categoria, en orden del mas reciente al
   mas antiguo. El cliente publica una entrada, le marca la
   categoria, y aparece sola en el bloque que corresponde.

   Este bloque de CSS le da a esos listados y a cada entrada el
   aspecto del resto del sitio; sin el se verian con el estilo por
   defecto de Astra.
   ============================================================ */

/* --- Encabezado de cada bloque de categoria --- */
.atl-eventos-bloque {
	margin-bottom: 64px;
}
.atl-eventos-bloque > h2 {
	font-size: 25px;
	margin: 0 0 6px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--atl-border);
}
.atl-eventos-bloque > p {
	font-size: 14px;
	margin: 0 0 28px;
}

/* --- Rejilla de tarjetas --- */
.atl-eventos-bloque .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.atl-eventos-bloque .wp-block-post-template > li {
	background: #fff;
	border: 1px solid var(--atl-border);
	border-radius: var(--atl-radius);
	overflow: hidden;
	box-shadow: var(--atl-shadow);
	transition: transform .18s;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.atl-eventos-bloque .wp-block-post-template > li:hover {
	transform: translateY(-4px);
}

/* Imagen destacada de cada entrada. */
.atl-eventos-bloque .wp-block-post-featured-image {
	margin: 0;
	height: 200px;
	overflow: hidden;
}
.atl-eventos-bloque .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 3.5s ease-out;
}
.atl-eventos-bloque .wp-block-post-template > li:hover .wp-block-post-featured-image img {
	transform: scale(1.06);
}

/* Si una entrada no tiene imagen destacada, se deja un bloque de
   color en vez de un hueco vacio que descuadre la fila. */
.atl-eventos-bloque .wp-block-post-featured-image:empty {
	background: #EEF3FB;
}

.atl-eventos-bloque .wp-block-post-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 16.5px;
	line-height: 1.35;
	margin: 20px 20px 8px;
	color: var(--atl-navy);
}
.atl-eventos-bloque .wp-block-post-title a {
	color: var(--atl-navy);
}
.atl-eventos-bloque .wp-block-post-title a:hover {
	color: var(--atl-blue-dark);
}

/* El extracto es opcional: si la entrada no lo tiene, la tarjeta
   se ve bien igual. */
.atl-eventos-bloque .wp-block-post-excerpt {
	margin: 0 20px 20px;
	font-size: 13.5px;
	color: var(--atl-muted);
	flex-grow: 1;
}
.atl-eventos-bloque .wp-block-post-excerpt__more-text {
	margin-top: 10px;
}
.atl-eventos-bloque .wp-block-post-excerpt__more-link {
	font-weight: 700;
	font-size: 13px;
	color: var(--atl-blue-dark);
}

/* Mensaje cuando una categoria todavia no tiene entradas. */
.atl-eventos-bloque .wp-block-query-no-results {
	background: #EEF3FB;
	border-radius: 12px;
	padding: 28px 24px;
	text-align: center;
}
.atl-eventos-bloque .wp-block-query-no-results p {
	margin: 0;
	font-size: 13.5px;
}

@media (max-width: 980px) {
	.atl-eventos-bloque .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 620px) {
	.atl-eventos-bloque .wp-block-post-template {
		grid-template-columns: 1fr;
	}
	.atl-eventos-bloque {
		margin-bottom: 44px;
	}
}


/* ============================================================
   40. ENTRADA INDIVIDUAL DE EVENTO
   ------------------------------------------------------------
   Aspecto de la pagina de cada evento: el titulo, el texto y la
   galeria de fotos. Se apunta a .single-post, que es la clase que
   WordPress pone en el <body> de una entrada, para no afectar a
   las paginas normales del sitio.
   ============================================================ */

/* El contenido de la entrada se limita en ancho: un texto a todo
   lo ancho de la pantalla es incomodo de leer. */
.single-post .entry-content,
.single-post .ast-container {
	max-width: 900px;
}
.single-post .entry-title {
	font-size: 30px;
	line-height: 1.25;
}
.single-post .entry-content p {
	font-size: 15px;
	line-height: 1.75;
}

/* Galeria de fotos del evento. */
.single-post .wp-block-gallery {
	gap: 14px;
	margin: 30px 0;
}
.single-post .wp-block-gallery .wp-block-image img {
	border-radius: 12px;
	box-shadow: var(--atl-shadow);
}

/* Imagen suelta dentro de la entrada. */
.single-post .entry-content > .wp-block-image img {
	border-radius: var(--atl-radius);
	box-shadow: var(--atl-shadow);
}

/* Se ocultan los elementos del blog de Astra que no aportan en una
   galeria de eventos: autor, categoria, comentarios y navegacion
   entre entradas. La fecha se conserva dentro de la entrada. */
.single-post .ast-single-post-order,
.single-post .entry-meta .author,
.single-post .entry-meta .comments-link,
.single-post .post-navigation,
.single-post #comments {
	display: none;
}