/* ==========================================================================
   PodoFeet · CSS del home
   Solo se carga en la plantilla "PodoFeet Home". Va despues de base.css.
   Hero con video, tarjeta de avales y rejilla de sintomas.
   ========================================================================== */
/* --------------------------------------------------------------------------
   4 · Hero
   -------------------------------------------------------------------------- */
body.pf .hero {
	position: relative;
	overflow: hidden;
	background: #0B1A2A;
	/* Mas alto desde el 13 sep 2026, a pedido de Wacho. Antes: clamp(440px, 40vw, 520px). */
	height: clamp(520px, 48vw, 640px);
}
body.pf .hero .video-band {
	position: absolute;
	inset: 0;
}
body.pf .hero video.pf-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
body.pf .hero .scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(96deg, rgba(9, 26, 44, .62) 0%, rgba(9, 26, 44, .40) 42%, rgba(9, 26, 44, .06) 68%, rgba(9, 26, 44, .22) 100%);
}
body.pf .hero .veil-right {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(270deg, rgba(6, 20, 36, .66) 0%, rgba(6, 20, 36, .22) 26%, rgba(6, 20, 36, 0) 46%);
}
body.pf .hero-inner {
	position: relative;
	z-index: 4;
	height: 100%;
	display: flex;
	align-items: center;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--pad);
}
body.pf .hero .panel {
	background: rgba(255, 255, 255, .96);
	border-radius: 14px;
	padding: clamp(18px, 2.2vw, 24px) clamp(18px, 2.4vw, 26px) clamp(18px, 2.2vw, 24px);
	width: 440px;
	max-width: 100%;
	box-shadow: 0 12px 32px -18px rgba(4, 17, 31, .35);
}
body.pf .hero .p-eyebrow {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--teal);
	margin: 0 0 10px;
	line-height: 1.4;
}
body.pf .hero h1.p-h1 {
	font-size: clamp(29px, 3.6vw, 41px);
	font-weight: 700;
	line-height: 1.07;
	color: var(--ink);
	margin: 0 0 12px;
	letter-spacing: -.022em;
	text-wrap: balance;
}
body.pf .hero .p-sub {
	font-size: clamp(16px, 1.6vw, 18px);
	color: var(--ink-2);
	margin: 0 0 24px;
}
body.pf .hero .p-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 .hero .p-btn:hover {
	color: #fff;
	filter: brightness(.94);
}
body.pf .trust-rail {
	position: absolute;
	z-index: 6;
	right: 34px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	text-align: right;
}
body.pf .trust-rail .item {
	padding: 15px 18px 15px 22px;
	border-right: 2px solid rgba(77, 189, 176, .85);
}
body.pf .trust-rail .item + .item {
	border-top: 1px solid rgba(255, 255, 255, .20);
}
body.pf .trust-rail .n {
	display: block;
	font-size: 29px;
	font-weight: 700;
	color: #fff;
	line-height: 1.05;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
body.pf .trust-rail .l {
	display: block;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .80);
	letter-spacing: .03em;
	line-height: 1.3;
}
/* --------------------------------------------------------------------------
   5 · Tarjeta de avales, montada sobre el borde del video
   -------------------------------------------------------------------------- */
body.pf .cv2host {
	background: var(--surface);
	padding: 0 var(--pad) 30px;
}
body.pf .cv2 {
	background: var(--surface);
	max-width: 1000px;
	margin: -34px auto 0;
	border-radius: var(--r-card);
	border: 1px solid var(--line-soft);
	box-shadow: 0 6px 20px -14px rgba(16, 32, 46, .25);
	position: relative;
	z-index: 5;
	padding: 15px 26px;
	display: flex;
	align-items: center;
	gap: 26px;
	/* El riel de logos es mas ancho que la tarjeta a proposito.
	   Estas dos reglas evitan que estire la tarjeta. */
	min-width: 0;
	overflow: hidden;
}
/* Ningun hijo de la tarjeta puede crecer mas que la tarjeta. */
body.pf .cv2 > * {
	min-width: 0;
	max-width: 100%;
}
body.pf .cv2 .eyebrow {
	flex: none;
	width: 96px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink-2);
	border-right: 1px solid #DDE8F0;
	padding-right: 26px;
}
body.pf .cv2 .congreso {
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding-right: 24px;
	border-right: 1px solid #DDE8F0;
}
body.pf .congreso .ctag {
	background: var(--teal);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	border-radius: 4px;
	padding: 3px 8px;
	white-space: nowrap;
}
body.pf .congreso .ctxt {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.3;
}
body.pf .congreso .ctxt small {
	display: block;
	font-weight: 500;
	color: var(--ink-3);
	font-size: 10.5px;
	letter-spacing: .02em;
}
body.pf .cv2 .viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
body.pf .cv2 .track {
	display: flex;
	align-items: center;
	gap: 52px;
	width: max-content;
	animation: pf-cv-run 34s linear infinite;
}
body.pf .cv2:hover .track {
	animation-play-state: paused;
}
@keyframes pf-cv-run {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
body.pf .cv2 .track img {
	height: 34px;
	width: auto;
	display: block;
	filter: grayscale(1);
	opacity: .58;
	transition: filter .25s, opacity .25s;
}
body.pf .cv2 .crest {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #F7FAFC;
	border: 1px solid #E4EDF4;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
body.pf .cv2 .crest img {
	height: 44px;
	opacity: .82;
}
body.pf .cv2 .track img:hover,
body.pf .cv2 .crest:hover img {
	filter: none;
	opacity: 1;
}
/* --------------------------------------------------------------------------
   6 · Rejilla de sintomas
   -------------------------------------------------------------------------- */
body.pf .sy {
	background: var(--surface);
	padding: var(--sec) 0;
}
body.pf .sy-in {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--pad);
}
body.pf .sy-head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 20px;
}
body.pf .sy-head h2 {
	font-size: clamp(23px, 2.8vw, 30px);
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 6px;
	letter-spacing: -.02em;
	line-height: 1.12;
	text-wrap: balance;
}
body.pf .sy-head p {
	margin: 0;
	font-size: clamp(14px, 1.5vw, 15.5px);
	color: var(--ink-2);
}
/* Es un <p>: la regla base de parrafos le quitaba el margen.
   Por eso lleva un selector mas largo. */
body.pf .sy .sy-foot {
	text-align: center;
	margin: 28px 0 0;
}
body.pf .sy .sy-foot a {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--blue);
	border-bottom: 1px solid rgba(44, 107, 201, .35);
	padding-bottom: 1px;
}
body.pf .sy .sy-foot a:hover {
	color: var(--teal);
	border-bottom-color: var(--teal);
}
body.pf .sy .grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	position: relative;
}
body.pf .sy .card {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-card);
	overflow: hidden;
	display: block;
	background: var(--ink);
}
body.pf .sy .card img {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
body.pf .sy .card:hover img {
	transform: scale(1.035);
}
body.pf .sy .card .veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	background: linear-gradient(180deg, rgba(9, 26, 44, 0) 26%, rgba(9, 26, 44, .30) 50%, rgba(9, 26, 44, .72) 78%, rgba(9, 26, 44, .90) 100%);
}
body.pf .sy .card .txt {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	display: block;
	padding: 0 15px 14px;
}
body.pf .sy .card .say {
	display: block;
	font-size: clamp(13px, 1.3vw, 15.5px);
	font-weight: 700;
	color: #fff;
	line-height: 1.22;
	letter-spacing: -.012em;
	text-shadow: 0 1px 8px rgba(4, 17, 31, .45);
}
body.pf .sy .card .med {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--teal-pop);
	margin-top: 4px;
}
/* --------------------------------------------------------------------------
   Portatil y tableta grande
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	body.pf .trust-rail {
		right: 20px;
	}
	body.pf .trust-rail .n { font-size: 24px; }
	body.pf .trust-rail .l { font-size: 11.5px; }
	body.pf .cv2 { gap: 18px; padding: 14px 20px; }
	body.pf .cv2 .eyebrow { padding-right: 18px; width: 88px; }
	body.pf .cv2 .congreso { padding-right: 18px; gap: 10px; }
}

/* --------------------------------------------------------------------------
   Tableta · el menu pasa a hamburguesa
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	body.pf .sy .grid {
		grid-template-columns: repeat(3, 1fr);
	}
	body.pf .cv2 {
		flex-wrap: wrap;
		justify-content: center;
	}
	body.pf .cv2 .eyebrow {
		border-right: 0;
		padding-right: 0;
		width: auto;
	}
	body.pf .cv2 .congreso {
		border-right: 0;
		padding-right: 0;
	}
	body.pf .cv2 .viewport {
		flex: 1 0 100%;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Telefono · el hero se parte en banda de video y panel debajo
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	/* El hero deja de ser una caja fija. La banda de video va arriba,
		   el panel blanco sube sobre ella y el texto se lee en blanco. */
	body.pf .hero {
		height: auto;
		background: var(--surface);
		overflow: visible;
	}
	body.pf .hero .video-band {
		position: relative;
		inset: auto;
		height: 300px;
		overflow: hidden;
	}
	body.pf .hero .scrim {
		background: none;
	}
	body.pf .hero .video-band::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1px;
		height: 140px;
		z-index: 3;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .34) 34%, rgba(255, 255, 255, .72) 62%, rgba(255, 255, 255, .94) 84%, #fff 100%);
		pointer-events: none;
	}
	body.pf .hero .veil-right {
		background: linear-gradient(180deg, rgba(6, 20, 36, .72) 0%, rgba(6, 20, 36, .16) 44%, rgba(6, 20, 36, 0) 68%);
	}
	body.pf .hero-inner {
		position: relative;
		height: auto;
		padding: 0 14px;
		margin-top: -62px;
	}
	body.pf .hero .panel {
		width: 100%;
		padding: 24px 22px 22px;
		border-radius: 16px;
	}
	body.pf .hero .p-btn {
		display: block;
		width: 100%;
		text-align: center;
		padding: 15px 20px;
	}
	body.pf .trust-rail {
		right: 14px;
		left: 14px;
		top: 18px;
		bottom: auto;
		transform: none;
		flex-direction: row;
		text-align: left;
		gap: 4px;
	}
	body.pf .trust-rail .item {
		flex: 1;
		padding: 0 0 0 10px;
		border-right: 0;
		border-left: 2px solid rgba(77, 189, 176, .9);
	}
	body.pf .trust-rail .item + .item {
		border-top: 0;
	}
	body.pf .trust-rail .n { font-size: 17px; }
	body.pf .trust-rail .l { font-size: 10.5px; line-height: 1.25; }
	/* En movil la tarjeta ya no se monta sobre el video.
		   El panel del hero ya hizo ese gesto. */
	body.pf .cv2host { padding: 0 14px 26px; }
	body.pf .cv2 {
		margin: 18px 0 0;
		padding: 13px 0 14px;
		border-radius: 14px;
		flex-direction: column;
		align-items: stretch;
		gap: 11px;
	}
	/* En columna hay que fijar el ancho a mano. Si no, el riel de logos
		   estira las tres piezas y la tarjeta se rompe. */
	body.pf .cv2 > * {
		width: 100%;
		flex: 0 0 auto;
	}
	body.pf .cv2 .eyebrow {
		width: 100%;
		border-right: 0;
		padding: 0 14px;
		text-align: center;
		font-size: 10px;
	}
	body.pf .cv2 .congreso {
		border-right: 0;
		padding: 0 14px;
		justify-content: center;
	}
	body.pf .cv2 .track { gap: 34px; animation-duration: 24s; }
	body.pf .cv2 .track img { height: 27px; }
	body.pf .cv2 .crest { width: 46px; height: 46px; }
	body.pf .cv2 .crest img { height: 34px; }
	body.pf .sy { padding: var(--sec) 0; }
	body.pf .sy-in { padding: 0 14px; }
	body.pf .sy .sy-foot { margin-top: 22px; }
	body.pf .sy-head { margin-bottom: 16px; }
	body.pf .sy .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	body.pf .sy .card { aspect-ratio: 1 / 1; border-radius: var(--r-card); }
	body.pf .sy .card .txt { padding: 0 11px 11px; }
	body.pf .sy .card .med { font-size: 11px; margin-top: 3px; }
}

/* --------------------------------------------------------------------------
   Accesibilidad · sin movimiento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.pf .cv2 .track {
		animation: none;
		width: 100%;
		justify-content: space-between;
		gap: 16px;
	}
	body.pf .cv2 .track .dup {
		display: none;
	}
	body.pf .cv2 .viewport {
		-webkit-mask-image: none;
		        mask-image: none;
	}
	body.pf .sy .card img,
	body.pf .hero .p-btn {
		transition: none;
	}
}
body.pf .hero .p-h1 + .p-note {
	margin-top: 0;
}
body.pf .hero .panel > .p-h1:last-of-type:not(:has(~ p)) {
	margin-bottom: 22px;
}
/* Linea de precio del hero, bajo el subtitulo. */
body.pf .hero .p-note {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--teal);
	margin: -12px 0 22px;
	letter-spacing: .01em;
}

@media (max-width: 640px) {
	body.pf .hero .p-note {
		margin: -8px 0 18px;
	}
}