/* ==========================================================================
   PodoFeet · CSS de las paginas interiores
   Se carga solo en las plantillas PodoFeet que no son el home. Va despues de base.css.
   Los bloques reusan las clases del home. Aqui va solo lo nuevo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero compacto
   -------------------------------------------------------------------------- */
body.pf .pg-hero {
	background: var(--surface-2);
	/* El hero es lo primero que se ve: lleva mas aire que el resto. */
	padding: calc(var(--sec) + 14px) 0;
	border-bottom: 1px solid var(--line-soft);
	position: relative;
	overflow: hidden;
}
/* La onda de marca abre todas las paginas de dentro. Va quieta y solo
   asoma por los lados. Misma receta que en base.css: baldosa repetida
   en un ::before, --pf-corte borra el centro, y el contenido encima.
   Aqui se nota un pelin mas, porque es lo primero que se ve al entrar. */
body.pf .pg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url(../img/onda-suave.svg) repeat-x left center / 1600px 100%;
	opacity: .16;
	pointer-events: none;
	-webkit-mask-image: var(--pf-corte);
	        mask-image: var(--pf-corte);
}
body.pf .pg-hero-in {
	display: grid;
	grid-template-columns: 1fr;
	gap: 44px;
	align-items: center;
	position: relative;
	z-index: 1;
}
body.pf .pg-hero.has-img .pg-hero-in {
	grid-template-columns: 1.2fr .8fr;
}
body.pf .pg-hero-txt {
	max-width: 720px;
}
/* OJO: `body.pf .pf p` de base.css pone margin 0 y pesa mas que un solo
   nombre de clase. Por eso estos llevan `.pf` delante: sin el, el hero
   salia apretado y los margenes de aqui no hacian nada. */
body.pf .pf .pg-eyebrow {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--teal);
	margin: 0 0 14px;
	line-height: 1.4;
}
body.pf .pg-hero h1 {
	font-size: clamp(28px, 3.6vw, 40px);
	font-weight: 700;
	line-height: 1.08;
	color: var(--ink);
	letter-spacing: -.022em;
	text-wrap: balance;
	font-family: var(--font);
	padding: 0;
	margin: 0 0 20px;
}
body.pf .pf .pg-lead {
	font-size: clamp(16px, 1.6vw, 17.5px);
	color: var(--ink-2);
	margin: 0 0 30px;
	max-width: 58ch;
}
body.pf .pg-actions {
	margin: 0;
}
body.pf .pg-hero-img {
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-card);
	overflow: hidden;
	background: var(--surface-3);
	position: relative;
}
body.pf .pg-hero-img img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------------------
   Secciones: fondo blanco a pedido, y anclas con aire arriba
   -------------------------------------------------------------------------- */
body.pf .pf-blk--white {
	background: var(--surface);
}
body.pf .pf-blk [id],
body.pf .pf-blk[id] {
	scroll-margin-top: 90px;
}

/* Lista corta dentro de una tarjeta. Punto teal, letra chica. */
body.pf .pf .sv-items li {
	position: relative;
	padding: 2px 0 2px 14px;
	font-size: 14.5px;
	color: var(--ink-2);
	line-height: 1.4;
}
body.pf .pf .sv-items li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--teal);
}

/* --------------------------------------------------------------------------
   Pasos numerados
   -------------------------------------------------------------------------- */
body.pf .st {
	background: var(--surface-2);
	padding: var(--sec) 0;
	position: relative;
	overflow: hidden;
}
/* Onda a los lados de los pasos de la consulta. Quieta, y mas floja
   que la del hero: aqui hay mas texto que leer. */
body.pf .st::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url(../img/onda-suave.svg) repeat-x -520px center / 1600px 100%;
	opacity: .13;
	pointer-events: none;
	-webkit-mask-image: var(--pf-corte);
	        mask-image: var(--pf-corte);
}
body.pf .st > .pf-in {
	position: relative;
	z-index: 1;
}
body.pf .pf .st-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Las columnas salen del numero de pasos, que pone la plantilla en
	   --st-cols. Antes eran cuatro fijas y con tres pasos sobraba un hueco. */
	grid-template-columns: repeat(var(--st-cols, 4), 1fr);
	gap: 14px;
	counter-reset: pf-step;
}
body.pf .pf .st-item {
	margin: 0;
	padding: 20px 20px 22px;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
}
body.pf .st-n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--surface-3);
	color: var(--teal);
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 12px;
	font-variant-numeric: tabular-nums;
}
body.pf .st-item h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 6px;
	line-height: 1.2;
	letter-spacing: -.015em;
	font-family: var(--font);
	padding: 0;
}
body.pf .st-item p {
	font-size: 15px;
	color: var(--ink-2);
	line-height: 1.5;
}

/* Paso con foto: la foto llega a los bordes de la tarjeta y el numero
   se monta encima, con un anillo blanco para que se despegue. */
body.pf .pf .st-item.has-photo {
	padding: 0 0 22px;
	overflow: hidden;
}
body.pf .st-photo {
	margin: 0;
	aspect-ratio: 16 / 10;
	background: var(--surface-3);
	overflow: hidden;
}
body.pf .st-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body.pf .st-item.has-photo .st-n {
	position: relative;
	margin: -22px 0 12px 18px;
	border: 3px solid var(--surface);
	box-shadow: 0 2px 10px rgba(16, 32, 46, .16);
}
body.pf .st-item.has-photo h3,
body.pf .st-item.has-photo p {
	padding-left: 20px;
	padding-right: 20px;
}

/* --------------------------------------------------------------------------
   Mosaico de fotos. La primera manda: ocupa dos columnas y dos filas.
   -------------------------------------------------------------------------- */
body.pf .gl {
	background: var(--surface-2);
	padding: var(--sec) 0;
}
body.pf .pf .gl-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	gap: 12px;
}
body.pf .pf .gl-item {
	margin: 0;
	padding: 0;
	aspect-ratio: 1 / 1;
	border-radius: var(--r-card);
	overflow: hidden;
	background: var(--surface-3);
}
body.pf .pf .gl-item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
body.pf .gl-item img,
body.pf .gl-item video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
body.pf .gl-item:hover img {
	transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
	body.pf .gl-item img,
	body.pf .gl-item:hover img {
		transition: none;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Preguntas abiertas: todo a la vista, en rejilla
   --------------------------------------------------------------------------
   Sirve cuando las preguntas son datos y no dudas, como en Contacto. El
   acordeon de siempre se queda para Tratamientos y el blog. */
body.pf .pf .fq--abierto .fq-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.pf .fq--abierto .fq-card {
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-card);
	padding: 20px;
}
body.pf .fq--abierto .fq-card h3 {
	font-size: 16.5px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 8px;
	line-height: 1.25;
	letter-spacing: -.015em;
	font-family: var(--font);
	padding: 0;
}
body.pf .fq--abierto .fq-card .fq-a {
	padding: 0;
	font-size: 15px;
	color: var(--ink-2);
	line-height: 1.55;
}

@media (max-width: 900px) {
	body.pf .pf .fq--abierto .fq-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	body.pf .pf .fq--abierto .fq-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Hero: lista de vistos bajo la bajada
   -------------------------------------------------------------------------- */
body.pf .pf .pg-checks {
	list-style: none;
	margin: -12px 0 28px;
	padding: 0;
	display: grid;
	gap: 8px;
}
body.pf .pf .pg-checks li {
	position: relative;
	margin: 0;
	padding: 0 0 0 30px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--ink);
	font-weight: 500;
}
body.pf .pf .pg-checks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--teal);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Comparacion en dos columnas
   --------------------------------------------------------------------------
   La columna de fuera va apagada y con cruces. La nuestra va con borde de
   marca, un poco de sombra y vistos. Asi se lee de un vistazo cual es cual. */
body.pf .cp {
	padding: var(--sec) 0;
}
body.pf .cp-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	max-width: 920px;
	margin: 0 auto;
	align-items: stretch;
}
body.pf .cp-col {
	border-radius: var(--r-card);
	padding: 26px 26px 28px;
}
body.pf .cp-col--no {
	background: var(--surface-2);
	border: 1px solid var(--line-soft);
}
body.pf .cp-col--si {
	background: var(--surface);
	border: 2px solid var(--teal);
	box-shadow: 0 10px 30px rgba(16, 144, 138, .12);
}
body.pf .cp-col h3 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 18px;
	letter-spacing: -.015em;
	font-family: var(--font);
	padding: 0;
}
body.pf .cp-col--no h3 {
	color: var(--ink-2);
}
body.pf .cp-col--si h3 {
	color: var(--teal);
}
body.pf .pf .cp-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
body.pf .pf .cp-list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.45;
}
body.pf .cp-ico {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
	margin-top: 1px;
}
body.pf .cp-col--no .cp-ico {
	background: #D9534F;
}
body.pf .cp-col--si .cp-ico {
	background: var(--teal);
}
body.pf .cp-col--no .cp-txt {
	color: var(--ink-2);
}
body.pf .cp-col--si .cp-txt {
	color: var(--ink);
	font-weight: 500;
}
body.pf .pf .cp-actions {
	margin: 26px 0 0;
	text-align: center;
}

@media (max-width: 720px) {
	body.pf .cp-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Texto largo
   -------------------------------------------------------------------------- */
body.pf .pg-text {
	background: var(--surface);
	padding: var(--sec) 0;
}
body.pf .pf-prose {
	max-width: 720px;
	margin: 0 auto;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--ink);
}
body.pf .pf-prose p {
	margin: 0 0 1em;
	font-size: inherit;
	line-height: inherit;
}
body.pf .pf-prose h2 {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: 1.4em 0 .5em;
	color: var(--ink);
	font-family: var(--font);
	padding: 0;
}
body.pf .pf-prose h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	margin: 1.2em 0 .4em;
	color: var(--ink);
	font-family: var(--font);
	padding: 0;
}
body.pf .pf-prose > :first-child {
	margin-top: 0;
}
body.pf .pf-prose > :last-child {
	margin-bottom: 0;
}
body.pf .pf-prose ul,
body.pf .pf-prose ol {
	margin: 0 0 1em;
	padding: 0 0 0 1.3em;
	list-style: disc;
}
body.pf .pf-prose ol {
	list-style: decimal;
}
body.pf .pf-prose li {
	margin: 0 0 .35em;
	list-style: inherit;
}
body.pf .pf-prose a {
	color: var(--teal);
	border-bottom: 1px solid rgba(16, 144, 138, .35);
}
body.pf .pf-prose a:hover {
	color: var(--blue);
	border-bottom-color: var(--blue);
}
body.pf .pf-prose img {
	border-radius: var(--r-card);
	height: auto;
}
body.pf .pf-prose blockquote {
	margin: 1.2em 0;
	padding: 4px 0 4px 18px;
	border-left: 3px solid var(--line);
	color: var(--ink-2);
}
body.pf .pf-prose strong {
	font-weight: 700;
}
/* Una entrada hecha con Divi: sus secciones no traen relleno propio. */
body.pf .pf-prose .et_pb_section {
	padding: 0;
}

/* Nota del editor, solo en modo edicion. */
body.pf .pfe-note {
	text-align: center;
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Tableta y telefono
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	body.pf .pf .st-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 900px) {
	body.pf .pg-hero.has-img .pg-hero-in {
		grid-template-columns: 1fr;
	}
	body.pf .pg-hero-img {
		aspect-ratio: 16 / 9;
	}
}
@media (max-width: 640px) {
	/* En el telefono el aire del hero se recorta: si no, el boton se va
	   fuera de la primera pantalla. */
	body.pf .pg-hero {
		padding: var(--sec) 0;
	}
	body.pf .pg-hero-in {
		gap: 28px;
	}
	body.pf .pf .pg-lead {
		margin-bottom: 24px;
	}
	body.pf .pf .st-grid {
		grid-template-columns: 1fr;
	}
	body.pf .pf-prose {
		font-size: 16px;
	}
}

/* --------------------------------------------------------------------------
   Equipo completo (Nosotros): las tarjetas chicas van en dos columnas
   -------------------------------------------------------------------------- */
/* Tres tarjetas chicas en una columna, al lado de la de Ivan. Igual que en el
   home, pero con la foto un poco mas ancha y con la frase de bio debajo. */
body.pf .eq--full .eq-grid {
	grid-template-columns: 1.15fr 1fr;
}
body.pf .eq--full .eq-minis {
	grid-template-columns: 1fr;
	grid-auto-rows: 1fr;
	gap: 12px;
}
body.pf .eq--full .eq-mini .photo {
	width: 170px;
}
body.pf .eq--full .eq-mini .who {
	padding: 14px 18px;
}
body.pf .eq--full .eq-mini .role,
body.pf .eq--full .eq-mini .meta {
	display: block;
}
body.pf .eq--full .eq-mini .role + .meta::before {
	content: none;
}
body.pf .eq .bio {
	font-size: 14.5px;
	color: var(--ink-2);
	line-height: 1.45;
	margin: 6px 0 0;
}
body.pf .eq-lead .bio {
	font-size: 15px;
	margin: 0 0 10px;
}

/* --------------------------------------------------------------------------
   Valores
   -------------------------------------------------------------------------- */
body.pf .vl {
	background: var(--surface-2);
	padding: var(--sec) 0;
}
/* Filas de cuatro. Si la ultima fila queda corta, sus tarjetas van al
   centro y no pegadas a la izquierda. */
body.pf .vl-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}
body.pf .vl-item {
	flex: 0 1 calc((100% - 42px) / 4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: 20px 20px 22px;
}
body.pf .vl-item h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 6px;
	line-height: 1.2;
	letter-spacing: -.015em;
	font-family: var(--font);
	padding: 0;
}
body.pf .vl-item p {
	font-size: 15px;
	color: var(--ink-2);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Contacto: tres tarjetas
   -------------------------------------------------------------------------- */
body.pf .ct {
	background: var(--surface);
	padding: var(--sec) 0;
}
body.pf .ct-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
body.pf .ct-card {
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: 20px 20px 22px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
body.pf .ct-card h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	margin: 0;
	line-height: 1.2;
	font-family: var(--font);
	padding: 0;
}
body.pf .ct-val {
	font-size: 15px;
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
	margin: 0 0 8px;
	overflow-wrap: anywhere;
}
body.pf .ct-card .pf-btn {
	margin-top: auto;
}
body.pf .pf .ct-note {
	text-align: center;
	margin: 18px auto 0;
	max-width: 60ch;
	font-size: 15px;
	color: var(--ink-2);
}

@media (max-width: 1024px) {
	body.pf .eq--full .eq-grid {
		grid-template-columns: 1fr;
	}
	body.pf .eq--full .eq-lead {
		flex-direction: row;
	}
	body.pf .vl-item {
		flex-basis: calc((100% - 14px) / 2);
	}
}
@media (max-width: 640px) {
	body.pf .eq--full .eq-lead {
		flex-direction: column;
	}
	body.pf .eq--full .eq-mini .photo {
		width: 108px;
	}
	body.pf .vl-item {
		flex-basis: 100%;
	}
	body.pf .ct-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Blog: tarjetas de entrada, paginacion, cabecera de la entrada
   -------------------------------------------------------------------------- */
body.pf .pl {
	background: var(--surface);
	padding: var(--sec) 0;
}
body.pf .pl--related {
	background: var(--surface-2);
}
body.pf .pl-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
body.pf .pl-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
/* Sin foto, la tarjeta arranca por la fecha. Antes dejaba una caja gris. */
body.pf .pl-card--sin-foto .pl-body {
	padding-top: 18px;
}
body.pf .pl-photo {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--surface-3);
	position: relative;
}
body.pf .pl-photo img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
body.pf .pl-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
body.pf .pl-date {
	font-size: 13px;
	color: var(--ink-3);
}
body.pf .pl-body h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	margin: 0;
	line-height: 1.2;
	letter-spacing: -.015em;
	font-family: var(--font);
	padding: 0;
}
body.pf .pl-body h3 a:hover {
	color: var(--teal);
}
body.pf .pl-body p {
	font-size: 14.5px;
	color: var(--ink-2);
	line-height: 1.5;
	margin: 0 0 auto;
}
body.pf .pf .pl-more {
	align-self: flex-start;
	margin-top: 8px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--blue);
	border-bottom: 1px solid rgba(44, 107, 201, .35);
}
body.pf .pf .pl-more:hover {
	color: var(--teal);
	border-bottom-color: var(--teal);
}
body.pf .pl-empty {
	text-align: center;
	color: var(--ink-2);
}

body.pf .pf-pager {
	margin: 28px 0 0;
}
body.pf .pf .pf-pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.pf .pf .pf-pager li {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* OJO: paginate_links() pone la clase page-numbers al <ul> y a cada enlace.
   Sin atar la regla a la etiqueta, cae sobre el <ul> y le pisa el flex. */
body.pf .pf .pf-pager a.page-numbers,
body.pf .pf .pf-pager span.page-numbers {
	display: inline-block;
	min-width: 38px;
	padding: 8px 12px;
	text-align: center;
	border: 1px solid var(--line);
	border-radius: var(--r-btn);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	background: var(--surface);
}
body.pf .pf .pf-pager a.page-numbers:hover {
	border-color: var(--teal);
	color: var(--teal);
}
body.pf .pf .pf-pager .page-numbers.current {
	background: var(--teal);
	border-color: var(--teal);
	color: #fff;
}
body.pf .pf .pf-pager .page-numbers.dots {
	border-color: transparent;
}

body.pf .pg-hero--post h1 {
	font-size: clamp(26px, 3.2vw, 36px);
}
body.pf .pg-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
	color: var(--ink-3);
	margin: 0;
}
body.pf .pf-prose--post {
	max-width: 760px;
}

/* --------------------------------------------------------------------------
   Fotos chicas de una entrada, a un lado
   --------------------------------------------------------------------------
   El JS (modulo 5 de site.js) mide cada figura y marca con .is-flotante las
   que no llenan la columna. Aqui solo se colocan. */
body.pf .pf-prose--post figure.is-flotante {
	float: right;
	max-width: 42%;
	margin: 6px 0 20px 28px;
}
body.pf .pf-prose--post figure.is-flotante.is-izquierda {
	float: left;
	margin: 6px 28px 20px 0;
}
body.pf .pf-prose--post figure.is-flotante img {
	width: 100%;
}
/* Ningun encabezado se mete al costado de una foto. */
body.pf .pf-prose--post h2,
body.pf .pf-prose--post h3 {
	clear: both;
}
/* El texto que sigue no se desborda de la seccion. */
body.pf .pf-prose--post::after {
	content: "";
	display: block;
	clear: both;
}
/* En pantalla estrecha no cabe una segunda columna. Si alguien llego
   ancho y luego encogio, la foto vuelve a lo ancho. */
@media (max-width: 900px) {
	body.pf .pf-prose--post figure.is-flotante,
	body.pf .pf-prose--post figure.is-flotante.is-izquierda {
		float: none;
		max-width: 100%;
		margin: 1.2em 0;
	}
}

@media (max-width: 900px) {
	body.pf .pl-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	body.pf .pl-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Hero: microcopy bajo el boton y pie de foto
   -------------------------------------------------------------------------- */
body.pf .pf .pg-note {
	margin: 10px 0 0;
	font-size: 13.5px;
	color: var(--ink-3);
	max-width: 42ch;
}
body.pf .pg-hero-img figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 18px 14px 10px;
	font-size: 12.5px;
	line-height: 1.35;
	color: #fff;
	background: linear-gradient(180deg, rgba(12, 36, 108, 0) 0%, rgba(12, 36, 108, .78) 100%);
}

/* --------------------------------------------------------------------------
   Hero con video. El boton enciende el sonido.
   -------------------------------------------------------------------------- */
body.pf .pg-hero.has-video .pg-hero-img {
	aspect-ratio: 16 / 9;
	background: var(--ink);
}
body.pf .pg-video {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Con los controles puestos el video deja de recortarse, para que la
   barra de abajo no quede cortada. */
body.pf .pg-video[controls] {
	object-fit: contain;
}
/* Hero con reproductor externo (VTurb). El hueco guarda la proporcion 16:9
   desde el principio, asi la pagina no salta cuando llega el script. */
/* El video de venta es el centro del hero: se lleva la columna ancha y el
   texto la estrecha. Va dentro de min-width porque esta regla esta despues
   de la de una columna del telefono y, sin la media, la pisaria. */
@media (min-width: 901px) {
	body.pf .pg-hero.has-embed .pg-hero-in {
		grid-template-columns: .82fr 1.18fr;
		gap: 40px;
	}
}
body.pf .pg-hero.has-embed .pg-hero-img {
	aspect-ratio: 16 / 9;
	background: var(--ink);
}
body.pf .pg-hero.has-embed .pg-vturb {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
}

/* Arriba a la derecha, para no chocar con el pie de foto, que va abajo. */
body.pf .pf .pg-sound {
	position: absolute;
	z-index: 3;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 16px;
	border: 0;
	border-radius: 999px;
	background: rgba(12, 36, 108, .82);
	color: #fff;
	font-family: var(--font);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background .18s;
}
body.pf .pf .pg-sound:hover {
	background: var(--navy);
}
body.pf .snd-ico {
	width: 16px;
	height: 16px;
	flex: none;
}

/* --------------------------------------------------------------------------
   Texto y foto en dos columnas. La foto guarda su forma, no se recorta.
   -------------------------------------------------------------------------- */
body.pf .sp {
	background: var(--surface-2);
	padding: var(--sec) 0;
}
body.pf .sp-in {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 36px;
	align-items: center;
}
/* Con la foto a la izquierda, la columna angosta es la de la foto. */
body.pf .sp--flip .sp-in {
	grid-template-columns: .9fr 1.1fr;
}
body.pf .sp--flip .sp-txt {
	order: 2;
}
body.pf .sp-txt h2 {
	font-size: clamp(23px, 2.8vw, 30px);
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 12px;
	letter-spacing: -.02em;
	line-height: 1.12;
	text-wrap: balance;
}
/* --------------------------------------------------------------------------
   Formulario de citas (inc/leads.php). Va bajo el texto del bloque split.
   -------------------------------------------------------------------------- */
body.pf .lf {
	margin-top: 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: 20px 20px 18px;
}
body.pf .pf .lf-head {
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.25;
	margin: 0 0 12px;
}
body.pf .lf-form {
	display: grid;
	gap: 10px;
}
body.pf .lf-field {
	display: grid;
	gap: 4px;
	margin: 0;
}
body.pf .lf-lbl {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-2);
}
body.pf .lf-field input {
	width: 100%;
	box-sizing: border-box;
	font: 16px/1.3 var(--font);
	color: var(--ink);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--r-btn);
	padding: 11px 12px;
	margin: 0;
}
body.pf .lf-field input:focus {
	outline: 2px solid var(--blue);
	outline-offset: 1px;
	background: var(--surface);
}
body.pf .pf .lf-btn {
	width: 100%;
	margin-top: 4px;
}
body.pf .pf .lf-note {
	font-size: 13.5px;
	color: var(--ink-3);
	margin: 2px 0 0;
	text-align: center;
}
body.pf .pf .lf-ok,
body.pf .pf .lf-err {
	font-size: 15px;
	line-height: 1.45;
	margin: 0 0 10px;
	padding: 10px 12px;
	border-radius: var(--r-btn);
}
body.pf .pf .lf-ok {
	margin: 0;
	background: var(--surface-3);
	color: var(--navy);
	font-weight: 600;
}
body.pf .pf .lf-err {
	background: #FDECEC;
	color: #9B1C1C;
}
/* En la columna de la foto, el formulario no necesita aire arriba. */
body.pf .sp-form .lf {
	margin-top: 0;
}
/* El campo trampa para robots. Fuera de pantalla, no display:none,
   porque algunos robots saltan los campos ocultos. */
body.pf .lf-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

body.pf .sp-img {
	margin: 0;
	border-radius: var(--r-card);
	overflow: hidden;
	background: var(--surface-3);
}
body.pf .sp-img img {
	display: block;
	width: 100%;
	height: auto;
}

/* Ondas fuera en pantalla estrecha. Ver la nota en base.css. */
@media (max-width: 1260px) {
	body.pf .pg-hero::before,
	body.pf .st::before {
		display: none;
	}
}

@media (max-width: 900px) {
	body.pf .pf .gl-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	body.pf .pf .gl-item:first-child {
		grid-column: span 2;
		grid-row: span 1;
		aspect-ratio: 16 / 10;
	}
	body.pf .sp-in {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	/* En movil el texto va siempre arriba, tambien con la foto invertida. */
	body.pf .sp--flip .sp-in {
		grid-template-columns: 1fr;
	}
	body.pf .sp--flip .sp-txt {
		order: 0;
	}
	body.pf .sp-img {
		max-width: 520px;
	}
}

/* En movil el boton del sonido crece para el dedo. */
@media (max-width: 640px) {
	body.pf .pf .pg-sound {
		min-height: 40px;
		padding: 0 16px;
	}
}