/**
 * Bloques de página — Dr. Paul Terán
 *
 * Clases reutilizables para construir secciones en Elementor.
 * Se aplican en Elementor > Avanzado > Clases CSS.
 *
 * Elementor aporta la estructura (contenedores y widgets); estas clases
 * aportan el aspecto, para que el editor quede limpio y sin ajustes manuales
 * repetidos en cada sección.
 *
 * ÍNDICE
 *   1. Secciones          pt-section / pt-section--lg / pt-section--tight
 *   2. Portada            pt-hero
 *   3. Tipografía         pt-title-xl / pt-lead / pt-text-center / pt-measure
 *   4. Rejillas           pt-cards-2 / pt-cards-3 / pt-cards-4
 *   5. Tarjetas           pt-card / pt-card--soft
 *   6. Listas             pt-check-list
 *   7. Botones Elementor  pt-cta-primary / pt-cta-ghost / pt-btn-row
 *   8. Banda destacada    pt-banner
 *   9. Retrato            pt-about-hero / pt-portrait
 *   9b. Bloque partido    pt-split
 *  10. Currículum         pt-cv / pt-accordion / pt-cv-list
 *  10b. Episodios         pt-episode
 *  10c. Contacto          pt-contact (shortcode [pt_contacto]) / pt-form-card
 *  11. Portada partida   pt-hero-split / pt-hero-copy / pt-hero-visual
 *  12. Credenciales      pt-chips / pt-chip
 *  13. Caja de icono     pt-icon-box
 *  14. Cinta de temas    pt-topic-band / pt-topic-track
 *  15. Cabecera sección  pt-section-head
 *  16. Cifra destacada   pt-stat
 *  17. Panel de portada  pt-hero-panel / pt-hero-id / pt-avatar / pt-panel-list
 *  18. Lista de iconos   pt-list / pt-list--2col
 *  19. Variantes         pt-hero--compact / pt-split--middle / pt-btn-row--center
 *  20. Servicios         pt-service__num / pt-card__label
 *  21. Temas y episodios pt-topic-card / pt-episode__num / pt-topics-card
 *  22. Contacto          pt-contact__intro
 *  23. Ritmo y relleno   escala única de espaciado (ver tokens.css)
 *  24. Fotografía        pt-photo / pt-photo--retrato / pt-photo__pie
 *  25. Ficha de servicio pt-svc / pt-svc__foto / pt-svc__cuerpo
 *  26. Pasos numerados   pt-pasos / pt-paso
 *  27. Cifras            pt-cifras
 *  28. Franja de contacto pt-franja / pt-franja__dato
 *  29. Ficha de vídeo     pt-video / pt-video__estado
 *  30. Portada con vídeo  pt-hero--video
 *  31. Mosaico de vídeos  pt-clips / pt-clip / pt-clip__label
 *  32. Fotografía en bloques  pt-service__foto / pt-galeria / pt-franja-foto
 *  33. Párrafos justificados
 *  34. Cifras con frase   pt-stat--frase
 *  35. Agendar consulta   pt-cita / pt-cta-xl
 *  36. Trayectoria        pt-trayectoria
 *  37. Espacio de conocimiento  pt-conoc / pt-cuerpo / pt-zonas / pt-zona / pt-audios / pt-infografias
 *  38. Formularios de Consulta  pt-formularios / pt-select / pt-formulario / pt-descargas
 *  39. Portada de Inicio  pt-hero--inicio / pt-hero-rotulos / pt-hero-rotulo
 *  40. Antes de tu consulta  pt-indicaciones / pt-video-vertical
 *  41. Mosaico de ocho videos  pt-clips--8
 *  42. Logotipo del CEO  pt-ceo-logo / pt-ceo-dato
 */

/* ==========================================================================
   1. Secciones
   ========================================================================== */

.pt-section { padding-block: clamp(64px, 8vw, 112px); }
.pt-section--lg { padding-block: clamp(88px, 11vw, 160px); }
.pt-section--tight { padding-block: clamp(40px, 5vw, 64px); }

/*
 * Fondo alterno, para separar secciones consecutivas. Es translúcido a
 * propósito: deja ver el telón de fondo del sitio (las luces en movimiento)
 * y evita que la página se lea como una pila de bandas planas.
 */
.pt-section--alt.pt-section--alt {
	/*
	 * Sin «backdrop-filter»: a 2 px no se distingue y obligaba al navegador
	 * a recalcular el fondo bajo la banda en cada fotograma del scroll.
	 */
	border-block: 1px solid var(--pt-line);
}

/*
 * ------------------------------------------------------------------------
 * Fondos de sección y la carga diferida de Elementor
 * ------------------------------------------------------------------------
 * Elementor difiere la carga de los fondos de sus contenedores de primer
 * nivel con esta regla:
 *
 *   .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload)
 *   { background-image: none !important; }
 *
 * Sólo quita el «none» cuando es él quien ha puesto el fondo y el
 * contenedor entra en pantalla: entonces añade «e-lazyloaded». Un fondo
 * escrito en el tema nunca recibe esa clase, así que el «!important» se
 * quedaba para siempre y las bandas alternas de todas las páginas salían
 * planas, en negro.
 *
 * Su selector suma seis clases de especificidad (dos clases, un
 * «:nth-of-type» y dos «:not»), y lleva «!important»: la única forma de
 * recuperarlo desde una hoja es igualar la forma del selector y añadir una
 * clase más. De ahí el aspecto repetitivo de los dos selectores que
 * siguen; no es adorno, es lo que hace falta para que el fondo se pinte.
 *
 * Si en el editor se elige un fondo para la sección, Elementor lo escribe
 * con el id del elemento y sigue mandando sobre esto.
 */

/* Banda alterna: superficie elevada que separa una sección de la anterior. */
.e-con.e-parent.pt-section.pt-section--alt.pt-section--alt:not(.pt-hero) {
	background-image:
		radial-gradient(90% 62% at 50% 0%, rgba(0, 92, 226, 0.16), transparent 68%),
		linear-gradient(180deg, rgba(12, 30, 55, 0.66) 0%, rgba(6, 17, 32, 0.76) 48%, rgba(3, 8, 15, 0.6) 100%) !important;
}

/*
 * Luz propia de cada sección normal. El telón de fondo del sitio va fijo a
 * la ventana, así que al bajar por la página las secciones intermedias se
 * leían sobre negro plano; esta mancha viaja con la sección.
 */
/* (pt-cita no: su fondo es la foto que se elige en Elementor, ver apartado 35.) */
.e-con.e-parent.pt-section.pt-section:not(.pt-section--alt):not(.pt-hero):not(.pt-cita) {
	background-image:
		radial-gradient(76% 46% at 50% 4%, rgba(88, 166, 255, 0.13), transparent 70%),
		radial-gradient(54% 42% at 6% 98%, rgba(119, 236, 255, 0.08), transparent 72%) !important;
	background-repeat: no-repeat;
}

/*
 * Filo de luz al empezar cada sección: marca el cambio de capítulo sin
 * meter una línea plana de lado a lado.
 */
.pt-section.pt-section + .pt-section {
	border-block-start: 1px solid transparent;
	border-image: var(--pt-grad-line) 1;
	border-image-width: 1px 0 0 0;
}

/* ==========================================================================
   2. Portada
   ========================================================================== */

.pt-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(86vh, 820px);
	padding-block: clamp(56px, 7vw, 104px);
}

/*
 * Secciones de portada: más aire arriba y una línea de luz al pie que marca
 * el cambio de sección sin recurrir a un borde plano.
 */
.pt-section--lg { position: relative; }

.pt-section--lg::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--pt-grad-line);
	pointer-events: none;
}

/* ==========================================================================
   3. Tipografía
   ========================================================================== */

.pt-title-xl h1,
.pt-title-xl h2,
h1.pt-title-xl,
h2.pt-title-xl {
	font-size: clamp(2.75rem, 7.4vw, 6rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 0.98;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Titular de sección: un peldaño por debajo del titular de portada. */
.pt-title-lg h2,
h2.pt-title-lg {
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.06;
	text-wrap: balance;
}

/*
 * Numeral gigante de fondo, para numerar bloques (servicios, pasos…).
 * En Elementor, campo "Clases CSS" del WIDGET DE ENCABEZADO (no del
 * contenedor): pt-index pt-index-1 … pt-index-9
 *
 * Va en el widget porque Elementor reserva el ::before de sus contenedores
 * para la capa de fondo, y ahí no se puede dibujar nada propio.
 */
.pt-index { position: relative; isolation: isolate; }

.pt-index::before {
	position: absolute;
	top: -0.3em;
	left: -0.05em;
	z-index: -1;
	font-size: clamp(4.5rem, 9vw, 7.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.06em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(130, 220, 255, 0.42);
	opacity: 0.9;
	pointer-events: none;
	user-select: none;
}

.pt-index-1::before { content: "01"; }
.pt-index-2::before { content: "02"; }
.pt-index-3::before { content: "03"; }
.pt-index-4::before { content: "04"; }
.pt-index-5::before { content: "05"; }
.pt-index-6::before { content: "06"; }
.pt-index-7::before { content: "07"; }
.pt-index-8::before { content: "08"; }
.pt-index-9::before { content: "09"; }

/* Párrafo de entrada, más grande que el texto normal. */
.pt-lead,
.pt-lead p {
	font-size: clamp(1.1rem, 1.7vw, 1.35rem);
	line-height: 1.6;
	color: var(--pt-text);
}

/* Limita el ancho de lectura. */
.pt-measure { max-width: 62ch; }
.pt-measure-sm { max-width: 46ch; }

.pt-text-center { text-align: center; }
.pt-text-center .pt-measure,
.pt-text-center.pt-measure { margin-inline: auto; }

/* ==========================================================================
   4. Rejillas de tarjetas
   Se aplican a un contenedor de Elementor cuyos hijos son los elementos.
   ========================================================================== */

/*
 * La clase se repite a propósito (.pt-cards-3.pt-cards-3): eleva la
 * especificidad lo justo para ganar al «display: flex» que Elementor aplica
 * a sus contenedores, sin depender de los nombres internos de Elementor.
 */
.pt-cards-2.pt-cards-2,
.pt-cards-3.pt-cards-3,
.pt-cards-4.pt-cards-4 {
	display: grid;
	gap: 20px;
}

.pt-cards-2.pt-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt-cards-3.pt-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-cards-4.pt-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.pt-cards-3.pt-cards-3,
	.pt-cards-4.pt-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.pt-cards-2.pt-cards-2,
	.pt-cards-3.pt-cards-3,
	.pt-cards-4.pt-cards-4 { grid-template-columns: minmax(0, 1fr); }
}

/*
 * Variante centrada: cuando el número de tarjetas no llena la última fila,
 * las sobrantes quedan centradas en lugar de dejar un hueco a la derecha.
 * Las columnas tienen un ancho máximo fijo y la rejilla se centra sola.
 */
.pt-cards-center.pt-cards-center {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.pt-cards-center.pt-cards-center > * { grid-column: span 2; }

/*
 * Seis columnas con tarjetas de dos: así una fila final de dos tarjetas puede
 * empezar en la columna 2, y una de una sola en la columna 3, quedando
 * centradas. Con tres columnas normales esto no es posible.
 */
.pt-cards-center.pt-cards-center > *:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
.pt-cards-center.pt-cards-center > *:nth-child(3n+1):last-child { grid-column: 3 / span 2; }

@media (max-width: 1024px) {
	.pt-cards-center.pt-cards-center { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pt-cards-center.pt-cards-center > *:nth-child(3n+1):nth-last-child(2),
	.pt-cards-center.pt-cards-center > *:nth-child(3n+1):last-child { grid-column: span 2; }
	.pt-cards-center.pt-cards-center > *:last-child:nth-child(odd) { grid-column: 2 / span 2; }
}

@media (max-width: 640px) {
	.pt-cards-center.pt-cards-center { grid-template-columns: minmax(0, 1fr); }
	.pt-cards-center.pt-cards-center > * { grid-column: auto !important; }
}

/* ==========================================================================
   5. Tarjetas
   ========================================================================== */

/*
 * Tarjeta de cristal. El ::before dibuja un borde degradado que sólo se hace
 * visible al pasar el ratón; el ::after es el foco que sigue al puntero, que
 * alimenta assets/js/site.js con --pt-mx / --pt-my.
 */
/*
 * --border-radius es la variable con la que Elementor redondea sus
 * contenedores. Dándole valor aquí, el borde, la capa de fondo del contenedor
 * y esta tarjeta quedan con el mismo radio, y el control de radio de la
 * pestaña Estilo del widget sigue funcionando por encima.
 */
.pt-card.pt-card { --border-radius: var(--pt-radius-lg); }

.pt-card {
	position: relative;
	isolation: isolate;
	padding: clamp(24px, 2.8vw, 38px);
	background: var(--pt-glass-bg);
	border: var(--pt-glass-border);
	border-radius: var(--pt-radius-lg);
	box-shadow: var(--pt-glass-shadow);
	overflow: hidden;
	transition: transform var(--pt-transition-smooth),
		border-color var(--pt-transition-base),
		box-shadow var(--pt-transition-smooth);
}

/*
 * z-index 0 (no -1): con -1 el degradado quedaría por detrás del fondo de la
 * propia tarjeta y no se vería. El contenido se eleva a z-index 1.
 */
.pt-card > * { position: relative; z-index: 1; }

/* Clase repetida: gana a «.e-con::before» de Elementor (ver animations.css). */
.pt-card.pt-card::before {
	content: "";
	display: block;
	mix-blend-mode: normal;
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	opacity: 0;
	transition: opacity var(--pt-transition-smooth);
	background:
		radial-gradient(420px circle at var(--pt-mx, 50%) var(--pt-my, 0%),
			rgba(119, 236, 255, 0.16), transparent 62%),
		linear-gradient(160deg, rgba(119, 236, 255, 0.1), transparent 46%);
}

.pt-card:hover {
	transform: translateY(-6px);
	border-color: var(--pt-line-strong);
	box-shadow: var(--pt-shadow-3), var(--pt-glow), var(--pt-glass-highlight);
}

.pt-card:hover::before { opacity: 1; }

/* Filo superior luminoso: sugiere una luz cenital sobre la tarjeta. */
.pt-card.pt-card::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	left: 12%;
	right: 12%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(160, 235, 255, 0.55), transparent);
	opacity: 0.7;
	pointer-events: none;
}

/*
 * Título de tarjeta: mismo tamaño sea cual sea la etiqueta que se haya
 * elegido en Elementor. Así una tarjeta con h2 no descuadra la jerarquía
 * frente a la de al lado con h3.
 */
.pt-card h2,
.pt-card h3,
.pt-card h4 { font-size: 1.3rem; line-height: 1.3; margin-bottom: 0.5em; }
.pt-card p:last-child { margin-bottom: 0; }

/* Variante sin sombra ni elevación, para listados largos. */
.pt-card--soft {
	background: rgba(150, 205, 255, 0.055);
	box-shadow: var(--pt-glass-highlight);
}

.pt-card--soft:hover { transform: none; box-shadow: none; }

/* ==========================================================================
   6. Listas con marca de verificación
   Aplicar al widget de texto o de lista.
   ========================================================================== */

.pt-check-list ul { list-style: none; margin: 0; padding: 0; }

.pt-check-list li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 32px;
	color: var(--pt-text);
}

.pt-check-list li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pt-cyan);
	box-shadow: 0 0 12px rgba(119, 236, 255, 0.6);
}

.pt-check-list li:last-child { margin-bottom: 0; }

/* ==========================================================================
   7. Botones sobre el widget "Botón" de Elementor
   ========================================================================== */

.pt-btn-row.pt-btn-row {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 14px;
	width: auto;
}

.pt-cta-primary .elementor-button,
.pt-cta-ghost .elementor-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 17px 32px;
	border: 0;
	border-radius: var(--pt-radius-pill);
	overflow: hidden;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1;
	transition: transform var(--pt-transition-smooth), box-shadow var(--pt-transition-smooth),
		background var(--pt-transition-base), color var(--pt-transition-base);
}

/* Brillo que cruza el botón al pasar el ratón. */
.pt-cta-primary .elementor-button::after,
.pt-cta-ghost .elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.4) 50%, transparent 62%);
	background-size: 250% 100%;
	background-position: 150% 0;
	transition: background-position 0.7s var(--pt-ease-out);
	pointer-events: none;
}

.pt-cta-primary .elementor-button:hover::after,
.pt-cta-ghost .elementor-button:hover::after { background-position: -50% 0; }

.pt-cta-primary .elementor-button {
	background: var(--pt-grad-brand);
	background-size: 180% 100%;
	color: #04121f;
	box-shadow: var(--pt-glow), 0 10px 26px rgba(0, 0, 0, 0.35);
}

.pt-cta-primary .elementor-button:hover,
.pt-cta-primary .elementor-button:focus-visible {
	transform: translateY(-3px);
	background-position: 100% 0;
	color: #04121f;
	box-shadow: var(--pt-glow-strong), 0 18px 40px rgba(0, 0, 0, 0.45);
}

.pt-cta-ghost .elementor-button {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid var(--pt-line-strong);
	color: #fff;
}

.pt-cta-ghost .elementor-button:hover,
.pt-cta-ghost .elementor-button:focus-visible {
	transform: translateY(-3px);
	background: rgba(130, 220, 255, 0.16);
	border-color: var(--pt-cyan);
	color: #fff;
	box-shadow: var(--pt-glow);
}

@media (prefers-reduced-motion: reduce) {
	.pt-cta-primary .elementor-button:hover,
	.pt-cta-ghost .elementor-button:hover { transform: none; }
}

/* ==========================================================================
   8. Banda destacada (llamadas a la acción a todo el ancho)
   ========================================================================== */

/*
 * La clase se repite (.pt-banner.pt-banner) por el mismo motivo que en las
 * rejillas: Elementor alinea sus contenedores con una regla más específica.
 */
.pt-banner.pt-banner { text-align: center; }

.pt-banner.pt-banner { --border-radius: var(--pt-radius-xl); }

/* Elementor pone «overflow: visible» a sus contenedores con más
   especificidad que .pt-banner, y la luz de ::before (más ancha que la banda)
   desbordaba la página en móvil: 7 px en Consulta a 360–390 px. */
.pt-banner.pt-banner { --overflow: hidden; overflow: hidden; }

.pt-banner {
	position: relative;
	isolation: isolate;
	padding: clamp(52px, 7vw, 92px) clamp(28px, 5vw, 72px);
	border: var(--pt-glass-border);
	border-radius: var(--pt-radius-xl);
	background: var(--pt-glass-bg);
	box-shadow: var(--pt-shadow-3), var(--pt-glass-highlight);
	overflow: hidden;
}

/* Luz ambiental dentro de la banda. */
.pt-banner.pt-banner::before {
	content: "";
	display: block;
	mix-blend-mode: normal;
	opacity: 1;
	position: absolute;
	inset: -40% -10% auto -10%;
	height: 150%;
	z-index: -1;
	background:
		radial-gradient(54% 66% at 22% 30%,
			rgba(119, 236, 255, 0.2) 0%, rgba(119, 236, 255, 0.11) 36%,
			rgba(119, 236, 255, 0.035) 62%, transparent 82%),
		radial-gradient(50% 62% at 80% 70%,
			rgba(0, 92, 226, 0.22) 0%, rgba(0, 92, 226, 0.12) 36%,
			rgba(0, 92, 226, 0.04) 62%, transparent 82%);
	pointer-events: none;
	animation: pt-aurora-drift 24s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
	.pt-banner.pt-banner::before { animation: none; }
}

.pt-banner h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); letter-spacing: -0.035em; text-wrap: balance; }

/* Todo el contenido de la banda va centrado, también el antetítulo. */
.pt-banner.pt-banner > * { align-self: center; }
.pt-banner .pt-eyebrow { margin-inline: auto; }
.pt-banner .pt-measure, .pt-banner p { margin-inline: auto; max-width: 68ch; }

.pt-banner h2,
.pt-banner h3 { margin-bottom: 0.4em; }
.pt-banner .pt-btn-row { justify-content: center; margin-top: 8px; }

/* ==========================================================================
   9. Portada con retrato (página "Sobre el Dr.")
   Dos columnas en escritorio, una debajo de otra en tableta y móvil.
   ========================================================================== */

.pt-about-hero.pt-about-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}

@media (max-width: 1024px) {
	.pt-about-hero.pt-about-hero { grid-template-columns: 1fr; }
}

/*
 * El titular comparte fila con el retrato, así que se rebaja un escalón.
 * Sin esto una palabra larga ("ACTUALIZACIÓN") se sale de su columna.
 */
.pt-about-hero .pt-title-xl h1 {
	font-size: clamp(2.1rem, 4.4vw, 3.6rem);
	hyphens: auto;
}

.pt-about-hero__media { display: flex; justify-content: center; }

/*
 * Retrato recortado en círculo, apoyado en un halo. La fotografía (900 px)
 * llena el marco; con el retrato del CV, que medía 212 px, el ancho estaba
 * limitado para no ampliarlo.
 */
.pt-portrait.pt-portrait {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 100%;
}

.pt-portrait.pt-portrait img {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
	border: 1px solid rgba(160, 215, 255, 0.28);
	border-radius: 50%;
	filter: saturate(0.92) contrast(1.04) brightness(0.96);
	box-shadow: 0 0 0 10px rgba(119, 236, 255, 0.05),
		0 0 0 1px rgba(160, 215, 255, 0.16),
		var(--pt-shadow-3),
		0 0 80px rgba(79, 210, 255, 0.28);
}

/* ==========================================================================
   9b. Bloque partido: presentación a la izquierda, listado a la derecha
   Usado en los servicios. En tableta y móvil pasa a una sola columna.
   ========================================================================== */

.pt-split.pt-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(28px, 4vw, 64px);
}

@media (max-width: 900px) {
	.pt-split.pt-split { grid-template-columns: 1fr; }
}

.pt-split__intro .pt-index { margin-top: clamp(24px, 3vw, 44px); }

.pt-split__intro h2 {
	font-size: clamp(1.75rem, 3vw, 2.6rem);
	letter-spacing: -0.025em;
	line-height: 1.12;
	margin-bottom: 0.4em;
}

.pt-split__list h3 {
	margin-bottom: 1em;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pt-cyan);
}

/* ==========================================================================
   10. Currículum desplegable
   Da el aspecto del sitio al widget "Acordeón" de Elementor, que por defecto
   viene en claro. Siempre que Elementor expone una variable propia se usa esa
   variable en lugar de sobrescribir su regla: así el cliente conserva los
   controles de la pestaña Estilo del widget, que mandan sobre esto.
   ========================================================================== */

.pt-cv .elementor-widget-n-accordion {
	/* Relleno, separación y orden del icono (por defecto va delante del título). */
	--n-accordion-padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px);
	--n-accordion-item-title-space-between: 12px;
	--n-accordion-title-icon-order: 1;
	--n-accordion-title-justify-content: space-between;
	--n-accordion-title-flex-grow: 1;
	--n-accordion-icon-gap: 0 16px;
	--n-accordion-icon-size: 14px;

	/* Sin borde propio: el contorno lo pone la tarjeta (.e-n-accordion-item). */
	--n-accordion-border-width: 0;
	--n-accordion-border-radius: var(--pt-radius-lg);

	/* Colores del sistema de diseño. */
	--n-accordion-title-font-size: clamp(1rem, 1.3vw, 1.12rem);
	--n-accordion-title-normal-color: var(--pt-text);
	--n-accordion-title-hover-color: var(--pt-cyan);
	--n-accordion-title-active-color: var(--pt-cyan);
}

.pt-cv .e-n-accordion-item { --border-radius: var(--pt-radius-lg);
	border: var(--pt-glass-border);
	border-radius: var(--pt-radius-lg);
	background: var(--pt-glass-bg);
	overflow: hidden;
	transition: border-color var(--pt-transition-base), background var(--pt-transition-base);
}

.pt-cv .e-n-accordion-item[open] {
	border-color: var(--pt-line-strong);
	background: var(--pt-bg-2);
}

/*
 * «inherit» para que el titular tome el color que Elementor pone en el
 * <summary> según el estado (normal, hover, abierto) en lugar del color de
 * encabezado del tema.
 */
.pt-cv .e-n-accordion-item-title-text {
	color: inherit;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.pt-cv .e-n-accordion-item-title:focus-visible {
	outline: 2px solid var(--pt-cyan);
	outline-offset: -2px;
}

/* El panel hereda el borde claro de Elementor mediante :where(); se retira. */
.pt-cv .e-n-accordion-item > .e-con {
	border: 0;
	padding: 0 clamp(18px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px);
}

/* Listado largo del currículum: legible, sin viñeta redonda del navegador. */
.pt-cv-list { list-style: none; margin: 0; padding: 0; }

.pt-cv-list li {
	position: relative;
	margin-bottom: 14px;
	padding-left: 22px;
	font-size: 0.95rem;
	line-height: 1.62;
	color: var(--pt-muted);
}

.pt-cv-list li::before {
	content: "";
	position: absolute;
	top: 0.7em;
	left: 0;
	width: 10px;
	height: 1px;
	background: var(--pt-cyan);
}

.pt-cv-list li:last-child { margin-bottom: 0; }
.pt-cv-list strong { color: var(--pt-text); font-weight: 600; }

.pt-cv-list a { color: var(--pt-cyan); text-decoration: none; word-break: break-word; }
.pt-cv-list a:hover,
.pt-cv-list a:focus-visible { text-decoration: underline; }

/* ==========================================================================
   10b. Episodios del podcast
   El shortcode [audio] imprime un <audio controls> del navegador; aquí sólo
   se ajusta su tamaño y su encaje dentro de la tarjeta.
   ========================================================================== */

.pt-episode h3 {
	min-height: 2.6em;
	font-size: 1rem;
	line-height: 1.3;
}

/* El reproductor es el del navegador; :root ya lo declara en modo oscuro. */
.pt-episode audio {
	display: block;
	width: 100%;
	height: 40px;
	margin-top: 4px;
	border-radius: var(--pt-radius-pill);
}

/* El envoltorio del shortcode no debe imponer ancho fijo. */
.pt-episode .wp-audio-shortcode { width: 100% !important; max-width: 100%; }

/* ==========================================================================
   10c. Datos de contacto
   Aspecto del bloque que imprime el shortcode [pt_contacto]. El contenido se
   edita en Apariencia > Personalizar, no aquí.
   ========================================================================== */

.pt-contact { display: grid; gap: clamp(20px, 2.4vw, 30px); }

.pt-contact__label {
	margin-bottom: 0.5em;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pt-cyan);
}

.pt-contact address { font-style: normal; color: var(--pt-muted); }
.pt-contact p { margin-bottom: 0.35em; color: var(--pt-muted); }
.pt-contact a { color: var(--pt-text); text-decoration: none; }
.pt-contact a:hover,
.pt-contact a:focus-visible { color: var(--pt-cyan); }

.pt-contact__social {
	display: flex;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pt-contact__social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: var(--pt-glass-border);
	border-radius: 50%;
	transition: border-color var(--pt-transition-base), background var(--pt-transition-base);
}

.pt-contact__social a:hover,
.pt-contact__social a:focus-visible {
	border-color: var(--pt-cyan);
	background: rgba(130, 220, 255, 0.12);
}

.pt-contact__social svg { width: 18px; height: 18px; fill: currentColor; }

/* Tarjeta que envuelve el formulario de Contact Form 7. */
.pt-form-card h3 { margin-bottom: 1.1em; font-size: 1.25rem; }

/*
 * Tarjeta de la encuesta de preadmisión: banda propia, centrada y con un
 * ancho de lectura cómodo; las opciones se reparten en columnas dentro.
 */
.pt-encuesta-card.pt-encuesta-card {
	width: 100%;
	max-width: 1120px;
	margin-inline: auto;
}

.pt-encuesta-card h3 { margin-bottom: 0; }

/*
 * Sin el «levantar al pasar el ratón» de .pt-card: un formulario que se mueve
 * bajo el cursor mientras se rellena estorba, y en móvil la transición
 * desbordaba la página unos píxeles a lo ancho.
 */
.pt-encuesta-card.pt-encuesta-card:hover { transform: none; }

/* ==========================================================================
   11. Ajustes sobre la estructura de Elementor
   Mantiene los contenedores dentro del ancho del sitio sin configurarlo
   sección por sección.
   ========================================================================== */

/* Evita que el widget de texto herede márgenes que rompen el ritmo vertical. */
.pt-section .elementor-widget:last-child p:last-child { margin-bottom: 0; }

/* ==========================================================================
   11. Portada partida (texto + retrato)
   Aplicar pt-hero-split al contenedor de portada; sus dos hijos son la
   columna de texto y la columna visual.
   ========================================================================== */

.pt-hero-split.pt-hero-split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
	width: 100%;
}

@media (max-width: 960px) {
	.pt-hero-split.pt-hero-split { grid-template-columns: 1fr; }
}

/* Columna de texto: los hijos se apilan con aire entre ellos. */
.pt-hero-copy.pt-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	width: 100%;
}

.pt-hero-copy > * { margin: 0; }

/* En la portada partida el titular convive con el panel: un cuerpo menor
   evita que empuje los botones fuera de la primera pantalla. */
.pt-hero-split .pt-title-xl h1,
.pt-hero-split h1.pt-title-xl {
	font-size: clamp(2.5rem, 5.2vw, 4.6rem);
}

/* --------------------------------------------------------------------------
   Retrato: marco de cristal con anillo de luz giratorio.
   -------------------------------------------------------------------------- */

.pt-portrait-frame.pt-portrait-frame {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 460px;
	margin-inline: auto;
	aspect-ratio: 1;
	isolation: isolate;
}

/* Cuando el marco envuelve el retrato pequeño, el anillo se ciñe a él. */
.pt-about-hero__media.pt-portrait-frame { max-width: 440px; }

/* Anillo exterior que gira muy despacio. */
.pt-portrait-frame.pt-portrait-frame::after {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 50%;
	padding: 1px;
	background: conic-gradient(from 0deg, transparent 0deg, var(--pt-cyan) 70deg, var(--pt-blue) 150deg, transparent 220deg, transparent 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: pt-ring-spin 18s linear infinite;
	pointer-events: none;
}

@keyframes pt-ring-spin {
	to { transform: rotate(1turn); }
}

.pt-portrait-frame > .elementor-widget-image {
	position: relative;
	z-index: 1;
	width: 84%;
}

.pt-portrait-frame img {
	width: 100%;
	border-radius: 50%;
	background: var(--pt-glass-bg);
	border: 1px solid rgba(160, 215, 255, 0.24);
	box-shadow: var(--pt-shadow-3), 0 0 90px rgba(79, 210, 255, 0.26);
	object-fit: cover;
	aspect-ratio: 1;
}

/* --------------------------------------------------------------------------
   Tarjeta flotante sobre el retrato (dato o credencial).
   -------------------------------------------------------------------------- */

.pt-float-card.pt-float-card {
	position: absolute;
	z-index: 2;
	width: max-content;
	max-width: 66%;
	padding: 13px 20px;
	border-radius: var(--pt-radius-md);
	background: linear-gradient(158deg, rgba(24, 48, 84, 0.88), rgba(8, 18, 34, 0.94));
	border: 1px solid rgba(160, 215, 255, 0.22);
	box-shadow: var(--pt-shadow-2), var(--pt-glass-highlight);
	/*
	 * Sin backdrop-filter a propósito: la tarjeta vive dentro del panel, que
	 * ya lleva uno, y Chromium deja de dibujar el contenido de la capa
	 * interior cuando se anidan dos desenfoques de fondo.
	 */
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
	transition: transform var(--pt-transition-smooth), box-shadow var(--pt-transition-smooth);
}

/*
 * La tarjeta no lleva animación continua. Con una animación de «transform»
 * dentro del panel, Chromium la pasa a su propia capa y la dibuja por debajo
 * del fondo del panel: la tarjeta desaparecía. Comprobado en el navegador.
 */
.pt-float-card.pt-float-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--pt-shadow-3), var(--pt-glow);
}

.pt-float-card p { margin: 0; color: inherit; }

/*
 * Las tarjetas sobresalen del panel, pero nunca del contenedor de la sección:
 * la portada recorta lo que se sale (overflow: clip) y quedarían cortadas.
 */
.pt-float-card--tl { top: -26px; left: 5%; }
.pt-float-card--br { bottom: -26px; right: 5%; }
.pt-float-card--bl { bottom: 24%; left: 5%; }

@media (max-width: 960px) {
	.pt-float-card.pt-float-card { max-width: 52%; }
}

@media (max-width: 640px) {
	.pt-float-card.pt-float-card {
		position: static;
		max-width: 100%;
		margin-top: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pt-float-card.pt-float-card:hover { transform: none; }
	.pt-portrait-frame.pt-portrait-frame::after { animation: none; }
}

/* ==========================================================================
   12. Pastillas de credenciales
   ========================================================================== */

.pt-chips.pt-chips {
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
	width: auto;
}

.pt-chip.pt-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	padding: 9px 16px;
	border: 1px solid var(--pt-line-strong);
	border-radius: var(--pt-radius-pill);
	background: rgba(119, 236, 255, 0.06);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--pt-text);
}

.pt-chip p { margin: 0; color: inherit; }

/* ==========================================================================
   13. Caja de icono (widget «Caja de iconos» de Elementor)
   ========================================================================== */

.pt-icon-box.pt-icon-box { --border-radius: var(--pt-radius-lg); }

.pt-icon-box {
	position: relative;
	isolation: isolate;
	height: 100%;
	padding: clamp(24px, 2.4vw, 34px);
	border-radius: var(--pt-radius-lg);
	background: var(--pt-glass-bg);
	border: 1px solid rgba(160, 215, 255, 0.14);
	box-shadow: var(--pt-shadow-1), var(--pt-glass-highlight);
	overflow: hidden;
	transition: transform var(--pt-transition-smooth), border-color var(--pt-transition-base),
		box-shadow var(--pt-transition-smooth);
}

/* Luz que aparece al pasar el ratón; sigue al puntero con --pt-mx/--pt-my. */
.pt-icon-box.pt-icon-box::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	opacity: 0;
	mix-blend-mode: normal;
	transition: opacity var(--pt-transition-smooth);
	background: radial-gradient(360px circle at var(--pt-mx, 50%) var(--pt-my, 0%),
		rgba(119, 236, 255, 0.16), transparent 64%);
	pointer-events: none;
}

.pt-icon-box:hover {
	transform: translateY(-6px);
	border-color: var(--pt-line-strong);
	box-shadow: var(--pt-shadow-3), var(--pt-glow);
}

.pt-icon-box:hover::before { opacity: 1; }

/* El contenido se centra en vertical: las tarjetas de una rejilla tienen la
   misma altura y así ninguna queda con un hueco abajo. */
.pt-icon-box .elementor-icon-box-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

/* Medallón del icono. */
.pt-icon-box .elementor-icon-box-icon { margin-bottom: 18px; }

.pt-icon-box .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: linear-gradient(150deg, rgba(119, 236, 255, 0.22), rgba(0, 92, 226, 0.22));
	border: 1px solid rgba(160, 215, 255, 0.28);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 26px rgba(79, 210, 255, 0.16);
	color: var(--pt-cyan);
	font-size: 22px;
	transition: transform var(--pt-transition-smooth), box-shadow var(--pt-transition-smooth);
}

.pt-icon-box .elementor-icon svg { width: 22px; height: 22px; fill: currentColor; }

.pt-icon-box:hover .elementor-icon {
	transform: translateY(-2px) scale(1.04);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 40px rgba(79, 210, 255, 0.3);
}

.pt-icon-box .elementor-icon-box-title,
.pt-icon-box .elementor-icon-box-title a {
	font-size: 1.12rem;
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #fff;
	margin-bottom: 8px;
}

.pt-icon-box .elementor-icon-box-description {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.6;
	color: var(--pt-muted);
}

/* ==========================================================================
   14. Cinta de temas en movimiento
   Contenedor con pt-topic-band; dentro, un widget de texto con pt-topic-track.
   ========================================================================== */

.pt-topic-band.pt-topic-band {
	position: relative;
	padding-block: 16px;
	border-block: 1px solid var(--pt-line);
	background: linear-gradient(90deg, rgba(10, 26, 48, 0.15), rgba(10, 26, 48, 0.5), rgba(10, 26, 48, 0.15));
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.pt-topic-track p {
	display: flex;
	align-items: center;
	gap: 38px;
	width: max-content;
	margin: 0;
	white-space: nowrap;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--pt-muted);
	animation: pt-marquee 48s linear infinite;
}

.pt-topic-track p span {
	display: inline-flex;
	align-items: center;
	gap: 38px;
}

.pt-topic-track p span::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pt-cyan);
	box-shadow: 0 0 10px var(--pt-cyan);
	opacity: 0.8;
}

.pt-topic-band:hover .pt-topic-track p { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.pt-topic-track p { animation: none; }
}

/* ==========================================================================
   15. Cabecera de sección (antetítulo + titular + entrada, centrados)
   ========================================================================== */

.pt-section-head.pt-section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 800px;
	margin-inline: auto;
	margin-bottom: clamp(36px, 4vw, 56px);
	text-align: center;
}

.pt-section-head.pt-section-head > * { margin: 0; }
.pt-section-head .pt-eyebrow { align-self: center; }

/* ==========================================================================
   16. Bloque de cifra/dato destacado
   ========================================================================== */

.pt-stat.pt-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 26px;
	border-radius: var(--pt-radius-md);
	border: 1px solid var(--pt-line);
	background: rgba(150, 205, 255, 0.05);
}

.pt-stat__value,
.pt-stat .pt-stat__value {
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 750;
	letter-spacing: -0.03em;
	line-height: 1;
	color: #fff;
}

.pt-stat__label,
.pt-stat .pt-stat__label {
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pt-faint);
}

/* ==========================================================================
   17. Panel de portada
   Tarjeta de cristal que acompaña al titular en la portada. Sustituye a la
   fotografía mientras no haya material fotográfico del especialista: el
   retrato disponible mide 212 px y sólo da para el avatar.
   ========================================================================== */

/* Envoltorio del panel: da el marco de referencia a las tarjetas flotantes. */
.pt-hero-visual.pt-hero-visual {
	position: relative;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
}

.pt-hero-panel.pt-hero-panel {
	position: relative;
	isolation: isolate;
	gap: 22px;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
	padding: clamp(26px, 3vw, 38px);
	border-radius: var(--pt-radius-xl);
	border: 1px solid rgba(160, 215, 255, 0.2);
	/*
	 * Casi opaco: el panel se apoya sobre el retrato y, desde que se quitó el
	 * «backdrop-filter» por el coste en Firefox, nada difumina lo que queda
	 * detrás. Con menos opacidad la fotografía se leía a través del texto.
	 */
	/* Base opaca bajo el degradado: el panel se apoya sobre el retrato y
	   cualquier resto de transparencia deja leer la foto a través del texto. */
	background-color: #071121;
	background-image: linear-gradient(158deg, rgba(26, 52, 90, 0.95) 0%, rgba(11, 26, 48, 0.97) 56%, rgba(7, 17, 33, 0.985) 100%);
	box-shadow: var(--pt-shadow-3), var(--pt-glass-highlight);
	/*
	 * Sin «backdrop-filter»: el degradado del panel ya es casi opaco, así que
	 * el desenfoque no se veía, pero el navegador tenía que recalcularlo en
	 * cada fotograma mientras la portada se desplazaba. Era el último tirón
	 * que quedaba en el scroll de Inicio.
	 */
}

/* Resplandor interior, en la esquina superior. */
.pt-hero-panel.pt-hero-panel::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	opacity: 1;
	mix-blend-mode: normal;
	background: radial-gradient(70% 60% at 18% 0%, rgba(119, 236, 255, 0.22), transparent 62%);
	pointer-events: none;
}

/* --- Identificación: avatar + nombre --- */

.pt-hero-id.pt-hero-id {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	width: 100%;
}

.pt-hero-id.pt-hero-id > * { align-self: center; }

.pt-avatar.pt-avatar { width: 72px; flex: none; }

.pt-avatar img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid rgba(160, 215, 255, 0.34);
	box-shadow: 0 0 0 4px rgba(119, 236, 255, 0.08), 0 0 30px rgba(79, 210, 255, 0.28);
}

.pt-id-text.pt-id-text { display: flex; flex-direction: column; gap: 2px; }
.pt-id-text p { margin: 0; }

.pt-id-name,
.pt-id-text .pt-id-name {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
}

.pt-id-role,
.pt-id-text .pt-id-role {
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pt-cyan);
}

/* --- Lista de capacidades dentro del panel --- */

.pt-panel-list .elementor-icon-list-items { gap: 2px; }

.pt-panel-list .elementor-icon-list-item {
	align-items: flex-start;
	padding: 11px 0;
	border-bottom: 1px solid var(--pt-line);
	font-size: 0.97rem;
	line-height: 1.45;
	color: var(--pt-text);
}

.pt-panel-list .elementor-icon-list-item:last-child { border-bottom: 0; }

.pt-panel-list .elementor-icon-list-icon { margin-top: 2px; }

.pt-panel-list .elementor-icon-list-icon svg,
.pt-panel-list .elementor-icon-list-icon i {
	width: 17px;
	height: 17px;
	font-size: 15px;
	color: var(--pt-cyan);
	fill: var(--pt-cyan);
}

.pt-panel-list .elementor-icon-list-text { color: var(--pt-text); }

/* ==========================================================================
   18. Lista de iconos general (widget «Lista de iconos» de Elementor)
   ========================================================================== */

/* Clase repetida: Elementor centra sus elementos de lista desde una hoja
   que carga después; sin repetirla ganaba él. */
.pt-list.pt-list .elementor-icon-list-item {
	align-items: flex-start;
	padding: 7px 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--pt-text);
}

/*
 * Medallón del icono. Suelto, el glifo de Elementor sale a 14 px y se lee
 * como una mancha; dentro de un medallón gana contorno y la lista queda
 * igual que las cajas de icono del resto del sitio. El ancho fijo y el
 * «align-self: flex-start» lo dejan a la altura de la primera línea aunque
 * el texto ocupe dos.
 */
.pt-list.pt-list .elementor-icon-list-icon {
	flex: 0 0 auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 0;
	margin-inline-end: 12px;
	border-radius: 8px;
	background: linear-gradient(150deg, rgba(119, 236, 255, 0.18), rgba(0, 92, 226, 0.18));
	border: 1px solid rgba(160, 215, 255, 0.24);
}

.pt-list.pt-list .elementor-icon-list-icon svg,
.pt-list.pt-list .elementor-icon-list-icon i {
	width: 13px;
	height: 13px;
	font-size: 12px;
	color: var(--pt-cyan);
	fill: var(--pt-cyan);
	margin: 0;
}

/*
 * El texto se alinea arriba, igual que el medallón. En la lista a dos
 * columnas cada fila mide lo que el elemento más largo; Elementor centra el
 * texto en esa altura y el elemento corto quedaba con el icono arriba y la
 * frase a media altura.
 */
.pt-list.pt-list .elementor-icon-list-text,
.pt-list.pt-list .elementor-icon-list-icon + .elementor-icon-list-text {
	align-self: flex-start;
	color: var(--pt-text);
}

/*
 * Punto de reserva: si un elemento de la lista se guardó sin icono, el
 * texto se iba al margen y rompía la columna. Este marcador ocupa el mismo
 * hueco que el medallón.
 */
.pt-list .elementor-icon-list-item > .elementor-icon-list-text:first-child::before {
	content: "";
	display: inline-block;
	vertical-align: 0.15em;
	width: 7px;
	height: 7px;
	margin-inline: 8px 17px;
	border-radius: 50%;
	background: var(--pt-cyan);
	box-shadow: 0 0 10px rgba(119, 236, 255, 0.55);
}

/* Dos columnas cuando la lista es larga. */
@media (min-width: 720px) {
	.pt-list--2col .elementor-icon-list-items {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
	}
}

/* ==========================================================================
   19. Variantes de portada y de bloque partido
   ========================================================================== */

/* Portada corta: la usan las páginas interiores, que no llevan panel. */
.pt-hero--compact.pt-hero--compact {
	min-height: min(58vh, 560px);
	padding-block: clamp(64px, 8vw, 116px);
}

/* Columna de texto centrada. */
.pt-hero-copy--center.pt-hero-copy--center {
	align-items: center;
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}

.pt-hero-copy--center .pt-measure { margin-inline: auto; }

/* Los titulares interiores son frases largas: un cuerpo algo menor y un
   ancho de línea limitado evitan que ocupen media pantalla. */
.pt-hero--compact .pt-title-lg h1,
.pt-hero--compact h1.pt-title-lg {
	max-width: 22ch;
	margin-inline: auto;
	font-size: clamp(1.85rem, 3.4vw, 2.9rem);
}
.pt-hero-copy--center .pt-btn-row { justify-content: center; }

/* Bloque partido con las dos columnas centradas verticalmente. */
.pt-split--middle.pt-split--middle { align-items: center; }

/* Bloque partido con la segunda columna más ancha (contacto). */
.pt-split--wide.pt-split--wide { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

@media (max-width: 900px) {
	.pt-split--wide.pt-split--wide { grid-template-columns: 1fr; }
}

/* Fila de botones centrada. */
.pt-btn-row--center.pt-btn-row--center {
	justify-content: center;
	margin-top: clamp(28px, 3vw, 44px);
}

/* ==========================================================================
   20. Servicios
   ========================================================================== */

.pt-service__num,
.pt-service__copy .pt-service__num {
	font-size: clamp(3rem, 6vw, 5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.06em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(130, 220, 255, 0.4);
	margin-bottom: 8px;
}

.pt-service__num p { margin: 0; color: inherit; font: inherit; }

/* La tarjeta se ajusta a su contenido; con «stretch» dejaba un hueco abajo. */
.pt-service__card.pt-service__card { align-self: center; }

/* Etiqueta pequeña dentro de una tarjeta. */
.pt-card__label,
.pt-card .pt-card__label {
	margin-bottom: 14px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pt-cyan);
}

.pt-card__label p { margin: 0; color: inherit; font: inherit; }

/* ==========================================================================
   21. Tarjetas de tema y de episodio
   ========================================================================== */

/* Numeral del episodio, arriba de la tarjeta. */
.pt-episode__num,
.pt-episode .pt-episode__num {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--pt-cyan);
	margin-bottom: 10px;
}

.pt-episode__num p { margin: 0; color: inherit; font: inherit; }

/* Tarjeta de tema del centro educativo: el rótulo «Video» con un punto. */
.pt-topic-card .pt-card__label { display: flex; align-items: center; gap: 9px; }

.pt-topic-card .pt-card__label::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pt-cyan);
	box-shadow: 0 0 10px var(--pt-cyan);
}

.pt-topic-card h3 { font-size: 1.08rem; line-height: 1.35; margin: 0; }

/* Tarjeta única que contiene la lista larga de temas del podcast. */
.pt-topics-card.pt-topics-card { padding: clamp(26px, 3vw, 44px); }

/* ==========================================================================
   22. Bloque de contacto
   ========================================================================== */

.pt-contact__intro.pt-contact__intro { gap: 18px; }

.pt-contact__intro h2 { margin: 0; }


/* ==========================================================================
   23. Ritmo y relleno
   Capa final: iguala el aire de todo el sitio a partir de la escala de
   tokens.css. Va al final del archivo a propósito, para ganarle a las
   reglas anteriores sin tocarlas.

   Por qué las clases van repetidas (.pt-card.pt-card): Elementor declara
   el relleno de sus contenedores con propiedades lógicas
   («padding-inline-start» en «.e-con» y «padding-block-start» en
   «.e-con-full»). Tienen la misma especificidad que una clase simple y su
   hoja se carga después de la del tema, así que ganaban siempre: cualquier
   tarjeta montada como contenedor se quedaba con los 10 px de fábrica en
   lugar de su relleno. Con la clase repetida la especificidad sube y el
   relleno del tema vuelve a mandar. La pestaña Estilo de Elementor sigue
   funcionando por encima, porque escribe estilo en línea.
   ========================================================================== */

/* --- Ritmo entre secciones ------------------------------------------- */

.pt-section.pt-section { padding-block: var(--pt-rhythm); }
.pt-section--lg.pt-section--lg { padding-block: var(--pt-rhythm-lg); }
.pt-section--tight.pt-section--tight { padding-block: var(--pt-rhythm-sm); }

/*
 * Dos secciones seguidas sumaban su relleno y dejaban un hueco doble. La
 * segunda de cada par recorta el suyo para que el salto sea uno solo.
 */
.pt-section + .pt-section:not(.pt-section--alt) { padding-block-start: var(--pt-rhythm-sm); }

/* La cabecera de sección siempre separa igual de lo que viene debajo. */
.pt-section-head.pt-section-head { margin-block-end: var(--pt-space-8); gap: var(--pt-space-4); }

/* --- Relleno de las superficies --------------------------------------- */

.pt-card.pt-card,
.pt-icon-box.pt-icon-box,
.pt-episode.pt-episode,
.pt-form-card.pt-form-card,
.pt-service__card.pt-service__card,
.pt-topic-card.pt-topic-card,
.pt-card--soft.pt-card--soft { padding: var(--pt-pad-card); }

.pt-topics-card.pt-topics-card,
.pt-banner.pt-banner { padding: var(--pt-pad-panel); }

.pt-hero-panel.pt-hero-panel { padding: var(--pt-pad-hero-panel); }

/*
 * Un contenedor «caja» de Elementor mete su propio relleno en el hijo
 * «.e-con-inner», que se sumaría al de la tarjeta. Se anula para que el
 * relleno visible sea exactamente el del tema.
 */
.pt-card.pt-card > .e-con-inner,
.pt-icon-box.pt-icon-box > .e-con-inner,
.pt-episode.pt-episode > .e-con-inner,
.pt-form-card.pt-form-card > .e-con-inner,
.pt-service__card.pt-service__card > .e-con-inner,
.pt-topic-card.pt-topic-card > .e-con-inner,
.pt-topics-card.pt-topics-card > .e-con-inner,
.pt-banner.pt-banner > .e-con-inner,
.pt-hero-panel.pt-hero-panel > .e-con-inner { padding: 0; }

/* --- Huecos de rejilla y de pila --------------------------------------- */

.pt-cards-2.pt-cards-2,
.pt-cards-3.pt-cards-3,
.pt-cards-4.pt-cards-4,
.pt-cards-center.pt-cards-center {
	gap: var(--pt-gap);
	align-items: stretch;
	/* Sin el relleno de fábrica del contenedor: la rejilla debe alinearse
	   con el borde de la cabecera de sección, no ir 10 px más adentro. */
	padding: 0;
}

.pt-split.pt-split { gap: var(--pt-gap-lg); }

.pt-btn-row.pt-btn-row { gap: var(--pt-space-3); }

/*
 * Todas las tarjetas de una fila miden lo mismo, aunque su texto ocupe
 * distinto. Sin esto las filas quedaban dentadas.
 */
.pt-cards-2 > *,
.pt-cards-3 > *,
.pt-cards-4 > *,
.pt-cards-center > * { height: 100%; }

.pt-card.pt-card,
.pt-icon-box.pt-icon-box { display: flex; flex-direction: column; }

/*
 * Las cajas de icono de una fila miden lo mismo. Si una lleva dos líneas de
 * título y otra una, la corta se quedaba con un hueco muerto abajo; el
 * contenido se centra en vertical para que las dos se lean llenas.
 */
.pt-icon-box.pt-icon-box { justify-content: center; }
.pt-icon-box.pt-icon-box > .elementor-widget,
.pt-icon-box.pt-icon-box > .e-con-inner { flex: 0 0 auto; }

/* El contenido de la tarjeta se reparte con el mismo hueco en todas. */
.pt-card.pt-card { gap: var(--pt-space-3); }
.pt-card.pt-card > .elementor-widget:last-child { margin-block-end: 0; }

/* ==========================================================================
   24. Fotografía
   Marco común a todas las imágenes del sitio. Mientras no haya fotos del
   cliente, dentro va una imagen de reserva de la Mediateca («Marcador — …»);
   se sustituye pulsando la imagen en Elementor, y el marco no cambia.
   ========================================================================== */

.pt-photo.pt-photo {
	position: relative;
	overflow: hidden;
	border-radius: var(--pt-radius-lg);
	border: 1px solid rgba(160, 215, 255, 0.18);
	box-shadow: var(--pt-shadow-2), var(--pt-glass-highlight);
	line-height: 0;
}

.pt-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--pt-transition-smooth);
}

/* Relaciones de aspecto fijas: la página no se mueve al llegar la foto real. */
.pt-photo--retrato img { aspect-ratio: 4 / 5; }
.pt-photo--panel img   { aspect-ratio: 3 / 2; }
.pt-photo--ancha img   { aspect-ratio: 16 / 9; }

/* Velo inferior: asienta la foto en el fondo oscuro y deja leer lo que se
   superponga en la esquina. */
.pt-photo.pt-photo::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 42%;
	background: linear-gradient(180deg, transparent, rgba(3, 8, 15, 0.72));
	pointer-events: none;
}

.pt-photo:hover img { transform: scale(1.03); }

/*
 * Portada con fotografía: el panel de cristal se apoya sobre el borde
 * inferior del retrato, en lugar de quedar debajo. El retrato deja hueco por
 * abajo para que el panel no tape la cara.
 */
@media (min-width: 1025px) {
	.pt-hero-visual--foto.pt-hero-visual--foto {
		position: relative;
		display: block;
		/* Hueco para la parte del panel que sobresale por debajo del retrato. */
		padding-block-end: 104px;
	}

	.pt-hero-visual--foto > .pt-photo--retrato { width: 100%; }

	.pt-hero-visual--foto > .pt-hero-panel {
		position: absolute;
		z-index: 2;
		left: 0;
		right: 26%;
		bottom: 0;
		/* Elementor da «width: 100%» a sus contenedores, y ese ancho gana al
		   par «left/right»: sin esto el panel salía a todo el ancho. */
		width: auto;
	}
}

/* ==========================================================================
   25. Ficha de servicio con fotografía
   Contenedor con pt-svc; dentro, la imagen con pt-svc__foto y el texto en
   un contenedor con pt-svc__cuerpo.
   ========================================================================== */

.pt-svc.pt-svc {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--pt-radius-lg);
	border: var(--pt-glass-border);
	background: var(--pt-glass-bg);
	box-shadow: var(--pt-glass-shadow);
	transition: transform var(--pt-transition-smooth),
		border-color var(--pt-transition-base),
		box-shadow var(--pt-transition-smooth);
}

.pt-svc.pt-svc > .e-con-inner { padding: 0; }

.pt-svc:hover {
	transform: translateY(-6px);
	border-color: var(--pt-line-strong);
	box-shadow: var(--pt-shadow-3), var(--pt-glow), var(--pt-glass-highlight);
}

/* Envoltorio de la foto: da referencia al número, que va superpuesto. */
.pt-svc__medio.pt-svc__medio {
	position: relative;
	padding: 0;
	gap: 0;
}

.pt-svc__medio.pt-svc__medio > .e-con-inner { padding: 0; }

.pt-svc__foto.pt-svc__foto {
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.pt-svc__foto img { aspect-ratio: 3 / 2; }

.pt-svc__cuerpo.pt-svc__cuerpo {
	/* Crece hasta el fondo de la ficha: así el botón de todas las tarjetas de
	   una fila queda a la misma altura, aunque el texto ocupe distinto. */
	flex: 1 1 auto;
	padding: var(--pt-pad-card);
	gap: var(--pt-space-3);
}

/*
 * Número de orden, sobre la foto. Repite el recurso de las bandas de
 * servicio de la página interior, para que las dos se lean como lo mismo.
 */
.pt-svc__num.pt-svc__num {
	position: absolute;
	z-index: 2;
	top: var(--pt-space-4);
	left: var(--pt-space-4);
	margin: 0;
	padding: 4px 12px;
	border-radius: var(--pt-radius-pill);
	background: rgba(3, 8, 15, 0.62);
	border: 1px solid var(--pt-line-strong);
	-webkit-backdrop-filter: none;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--pt-cyan);
}

/*
 * Variante con isotipo en lugar de fotografía (pt-svc__medio--icono).
 * El isotipo es un widget «Icono» de Elementor con un SVG de la Mediateca
 * dibujado en trazo «currentColor»: el color, el tamaño y el halo salen de
 * aquí, y el SVG se cambia desde el editor sin tocar el marco.
 */
.pt-svc__medio--icono.pt-svc__medio--icono {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-bottom: 1px solid var(--pt-line);
	background:
		radial-gradient(closest-side circle at 50% 55%, rgba(119, 236, 255, 0.2), rgba(88, 166, 255, 0.07) 55%, transparent),
		linear-gradient(160deg, rgba(14, 35, 66, 0.9), rgba(6, 17, 32, 0.9));
}

/* Retícula técnica tenue detrás del isotipo. */
.pt-svc__medio--icono.pt-svc__medio--icono::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(130, 220, 255, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(130, 220, 255, 0.07) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(closest-side circle at 50% 55%, #000, transparent);
	mask-image: radial-gradient(closest-side circle at 50% 55%, #000, transparent);
	pointer-events: none;
}

/* Anillo del medallón, centrado detrás del icono. */
.pt-svc__medio--icono.pt-svc__medio--icono::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 128px;
	height: 128px;
	border: 1px solid var(--pt-line-strong);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(119, 236, 255, 0.1), transparent 70%);
	box-shadow: 0 0 40px rgba(79, 210, 255, 0.18), inset 0 0 24px rgba(119, 236, 255, 0.08);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.pt-svc__icono.pt-svc__icono {
	position: relative;
	z-index: 1;
	width: auto;
	margin: 0;
}

.pt-svc__icono .elementor-icon {
	display: block;
	color: var(--pt-cyan);
	font-size: 76px;
	line-height: 1;
	filter: drop-shadow(0 0 10px rgba(119, 236, 255, 0.45));
	transition: transform var(--pt-transition-smooth), color var(--pt-transition-base);
}

.pt-svc__icono .elementor-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: none;
}

.pt-svc:hover .pt-svc__icono .elementor-icon {
	color: var(--pt-cyan-soft);
	transform: translateY(-4px) scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.pt-svc:hover .pt-svc__icono .elementor-icon { transform: none; }
}

.pt-svc h3 { font-size: 1.16rem; margin: 0; }
.pt-svc p { margin: 0; font-size: 0.97rem; }

/* Botón pequeño, para dentro de una ficha. */
.pt-cta-sm .elementor-button {
	padding: 9px 18px;
	font-size: 0.88rem;
}

.pt-svc__cuerpo .pt-btn-row,
.pt-svc__cuerpo .elementor-widget-button { margin-top: auto; }

/*
 * Icono suelto dentro de una tarjeta, con el mismo medallón que las cajas de
 * icono. Sin esto el widget «icono» salía a todo el ancho y se leía como una
 * mancha.
 */
.pt-card__icono .elementor-icon-wrapper { text-align: start; }

.pt-card__icono .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: linear-gradient(150deg, rgba(119, 236, 255, 0.22), rgba(0, 92, 226, 0.22));
	border: 1px solid rgba(160, 215, 255, 0.28);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 26px rgba(79, 210, 255, 0.16);
	color: var(--pt-cyan);
	font-size: 21px;
}

.pt-card__icono .elementor-icon svg { width: 21px; height: 21px; fill: currentColor; }

/* ==========================================================================
   26. Pasos numerados
   Contenedor con pt-pasos; cada hijo, pt-paso. El número lo pone el CSS con
   un contador, así que añadir o quitar un paso en Elementor no obliga a
   renumerar nada a mano.
   ========================================================================== */

.pt-pasos.pt-pasos {
	counter-reset: pt-paso;
	gap: var(--pt-gap);
	align-items: stretch;
}

.pt-paso.pt-paso {
	counter-increment: pt-paso;
	position: relative;
	height: 100%;
	padding: var(--pt-pad-card);
	padding-block-start: calc(var(--pt-pad-card) + 26px);
	border-radius: var(--pt-radius-lg);
	border: 1px solid var(--pt-line);
	background: rgba(150, 205, 255, 0.045);
	gap: var(--pt-space-2);
	transition: border-color var(--pt-transition-base), background var(--pt-transition-base);
}

.pt-paso.pt-paso > .e-con-inner { padding: 0; }

/* Clase repetida: si no, gana «.e-con::before» de Elementor y el número no
   llega a dibujarse (ver la nota de especificidad del README). */
.pt-paso.pt-paso::before {
	content: counter(pt-paso, decimal-leading-zero);
	position: absolute;
	top: var(--pt-pad-card);
	left: var(--pt-pad-card);
	/* Elementor da a «.e-con::before» todo el ancho de la caja; desplazado por
	   el relleno, el número sobresalía 13 px del borde en móvil. */
	width: auto;
	height: auto;
	font-size: 0.82rem;
	font-weight: 750;
	letter-spacing: 0.14em;
	color: var(--pt-cyan);
}

/* Hilo que une un paso con el siguiente. */
.pt-paso.pt-paso::after {
	content: "";
	position: absolute;
	top: calc(var(--pt-pad-card) + 6px);
	right: calc(var(--pt-gap) * -1);
	width: var(--pt-gap);
	height: 1px;
	background: var(--pt-line-strong);
}

.pt-paso.pt-paso:last-child::after { display: none; }

.pt-paso:hover {
	border-color: var(--pt-line-strong);
	background: rgba(150, 205, 255, 0.075);
}

.pt-paso h3 { font-size: 1.05rem; margin: 0; }
.pt-paso p { margin: 0; font-size: 0.95rem; }

@media (max-width: 1024px) {
	.pt-paso.pt-paso::after { display: none; }
}

/* ==========================================================================
   27. Fila de cifras
   ========================================================================== */

/*
 * Rejilla, no fila: los hijos de un contenedor de Elementor nacen con el
 * ancho completo, así que en fila se apilaban uno debajo de otro.
 */
.pt-cifras.pt-cifras {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pt-gap);
	align-items: stretch;
	padding: 0;
}

@media (max-width: 1024px) {
	.pt-cifras.pt-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.pt-cifras.pt-cifras { grid-template-columns: minmax(0, 1fr); }
}

.pt-cifras > * { height: 100%; width: auto; }

.pt-cifras .pt-stat.pt-stat {
	height: 100%;
	/* La cifra arriba y el rótulo abajo: con una cifra de dos líneas y otra de
	   una, centrarlas dejaba los rótulos a distinta altura. */
	justify-content: space-between;
	gap: var(--pt-space-4);
	padding: var(--pt-pad-card);
	background: var(--pt-glass-bg);
	border: var(--pt-glass-border);
	box-shadow: var(--pt-shadow-1), var(--pt-glass-highlight);
}

/* ==========================================================================
   28. Franja de contacto
   La imprime el shortcode [pt_franja] (ver inc/shortcodes.php) con los datos
   del Personalizador, para no repetirlos dentro de la página.
   ========================================================================== */

.pt-franja-lista {
	display: grid;
	/* «auto-fit»: si un dato está vacío en el Personalizador, los que quedan
	   reparten el ancho en lugar de dejar un hueco. */
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--pt-gap);
}

@media (max-width: 880px) {
	.pt-franja-lista { grid-template-columns: minmax(0, 1fr); }
}

.pt-franja__dato {
	display: flex;
	flex-direction: column;
	gap: var(--pt-space-2);
	padding: var(--pt-pad-card);
	border-radius: var(--pt-radius-lg);
	border: 1px solid var(--pt-line);
	background: rgba(150, 205, 255, 0.045);
	transition: border-color var(--pt-transition-base), background var(--pt-transition-base);
}

.pt-franja__dato:hover {
	border-color: var(--pt-line-strong);
	background: rgba(150, 205, 255, 0.075);
}

.pt-franja__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--pt-space-2);
	border-radius: 14px;
	background: linear-gradient(150deg, rgba(119, 236, 255, 0.2), rgba(0, 92, 226, 0.2));
	border: 1px solid rgba(160, 215, 255, 0.26);
	color: var(--pt-cyan);
}

.pt-franja__icono svg { width: 19px; height: 19px; fill: currentColor; }

.pt-franja__rotulo {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pt-faint);
}

.pt-franja__valor {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--pt-text);
}

.pt-franja__valor a { color: var(--pt-text); }
.pt-franja__valor a:hover,
.pt-franja__valor a:focus-visible { color: var(--pt-cyan); }

/* ==========================================================================
   29. Ficha de vídeo del centro educativo

   Los dieciséis temas están montados, pero **todavía no hay ningún vídeo**:
   lo entregado por el cliente son 60 audios y el CV. Mientras tanto la ficha
   no finge ser un enlace —no cambia con el ratón ni levanta el cursor— y
   lleva el rótulo «Próximamente».

   Para publicar uno: en Elementor, sustituir la imagen de la ficha por el
   widget de Vídeo (acepta YouTube, Vimeo o un archivo propio) y borrar el
   rótulo. La ficha recupera sola el comportamiento de enlace.
   ========================================================================== */

.pt-video.pt-video {
	padding: 0;
	overflow: hidden;
	gap: 0;
}

.pt-video.pt-video > .e-con-inner { padding: 0; }

.pt-video__medio.pt-video__medio {
	position: relative;
	padding: 0;
	gap: 0;
}

.pt-video__foto.pt-video__foto {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.pt-video__foto img { aspect-ratio: 16 / 9; }

.pt-video__cuerpo.pt-video__cuerpo {
	padding: var(--pt-pad-card);
	gap: var(--pt-space-2);
}

/* Rótulo de estado, sobre la esquina de la miniatura. */
.pt-video__estado.pt-video__estado {
	position: absolute;
	z-index: 2;
	top: var(--pt-space-3);
	right: var(--pt-space-3);
	margin: 0;
	padding: 4px 12px;
	border-radius: var(--pt-radius-pill);
	background: rgba(3, 8, 15, 0.78);
	border: 1px solid var(--pt-line-strong);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pt-faint);
}

/*
 * Sin vídeo detrás, la ficha no se comporta como un enlace: ni se levanta ni
 * ilumina el borde. Prometer una interacción que no existe es peor que no
 * ofrecerla.
 */
.pt-video.pt-video:hover {
	transform: none;
	border-color: var(--pt-glass-border);
	box-shadow: var(--pt-glass-shadow);
}

.pt-video:hover .pt-video__foto img { transform: none; }

.pt-video .pt-photo.pt-photo::after { opacity: 0.55; }

/* Cuando se sustituya la imagen por un vídeo de verdad, el widget de
   Elementor trae su propio botón de reproducción: aquí sólo se le da el
   mismo recorte que a la miniatura. */
.pt-video .elementor-widget-video .elementor-wrapper { aspect-ratio: 16 / 9; }

/* ==========================================================================
   30. Portada con vídeo
   Portadas interiores con un vídeo de fondo (Estilo > Fondo > Vídeo en
   Elementor). Un velo oscuro asienta el vídeo en el fondo del sitio y deja
   leer el titular; la aurora se pinta por encima del vídeo, no por debajo,
   para que la portada conserve la luz del resto de páginas.
   ========================================================================== */

.pt-hero--video.pt-hero--video { position: relative; }

/*
 * Elementor mete el vídeo dentro de «.e-con-inner» cuando la sección es de
 * ancho encajado, y directamente en la sección cuando es de ancho completo:
 * se cubren los dos casos. «.e-con-inner» no se posiciona, así que el vídeo
 * se ajusta a la sección entera y no sólo a la caja del contenido.
 */
/* Clase repetida: la regla de Elementor tiene la misma especificidad y carga
   después. Mientras carga, la suya («.elementor-loading», opacidad 0) sigue
   ganando, así que el vídeo aparece con su fundido. */
/* Opaco: Elementor pinta también el fotograma de portada como fondo de la
   sección, y un vídeo semitransparente lo dejaría ver por debajo. Todo el
   oscurecimiento lo hace el velo. */
.pt-hero--video.pt-hero--video .elementor-background-video-container {
	z-index: 0;
	opacity: 1;
}

.pt-hero--video.pt-hero--video .elementor-background-video-container::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 70% at 50% 50%, rgba(4, 11, 22, 0.58) 0%, rgba(4, 11, 22, 0.8) 100%),
		linear-gradient(180deg, rgba(4, 11, 22, 0.55) 0%, rgba(4, 11, 22, 0.3) 45%, rgba(4, 11, 22, 0.95) 100%);
}

/* La aurora, sobre el vídeo; el contenido, sobre las dos. */
.pt-hero--video.pt-aurora.pt-aurora::before,
.pt-hero--video.pt-aurora.pt-aurora::after { z-index: 1; opacity: 0.55; }

.pt-hero--video > .e-con-inner > :not(.elementor-background-video-container),
.pt-hero--video > :not(.e-con-inner):not(.elementor-background-video-container) {
	position: relative;
	z-index: 2;
}

/* Fotograma de portada, para cuando el vídeo no se reproduce (movimiento
   reducido, o un navegador que no lo carga): el mismo velo, pintado sobre la
   imagen de fondo que pone Elementor. */
.pt-hero--video.pt-hero--video.pt-hero--video { background-size: cover; background-position: center; }

.pt-hero--video.pt-hero--video.pt-hero--video {
	box-shadow: inset 0 0 0 100vmax rgba(4, 11, 22, 0.72);
}

/* ==========================================================================
   31. Mosaico de vídeos
   Rejilla de 3 × 3 celdas: el primero ocupa cuatro, el resto una. En tableta,
   dos columnas; en móvil, una. Cada ficha es el widget «Vídeo» de Elementor
   en bucle y sin sonido, con un rótulo encima.
   ========================================================================== */

.pt-clips.pt-clips {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: auto;
	gap: var(--pt-gap);
	margin-block: var(--pt-space-5, 32px);
}

.pt-clips.pt-clips > .e-con-inner { display: contents; }

/* Cada ficha mide 16:9 y el vídeo la llena. La primera ocupa dos filas y
   toma el alto de la rejilla, así que no lleva proporción propia. */
.pt-clip.pt-clip { aspect-ratio: 16 / 9; }

.pt-clips > .pt-clip.pt-clip:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

@media (max-width: 1024px) {
	.pt-clips.pt-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pt-clips > .pt-clip.pt-clip:first-child { grid-row: auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
	.pt-clips.pt-clips { grid-template-columns: minmax(0, 1fr); }
	.pt-clips > .pt-clip.pt-clip:first-child { grid-column: auto; }
}

.pt-clip.pt-clip {
	position: relative;
	padding: 0;
	gap: 0;
	overflow: hidden;
	min-height: 0;
	border-radius: var(--pt-radius-lg);
	border: 1px solid rgba(160, 215, 255, 0.18);
	background: var(--pt-glass-bg);
	box-shadow: var(--pt-shadow-2), var(--pt-glass-highlight);
}

.pt-clip.pt-clip > .e-con-inner { padding: 0; }

.pt-clip > .elementor-widget-video.elementor-widget-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.pt-clip .elementor-widget-video .elementor-widget-container,
.pt-clip .elementor-widget-video .elementor-wrapper.elementor-wrapper {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

.pt-clip video.elementor-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--pt-transition-smooth);
}

.pt-clip:hover video { transform: scale(1.03); }

/* Velo inferior, igual que el de las fotografías, para leer el rótulo. */
.pt-clip.pt-clip::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(180deg, transparent, rgba(3, 8, 15, 0.78));
	pointer-events: none;
}

.pt-clip__label.pt-clip__label {
	position: absolute;
	z-index: 2;
	left: var(--pt-space-4);
	bottom: var(--pt-space-4);
	width: auto;
	margin: 0;
	padding: 5px 14px;
	border-radius: var(--pt-radius-pill);
	background: rgba(3, 8, 15, 0.62);
	border: 1px solid var(--pt-line-strong);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pt-cyan);
}

.pt-clip__label p { margin: 0; color: inherit; }

.pt-chips--center.pt-chips--center { justify-content: center; margin-inline: auto; }

/* ==========================================================================
   32. Fotografía dentro de bloques
   ========================================================================== */

/* Servicios: la foto acompaña a la banda y no pasa de un alto razonable. */
.pt-service__foto.pt-service__foto { width: 100%; max-width: 520px; margin-inline: auto; }

/* «Sobre el Dr.»: cuatro retratos en fila, con las mismas esquinas. */
.pt-galeria.pt-galeria > .pt-photo { width: 100%; }

/* Inicio, franja de contacto junto a la foto de la recepción: los datos se
   apilan en una columna en lugar de repartirse en fila. */
.pt-franja-foto .pt-franja-lista { grid-template-columns: minmax(0, 1fr); }

/* Contacto: la foto de la recepción cierra la columna de datos. */
.pt-contact__intro .pt-photo { margin-block-start: var(--pt-space-4); }

/* ==========================================================================
   33. Párrafos justificados
   Corrección del cliente (03/10/2026): los párrafos de la web, justificados.
   La última línea conserva la alineación del bloque: centrada donde el bloque
   va centrado (--pt-alinea), al inicio en el resto. Con la partición de
   palabras (la página va en es-ES) no se abren huecos en columnas estrechas.
   ========================================================================== */

.elementor-widget-text-editor p,
.elementor-icon-box-description {
	text-align: justify;
	text-align-last: var(--pt-alinea, start);
	-webkit-hyphens: auto;
	hyphens: auto;
}

.pt-text-center,
.pt-banner.pt-banner,
.pt-section-head.pt-section-head,
.pt-hero-copy--center.pt-hero-copy--center,
.elementor-widget-icon-box.elementor-position-top,
.elementor-widget-icon-box.elementor-position-block-start { --pt-alinea: center; }

/* ==========================================================================
   34. Cifras con frase (Inicio)
   Antetítulo, dato grande y una frase en texto corrido. La letra de la frase
   va a tamaño de lectura (corrección del cliente: «que la letra de las 4
   cajitas no sea tan chiquita»).
   ========================================================================== */

.pt-cifras .pt-stat--frase.pt-stat--frase { justify-content: flex-start; gap: var(--pt-space-3); }

.pt-stat__title,
.pt-stat .pt-stat__title {
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pt-cyan);
}

.pt-stat--frase .pt-stat__value { font-size: clamp(1.9rem, 2.8vw, 2.5rem); }

.pt-stat--frase .pt-stat__label,
.pt-stat.pt-stat--frase .pt-stat__label {
	font-size: 1.08rem;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pt-muted);
}

.pt-stat p {
	margin: 0;
	/* Frases de dos o tres líneas en una caja estrecha: partidas con guion se
	   leían peor que con algo más de aire entre palabras. */
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* ==========================================================================
   35. Agendar consulta (Inicio)
   Banda con un botón grande. Lleva de fondo la foto del edificio Citimed:
   se elige en Elementor (sección > Estilo > Fondo > Clásico > Imagen) y aquí
   sólo se encuadra y se oscurece para que el botón destaque. Sin foto, queda
   el degradado de marca.
   ========================================================================== */

.pt-cita.pt-cita {
	position: relative;
	isolation: isolate;
	justify-content: center;
	min-height: clamp(320px, 38vw, 540px);
	background-color: var(--pt-bg-1);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.pt-cita.pt-cita::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(60% 70% at 50% 50%, rgba(0, 92, 226, 0.28), transparent 72%),
		linear-gradient(180deg, rgba(3, 8, 15, 0.55) 0%, rgba(3, 8, 15, 0.35) 50%, rgba(3, 8, 15, 0.7) 100%);
	pointer-events: none;
}

.pt-cta-xl .elementor-button {
	padding: 28px 64px;
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
	font-weight: 700;
}

@media (max-width: 520px) {
	.pt-cta-xl .elementor-button { padding: 22px 36px; }
}

/* ==========================================================================
   36. Trayectoria (Sobre el Dr.)
   Letra mayor en las cuatro tarjetas (corrección del cliente, 03/10/2026).
   ========================================================================== */

.pt-trayectoria .pt-icon-box .elementor-icon-box-title,
.pt-trayectoria .pt-icon-box .elementor-icon-box-title a { font-size: 1.3rem; }

.pt-trayectoria .pt-icon-box .elementor-icon-box-description {
	font-size: 1.1rem;
	line-height: 1.6;
}


/* ==========================================================================
   37. Espacio de conocimiento
   Cuerpo humano con la lista de zonas al lado y, debajo, un panel por zona
   con sus audios e infografías (correcciones del cliente, 21/10/2026). El
   comportamiento está en assets/js/conocimiento.js. Sin JavaScript, la lista
   son enlaces a cada panel y los paneles se ven seguidos.
   ========================================================================== */

/* Elementor da «display: flex» a sus contenedores y anula el atributo hidden. */
.pt-conoc [hidden] { display: none !important; }

.pt-cuerpo {
	display: grid;
	grid-template-columns: minmax(220px, 480px) minmax(0, 420px);
	justify-content: center;
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
}

@media (max-width: 640px) {
	.pt-cuerpo { grid-template-columns: minmax(0, 1fr); }
	.pt-cuerpo__svg { max-width: 300px; margin-inline: auto; }
}

.pt-cuerpo__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/*
 * El corredor es el vector del cliente, y como el logotipo está pensado para
 * fondo blanco: sus azules casi negros no se verían aquí. Se cambian esos
 * tonos con la misma equivalencia que el logotipo (theme.css, «Colores del
 * logotipo»); los azules de marca no se tocan.
 */
.pt-cuerpo__silueta .pt-t-051223,
.pt-cuerpo__silueta .pt-t-081629,
.pt-cuerpo__silueta .pt-t-08192f { fill: #e8f3fb; }
.pt-cuerpo__silueta .pt-t-041c35 { fill: #cde6f7; }
.pt-cuerpo__silueta .pt-t-044680 { fill: #3b8fd6; }

/* Con una zona encendida, el corredor se apaga un poco para que destaque. */
.pt-cuerpo__silueta { transition: opacity var(--pt-transition-base); }
.pt-cuerpo:has(.pt-cuerpo__zona.is-on) .pt-cuerpo__silueta { opacity: 0.65; }

.pt-cuerpo__zona > * {
	fill: rgba(119, 236, 255, 0);
	stroke: transparent;
	stroke-linecap: round;
	cursor: pointer;
	transition: fill var(--pt-transition-base), stroke var(--pt-transition-base);
}

.pt-cuerpo__zona > path[fill="none"] { fill: none; stroke: rgba(119, 236, 255, 0); }

.pt-cuerpo__zona:hover > * { fill: rgba(119, 236, 255, 0.3); }
.pt-cuerpo__zona:hover > path[fill="none"] { fill: none; stroke: rgba(119, 236, 255, 0.3); }

/* Zona encendida: cian con un borde de luz (sin filter: ver README, 3e). */
.pt-cuerpo__zona.is-on > * {
	fill: var(--pt-cyan);
	stroke: var(--pt-cyan);
	stroke-width: 14;
	stroke-opacity: 0.35;
}

.pt-cuerpo__zona.is-on > path[fill="none"] {
	fill: none;
	stroke: var(--pt-cyan);
	stroke-opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.pt-cuerpo__zona > *,
	.pt-cuerpo__silueta { transition: none; }
}

/* Lista de zonas */
.pt-zonas ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pt-zonas li { margin: 0; }

.pt-zonas__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 20px;
	border: 1px solid var(--pt-line);
	border-radius: var(--pt-radius-md);
	background: rgba(255, 255, 255, 0.03);
	color: var(--pt-text);
	text-decoration: none;
	transition: border-color var(--pt-transition-base), background var(--pt-transition-base);
}

.pt-zonas__item:hover { border-color: var(--pt-line-strong); color: #fff; }

.pt-zonas__item[aria-selected="true"] {
	border-color: rgba(119, 236, 255, 0.7);
	background: rgba(119, 236, 255, 0.1);
	box-shadow: var(--pt-glow);
}

.pt-zonas__item:focus-visible { outline: 2px solid var(--pt-cyan); outline-offset: 2px; }

.pt-zonas__nombre { font-size: 1.05rem; font-weight: 650; }
.pt-zonas__cuenta { font-size: 0.85rem; color: var(--pt-muted); }

/* Paneles */
.pt-zonas-paneles.pt-zonas-paneles { gap: var(--pt-gap-lg); }

.pt-zona.pt-zona {
	gap: var(--pt-space-5);
	scroll-margin-top: calc(var(--pt-header-height) + var(--pt-space-5));
}

html:not(.pt-js) .pt-zona + .pt-zona {
	padding-top: var(--pt-gap-lg);
	border-top: 1px solid var(--pt-line);
}

.pt-zona .pt-eyebrow { margin-top: var(--pt-space-4); }

.pt-zona__bloque.pt-zona__bloque { gap: var(--pt-space-3); }
.pt-zona__tema .elementor-heading-title { font-size: 1.2rem; }

.pt-audios {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: var(--pt-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pt-audio {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: var(--pt-space-4);
	border: 1px solid var(--pt-line);
	border-radius: var(--pt-radius-md);
	background: rgba(255, 255, 255, 0.03);
}

.pt-audio .pt-audio__titulo.pt-audio__titulo {
	margin: 0;
	font-weight: 600;
	text-align: left;
	text-align-last: left;
	-webkit-hyphens: manual;
	hyphens: manual;
}

.pt-audio audio { width: 100%; }

/* Infografías: galería básica de Elementor, a pantalla completa al pulsar. */
.pt-infografias .gallery-item img {
	border-radius: var(--pt-radius-sm);
	border: 1px solid rgba(160, 215, 255, 0.18) !important;
	background: #fff;
	transition: transform var(--pt-transition-smooth);
}

.pt-infografias .gallery-item a:hover img { transform: translateY(-3px); }

/* ==========================================================================
   38. Formularios de Consulta
   Desplegable con los cuatro formularios y, debajo, cada uno con su texto
   (correcciones del cliente, 21/10/2026). Comportamiento:
   assets/js/formularios.js. Sin JavaScript el desplegable no se ve y los
   formularios están seguidos.
   ========================================================================== */

.pt-formularios [hidden] { display: none !important; }

html:not(.pt-js) .pt-formularios__control { display: none; }

.pt-formularios__elegir {
	display: flex;
	flex-direction: column;
	gap: var(--pt-space-2);
	width: min(100%, 560px);
	margin: 0 auto var(--pt-space-6);
	scroll-margin-top: calc(var(--pt-header-height) + var(--pt-space-5));
}

.pt-formularios__lbl {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	color: var(--pt-cyan);
}

/* Desplegable del tema (Consulta y Escalas Funcionales). */
.pt-select {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	padding: 16px 52px 16px 22px;
	border: 1px solid var(--pt-line-strong);
	border-radius: var(--pt-radius-pill);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2377ecff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 22px center,
		rgba(10, 26, 48, 0.9);
	font: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--pt-text);
	cursor: pointer;
	transition: border-color var(--pt-transition-base), box-shadow var(--pt-transition-base);
}

.pt-select:hover { border-color: var(--pt-cyan); }
.pt-select:focus-visible { outline: none; border-color: var(--pt-cyan); box-shadow: 0 0 0 3px rgba(119, 236, 255, 0.2); }
.pt-select option,
.pt-select optgroup { background: #0a1a30; color: #fff; }

.pt-formulario.pt-formulario {
	gap: var(--pt-gap-lg);
	scroll-margin-top: calc(var(--pt-header-height) + var(--pt-space-5));
}

html:not(.pt-js) .pt-formulario + .pt-formulario {
	margin-top: var(--pt-gap-lg);
	padding-top: var(--pt-gap-lg);
	border-top: 1px solid var(--pt-line);
}

.pt-formulario__texto.pt-formulario__texto {
	gap: var(--pt-space-3);
	width: min(100%, 820px);
	margin-inline: auto;
}

.pt-formulario__sub p { margin: 0; color: var(--pt-muted); }

/* Datos de contacto del texto del cliente (también en Inicio). */
.pt-contacto-cita .elementor-icon-list-text { color: var(--pt-text); }
.pt-contacto-cita a:hover .elementor-icon-list-text { color: var(--pt-cyan); }

/* PDF de aseguradoras */
.pt-descargas {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pt-descargas li { margin: 0; }

.pt-descargas a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--pt-line);
	border-radius: 12px;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--pt-text);
	text-decoration: none;
	text-align: left;
	transition: border-color var(--pt-transition-base), background var(--pt-transition-base);
}

/* Icono de descarga dibujado en CSS: Elementor no carga la fuente de iconos. */
.pt-descargas a::before {
	content: "";
	flex: 0 0 18px;
	height: 18px;
	background: var(--pt-cyan);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0l-5-5m5 5l5-5M4 21h16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0l-5-5m5 5l5-5M4 21h16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pt-descargas a:hover { border-color: var(--pt-cyan); background: rgba(119, 236, 255, 0.08); }

/* ==========================================================================
   39. Portada de Inicio
   Sin panel sobre la foto y con cuatro rótulos, dos encima y dos debajo; menos
   aire entre la cabecera y la foto (correcciones del cliente, 21/10/2026).
   ========================================================================== */

.pt-hero--inicio.pt-hero--inicio {
	min-height: 0;
	padding-block: clamp(16px, 1.6vw, 26px) clamp(16px, 1.6vw, 24px);
}

/* «Subir los cuadros que sí tienen contenido informativo» (21/10/2026): las
   cifras, justo después de la portada, empiezan dentro de la primera pantalla
   en un ordenador. */
.e-con.e-parent.pt-hero--inicio + .e-con.e-parent.pt-section--tight { padding-top: clamp(12px, 1.4vw, 24px); }

.pt-hero-visual--rotulos.pt-hero-visual--rotulos {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 520px;
}

.pt-hero-visual--rotulos > .pt-photo--retrato img {
	/* La foto cabe en la primera pantalla de un portátil. */
	max-height: min(42vh, 440px);
	object-position: center 20%;
}

.pt-hero-rotulos.pt-hero-rotulos {
	display: grid;
	padding: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.pt-hero-rotulo.pt-hero-rotulo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	border-radius: var(--pt-radius-md);
	background: linear-gradient(158deg, rgba(24, 48, 84, 0.88), rgba(8, 18, 34, 0.94));
	border: 1px solid rgba(160, 215, 255, 0.22);
	/* Sin la sombra grande de las tarjetas: junto a la foto se leía como una
	   caja oscura detrás de los rótulos. */
	box-shadow: var(--pt-glass-highlight), 0 6px 18px rgba(0, 0, 0, 0.25);
}

.pt-hero-rotulo p {
	margin: 0;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-align-last: center;
	-webkit-hyphens: manual;
	hyphens: manual;
	color: #fff;
}

@media (max-width: 380px) {
	.pt-hero-rotulos.pt-hero-rotulos { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   40. Antes de tu consulta (Inicio)
   Vídeo vertical de indicaciones (9:16, con sonido y controles) junto al
   texto del cliente y el botón del formulario.
   ========================================================================== */

.pt-indicaciones.pt-indicaciones {
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	justify-content: center;
}

@media (max-width: 900px) {
	.pt-indicaciones.pt-indicaciones { grid-template-columns: minmax(0, 1fr); }
	.pt-indicaciones__video.pt-indicaciones__video { max-width: 340px; margin-inline: auto; }
}

.pt-video-vertical .elementor-wrapper.elementor-wrapper {
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--pt-radius-lg);
	border: 1px solid rgba(160, 215, 255, 0.18);
	box-shadow: var(--pt-shadow-2), var(--pt-glass-highlight);
	background: #000;
}

.pt-video-vertical video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   41. Mosaico de ocho vídeos (Inicio)
   Cuatro por dos, todos del mismo tamaño (21/10/2026: sale trote, entran
   básquet, fútbol y tenis).
   ========================================================================== */

.pt-clips.pt-clips--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pt-clips--8 > .pt-clip.pt-clip:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 9; }

@media (max-width: 1024px) {
	.pt-clips.pt-clips--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.pt-clips.pt-clips--8 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   42. Logotipo del CEO junto a la dirección (documento del 04/11/2026)
   El archivo del cliente mide 268 px: no se muestra a más de 96.
   ========================================================================== */

.pt-ceo-logo img,
.pt-ceo-logo__img {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 10px !important;
	object-fit: cover;
}

.pt-ceo-logo.pt-ceo-logo.pt-ceo-logo {
	flex: 0 0 72px;
	width: 72px !important;
	align-self: flex-start;
	text-align: start;
}

.pt-ceo-dato .pt-ceo-logo.pt-ceo-logo.pt-ceo-logo { align-self: center; }

.pt-ceo-logo__img { margin-block-end: 10px; }

/* Elementor carga después y su regla pesa lo mismo: va por sus variables. */
.pt-ceo-dato.pt-ceo-dato.pt-ceo-dato {
	--flex-direction: row;
	--flex-wrap: nowrap;
	--align-items: center;
	--gap: 14px;
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	gap: 14px;
}

@media (max-width: 480px) {
	.pt-ceo-dato.pt-ceo-dato.pt-ceo-dato { --flex-direction: column; --align-items: flex-start; }
	.pt-ceo-dato .pt-ceo-logo.pt-ceo-logo.pt-ceo-logo { align-self: flex-start; }
}

.pt-ceo-dato > .pt-contacto-cita { flex: 1 1 auto; min-width: 0; }

.pt-card .pt-ceo-logo { margin-block-start: 14px; }

.pt-footer .pt-ceo-logo__img,
.pt-franja__valor .pt-ceo-logo__img { width: 64px; height: 64px; }