/* ==========================================================================
   PodoFeet · CSS base
   Se carga en todo el sitio. Trae los tokens, el reset, la cabecera, el pie,
   los botones y los bloques que comparten el home y las paginas interiores.
   Todo cuelga de body.pf para ganarle a los estilos de Divi.
   ========================================================================== */

body.pf {
	--blue:      #2C6BC9;
	--teal:      #10908A;
	--teal-lite: #4DBDB0;
	--teal-pop:  #7FE0D2;
	--navy:      #0C246C;
	--ink:       #10202E;
	--ink-2:     #4A5D70;
	--ink-3:     #7B8D9E;
	--surface:   #FFFFFF;
	--surface-2: #F2F7FA;
	--surface-3: #E7F0F6;
	--line:      #D8E4EE;
	--line-soft: #E9F0F5;
	--grad:      linear-gradient(90deg, #3B7DD8 0%, #4DBDB0 100%);
	--wa:        #25D366;
	--font:      "Baloo Tamma 2", "Trebuchet MS", system-ui, sans-serif;
	--maxw:      1180px;
	--pad:       clamp(16px, 3vw, 28px);
	--r-card:    12px;
	--r-btn:     6px;
	--r-map:     10px;
	/* Aire arriba y abajo de cada seccion. Wacho pidio mas respiro, 13 sep 2026. */
	--sec:       clamp(48px, 7vw, 84px);
	/* Recorte de las ondas. Deja el centro limpio y solo las asoma por
	   los lados, para que no peleen con el texto.
	   La columna de contenido mide 1180, o sea 590 a cada lado del
	   centro. A 630 la onda ya se apago un poco antes de que empiece
	   la letra. En pantallas de menos de 1260 las cuentas se cruzan,
	   el degradado queda todo transparente y la textura desaparece
	   sola. Eso es lo que queremos en portatil y telefono. */
	--pf-corte:  linear-gradient(90deg,
	             #000 0,
	             transparent calc(50% - 630px),
	             transparent calc(50% + 630px),
	             #000 100%);
}
/* --------------------------------------------------------------------------
   Red de seguridad. Si un filtro de PHP fallara, la cabecera de Divi
   igual queda oculta y no se ven dos menus.
   -------------------------------------------------------------------------- */
body.pf #top-header,
body.pf #main-header,
body.pf .et_slide_in_menu_container,
body.pf #et-boc > .et-l--header,
body.pf .et-l--footer,
body.pf #main-footer {
	display: none !important;
}
body.pf #page-container {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
body.pf.et_fixed_nav #page-container {
	padding-top: 0 !important;
}
/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body.pf {
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font);
	-webkit-font-smoothing: antialiased;
}
body.pf #main-content.pf {
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.6;
	position: relative;
	overflow-x: clip;
}
/* La cabecera y el pie van fuera de #main-content. Reciben lo mismo. */
body.pf .pf-header,
body.pf .pf-foot {
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.6;
}

body.pf .pf * {
	box-sizing: border-box;
}
body.pf .pf img {
	max-width: 100%;
}
body.pf .pf a {
	color: inherit;
	text-decoration: none;
}
body.pf .pf p {
	margin: 0;
	padding: 0;
	font-family: var(--font);
	line-height: inherit;
}
body.pf .pf h1,
body.pf .pf h2 {
	font-family: var(--font);
	padding: 0;
}
body.pf .pf ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Icono de WhatsApp. Va dentro de los botones, fuera del texto editable. */
body.pf .pf .wa-ico {
	width: 1.1em;
	height: 1.1em;
	flex: none;
	display: inline-block;
	vertical-align: -.15em;
}
/* Foco visible para quien navega con teclado. */
body.pf .pf a:focus-visible,
body.pf .pf button:focus-visible {
	outline: 3px solid var(--teal);
	outline-offset: 3px;
	border-radius: 4px;
}
/* --------------------------------------------------------------------------
   1 · Barra de contacto
   -------------------------------------------------------------------------- */
body.pf .pf-topbar {
	background: var(--surface);
	font-size: 13px;
	color: var(--ink-2);
}
body.pf .pf-topbar-in {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 7px var(--pad);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
body.pf .pf-topbar .ph {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 500;
	color: var(--ink-2);
}
body.pf .pf-topbar .ph .wa-ico {
	width: 16px;
	height: 16px;
	color: var(--wa);
}
body.pf .pf-social {
	display: flex;
	gap: 8px;
}
body.pf .pf-social a,
body.pf .pf-social span {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--ink-3);
	transition: background .18s;
}
body.pf .pf-social a:hover {
	color: #fff;
	background: var(--ink);
}
/* Red sin direccion todavia: mismo icono, tono neutro, sin enlace. */
body.pf .pf-social .is-off {
	background: var(--ink-3);
	cursor: default;
}
body.pf .pf-social svg {
	width: 15px;
	height: 15px;
	display: block;
}
body.pf .pf-social a.is-tiktok { background: #010101;
}
body.pf .pf-social a.is-instagram { background: #DD2A7B;
}
body.pf .pf-social a.is-facebook { background: #1877F2;
}
body.pf .pf-social a.is-youtube { background: #E00000;
}
/* --------------------------------------------------------------------------
   2 · Menu
   -------------------------------------------------------------------------- */
body.pf .pf-nav {
	background: var(--surface);
}
body.pf .pf-nav-in {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 4px var(--pad) 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	position: relative;
}
/* El SVG viene recortado al dibujo, sin el aire del PNG viejo. Por eso
   mide 50 y no 58: se ve del mismo tamano. min-height guarda la barra
   igual de alta: 58 + 4 + 8 = 70 px. */
body.pf .pf-logo {
	display: flex;
	align-items: center;
	flex: none;
	min-height: 58px;
}
body.pf .pf-logo img {
	height: 50px;
	width: auto;
	display: block;
}
body.pf ul.pf-links {
	display: flex;
	gap: 22px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink);
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
}
body.pf ul.pf-links li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}
body.pf ul.pf-links a {
	color: var(--ink);
	display: block;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	transition: color .18s, border-color .18s;
}
body.pf ul.pf-links a:hover,
body.pf ul.pf-links .current-menu-item > a {
	color: var(--teal);
	border-bottom-color: var(--teal);
}
/* WordPress marca como "actual" cualquier enlace a la pagina actual,
   y "Contactanos" apunta a /#contacto. Un ancla no se resalta. */
body.pf ul.pf-links .current-menu-item > a[href*="#"] {
	color: var(--ink);
	border-bottom-color: transparent;
}
body.pf ul.pf-links .current-menu-item > a[href*="#"]:hover {
	color: var(--teal);
	border-bottom-color: var(--teal);
}
/* Los submenus quedan planos. El home no necesita desplegables. */
body.pf ul.pf-links .sub-menu {
	display: none;
}
/* Boton de hamburguesa. Solo se ve en pantalla chica. */
body.pf .pf-burger {
	display: none;
	width: 40px;
	height: 34px;
	padding: 9px 8px;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 7px;
	cursor: pointer;
	flex-direction: column;
	justify-content: space-between;
	flex: none;
}
body.pf .pf-burger i {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--ink-2);
	border-radius: 2px;
	transition: transform .22s, opacity .18s;
}
body.pf .pf-nav.is-open .pf-burger i:nth-child(1) { transform: translateY(7px) rotate(45deg);
}
body.pf .pf-nav.is-open .pf-burger i:nth-child(2) { opacity: 0;
}
body.pf .pf-nav.is-open .pf-burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg);
}
/* --------------------------------------------------------------------------
   3 · Franja con la llamada a la accion
   -------------------------------------------------------------------------- */
body.pf .pf-strip {
	background: var(--grad);
	color: #fff;
}
body.pf .pf-strip-in {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 11px var(--pad);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}
body.pf .pf-strip p {
	margin: 0;
	font-size: clamp(14px, 1.4vw, 15.5px);
	font-weight: 500;
	color: #fff;
	text-align: center;
}
body.pf .pf-strip .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .55);
	color: #fff;
	border-radius: var(--r-btn);
	padding: 7px 17px;
	font-size: 13.5px;
	font-weight: 600;
	font-family: var(--font);
	cursor: pointer;
	white-space: nowrap;
	transition: background .18s;
}
body.pf .pf-strip .btn:hover {
	background: rgba(255, 255, 255, .3);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Tableta · el menu pasa a hamburguesa
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	body.pf .pf-burger {
		display: flex;
	}
	body.pf ul.pf-links {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 40;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		background: var(--surface);
		border-top: 1px solid var(--line);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 18px 30px -22px rgba(16, 32, 46, .55);
		padding: 6px 0;
	}
	body.pf .pf-nav.is-open ul.pf-links {
		display: flex;
	}
	body.pf ul.pf-links a {
		padding: 13px var(--pad);
		border-bottom: 1px solid var(--line-soft);
		font-size: 16px;
	}
	body.pf ul.pf-links li:last-child a {
		border-bottom: 0;
	}
	body.pf ul.pf-links a:hover,
	body.pf ul.pf-links .current-menu-item > a {
		border-bottom-color: var(--line-soft);
		background: var(--surface-2);
	}
}

/* --------------------------------------------------------------------------
   Telefono · el hero se parte en banda de video y panel debajo
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	body.pf .pf-topbar-in { padding: 7px 16px; font-size: 11.5px; }
	body.pf .pf-topbar { font-size: 11.5px; }
	body.pf .pf-nav-in { padding: 6px 16px 8px; }
	body.pf .pf-logo { min-height: 42px; }
	body.pf .pf-logo img { height: 36px; }
	body.pf .pf-strip-in { padding: 10px 16px; gap: 12px; }
	body.pf .pf-strip .btn { width: 100%; text-align: center; }
}
/* ==========================================================================
   Piezas comunes de los bloques nuevos
   ========================================================================== */
body.pf .pf-in {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--pad);
}
body.pf .pf-in--narrow {
	max-width: 840px;
}
body.pf .sec-head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 22px;
}
body.pf .sec-head h2 {
	font-size: clamp(23px, 2.8vw, 30px);
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 8px;
	letter-spacing: -.02em;
	line-height: 1.12;
	text-wrap: balance;
}
body.pf .sec-head p {
	margin: 0;
	font-size: clamp(14.5px, 1.5vw, 16px);
	color: var(--ink-2);
}
/* Sin subtitulo, el titulo no arrastra margen. */
body.pf .sec-head > :last-child {
	margin-bottom: 0;
}
body.pf .pf .lines {
	list-style: none;
	margin: 0;
	padding: 0;
}
body.pf .pf .lines li {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* ==========================================================================
   7 · Servicios
   ========================================================================== */
body.pf .sv {
	background: var(--surface-2);
	padding: var(--sec) 0;
}
body.pf .sv-grid {
	display: grid;
	/* Las columnas salen del numero de tarjetas, con tope de tres. Antes
	   eran tres fijas y con dos tarjetas sobraba un hueco. */
	grid-template-columns: repeat(var(--sv-cols, 3), 1fr);
	gap: 16px;
}
body.pf .sv-card {
	background: var(--surface);
	border-radius: var(--r-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
}
body.pf .sv-photo {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--surface-3);
	position: relative;
}
body.pf .sv-photo img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
body.pf .sv-body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
body.pf .sv-body h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
	margin: 0;
	line-height: 1.15;
	letter-spacing: -.015em;
	font-family: var(--font);
	padding: 0;
}
body.pf .sv-body p {
	font-size: 15px;
	color: var(--ink-2);
	margin: 0;
	line-height: 1.5;
}
body.pf .sv-desde {
	display: inline-block;
	align-self: flex-start;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--teal);
}
body.pf .sv-desde:empty {
	display: none;
}
body.pf .sv .sv-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	align-self: flex-start;
	background: var(--blue);
	color: #fff;
	border-radius: var(--r-btn);
	padding: 10px 18px;
	font-size: 14.5px;
	font-weight: 700;
	transition: filter .18s;
}
body.pf .sv .sv-btn:hover {
	color: #fff;
	filter: brightness(.92);
}
/* El boton siempre abajo, aunque el texto sea corto. */
body.pf .sv-body > :nth-last-child(2) {
	margin-bottom: auto;
}
/* ==========================================================================
   8 · Equipo
   ========================================================================== */
body.pf .eq {
	background: var(--surface);
	padding: var(--sec) 0;
}
/* La foto de grupo, como una banda ancha y baja. */
body.pf .eq-group {
	margin: 0 0 16px;
	border-radius: var(--r-card);
	overflow: hidden;
	aspect-ratio: 3 / 1;
	background: var(--surface-3);
	position: relative;
}
body.pf .eq-group img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}
/* Ivan a la izquierda. Los demas a la derecha, en una sola columna
   que mide lo mismo que la tarjeta de Ivan. */
body.pf .eq-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: stretch;
	gap: 14px;
}
body.pf .eq-minis {
	display: grid;
	grid-auto-rows: 1fr;
	gap: 10px;
	min-width: 0;
}
body.pf .eq-lead {
	background: var(--surface-2);
	border-radius: var(--r-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
}
/* La foto de Ivan es vertical. El encuadre sube para que se vean
   la cara y los brazos cruzados. */
body.pf .eq-lead .photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--surface-3);
	position: relative;
}
body.pf .eq-lead .photo img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	display: block;
}
body.pf .eq-lead .who {
	padding: 16px 20px 18px;
}
body.pf .eq-lead h3 {
	font-size: 22px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 2px;
	letter-spacing: -.02em;
	font-family: var(--font);
	padding: 0;
	line-height: 1.1;
}
body.pf .eq .role {
	font-size: 14px;
	color: var(--ink-2);
	margin: 0 0 4px;
}
/* Anos y sede, en una linea, separados por un punto. Sin pildoras. */
body.pf .eq .meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	align-items: baseline;
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--ink-3);
}
body.pf .eq .meta .years {
	font-weight: 600;
	color: var(--ink-2);
}
body.pf .eq .meta .sede {
	color: var(--teal);
	font-weight: 600;
}
body.pf .eq .meta .years + .sede::before {
	content: "· ";
	color: var(--ink-3);
	font-weight: 400;
}
body.pf .eq .meta .sede:empty {
	display: none;
}
body.pf .eq .creds {
	font-size: 13px;
	color: var(--ink-2);
	line-height: 1.4;
}
/* Credenciales de Ivan: lista simple, un renglon por titulo. */
body.pf .pf .eq-lead .creds li {
	padding: 4px 0;
	border-top: 1px solid var(--line-soft);
}
/* Tarjeta chica: la foto va cuadrada, pegada al borde, a todo el alto.
   Mismo estilo que la tarjeta de Ivan. */
body.pf .eq-mini {
	background: var(--surface-2);
	border-radius: var(--r-card);
	padding: 0;
	display: flex;
	gap: 0;
	align-items: stretch;
	border: 1px solid var(--line);
	min-width: 0;
	overflow: hidden;
}
body.pf .eq-mini .photo {
	flex: none;
	width: 150px;
	aspect-ratio: 1 / 1;
	border-radius: 0;
	overflow: hidden;
	background: var(--surface-3);
}
/* Las fotos del equipo son verticales. El encuadre sube para que la cara
   quede dentro del recuadro cuadrado y no se corte la cabeza. */
body.pf .eq-mini .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	display: block;
}
body.pf .eq-mini .who {
	min-width: 0;
	padding: 14px 16px;
	align-self: center;
}
body.pf .eq-mini h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 1px;
	font-family: var(--font);
	padding: 0;
	line-height: 1.15;
}
/* Rol, anos y sede en un solo renglon. */
body.pf .eq-mini .role {
	display: inline;
	font-size: 13px;
	margin: 0;
}
body.pf .eq-mini .meta {
	display: inline;
	margin: 0;
	font-size: 13px;
}
body.pf .eq-mini .role + .meta::before {
	content: " · ";
	color: var(--ink-3);
}
body.pf .eq-mini .meta .years + .sede::before {
	content: " · ";
}
body.pf .eq-mini .creds {
	font-size: 12.5px;
	color: var(--ink-3);
	margin-top: 4px;
}
/* ==========================================================================
   9 · Resenas
   ========================================================================== */
body.pf .rs {
	background: var(--surface-2);
	padding: var(--sec) 0;
	position: relative;
	overflow: hidden;
}
/* Onda de marca a los lados de las resenas. Va quieta: en cada pagina
   se mueve una sola cosa, y esa es la banda de cierre.

   La receta es siempre la misma en todo el sitio:
     la seccion se hace relative y con overflow hidden,
     un ::before pone la baldosa repetida a lo ancho,
     --pf-corte borra el centro y deja la onda solo en los margenes,
     y el .pf-in sube a z-index 1 para que el texto quede encima.
   La baldosa cierra en el borde, asi que repetirla no deja union. */
body.pf .rs::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url(../img/onda-suave.svg) repeat-x -980px center / 1600px 100%;
	opacity: .14;
	pointer-events: none;
	-webkit-mask-image: var(--pf-corte);
	        mask-image: var(--pf-corte);
}
body.pf .rs > .pf-in {
	position: relative;
	z-index: 1;
}
body.pf .rs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
body.pf .pf .rs-card {
	background: var(--surface);
	border-radius: var(--r-card);
	padding: 16px 18px 14px;
	margin: 0;
	border: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
body.pf .rs-card .stars {
	color: #F2B01E;
	font-size: 15px;
	letter-spacing: .06em;
	line-height: 1;
}
body.pf .rs-card p {
	font-size: 14.5px;
	color: var(--ink-2);
	line-height: 1.5;
	margin: 0;
	flex: 1;
}
body.pf .rs-card footer {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	font-size: 13px;
}
body.pf .rs-card cite {
	font-style: normal;
	font-weight: 700;
	color: var(--ink);
}
body.pf .rs-card .date {
	color: var(--ink-3);
}
body.pf .rs-foot {
	text-align: center;
	margin: 22px 0 0;
}
body.pf .rs .rs-foot a {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--blue);
	border-bottom: 1px solid rgba(44, 107, 201, .35);
	padding-bottom: 1px;
}
/* ==========================================================================
   10 · Sedes
   ========================================================================== */
body.pf .sd {
	background: var(--surface);
	padding: var(--sec) 0;
	scroll-margin-top: 20px;
}
body.pf .sd-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
body.pf .sd-card {
	background: var(--surface-2);
	border-radius: var(--r-card);
	padding: 20px 22px 22px;
	border: 1px solid var(--line);
}
/* El mapa de la sede, arriba de la tarjeta. */
body.pf .sd-map-box {
	aspect-ratio: 2 / 1;
	border-radius: var(--r-map);
	overflow: hidden;
	margin: 0 0 16px;
	background: var(--surface-3);
	position: relative;
}
body.pf .sd-map-box iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
body.pf .sd-card h3 {
	font-size: 21px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 12px;
	font-family: var(--font);
	padding: 0;
	letter-spacing: -.015em;
}
body.pf .sd-row {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--line-soft);
}
body.pf .sd-row .k {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-3);
	padding-top: 1px;
}
body.pf .sd-row .v {
	font-size: 15px;
	color: var(--ink);
	line-height: 1.45;
}
body.pf .sd-row .piso {
	display: block;
	color: var(--ink-2);
	margin-top: 2px;
}
body.pf .sd-row .piso:empty {
	display: none;
}
body.pf .sd-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 16px;
}
body.pf .sd .sd-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wa);
	color: #fff;
	border-radius: var(--r-btn);
	padding: 10px 16px;
	font-size: 14.5px;
	font-weight: 700;
	transition: filter .18s;
}
body.pf .sd .sd-wa:hover {
	color: #fff;
	filter: brightness(.94);
}
body.pf .sd .sd-wa .wa-ico {
	width: 18px;
	height: 18px;
}
body.pf .sd .sd-tel {
	display: inline-block;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	border-radius: var(--r-btn);
	padding: 9px 14px;
	font-size: 14.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
body.pf .sd .sd-tel:empty {
	display: none;
}
body.pf .sd .sd-map {
	font-size: 14px;
	font-weight: 600;
	color: var(--blue);
	margin-left: auto;
	border-bottom: 1px solid rgba(44, 107, 201, .35);
}
/* ==========================================================================
   11 · Preguntas
   ========================================================================== */
body.pf .fq {
	background: var(--surface-2);
	padding: var(--sec) 0;
}
body.pf .fq-item {
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-card);
	margin-bottom: 10px;
}
body.pf .fq-item summary {
	cursor: pointer;
	padding: 15px 48px 15px 20px;
	font-size: 16.5px;
	font-weight: 600;
	color: var(--ink);
	list-style: none;
	position: relative;
	line-height: 1.35;
}
body.pf .fq-item summary::-webkit-details-marker {
	display: none;
}
body.pf .fq-item summary::after {
	content: "+";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--teal);
	font-weight: 700;
	font-size: 18px;
	line-height: 26px;
	text-align: center;
}
body.pf .fq-item[open] summary::after {
	content: "\2013";
}
body.pf .fq-a {
	padding: 0 20px 18px;
	font-size: 15px;
	color: var(--ink-2);
	line-height: 1.55;
}
/* ==========================================================================
   12 · Cierre
   ========================================================================== */
body.pf .cta {
	background: var(--grad);
	color: #fff;
	text-align: center;
	padding: clamp(44px, 6vw, 64px) 0;
	position: relative;
	overflow: hidden;
}
/* La onda de marca, en movimiento lento, asomando por los dos lados.

   La baldosa mide 1600 px de ancho y el fondo se corre justo 1600 px.
   Ahi esta la gracia: la onda vale lo mismo en el borde izquierdo y en
   el derecho, asi que al volver a empezar no se ve ningun salto.
   Si se corriera otra distancia, la union se notaria.

   Aqui se mueve el fondo, no la capa. Tiene que ser asi: el recorte
   --pf-corte va en esta misma capa, y si moviera la capa el hueco
   limpio del centro viajaria con ella. Moviendo solo el fondo, el
   recorte se queda quieto y el texto siempre pisa fondo limpio. */
body.pf .cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url(../img/onda-cta.svg) repeat-x left center / 1600px 100%;
	opacity: .30;
	pointer-events: none;
	-webkit-mask-image: var(--pf-corte);
	        mask-image: var(--pf-corte);
	/* 26 s, no 48. Unas lineas casi horizontales corriendose de lado
	   cambian muy poco a la vista, asi que a 48 s no se notaba que
	   habia movimiento. A 26 se lee, y sigue siendo calmado. */
	animation: pf-onda-run 26s linear infinite;
}
/* Se mueve el fondo entero, no solo la x. La forma larga la entienden
   mas navegadores. */
@keyframes pf-onda-run {
	from { background-position: 0 center; }
	to   { background-position: -1600px center; }
}
body.pf .cta .pf-in {
	position: relative;
	z-index: 1;
}
body.pf .cta h2 + .cta-btn {
	margin-top: 14px;
}
body.pf .cta h2 {
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 700;
	color: #fff;
	margin: 0 0 10px;
	letter-spacing: -.02em;
	line-height: 1.1;
	font-family: var(--font);
	padding: 0;
	text-wrap: balance;
}
body.pf .cta p {
	font-size: clamp(15px, 1.6vw, 17px);
	color: rgba(255, 255, 255, .9);
	margin: 0 auto 24px;
	max-width: 46ch;
}
body.pf .cta .cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	color: var(--teal);
	border-radius: var(--r-btn);
	padding: 14px 26px;
	font-size: 16px;
	font-weight: 700;
	transition: background .18s;
}
body.pf .cta .cta-btn:hover {
	color: var(--teal);
	background: #EAF6F5;
}
/* ==========================================================================
   13 · Pie de pagina
   ========================================================================== */
body.pf .pf-foot {
	background: var(--navy);
	color: rgba(255, 255, 255, .78);
	padding: clamp(36px, 5vw, 48px) 0 24px;
	font-size: 14.5px;
	line-height: 1.55;
}
body.pf .ft-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr .8fr;
	gap: 40px;
	align-items: start;
}
/* El logo transparente, pasado a blanco. brightness(0) lo pone negro,
   invert(1) lo vuelve blanco. Sirve para cualquier color del logo. */
body.pf .ft-logo {
	display: inline-block;
	margin: 0 0 14px;
}
body.pf .ft-logo img {
	height: 55px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
	opacity: .95;
}
body.pf .ft-tagline {
	margin: 0 0 16px;
	max-width: 38ch;
	color: rgba(255, 255, 255, .78);
}
/* En el pie, los iconos van en blanco sobre un circulo translucido,
   con o sin direccion. Con direccion, al pasar el raton se aclaran. */
body.pf .pf-foot .pf-social {
	gap: 8px;
}
body.pf .pf-foot .pf-social a,
body.pf .pf-foot .pf-social span,
body.pf .pf-foot .pf-social a.is-tiktok,
body.pf .pf-foot .pf-social a.is-instagram,
body.pf .pf-foot .pf-social a.is-facebook,
body.pf .pf-foot .pf-social a.is-youtube {
	width: 32px;
	height: 32px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
}
body.pf .pf-foot .pf-social a:hover {
	background: rgba(255, 255, 255, .3);
}
body.pf .pf-foot .pf-social svg {
	width: 17px;
	height: 17px;
}
body.pf .pf-foot h3 {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--font);
}
body.pf .pf .ft-list li {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
body.pf .pf .ft-list li:last-child {
	margin-bottom: 0;
}
body.pf .ft-sedes strong {
	display: block;
	color: #fff;
	font-weight: 700;
}
body.pf .ft-sedes span {
	display: block;
}
body.pf .ft-sedes .ft-tel {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-top: 3px;
}
body.pf .ft-sedes .ft-tel a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
body.pf .ft-sedes .ft-tel .wa-ico {
	color: var(--wa);
}
body.pf .pf .ft-list a {
	color: rgba(255, 255, 255, .85);
	transition: color .18s;
}
body.pf .pf .ft-list a:hover {
	color: var(--teal-pop);
}
body.pf .pf .ft-links .ft-list li {
	margin-bottom: 8px;
}
body.pf .ft-bottom {
	margin-top: 36px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex;
	justify-content: space-between;
	gap: 12px 24px;
	flex-wrap: wrap;
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
}
body.pf .pf .ft-credit a {
	color: rgba(255, 255, 255, .85);
	border-bottom: 1px solid rgba(255, 255, 255, .25);
}
body.pf .pf .ft-credit a:hover {
	color: var(--teal-pop);
	border-bottom-color: var(--teal-pop);
}

/* ==========================================================================
   Bloques nuevos · tableta y telefono
   ========================================================================== */
@media (max-width: 1024px) {
	/* En tableta, Ivan va horizontal arriba, a todo el ancho.
		   Los otros cuatro van debajo, en una columna. */
	body.pf .eq-grid {
		grid-template-columns: 1fr;
	}
	body.pf .eq-minis {
		grid-auto-rows: auto;
	}
	body.pf .eq-lead {
		flex-direction: row;
	}
	body.pf .ft-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	body.pf .ft-brand {
		grid-column: 1 / -1;
	}
	body.pf .eq-lead .photo {
		flex: none;
		width: 42%;
		aspect-ratio: 3 / 4;
	}
	body.pf .eq-lead .who {
		flex: 1;
		align-self: center;
	}
	body.pf .rs-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	body.pf .sv-grid {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin: 0 auto;
	}
	body.pf .sv-photo {
		aspect-ratio: 16 / 8;
	}
}

@media (max-width: 640px) {
	body.pf .sec-head {
		margin-bottom: 20px;
	}
	body.pf .eq-lead {
		flex-direction: column;
	}
	body.pf .ft-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	body.pf .ft-logo img {
		height: 50px;
	}
	body.pf .ft-bottom {
		flex-direction: column;
		gap: 6px;
	}
	body.pf .sd-map-box {
		border-radius: var(--r-map);
		margin-bottom: 14px;
	}
	body.pf .eq-lead .photo {
		width: 100%;
		aspect-ratio: 4 / 3;
	}
	body.pf .eq-group {
		aspect-ratio: 16 / 9;
	}
	body.pf .eq-mini .role,
	body.pf .eq-mini .meta {
		display: block;
	}
	body.pf .eq-mini .role + .meta::before {
		content: none;
	}
	body.pf .eq-mini .photo {
		width: 108px;
	}
	body.pf .eq-mini .who {
		padding: 12px 14px;
	}
	body.pf .rs-grid,
	body.pf .sd-grid {
		grid-template-columns: 1fr;
	}
	body.pf .sd-card {
		padding: 20px 18px 22px;
	}
	body.pf .sd-row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	body.pf .sd-map {
		margin-left: 0;
	}
	body.pf .sd-wa {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Accesibilidad · sin movimiento

   Este guardia vive aqui y no en home.css a proposito. home.css solo se
   carga en la portada, y la banda de cierre tambien sale en las paginas
   de dentro. Lo mismo vale para la cabecera, que va en todas.
   ========================================================================== */
/* ==========================================================================
   Ondas · pantallas estrechas

   Por debajo de 1260 px no queda hueco a los lados del texto, y el
   recorte ya deja la onda invisible. Se quita del todo para no pintar
   algo que no se ve. De paso, el telefono se ahorra el repintado de la
   banda de cierre.
   ========================================================================== */
@media (max-width: 1260px) {
	body.pf .cta::before,
	body.pf .rs::before {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	body.pf .cta::before {
		animation: none;
	}
	body.pf .pf-burger i,
	body.pf .pf-social a,
	body.pf ul.pf-links a,
	body.pf .pf-strip .btn,
	body.pf .cta .cta-btn,
	body.pf .ft-list a {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Botones genericos. Mismas recetas que el home.
   -------------------------------------------------------------------------- */
body.pf .pf .pf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: var(--grad);
	color: #fff;
	border: 0;
	border-radius: var(--r-btn);
	padding: 13px 26px;
	font-size: 16px;
	font-weight: 700;
	font-family: var(--font);
	cursor: pointer;
	transition: filter .18s;
}
body.pf .pf .pf-btn:hover {
	color: #fff;
	filter: brightness(.94);
}
body.pf .pf .pf-btn--blue {
	background: var(--blue);
	padding: 10px 18px;
	font-size: 14.5px;
}
body.pf .pf .pf-btn--wa {
	background: var(--wa);
	padding: 10px 16px;
	font-size: 14.5px;
}
body.pf .pf .pf-btn--line {
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line);
	padding: 9px 14px;
	font-size: 14.5px;
	font-weight: 600;
}
body.pf .pf .pf-btn--line:hover {
	color: var(--ink);
	filter: none;
	background: var(--surface-2);
}

/* --------------------------------------------------------------------------
   Reproductor de video, con foto de portada
   -------------------------------------------------------------------------- */
body.pf .vd {
	background: var(--surface-2);
	padding: var(--sec) 0;
}
body.pf .vd-box {
	margin: 0 auto;
	max-width: 860px;
	border-radius: var(--r-card);
	overflow: hidden;
	background: var(--ink);
	box-shadow: 0 10px 30px rgba(16, 32, 46, .14);
}
body.pf .vd-box video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: var(--ink);
}
/* El pie va dentro de la caja oscura, asi que se pinta en blanco flojo. */
body.pf .vd-cap {
	margin: 0;
	padding: 10px 16px 12px;
	font-size: 13px;
	line-height: 1.35;
	color: rgba(255, 255, 255, .72);
	text-align: center;
}
body.pf .pf .vd-actions {
	margin: 18px 0 0;
	text-align: center;
}

/* Logo opcional sobre el titulo del reproductor. */
body.pf .pf .vd-logo {
	display: block;
	height: 52px;
	width: auto;
	margin: 0 auto 18px;
}

/* --------------------------------------------------------------------------
   Reproductor a dos columnas: texto a la izquierda, video a la derecha
   -------------------------------------------------------------------------- */
body.pf .vd--cols .vd-in {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 40px;
	align-items: center;
}
/* Aqui el encabezado no va centrado: acompana al texto. */
body.pf .vd--cols .sec-head {
	text-align: left;
	max-width: none;
	margin: 0 0 14px;
}
body.pf .vd--cols .vd-box {
	margin: 0;
	max-width: none;
}
body.pf .vd--cols .vd-actions {
	text-align: left;
}
body.pf .vd--cols .vd-cap {
	text-align: left;
}
body.pf .pf .vd--cols .vd-logo {
	margin-left: 0;
}

@media (max-width: 900px) {
	body.pf .vd--cols .vd-in {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	body.pf .vd--cols .sec-head {
		text-align: center;
		max-width: 760px;
		margin: 0 auto 14px;
	}
	body.pf .vd--cols .vd-actions {
		text-align: center;
	}
	body.pf .vd--cols .vd-cap {
		text-align: center;
	}
	body.pf .pf .vd--cols .vd-logo {
		margin-left: auto;
		height: 44px;
	}
}

/* En movil el boton generico ocupa todo el ancho. */
@media (max-width: 640px) {
	body.pf .pf .pf-btn {
		display: flex;
		width: 100%;
		text-align: center;
		padding: 15px 20px;
	}
}

/* --------------------------------------------------------------------------
   Barra de aliados. Fondo marino: los logos se pintan de blanco.
   Vive aqui y no en pages.css: el home tambien la usa (barra de medios).
   -------------------------------------------------------------------------- */
body.pf .al {
	background: var(--navy);
	padding: 22px 0;
}
body.pf .al-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 34px;
}
body.pf .al-line {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .82);
}
body.pf .pf .al-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.pf .pf .al-logo {
	margin: 0;
	padding: 0;
}
/* El mismo filtro del pie. Deja blanco un logo oscuro, y no toca uno
   que ya viene blanco con fondo transparente. */
body.pf .al-logo img {
	display: block;
	height: 52px;
	width: auto;
	filter: brightness(0) invert(1);
}

/* Variante clara: fondo blanco y cada logo en su color de marca. */
body.pf .al.al--claro {
	padding: 34px 0;
	background: var(--surface);
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
}
body.pf .al--claro .al-line {
	color: var(--ink-3);
}
body.pf .al--claro .al-logo img {
	filter: none;
	height: 46px;
}
@media (max-width: 640px) {
	body.pf .al-in {
		flex-direction: column;
		gap: 16px;
	}
	body.pf .al-line {
		text-align: center;
	}
	body.pf .al-logo img {
		height: 42px;
	}
	body.pf .al.al--claro {
		padding: 28px 0;
	}
	/* Cuatro logos en dos filas de dos. Si no, el cuarto queda solo abajo. */
	body.pf .pf .al--claro .al-logos {
		display: grid;
		grid-template-columns: repeat(2, auto);
		justify-content: center;
		justify-items: center;
		gap: 18px 36px;
	}
	body.pf .al--claro .al-logo img {
		height: 40px;
	}
}

/* --------------------------------------------------------------------------
   Movil: area de toque
   -------------------------------------------------------------------------- */
/* Un dedo necesita unos 40 px. Estas piezas se ven igual; solo crece la
   zona que responde al toque. */
@media (max-width: 640px) {
	body.pf .pf-topbar .ph,
	body.pf .pf-social a,
	body.pf .pf-social span {
		min-height: 40px;
	}
	body.pf .pf-social a,
	body.pf .pf-social span {
		min-width: 40px;
	}
	body.pf .sd .sd-map,
	body.pf .sd .sd-tel,
	body.pf .pf .pl-more,
	body.pf .ft-list a,
	body.pf .ft-links a,
	body.pf .ft-credit a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}
	body.pf .pf-burger,
	body.pf .pf-strip .btn {
		min-height: 40px;
	}
	/* Los dos enlaces sueltos del home: van solos en su linea, asi que
	   crecer no rompe ningun parrafo. */
	body.pf .sy .sy-foot a,
	body.pf .rs-foot a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}
}