/* ==========================================================================
   drjaimerdz.com - Consultorio con luz de mañana
   Un acento (salvia), cero sombras, Hanken Grotesk + Space Grotesk.
   ========================================================================== */

/* --- Fuentes autoalojadas ------------------------------------------------ */
/* Ambas son variables, así que un solo archivo cubre todos los pesos en uso:
   57 KB en total y una sola petición por familia. Subset latino, que cubre el
   español completo. Nada de <link> a Google Fonts. */

@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url('../fonts/hanken-grotesk-var.woff2') format('woff2-variations'),
	     url('../fonts/hanken-grotesk-var.woff2') format('woff2');
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('../fonts/space-grotesk-var.woff2') format('woff2-variations'),
	     url('../fonts/space-grotesk-var.woff2') format('woff2');
}

/* --- Tokens -------------------------------------------------------------- */

.drjr {
	--color-salvia: #5F7355;
	--color-salvia-dark: #4A5A42;
	--color-tinta: #1A1A1A;
	--color-lienzo: #FFFFFF;
	--color-grafito: #5A5A5A;
	--color-bruma: #E2E2DE;
	--color-panel: #F6F7F4;
	--gradient-salvia: radial-gradient(ellipse at 50% 30%, rgba(95,115,85,0.18) 0%, rgba(95,115,85,0.05) 45%, #ffffff 100%);

	--font-display: 'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-label: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;

	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;

	--text-body: 17px;
	--text-body-lg: 19px;
	--text-label: 12px;
	--text-subheading: 22px;
	--text-heading-sm: 26px;
	--text-heading: 32px;
	--text-display: 36px;

	--leading-body: 1.6;
	--leading-heading: 1.15;
	--leading-display: 1.1;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-28: 112px;

	--page-max-width: 1140px;
	--text-max-width: 68ch;
	--section-gap: 64px;
	--card-padding: 24px;
	--margen-lateral: 20px;

	--radius-card: 14px;
	--radius-image: 14px;
	--radius-button: 999px;
	--radius-field: 10px;
}

@media (min-width: 768px) {
	.drjr {
		--text-body-lg: 20px;
		--text-label: 13px;
		--text-subheading: 28px;
		--text-heading-sm: 34px;
		--text-heading: 46px;
		--text-display: 56px;
		--section-gap: 112px;
		--card-padding: 32px;
		--margen-lateral: 32px;
	}
}

/* --- Base ---------------------------------------------------------------- */
/* Los resets van en :where() para neutralizar los defaults del navegador y de
   Astra sin ganarle nunca a una regla de componente. */

/* Astra ya declara border-box, pero el layout no puede depender de eso: los
   contenedores suman su padding lateral al 100% y desbordan si falta. */
.drjr,
.drjr *,
.drjr *::before,
.drjr *::after {
	box-sizing: border-box;
}

.drjr :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd) {
	margin: 0;
	padding: 0;
}

.drjr :where(ul, ol) {
	list-style: none;
}

/* Astra estiliza los botones nativos y les cuelga una box-shadow que este
   diseño no admite. Scoping solo protege lo que uno declara: si no se apaga
   explícitamente, la sombra del padre gana. Mismo motivo para los campos. */
.drjr :where(button, input, select, textarea) {
	box-shadow: none;
}

.drjr {
	background: var(--color-lienzo);
	color: var(--color-tinta);
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.drjr h1,
.drjr h2,
.drjr h3 {
	font-family: var(--font-display);
	font-weight: var(--weight-light);
	line-height: var(--leading-heading);
	letter-spacing: -0.01em;
	color: var(--color-tinta);
}

.drjr p {
	max-width: var(--text-max-width);
}

.drjr :where(a) {
	color: var(--color-salvia);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.drjr img {
	max-width: 100%;
	height: auto;
	display: block;
}

.drjr strong {
	font-weight: var(--weight-medium);
}

.drjr :focus-visible {
	outline: 2px solid var(--color-salvia);
	outline-offset: 3px;
	border-radius: 2px;
}

.visualmente-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.saltar {
	position: absolute;
	left: 0;
	top: -120px;
	background: var(--color-salvia);
	color: #fff;
	padding: 12px 20px;
	z-index: 999;
	text-decoration: none;
}
.saltar:focus {
	top: 0;
}

/* --- Contenedor y secciones ---------------------------------------------- */

.contenedor {
	width: 100%;
	max-width: var(--page-max-width);
	margin-inline: auto;
	padding-inline: var(--margen-lateral);
}

.seccion {
	padding-block: var(--section-gap);
}

.seccion--panel {
	background: var(--color-panel);
}

.seccion__cabeza {
	margin-bottom: var(--space-12);
}

.etiqueta {
	display: block;
	font-family: var(--font-label);
	font-size: var(--text-label);
	font-weight: var(--weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-salvia);
	margin-bottom: var(--space-4);
}

.titulo-seccion {
	font-size: var(--text-heading);
	max-width: 22ch;
}

.entrada {
	font-size: var(--text-body-lg);
	color: var(--color-grafito);
	margin-top: var(--space-6);
}

/* --- Botones ------------------------------------------------------------- */

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 28px;
	border-radius: var(--radius-button);
	font-family: var(--font-label);
	font-size: 15px;
	font-weight: var(--weight-medium);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.boton--primario,
.boton--primario:link,
.boton--primario:visited {
	background: var(--color-salvia);
	color: var(--color-lienzo);
}
.boton--primario:hover,
.boton--primario:focus,
.boton--primario:active {
	background: var(--color-salvia-dark);
	color: var(--color-lienzo);
}

.boton--secundario,
.boton--secundario:link,
.boton--secundario:visited {
	background: transparent;
	color: var(--color-tinta);
	border-color: var(--color-tinta);
}
.boton--secundario:hover,
.boton--secundario:focus {
	background: var(--color-tinta);
	color: var(--color-lienzo);
}

.boton__icono {
	flex-shrink: 0;
	margin-right: 9px;
}

.acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-8);
}

.acciones .boton {
	flex: 1 1 auto;
}

@media (min-width: 560px) {
	.acciones .boton {
		flex: 0 0 auto;
	}
}

.nota-accion {
	font-family: var(--font-label);
	font-size: var(--text-label);
	color: var(--color-grafito);
	margin-top: var(--space-4);
	letter-spacing: 0.02em;
}

/* --- Cabecera ------------------------------------------------------------ */

.cabecera {
	background: var(--color-lienzo);
	border-bottom: 1px solid var(--color-bruma);
	position: sticky;
	top: 0;
	z-index: 90;
}

.cabecera__interior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	min-height: 72px;
	position: relative;
}

.cabecera__marca {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.cabecera__marca img {
	width: auto;
	height: 34px;
	max-width: 60vw;
}

@media (min-width: 560px) {
	.cabecera__marca img {
		height: 40px;
	}
}

.cabecera__nombre {
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	font-size: 18px;
	color: var(--color-tinta);
	letter-spacing: -0.01em;
}

.cabecera__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-right: -12px;
	background: none;
	border: 0;
	cursor: pointer;
	position: relative;
}

/* Las tres rayas del menú.
   La del centro es el span; las otras dos, sus pseudo-elementos. El span va
   con ancho fijo y flex bloqueado: como es hijo de un contenedor flex, sin
   eso su ancho se resuelve a cero (está vacío) y la raya del medio
   desaparece, dejando un icono de dos rayas. Y con position: relative los
   pseudos se anclan a la raya central en vez de al botón. */
.cabecera__toggle-barras {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 22px;
	min-width: 22px;
	height: 1.5px;
	background: var(--color-tinta);
	transition: background-color .2s ease;
}

.cabecera__toggle-barras::before,
.cabecera__toggle-barras::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 1.5px;
	background: var(--color-tinta);
	transition: transform .2s ease, top .2s ease;
}

.cabecera__toggle-barras::before { top: -7px; }
.cabecera__toggle-barras::after  { top: 7px; }

.cabecera__toggle[aria-expanded="true"] .cabecera__toggle-barras { background: transparent; }
.cabecera__toggle[aria-expanded="true"] .cabecera__toggle-barras::before { top: 0; transform: rotate(45deg); }
.cabecera__toggle[aria-expanded="true"] .cabecera__toggle-barras::after  { top: 0; transform: rotate(-45deg); }

.nav {
	display: none;
}

.nav.esta-abierto {
	display: block;
	position: absolute;
	left: calc(var(--margen-lateral) * -1);
	right: calc(var(--margen-lateral) * -1);
	top: 100%;
	background: var(--color-lienzo);
	border-bottom: 1px solid var(--color-bruma);
	padding: var(--space-4) var(--margen-lateral) var(--space-8);
}

.nav__lista {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.nav__lista a {
	display: block;
	padding: 13px 0;
	font-family: var(--font-label);
	font-size: 16px;
	color: var(--color-tinta);
	text-decoration: none;
	border-bottom: 1px solid var(--color-bruma);
}

.nav__lista a[aria-current="page"] {
	color: var(--color-salvia);
}

.cabecera__cta {
	margin-top: var(--space-6);
	width: 100%;
}

@media (min-width: 900px) {
	.cabecera__toggle { display: none; }

	.nav {
		display: flex;
		align-items: center;
		gap: var(--space-8);
	}

	.nav__lista {
		flex-direction: row;
		gap: var(--space-8);
	}

	.nav__lista a {
		padding: 0;
		font-size: 13px;
		letter-spacing: 0.02em;
		border: 0;
	}

	.nav__lista a:hover {
		color: var(--color-salvia);
	}

	.cabecera__cta {
		margin-top: 0;
		width: auto;
		padding: 11px 22px;
		min-height: 42px;
		font-size: 13px;
	}
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--gradient-salvia);
	padding-block: var(--space-16) var(--space-20);
}

/* Atmósfera del hero.
   Dos manchas de salvia muy diluidas que derivan sobre el gradiente base en
   ciclos de casi un minuto, desfasadas entre sí. El fondo nunca se repite y
   nunca se queda quieto del todo, pero tampoco llama la atención: si se nota
   que algo se mueve, está mal calibrado.

   Solo se animan transform y opacity, que el navegador resuelve en el
   compositor: no hay repintado y en móvil no cuesta batería. Nada de
   filter: blur, que sí es caro; la difusión ya viene en los propios stops.

   LÍMITE DURO: la mancha de salvia no puede pasar de 0.13 de opacidad. Con
   el gradiente base encima da un fondo de #D1D7CE en el punto más cargado, y
   ahí el texto de apoyo en grafito queda en 4.7:1. Un punto más y el hero
   deja de cumplir AA justo donde la paciente lee qué hace el doctor. */
.hero::before,
.hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
	will-change: transform, opacity;
}

.hero::before {
	width: 90vw;
	height: 90vw;
	max-width: 900px;
	max-height: 900px;
	top: -30%;
	left: -20%;
	background: radial-gradient(circle at 50% 50%, rgba(95,115,85,0.13) 0%, rgba(95,115,85,0.05) 42%, rgba(95,115,85,0) 70%);
	animation: deriva-a 54s ease-in-out infinite alternate;
}

.hero::after {
	width: 75vw;
	height: 75vw;
	max-width: 760px;
	max-height: 760px;
	right: -18%;
	bottom: -35%;
	background: radial-gradient(circle at 50% 50%, rgba(95,115,85,0.10) 0%, rgba(226,226,222,0.38) 45%, rgba(255,255,255,0) 72%);
	animation: deriva-b 71s ease-in-out infinite alternate;
	animation-delay: -18s;
}

@keyframes deriva-a {
	from { transform: translate3d(0, 0, 0) scale(1);          opacity: .9; }
	to   { transform: translate3d(6%, 8%, 0) scale(1.14);     opacity: 1; }
}

@keyframes deriva-b {
	from { transform: translate3d(0, 0, 0) scale(1.06);       opacity: 1; }
	to   { transform: translate3d(-7%, -6%, 0) scale(1);      opacity: .85; }
}

/* El contenido va por encima de la atmósfera. */
.hero > .contenedor {
	position: relative;
	z-index: 1;
}

/* --- Hero con foto ------------------------------------------------------- */
/* El Inicio abre con la foto del consultorio a sangre. La foto es el
   argumento: la paciente ve el lugar al que va a entrar antes de leer nada. */

.hero--foto {
	background: var(--color-tinta);
	padding-bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* Se descuenta la barra fija de acciones: sin eso la cintilla nace justo
	   debajo y queda tapada por los botones en el primer viewport, que es
	   donde tiene que leerse. svh para que la barra del navegador móvil al
	   aparecer y desaparecer no recorte el hero. */
	min-height: calc(88vh - 88px);
	min-height: calc(88svh - 88px);
}

.hero__fondo {
	position: absolute;
	inset: 0;
	z-index: -3;
	margin: 0;
	border: 0;
	border-radius: 0;
	overflow: hidden;
}

.hero__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% center;
}

/* Velo direccional: denso donde va el texto, casi limpio sobre el doctor.
   Sin él, un titular claro sobre una foto clara es ilegible en la calle. */
.hero__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(20,24,18,0.55) 0%, rgba(20,24,18,0.30) 35%, rgba(20,24,18,0.72) 100%),
		linear-gradient(96deg, rgba(20,24,18,0.86) 0%, rgba(20,24,18,0.62) 42%, rgba(20,24,18,0.20) 100%);
}

/* Sobre la foto, las manchas dejan de ser niebla y pasan a ser luz. */
.hero--foto::before,
.hero--foto::after {
	mix-blend-mode: soft-light;
	opacity: .8;
}

.hero--foto .hero__interior {
	padding-top: var(--space-20);
	padding-bottom: var(--space-16);
}

.hero--foto .hero__titulo,
.hero--foto .hero__consultorio,
.hero--foto .hero__apoyo {
	color: var(--color-lienzo);
}

.hero--foto .hero__consultorio {
	color: rgba(255,255,255,0.88);
}

@media (min-width: 900px) {
	.hero--foto {
		min-height: min(84vh, 760px);
	}
	.hero--foto .hero__interior {
		display: block;
		padding-top: var(--space-28);
	}
	.hero--foto .hero__texto {
		max-width: 640px;
	}
}

/* --- Cintilla ------------------------------------------------------------ */
/* Lo que era una línea de texto bajo los botones. En cinta se lee de un
   vistazo y da movimiento al primer viewport sin pedir nada al visitante. */

.cintilla {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-top: 1px solid rgba(255,255,255,0.22);
	background: rgba(20,24,18,0.42);
	padding-block: var(--space-4);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.cintilla__pista {
	display: flex;
	width: max-content;
	animation: cintilla 42s linear infinite;
}

.cintilla__grupo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.cintilla__item {
	font-family: var(--font-label);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.92);
	padding-inline: var(--space-6);
	white-space: nowrap;
	display: flex;
	align-items: center;
}

.cintilla__item::after {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-salvia);
	margin-left: calc(var(--space-6) + var(--space-2));
	flex-shrink: 0;
}

@keyframes cintilla {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.cintilla:hover .cintilla__pista {
	animation-play-state: paused;
}

.hero__titulo {
	font-size: var(--text-display);
	line-height: var(--leading-display);
	max-width: 20ch;
}

/* Servicios lleva un H1 largo por la keyword. A tamaño display se iría a tres
   líneas, así que ahí el titular baja un escalón de la escala. */
.hero__titulo--largo {
	font-size: var(--text-heading);
	max-width: 30ch;
}

.hero__consultorio {
	font-family: var(--font-label);
	font-size: var(--text-body);
	color: var(--color-salvia);
	margin-top: var(--space-6);
	letter-spacing: 0.01em;
}

.hero__apoyo {
	font-size: var(--text-body-lg);
	color: var(--color-grafito);
	margin-top: var(--space-4);
	max-width: 46ch;
}

.hero__figura {
	margin-top: var(--space-12);
	border: 1px solid var(--color-bruma);
	border-radius: var(--radius-image);
	overflow: hidden;
	background: var(--color-panel);
	aspect-ratio: 4 / 5;
	/* Sin tope, en tablet una figura a 4/5 sobre 770px de ancho mide casi mil
	   píxeles de alto y empuja el resto de la página fuera de la pantalla. */
	max-width: 460px;
}

.hero__figura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

@media (min-width: 900px) {
	.hero {
		padding-block: var(--space-20) var(--space-28);
	}

	.hero__interior {
		display: grid;
		grid-template-columns: 1.45fr 1fr;
		gap: var(--space-16);
		align-items: center;
	}

	.hero__figura {
		margin-top: 0;
		aspect-ratio: 3 / 4;
		max-width: none;
	}
}

/* --- Barra de confianza -------------------------------------------------- */

.confianza {
	border-block: 1px solid var(--color-bruma);
	padding-block: var(--space-8);
}

.confianza__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
}

.confianza__dato {
	font-size: 15px;
	line-height: 1.45;
	color: var(--color-grafito);
	padding-right: var(--space-6);
}

.confianza__dato strong {
	display: block;
	font-family: var(--font-label);
	font-size: var(--text-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-salvia);
	margin-bottom: var(--space-2);
	font-weight: var(--weight-medium);
}

@media (min-width: 900px) {
	.confianza__lista {
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
	}
	.confianza__dato {
		padding-inline: var(--space-8);
		border-left: 1px solid var(--color-bruma);
	}
	.confianza__dato:first-child {
		padding-left: 0;
		border-left: 0;
	}
	.confianza__dato:last-child {
		padding-right: 0;
	}
}

/* --- Puertas de entrada (lista editorial, no una fila de tarjetas) ------- */

.puertas {
	border-top: 1px solid var(--color-bruma);
}

.puerta {
	display: grid;
	gap: var(--space-4);
	padding-block: var(--space-12);
	border-bottom: 1px solid var(--color-bruma);
}

.puerta__titulo {
	font-size: var(--text-heading-sm);
	max-width: 18ch;
}

.puerta__texto {
	color: var(--color-grafito);
}

.puerta__enlace {
	font-family: var(--font-label);
	font-size: 15px;
	font-weight: var(--weight-medium);
	text-decoration: none;
	border-bottom: 1px solid var(--color-salvia);
	padding-bottom: 2px;
	justify-self: start;
	margin-top: var(--space-2);
}

.puerta__enlace:hover {
	color: var(--color-salvia-dark);
	border-color: var(--color-salvia-dark);
}

@media (min-width: 900px) {
	.puerta {
		grid-template-columns: 1fr 1.4fr;
		column-gap: var(--space-16);
		align-items: start;
	}
	.puerta__titulo {
		grid-row: span 2;
	}
}

/* --- Sección invertible --------------------------------------------------- */
/* Motivos de consulta. Al entrar en pantalla la sección se da la vuelta: el
   salvia pasa de ser tinta a ser fondo y el texto se aclara. Es la única
   sección oscura del sitio y por eso funciona como marca de página; si
   hubiera dos, sería un patrón y dejaría de leerse como un momento.

   El cambio lo dispara un IntersectionObserver, no el scroll continuo: sin
   JS la sección se queda en claro, perfectamente legible. */

.seccion--invertible {
	background: var(--color-lienzo);
	transition: background-color 700ms ease;
}

.seccion--invertible.esta-invertida {
	background: var(--color-salvia-dark);
}

.seccion--invertible :where(h2, h3, p, a, span) {
	transition: color 700ms ease, border-color 700ms ease;
}

.seccion--invertible.esta-invertida .titulo-seccion,
.seccion--invertible.esta-invertida .puerta__titulo {
	color: var(--color-panel);
}

.seccion--invertible.esta-invertida .etiqueta {
	/* 0.72 dejaba la etiqueta en 4.49:1 sobre el verde, justo por debajo de AA.
	   Es texto de 13px: no califica como texto grande y necesita 4.5. */
	color: rgba(246,247,244,0.88);
}

.seccion--invertible.esta-invertida .puerta__texto {
	color: rgba(246,247,244,0.80);
}

.seccion--invertible.esta-invertida .puerta__enlace {
	color: var(--color-panel);
	border-color: rgba(246,247,244,0.55);
}

.seccion--invertible.esta-invertida .puerta__enlace:hover {
	border-color: var(--color-panel);
}

.seccion--invertible.esta-invertida .puertas,
.seccion--invertible.esta-invertida .puerta {
	border-color: rgba(246,247,244,0.22);
}

/* En escritorio el encabezado se queda quieto mientras pasan los tres
   motivos: el fondo fijo y el contenido moviéndose encima. */
@media (min-width: 900px) {
	.puertas-layout {
		display: grid;
		grid-template-columns: 1fr 1.5fr;
		gap: var(--space-16);
		align-items: start;
	}

	.puertas-layout__cabeza {
		position: sticky;
		top: 128px;
		margin-bottom: 0;
	}

	.puertas-layout .puertas {
		border-top: 0;
	}

	.puertas-layout .puerta {
		grid-template-columns: 1fr;
		padding-block: var(--space-8);
	}

	.puertas-layout .puerta:first-child {
		padding-top: 0;
	}

	.puertas-layout .puerta__titulo {
		grid-row: auto;
		max-width: none;
	}
}

/* --- Cierre en cristal esmerilado ---------------------------------------- */
/* El panel de la última llamada a la acción se apoya sobre la misma
   atmósfera del hero y la difumina. Es el único backdrop-filter del sitio:
   uno solo, estático, no cuesta nada; media docena sí. */

.seccion--cierre {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--gradient-salvia);
}

.seccion--cierre::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 80vw;
	height: 80vw;
	max-width: 820px;
	max-height: 820px;
	top: -25%;
	right: -15%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(95,115,85,0.22) 0%, rgba(95,115,85,0.06) 45%, rgba(95,115,85,0) 72%);
	animation: deriva-b 66s ease-in-out infinite alternate;
	will-change: transform;
	pointer-events: none;
}

.seccion--cierre .cierre {
	position: relative;
	background: rgba(255,255,255,0.55);
	border: 1px solid rgba(255,255,255,0.75);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
}

/* Sin backdrop-filter el panel translúcido se ve sucio: ahí va sólido. */
@supports not (backdrop-filter: blur(1px)) {
	.seccion--cierre .cierre {
		background: rgba(255,255,255,0.92);
	}
}

/* --- Pasos --------------------------------------------------------------- */

.pasos {
	display: grid;
	gap: var(--space-12);
}

.paso {
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-bruma);
}

.paso__numero {
	font-family: var(--font-label);
	font-size: 44px;
	font-weight: var(--weight-regular);
	line-height: 1;
	color: var(--color-salvia);
	opacity: .55;
	display: block;
	margin-bottom: var(--space-4);
}

.paso__titulo {
	font-size: var(--text-subheading);
	margin-bottom: var(--space-3);
}

.paso__texto {
	color: var(--color-grafito);
}

@media (min-width: 768px) {
	.pasos {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--space-16);
		row-gap: var(--space-16);
	}
}

/* --- Bloque partido (texto + imagen) ------------------------------------- */

.partido {
	display: grid;
	gap: var(--space-12);
}

.partido__figura {
	border: 1px solid var(--color-bruma);
	border-radius: var(--radius-image);
	overflow: hidden;
	background: var(--color-panel);
	aspect-ratio: 4 / 5;
	max-width: 460px;
}

.partido__figura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.partido__texto p + p {
	margin-top: var(--space-6);
}

@media (min-width: 900px) {
	.partido {
		grid-template-columns: 1.3fr 1fr;
		gap: var(--space-16);
		align-items: center;
	}
	.partido__figura {
		max-width: none;
	}
	.partido--invertido .partido__figura {
		order: -1;
	}
}

/* Las fotos del consultorio y del quirófano son apaisadas: en un marco 4/5 se
   recortarían casi enteras. Va después del bloque de .partido para ganarle el
   aspect-ratio también dentro del media query. */
.partido__figura--horizontal {
	aspect-ratio: 4 / 3;
	max-width: 620px;
}

/* --- Ubicación ----------------------------------------------------------- */

.ubicacion {
	display: grid;
	gap: var(--space-12);
}

.direccion {
	font-size: var(--text-body-lg);
	line-height: 1.5;
}

.direccion__linea {
	display: block;
}

.ubicacion__datos {
	margin-top: var(--space-8);
	display: grid;
	gap: var(--space-3);
	color: var(--color-grafito);
}

.mapa {
	border: 1px solid var(--color-bruma);
	border-radius: var(--radius-image);
	overflow: hidden;
	background: var(--color-panel);
	min-height: 320px;
}

.mapa iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 0;
}

@media (min-width: 900px) {
	.ubicacion {
		grid-template-columns: 1fr 1.15fr;
		gap: var(--space-16);
		align-items: stretch;
	}
	.mapa {
		min-height: 420px;
	}
}

/* --- Preguntas frecuentes ------------------------------------------------ */

.faq {
	border-top: 1px solid var(--color-bruma);
	max-width: 820px;
}

.faq__item {
	border-bottom: 1px solid var(--color-bruma);
}

.faq__pregunta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-6);
	padding-block: var(--space-6);
	font-size: var(--text-subheading);
	font-weight: var(--weight-light);
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

.faq__pregunta::-webkit-details-marker {
	display: none;
}

.faq__pregunta::after {
	content: "+";
	font-family: var(--font-label);
	font-size: 22px;
	color: var(--color-salvia);
	line-height: 1;
	flex-shrink: 0;
}

.faq__item[open] .faq__pregunta::after {
	content: "\2212";
}

.faq__respuesta {
	padding-bottom: var(--space-8);
	color: var(--color-grafito);
}

/* --- Cierre -------------------------------------------------------------- */

.cierre {
	background: var(--color-panel);
	border-radius: var(--radius-card);
	padding: var(--space-12) var(--card-padding);
}

.cierre__titulo {
	font-size: var(--text-heading-sm);
	max-width: 20ch;
}

.cierre__texto {
	color: var(--color-grafito);
	margin-top: var(--space-4);
}

@media (min-width: 900px) {
	.cierre {
		padding: var(--space-16);
	}
}

/* --- Servicios ----------------------------------------------------------- */

.grupo-servicio + .grupo-servicio {
	margin-top: var(--section-gap);
	padding-top: var(--section-gap);
	border-top: 1px solid var(--color-bruma);
}

.grupo-servicio__titulo {
	font-size: var(--text-heading);
	max-width: 20ch;
}

.grupo-servicio__entrada {
	font-size: var(--text-body-lg);
	color: var(--color-grafito);
	margin-top: var(--space-6);
}

.servicios-lista {
	display: grid;
	gap: var(--space-8);
	margin-top: var(--space-12);
}

.servicio {
	border: 1px solid var(--color-bruma);
	border-radius: var(--radius-card);
	padding: var(--card-padding);
	background: var(--color-lienzo);
}

.servicio__titulo {
	font-size: var(--text-subheading);
	margin-bottom: var(--space-3);
}

.servicio__texto {
	color: var(--color-grafito);
}

@media (min-width: 768px) {
	.servicios-lista {
		grid-template-columns: repeat(2, 1fr);
	}
	.servicios-lista--destacado .servicio:first-child {
		grid-column: 1 / -1;
	}
}

/* --- Datos en fila (consulta, horario, seguros) -------------------------- */

.datos {
	display: grid;
	gap: var(--space-8);
	border-top: 1px solid var(--color-bruma);
	padding-top: var(--space-8);
}

.datos__item strong {
	display: block;
	font-family: var(--font-label);
	font-size: var(--text-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-salvia);
	margin-bottom: var(--space-2);
	font-weight: var(--weight-medium);
}

.datos__item p {
	color: var(--color-grafito);
}

@media (min-width: 768px) {
	.datos {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--space-16);
	}
}

/* --- Contenido genérico (política de privacidad) ------------------------- */

.contenido h2 {
	font-size: var(--text-heading-sm);
	margin-top: var(--space-12);
	margin-bottom: var(--space-4);
}

.contenido h3 {
	font-size: var(--text-subheading);
	margin-top: var(--space-8);
	margin-bottom: var(--space-3);
}

.contenido p,
.contenido li {
	color: var(--color-grafito);
	margin-bottom: var(--space-4);
}

.contenido ul {
	list-style: disc;
	padding-left: 1.2em;
	margin-bottom: var(--space-6);
}

/* --- Pie ----------------------------------------------------------------- */

.pie {
	border-top: 1px solid var(--color-bruma);
	padding-top: var(--space-16);
	padding-bottom: var(--space-12);
	margin-top: var(--section-gap);
}

.pie__interior {
	display: grid;
	gap: var(--space-12);
}

.pie__nombre {
	font-size: var(--text-subheading);
	font-weight: var(--weight-light);
}

.pie__especialidad,
.pie__horario,
.pie__cedulas {
	color: var(--color-grafito);
	font-size: 15px;
	margin-top: var(--space-2);
}

.pie__cedulas {
	font-family: var(--font-label);
	font-size: 13px;
}

.pie__titulo {
	font-family: var(--font-label);
	font-size: var(--text-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-salvia);
	margin-bottom: var(--space-4);
	font-weight: var(--weight-medium);
}

.pie__direccion {
	font-size: var(--text-body);
	line-height: 1.55;
}

.pie__lista {
	display: grid;
	gap: var(--space-2);
}

.pie__enlace {
	color: var(--color-tinta);
	text-decoration: none;
	font-size: 15px;
}

.pie__enlace:hover {
	color: var(--color-salvia);
}
/* Redes sociales del pie */
.pie__red {
    display: flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
}

.pie__red-icono {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    display: block;
}

.pie__legal {
	margin-top: var(--space-16);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-bruma);
}

.pie__legal p {
	font-size: 13px;
	color: var(--color-grafito);
}

@media (min-width: 900px) {
	.pie__interior {
		grid-template-columns: 1.4fr 1.2fr 1fr 1fr;
		gap: var(--space-12);
	}
}

/* --- Botón flotante ------------------------------------------------------ */
/* La misma pildora que el resto del sitio, anclada abajo a la derecha. Sin
   sombra: se separa del fondo por color, que es como se separa todo aquí.
   Oculto en móvil, donde manda la barra fija. */

.flotante {
	display: none;
}

@media (min-width: 900px) {
	.flotante {
		display: block;
		position: fixed;
		right: 28px;
		bottom: 28px;
		z-index: 94;
	}

	.flotante__boton {
		padding: 15px 26px;
		font-size: 15px;
	}

	.flotante__boton .boton__icono {
		width: 20px;
		height: 20px;
	}
}

/* --- Barra fija móvil ---------------------------------------------------- */

.barra-movil {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	display: flex;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
	background: var(--color-lienzo);
	border-top: 1px solid var(--color-bruma);
}

.barra-movil__accion {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border-radius: var(--radius-button);
	font-family: var(--font-label);
	font-size: 15px;
	font-weight: var(--weight-medium);
	text-decoration: none;
	color: var(--color-tinta);
	border: 1px solid var(--color-tinta);
}

.barra-movil__accion--primaria,
.barra-movil__accion--primaria:link,
.barra-movil__accion--primaria:visited,
.barra-movil__accion--primaria:hover,
.barra-movil__accion--primaria:focus {
	flex: 1.8;
	background: var(--color-salvia);
	border-color: var(--color-salvia);
	color: var(--color-lienzo);
}

body.drjr {
	padding-bottom: 76px;
}

@media (min-width: 900px) {
	.barra-movil { display: none; }
	body.drjr { padding-bottom: 0; }
}

/* --- Piezas sueltas ------------------------------------------------------ */

/* Reserva de imagen: mientras una foto no esté asignada, el hueco se pinta
   en paleta para que la composición quede terminada y nunca vacía. */
.figura-reserva {
	width: 100%;
	height: 100%;
	min-height: 280px;
	background:
		linear-gradient(160deg, rgba(95,115,85,0.14) 0%, rgba(95,115,85,0.04) 55%, rgba(226,226,222,0.5) 100%);
}

.credenciales {
	display: grid;
	gap: var(--space-6);
	border: 1px solid var(--color-bruma);
	border-radius: var(--radius-card);
	padding: var(--card-padding);
	align-content: start;
}

.credenciales__nota {
	font-size: 15px;
	color: var(--color-grafito);
}

/* La apertura de Sobre mi: la voz del doctor antes de las credenciales. El
   primer parrafo sube un escalon porque es lo primero que lee la paciente. */
.seccion--apertura {
	padding-bottom: 0;
}

.apertura {
	max-width: 62ch;
}

.apertura p:first-child {
	font-size: var(--text-heading-sm);
	font-weight: var(--weight-light);
	line-height: 1.3;
	color: var(--color-tinta);
	letter-spacing: -0.01em;
}

.prosa p + p {
	margin-top: var(--space-6);
}

.prosa + .pasos {
	margin-top: var(--space-12);
}

.prosa p {
	color: var(--color-grafito);
	font-size: var(--text-body-lg);
}

.ubicacion__subtitulo {
	font-size: var(--text-subheading);
	margin-top: var(--space-12);
	margin-bottom: var(--space-4);
}

.ubicacion__enlace-mapa {
	margin-top: var(--space-6);
}

.ubicacion__figura {
	margin-top: var(--space-8);
}

.direccion--compacta {
	font-size: var(--text-body);
	line-height: 1.55;
}

.testimonios {
	display: grid;
	gap: var(--space-8);
}

.testimonio {
	border-top: 1px solid var(--color-bruma);
	padding-top: var(--space-6);
}

.testimonio__texto {
	font-size: var(--text-subheading);
	font-weight: var(--weight-light);
	line-height: 1.35;
	border: 0;
	padding: 0;
	margin: 0;
}

.testimonio__autor {
	font-family: var(--font-label);
	font-size: var(--text-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-salvia);
	margin-top: var(--space-4);
}

@media (min-width: 768px) {
	.testimonios {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--space-16);
		row-gap: var(--space-12);
	}
}

@media (prefers-reduced-motion: reduce) {
	.drjr *,
	.drjr *::before,
	.drjr *::after {
		transition-duration: .01ms !important;
	}

	.hero::before,
	.hero::after,
	.seccion--cierre::before {
		animation: none;
	}

	/* La cinta se detiene y se deja leer entera, envuelta en varias líneas. */
	.cintilla__pista {
		animation: none;
		width: 100%;
	}

	.cintilla {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.cintilla__grupo {
		flex-wrap: wrap;
		justify-content: center;
	}

	.cintilla__grupo[aria-hidden="true"] {
		display: none;
	}
}
.hero__subtitulo {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
    max-width: 570px;
    margin: 14px 0 18px;
    opacity: 0.95;
}
#consulta-ginecologica {
    scroll-margin-top: 100px;
}
@media (max-width: 768px) {
    #ast-scroll-top {
        display: none !important;
    }
}