/* =========================================================
   Dr. Abraham Álvarez Rosales — capa propia sobre la plantilla
   Paleta tomada del logo: marino #050065 y oro #C6982B

   REGLA DE CONTRASTE (medida, no estimada):
     oro #C6982B sobre blanco  = 2.65:1  -> NO usar para texto en claro
     oro #C6982B sobre marino  = 6.64:1  -> sí, es su lugar natural
     oro oscuro #8A6A1E en claro = 5.05:1 -> el que sí sirve para texto
   ========================================================= */

:root{
	--marino:        #050065;
	--marino-800:    #0B0B4E;
	--marino-900:    #06062F;
	--oro:           #C6982B;
	--oro-claro:     #E0B54A;
	--oro-texto:     #8A6A1E;   /* única variante válida sobre fondo claro */

	--tinta:         #1E1E2D;
	--tinta-suave:   #5A5A6E;
	--papel:         #FFFFFF;
	--papel-tint:    #F5F5F8;
	--linea:         #E3E3EA;
	--linea-oscura:  rgba(255,255,255,.18);

	--display: "Barlow", -apple-system, BlinkMacSystemFont, sans-serif;
	--texto:   "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	--ease:    cubic-bezier(.2,.7,.3,1);
}

/* ---------- base ---------- */
body{ color: var(--tinta); font-family: var(--texto); background: var(--papel); }
h1,h2,h3,h4,h5{ font-family: var(--display); color: var(--tinta); }
p{ color: var(--tinta-suave); line-height: 1.75; }
a{ color: var(--marino); }
a:hover{ color: var(--oro-texto); }
img{ max-width: 100%; height: auto; }

a:focus-visible, button:focus-visible{
	outline: 3px solid var(--oro); outline-offset: 3px;
}

/* El acento ámbar de la plantilla pasa a ser el oro de la marca */
.text-color-primary, .color-primary{ color: var(--oro-texto) !important; }

.section-wrap{ padding: 104px 0; }
.section-wrap--tint{ background: var(--papel-tint); }
.section-wrap--navy{ background: var(--marino); }

/* ---------- cabecera propia ----------
   No usa el sistema de navegación de la plantilla: ese depende de scripts.js,
   que además inicializa Revolution Slider, Slick e Isotope. Aquí no existen,
   así que se evita la dependencia entera. Solo Bootstrap collapse. */
/* Dos estados, medidos sobre la plantilla original:
     en reposo  -> barra flotante al 74.4% del ancho, sobre la portada
     desplazado -> barra a todo el ancho y comprimida al 62% de su alto,
                   con la franja de contacto replegada. */
.hdr{
	position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
	background: transparent; border: 0;
}

/* --- franja de contacto --- */
.hdr__top{
	height: 48px; overflow: hidden;
	transition: height .32s var(--ease), opacity .24s var(--ease);
}
.hdr__top-inner{
	height: 48px; display: flex; align-items: center; justify-content: space-between;
	gap: 20px; padding: 0 12.8%;
}
.hdr__top-left{ display: flex; align-items: center; gap: 26px; }
.hdr__top-left a{
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--display); font-size: 13.5px; font-weight: 500;
	color: rgba(255,255,255,.88); text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: color .2s var(--ease);
}
.hdr__top-left a:hover{ color: var(--oro-claro); }
.hdr__top-left i{ font-size: 13px; color: var(--oro); }
.hdr__top-right{ display: flex; align-items: center; gap: 14px; }
.hdr__top-right a{
	width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
	opacity: .8; transition: opacity .2s var(--ease);
}
.hdr__top-right a:hover{ opacity: 1; }
.hdr__top-right img{ width: 17px; height: 17px; object-fit: contain; }

/* --- barra blanca --- */
.hdr__bar{
	width: 74.4%; margin: 0 auto;
	background: #fff;
	box-shadow: 0 6px 28px rgba(5,0,101,.10);
	transition: width .34s var(--ease), box-shadow .34s var(--ease);
}
.hdr__inner{
	display: flex; align-items: center; gap: 20px;
	min-height: 92px; padding: 0 34px;
	transition: min-height .32s var(--ease), padding .32s var(--ease);
}

/* --- estado desplazado --- */
.hdr.is-scrolled .hdr__top{ height: 0; opacity: 0; }
.hdr.is-scrolled .hdr__bar{
	width: 100%;
	box-shadow: 0 2px 16px rgba(5,0,101,.10);
	border-bottom: 1px solid var(--linea);
}
.hdr.is-scrolled .hdr__inner{ min-height: 62px; padding: 0 3.6%; }
.hdr.is-scrolled .hdr__logo img{ height: 40px; }
.hdr.is-scrolled .hdr__menu > li > a{ padding-top: 19px; padding-bottom: 19px; }
.hdr.is-scrolled .hdr__menu > li > a::after{ bottom: 13px; }
.hdr.is-scrolled .hdr__cta{ padding: 10px 20px; }

.hdr__logo{ flex: none; display: block; line-height: 0; }
.hdr__logo img{ height: 52px; width: auto; transition: height .32s var(--ease); }

.hdr__nav{ margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* En escritorio el menú siempre está visible: la clase .collapse de Bootstrap
   lo ocultaría también aquí, y solo debe plegarse en móvil. */
@media (min-width: 992px){
	.hdr__nav.collapse{ display: flex !important; }
}
.hdr__menu{
	list-style: none; display: flex; align-items: center; gap: 2px;
	margin: 0; padding: 0;
}
.hdr__menu > li{ position: relative; }
.hdr__menu > li > a{
	display: block; position: relative; padding: 34px 13px;
	font-family: var(--display); font-weight: 600; font-size: 13.5px;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--tinta); text-decoration: none; white-space: nowrap;
	transition: padding .32s var(--ease), color .2s var(--ease);
}
.hdr__menu > li > a:hover, .hdr__menu > li > a.active{ color: var(--marino); }
.hdr__menu > li > a::after{
	content: ''; position: absolute; left: 13px; right: 13px; bottom: 26px;
	height: 2px; background: var(--oro);
	transform: scaleX(0); transform-origin: left center;
	transition: transform .28s var(--ease);
}
.hdr__menu > li > a:hover::after, .hdr__menu > li > a.active::after{ transform: scaleX(1); }

.hdr__cta{
	flex: none; margin-left: 14px; padding: 13px 24px;
	background: var(--marino); color: #fff;
	font-family: var(--display); font-weight: 600; font-size: 12.5px;
	letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
	white-space: nowrap;
	transition: background .22s var(--ease), padding .32s var(--ease);
}
.hdr__cta:hover{ background: var(--marino-800); color: #fff; }

.hdr__toggle{
	display: none; margin-left: auto; width: 46px; height: 46px;
	background: transparent; border: 1px solid var(--linea); padding: 0;
	flex-direction: column; align-items: center; justify-content: center; gap: 5px;
	cursor: pointer;
}
.hdr__toggle span{ display: block; width: 20px; height: 2px; background: var(--tinta); }

/* ---------- botones ---------- */
.btn-aar{
	display: inline-block; padding: 16px 34px;
	font-family: var(--display); font-weight: 600; font-size: 14px;
	letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
	border: 2px solid transparent; transition: all .22s var(--ease);
	min-height: 52px;
}
.btn-aar--gold{ background: var(--oro); color: var(--marino-900); border-color: var(--oro); }
.btn-aar--gold:hover{ background: var(--oro-claro); border-color: var(--oro-claro); color: var(--marino-900); }
.btn-aar--ghost{ background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-aar--ghost:hover{ background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.link-aar{
	display: inline-flex; align-items: center; gap: 12px; margin-top: 12px;
	padding: 13px 24px 13px 16px; min-height: 48px;
	border: 1px solid var(--linea); background: var(--papel);
	font-family: var(--display); font-weight: 600; font-size: 14px;
	color: var(--marino); text-decoration: none;
	transition: border-color .22s var(--ease), background .22s var(--ease);
}
/* El logotipo real de Doctoralia en vez de un icono genérico: su verde
   #00A085 y el símbolo blanco vienen del archivo de marca sin recolorear. */
.link-aar__logo{
	width: 34px; height: 34px; flex: none;
	border-radius: 6px; display: block;
}
.link-aar:hover{ border-color: var(--marino); background: var(--papel-tint); color: var(--marino); }

/* Enlace dentro de un texto: hereda el color de su párrafo, así que sirve
   igual sobre fondo claro y sobre los bloques marinos. Se distingue por el
   subrayado, no por el color, que es lo que aguanta en ambos fondos. */
.link-texto{
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(140,140,160,.6);
	transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.link-texto:hover{ color: var(--oro-texto); text-decoration-color: currentColor; }
.section-wrap--navy .link-texto,
.footer-aar .link-texto{ text-decoration-color: rgba(255,255,255,.45); }
.section-wrap--navy .link-texto:hover,
.footer-aar .link-texto:hover{ color: var(--oro-claro); }

/* ---------- encabezados de sección ---------- */
.section-head{ margin-bottom: 40px; }
.section-head--center{ text-align: center; margin-left: auto; margin-right: auto; max-width: 720px; }
.section-head__eyebrow{
	font-family: var(--display); font-size: 13px; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--oro-texto); margin: 0 0 12px;
}
.section-head__title{
	font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; font-weight: 600;
	letter-spacing: -.01em; margin: 0; text-wrap: balance;
}
.section-head__lead{ margin: 16px 0 0; font-size: 17px; }
.section-head--invert .section-head__title{ color: #fff; }
.section-head--invert .section-head__eyebrow{ color: var(--oro); }
.section-head--invert .section-head__lead{ color: rgba(255,255,255,.8); }

/* ---------- portada ---------- */
.hero{ position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero__media{
	position: absolute; inset: 0; background-size: cover;
	background-position: center; background-repeat: no-repeat;
}
.hero__scrim{
	position: absolute; inset: 0;
	/* Velo en dos capas en lugar de una sola densa:
	     - vertical: transparente en la parte alta, donde está el rostro;
	                 densa abajo, que es donde se apoya el texto.
	     - horizontal: apenas un tinte, para unificar la foto con la marca.
	   Medido sobre la foto real: el rostro pasa de 82.7% de velo a 35.8%,
	   y el texto blanco conserva 5.10:1 de contraste (mínimo exigido 4.5). */
	background:
		/* Ventana clara sobre el rostro del doctor, que en esta foto está a la
		   DERECHA, y densidad hacia la izquierda, que es donde se apoya el
		   texto sobre el collage quirúrgico.
		   Medido sobre la foto real: 31% de velo sobre el rostro y todo el
		   texto por encima de su mínimo de contraste. */
		radial-gradient(ellipse 620px 520px at 72% 37%,
			rgba(6,6,47,0) 0%, rgba(6,6,47,.04) 60%, rgba(6,6,47,.16) 100%),
		/* La meseta densa se mantiene hasta el 58%: el titular y la línea de
		   cédulas llegan hasta el 56% del ancho, y si el desvanecido empieza
		   antes su extremo derecho se queda sin fondo. */
		linear-gradient(105deg,
			rgba(5,0,101,.80) 0%,
			rgba(5,0,101,.70) 34%,
			rgba(5,0,101,.62) 58%,
			rgba(6,6,47,.06) 72%,
			rgba(6,6,47,.02) 100%);
}
/* En móvil la foto se recorta y el rostro apenas se ve, así que la ventana no
   aporta nada; además el texto sube a la zona alta y necesita fondo. */
@media (max-width: 991px){
	.hero__scrim{
		background: linear-gradient(180deg,
			rgba(6,6,47,.74) 0%, rgba(6,6,47,.62) 46%, rgba(6,6,47,.56) 100%);
	}
}
.hero__inner{ position: relative; z-index: 2; padding: 190px 15px 90px; }
.hero__eyebrow{
	font-family: var(--display); font-size: 13px; font-weight: 600;
	letter-spacing: .2em; text-transform: uppercase;
	color: #fff; margin: 0 0 20px;
}
.hero__title{
	font-size: clamp(42px, 7vw, 82px); line-height: 1.02; font-weight: 700;
	letter-spacing: -.025em; color: #fff; margin: 0 0 24px;
}
.hero__title span{ color: var(--oro-claro); }  /* variante para fondo oscuro */
.hero__lead{
	font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7;
	color: rgba(255,255,255,.9); max-width: 52ch; margin: 0 0 34px;
}
.hero__actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 46px; }
.hero__cred{
	font-family: var(--display); font-size: 12px; font-weight: 500;
	letter-spacing: .1em; color: rgba(255,255,255,.85);
	margin: 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2);
	max-width: 640px;
}

/* ---------- diferenciadores ---------- */
.benefits-wrap{ padding: 84px 0; border-bottom: 1px solid var(--linea); }
.benefit-aar{ padding-left: 26px; border-left: 2px solid var(--oro); height: 100%; }
.benefit-aar__num{
	display: block; font-family: var(--display); font-size: 13px; font-weight: 700;
	letter-spacing: .16em; color: var(--oro-texto); margin-bottom: 10px;
}
.benefit-aar__title{ font-size: 21px; font-weight: 600; margin: 0 0 10px; }
.benefit-aar__text{ margin: 0; font-size: 15px; }

/* ---------- figuras ---------- */
.figure-aar{ position: relative; }
.figure-aar img{ width: 100%; display: block; }
.figure-aar::after{
	content: ''; position: absolute; left: 16px; top: 16px; right: -16px; bottom: -16px;
	border: 2px solid var(--oro); z-index: -1;
}

/* ---------- servicios ---------- */
.srv-grid{ margin-top: 8px; }
.srv-grid > [class*="col-"]{ margin-bottom: 30px; }
.srv{
	height: 100%; background: var(--papel);
	border: 1px solid var(--linea); overflow: hidden;
	transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.srv:hover{
	border-color: var(--marino);
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(5,0,101,.12);
}
/* La foto va como <img> y no como background-image: Google no indexa los
   fondos de CSS, así que en la versión anterior estas ocho imágenes eran
   invisibles para el buscador. El contenedor conserva su altura fija y el
   recorte lo hace object-fit, de modo que la maqueta no cambia. */
.srv__img{
	height: 190px; overflow: hidden;
	background-color: var(--papel-tint);
}
.srv__img img{
	display: block; width: 100%; height: 100%;
	object-fit: cover; object-position: center;
}
.srv__body{ padding: 24px 22px 26px; }
.srv__title{
	font-size: 19px; font-weight: 600; margin: 0 0 10px; color: var(--marino);
	line-height: 1.25;
}
.srv__text{ margin: 0; font-size: 14.5px; line-height: 1.7; }

/* ---------- aseguradoras ---------- */
/* ---------- aseguradoras (carrusel) ----------
   Los PNG originales traían entre 18% y 100% de relleno interno, así que a
   igual altura CSS unos se veían diminutos y otros enormes. Se recortaron al
   contenido y se rehicieron sobre un lienzo común de 360x128; aquí solo hace
   falta darles la misma altura. */
.slick-insurers{ margin: 0; }
.insurer{
	/* Sin margen negativo: con -8px, Slick calculaba el ancho de la pista y
	   redondeaba 1px por encima del viewport, lo que provocaba scroll
	   horizontal en móvil. El aire entre tarjetas se resuelve con padding. */
	padding: 0 7px;
	outline: none;
}
/* La franja se hizo más alta (96 -> 124 px) al normalizar los logos: los de
   marca cuadrada (AXA, MetLife) quedaban diminutos al lado de los alargados,
   porque en una caja tan apaisada la altura los frenaba antes que el ancho.
   Con el lienzo de 360x180 y esta altura, los ocho pesan casi lo mismo. */
.insurer img{
	width: 100%; height: 124px; object-fit: contain;
	background: #fff; padding: 16px 20px;
	transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.insurer:hover img{
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(0,0,0,.28);
}

.slick-insurers .slick-prev,
.slick-insurers .slick-next{ width: 40px; height: 40px; z-index: 3; }
.slick-insurers .slick-prev{ left: -46px; }
.slick-insurers .slick-next{ right: -46px; }
.slick-insurers .slick-prev:before,
.slick-insurers .slick-next:before{
	font-size: 24px; color: #fff; opacity: .7;
	transition: color .2s var(--ease), opacity .2s var(--ease);
}
.slick-insurers .slick-prev:hover:before,
.slick-insurers .slick-next:hover:before,
.slick-insurers .slick-prev:focus-visible:before,
.slick-insurers .slick-next:focus-visible:before{ color: var(--oro); opacity: 1; }
.slick-insurers .slick-prev:focus-visible,
.slick-insurers .slick-next:focus-visible{ outline: 3px solid var(--oro); outline-offset: 2px; }

@media (max-width: 1199px){
	.slick-insurers .slick-prev{ left: -16px; }
	.slick-insurers .slick-next{ right: -16px; }
}
@media (max-width: 767px){
	.insurer img{ height: 108px; padding: 14px 18px; }
	.slick-insurers .slick-prev{ left: -8px; }
	.slick-insurers .slick-next{ right: -8px; }
}

/* ---------- lista con marca ---------- */
.checklist{ list-style: none; padding: 0; margin: 26px 0 0; }
.checklist li{
	position: relative; padding-left: 30px; margin-bottom: 12px;
	font-family: var(--display); font-weight: 500; font-size: 16px; color: var(--tinta);
}
.checklist li::before{
	content: ''; position: absolute; left: 0; top: 9px;
	width: 14px; height: 2px; background: var(--oro);
}

/* ---------- testimonios (carrusel Slick, como la plantilla) ---------- */
.slick-testimonials{ margin-bottom: 34px; }
.slick-testimonials .testimonial{ padding: 8px 20px 0; text-align: center; }
.testimonial__text{
	font-family: var(--display); font-weight: 400; font-style: italic;
	font-size: clamp(19px, 2vw, 26px); line-height: 1.55;
	color: #fff; margin-bottom: 28px;
}
/* Nombre y descriptor van en la misma línea separados por "/", igual que la
   plantilla: su .testimonial__author:after inserta esa barra. */
.testimonial__author{
	display: inline; font-family: var(--display); font-size: 17px;
	font-weight: 600; color: #fff;
}
.testimonial__company{
	display: inline;
	font-family: var(--display); font-size: 12px; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--oro);   /* el ámbar #ffb31a de la plantilla pasa al oro de marca */
}
/* Flechas como en la plantilla (iconos \e875 / \e876 de ui-icons), separadas
   un poco más que sus -15px para que no invadan el texto de la cita. */
.slick-testimonials .slick-prev,
.slick-testimonials .slick-next{
	width: 44px; height: 44px; z-index: 3;
	transition: opacity .2s var(--ease);
}
.slick-testimonials .slick-prev{ left: -56px; }
.slick-testimonials .slick-next{ right: -56px; }
.slick-testimonials .slick-prev:before,
.slick-testimonials .slick-next:before{
	font-size: 26px; color: #fff; opacity: .7;
	transition: color .2s var(--ease), opacity .2s var(--ease);
}
.slick-testimonials .slick-prev:hover:before,
.slick-testimonials .slick-next:hover:before,
.slick-testimonials .slick-prev:focus-visible:before,
.slick-testimonials .slick-next:focus-visible:before{ color: var(--oro); opacity: 1; }
.slick-testimonials .slick-prev:focus-visible,
.slick-testimonials .slick-next:focus-visible{ outline: 3px solid var(--oro); outline-offset: 2px; }

@media (max-width: 1199px){
	.slick-testimonials .slick-prev{ left: -18px; }
	.slick-testimonials .slick-next{ right: -18px; }
}
@media (max-width: 767px){
	.slick-testimonials .slick-prev{ left: -6px; }
	.slick-testimonials .slick-next{ right: -6px; }
	.slick-testimonials .slick-prev:before,
	.slick-testimonials .slick-next:before{ font-size: 22px; }
}
.slick-slide:focus, .slick-slide *:focus-visible{ outline-offset: 4px; }

/* Atribución: las opiniones son de pacientes reales publicadas en Doctoralia,
   así que se cita la fuente y se enlaza al perfil. */
.testimonials-fuente{ text-align: center; margin: 26px 0 0; }
.testimonials-fuente a{
	display: inline-block; padding: 9px 20px;
	border: 1px solid rgba(255,255,255,.28);
	font-family: var(--display); font-size: 13px; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	color: rgba(255,255,255,.82); text-decoration: none;
	transition: border-color .22s var(--ease), color .22s var(--ease);
}
.testimonials-fuente a:hover{ border-color: var(--oro); color: var(--oro); }

/* ---------- tarjetas de cita (sin uso tras el cambio a carrusel) ---------- */
.testimonials-wrap{ position: relative; background-size: cover; background-position: center; }
.testimonials-wrap__scrim{ position: absolute; inset: 0; background: rgba(6,6,47,.90); }
.testimonials-wrap__inner{ position: relative; z-index: 2; }
.quote-aar{
	height: 100%; margin: 0; padding: 32px 28px;
	background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
	border-top: 2px solid var(--oro);
}
.quote-aar__text{
	font-family: var(--display); font-size: 18px; font-weight: 400; font-style: italic;
	line-height: 1.6; color: #fff; margin: 0 0 20px;
}
.quote-aar__author{
	font-family: var(--display); font-size: 12px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: var(--oro);
}

/* ---------- contacto ---------- */
.contact-card{
	height: 100%; padding: 34px 30px;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
}
.contact-card__place{
	font-family: var(--display); font-size: 20px; font-weight: 600;
	color: #fff; margin: 0 0 4px;
}
.contact-card__note{ font-size: 14px; color: rgba(255,255,255,.7); margin: 0 0 26px; }
.contact-card__row{
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 15px 0; min-height: 52px;
	border-top: 1px solid rgba(255,255,255,.16);
	text-decoration: none; transition: padding-left .2s var(--ease);
}
.contact-card__row:hover{ padding-left: 6px; }
.contact-card__label{
	font-family: var(--display); font-size: 12px; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase; color: var(--oro);
}
.contact-card__value{
	font-family: var(--display); font-size: 17px; font-weight: 600; color: #fff;
	font-variant-numeric: tabular-nums;
}
.contact-card__social{ display: flex; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); }
.contact-card__social a{
	width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,.3); border-radius: 50%;
	transition: background .22s var(--ease), border-color .22s var(--ease);
}
.contact-card__social a:hover{ background: rgba(255,255,255,.14); border-color: #fff; }
.contact-card__social img{ width: 20px; height: 20px; object-fit: contain; }

.map-aar{ height: 100%; min-height: 420px; border: 1px solid rgba(255,255,255,.18); padding: 8px; }
.map-aar iframe{
	width: 100%; height: 100%; min-height: 404px; border: 0; display: block;
	filter: grayscale(100%); transition: filter .3s var(--ease);
}
.map-aar:hover iframe{ filter: grayscale(0%); }

/* ---------- pie ---------- */
.footer-aar{ background: var(--marino-900); padding: 72px 0 0; }
.footer-aar__name{
	font-family: var(--display); font-size: 21px; font-weight: 600; color: #fff; margin: 0 0 12px;
}
.footer-aar__text{ font-size: 14.5px; color: rgba(255,255,255,.68); max-width: 44ch; }
.footer-aar__head{
	font-family: var(--display); font-size: 12px; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; color: var(--oro); margin: 0 0 16px;
}
.footer-aar__list{ list-style: none; padding: 0; margin: 0 0 26px; }
.footer-aar__list li{ margin-bottom: 9px; }
.footer-aar__list a{
	color: rgba(255,255,255,.8); font-size: 14.5px; text-decoration: none;
	transition: color .2s var(--ease);
}
.footer-aar__list a:hover{ color: var(--oro-claro); }
.footer-aar__bottom{
	margin-top: 26px; padding: 24px 0 30px; border-top: 1px solid rgba(255,255,255,.14);
	display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between; align-items: center;
}
.footer-aar__bottom p{ margin: 0; font-size: 13px; color: rgba(255,255,255,.6); }
.footer-aar__legal{ font-family: var(--display); letter-spacing: .06em; }

/* ---------- adaptación ---------- */
@media (max-width: 1199px){
	.hdr__menu > li > a{ padding: 30px 9px; font-size: 12.5px; letter-spacing: .03em; }
	.hdr__cta{ padding: 12px 18px; margin-left: 8px; }
	.hdr__logo img{ height: 46px; }
}
@media (max-width: 991px){
	.section-wrap{ padding: 72px 0; }

	/* En móvil no hay barra flotante: ocupa todo y la franja se oculta,
	   igual que hace la plantilla original por debajo de 992px. */
	.hdr__top{ display: none; }
	.hdr__bar, .hdr.is-scrolled .hdr__bar{ width: 100%; }
	.hdr__inner, .hdr.is-scrolled .hdr__inner{ min-height: 68px; padding: 0 18px; }
	.hdr__logo img, .hdr.is-scrolled .hdr__logo img{ height: 42px; }
	.insurers{ grid-template-columns: repeat(3, 1fr); }
	.figure-aar::after{ display: none; }

	/* menú desplegable: el collapse de Bootstrap ocupa el ancho completo */
	.hdr__inner{ flex-wrap: wrap; min-height: 72px; }
	.hdr__toggle{ display: flex; }
	.hdr__nav{
		flex-basis: 100%; margin-left: 0; flex-direction: column;
		align-items: stretch; gap: 0; padding: 8px 0 18px;
		border-top: 1px solid var(--linea);
	}
	.hdr__nav.collapse:not(.show){ display: none; }
	.hdr__nav.collapsing, .hdr__nav.show{ display: flex; }
	.hdr__menu{ flex-direction: column; align-items: stretch; gap: 0; }
	.hdr__menu > li > a{
		padding: 0 4px; min-height: 48px; display: flex; align-items: center;
		font-size: 14px; border-bottom: 1px solid var(--linea);
	}
	.hdr__menu > li > a::after{ display: none; }
	.hdr__cta{ margin: 14px 0 0; text-align: center; }
}
@media (max-width: 767px){
	.hero{ min-height: 88vh; }
	.hero__inner{ padding: 120px 15px 70px; }
	.hero__actions .btn-aar{ width: 100%; text-align: center; }
	.insurers{ grid-template-columns: repeat(2, 1fr); }
	.benefit-aar{ margin-bottom: 30px; }
	.srv__img{ height: 165px; }
	.map-aar{ min-height: 320px; }
	.map-aar iframe{ min-height: 304px; }
}

@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.srv:hover{ transform: none; }
}

/* La hoja de la plantilla pide css/slick/ajax-loader.gif, que no venía en el
   paquete y provocaba un 404 en cada carga. No hace falta: se anula. */
.slick-loading .slick-list{ background: none; }