/* ==========================================================================
   Prótesis Oculares (1.7.0 «Del taller a la mirada») — página /protesis-oculares/.
   Oscura y neutra, igual que la portada: tinta, cristal, hilos finos y rojo solo como acento.
   Sin animaciones, sin autoplay, sin blur. Se carga únicamente en esta página.
   ========================================================================== */

.pro { display: block; background: var(--ink); --pro-gap: 24px; --r-outer: 28px; --r-pad: 8px; --r-inner: 20px; }
@media (max-width: 560px) { .pro { --r-outer: 24px; --r-pad: 7px; --r-inner: 17px; } }
.pro-wrap { width: 100%; max-width: calc(1240px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.pro-wrap--narrow { max-width: calc(780px + 2 * var(--gutter)); }

.pro-kicker { margin: 0 0 16px; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); display: flex; align-items: center; gap: 12px; }
.pro-kicker::after { content: ""; width: 28px; height: 2px; background: var(--red); flex: none; }
.pro-title { font-size: clamp(2rem, 4.2vw, 3.5rem); text-wrap: balance; margin: 0 0 0.45em; }
.pro-h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); text-wrap: balance; margin: 0 0 clamp(24px, 3.5vw, 40px); }
.pro-lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: rgba(244, 242, 240, 0.8); max-width: 52ch; margin: 0 0 28px; }
.pro-cta { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.pro .glo-hint { color: var(--muted); max-width: 70ch; }
.pro [hidden] { display: none !important; }

/* A · Cabecera ---------------------------------------------------------------- */
.pro-hero {
	padding-block: calc(var(--header-h) + var(--safe-top) + clamp(24px, 4vw, 56px)) clamp(56px, 7vw, 104px);
	background:
		radial-gradient(45% 55% at 78% 42%, rgba(255, 255, 255, 0.06), transparent 70%),
		var(--ink);
}
.pro-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.pro-hero__copy { min-width: 0; }
.pro-hero__media { min-width: 0; }
.pro-crumbs { margin: 0 0 clamp(20px, 3vw, 36px); font-size: 0.875rem; }
.pro-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.pro-crumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, 0.35); }
.pro-crumbs a { color: var(--muted); text-underline-offset: 3px; }
.pro-crumbs a:hover { color: var(--text); }
.pro-crumbs [aria-current] { color: var(--text); }
.pro-hero__where { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 24px 0 0; font-size: 0.9375rem; color: var(--muted); }

.pro-portrait {
	position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 5;
	padding: var(--r-pad); border-radius: var(--r-outer);
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.025) 38%, rgba(255, 255, 255, 0.04) 100%);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 36px 64px -18px rgba(0, 0, 0, 0.75);
}
.pro-portrait img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: var(--r-inner); object-position: var(--mx, 50%) var(--my, 0%); }
@media (min-width: 861px) { .pro-portrait img { object-position: var(--fx, 50%) var(--fy, 0%); } }
.pro-portrait__cap { position: absolute; left: calc(var(--r-pad) + 12px); bottom: calc(var(--r-pad) + 12px); width: fit-content; max-width: calc(100% - 2 * var(--r-pad) - 24px); padding: 6px 12px; border-radius: 14px; background: rgba(10, 10, 10, 0.72); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); font-size: 0.875rem; line-height: 1.3; }
.pro-portrait__glass {
	height: 100%; border-radius: var(--r-inner);
	background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 65%), repeating-radial-gradient(circle, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 22px);
	-webkit-mask-image: radial-gradient(circle, #000 35%, transparent 78%);
	mask-image: radial-gradient(circle, #000 35%, transparent 78%);
}
/* Firma blanca sobre el borde inferior del retrato, con una sombra suave para que se lea sobre cualquier fondo */
.pro-portrait--page::after { content: ""; position: absolute; left: var(--r-pad); right: var(--r-pad); bottom: var(--r-pad); height: 36%; border-radius: 0 0 var(--r-inner) var(--r-inner); background: linear-gradient(to top, rgba(10, 10, 10, 0.78), transparent); pointer-events: none; }
.pro-portrait .pro-portrait__sig { position: absolute; z-index: 1; left: calc(var(--r-pad) + clamp(14px, 4%, 22px)); bottom: calc(var(--r-pad) + clamp(12px, 3.5%, 20px)); width: min(46%, 220px); height: auto; border-radius: 0; object-fit: contain; }
@media (max-width: 860px) {
	.pro-hero__media { order: -1; }                                  /* el retrato abre la página en móvil */
	.pro-hero .pro-portrait { max-width: 360px; margin-inline: auto; aspect-ratio: 1 / 1; }
	.pro-cta .btn { width: 100%; }
}
@media (min-width: 861px) {
	.pro-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pro-gap); }
	.pro-hero__copy { grid-column: 1 / 7; }
	.pro-hero__media { grid-column: 8 / -1; }
	.pro-hero .pro-portrait { max-width: 500px; margin-inline: auto; }
}

/* Secciones ------------------------------------------------------------------ */
.pro-sec { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--hair); }
.pro-albums, .pro-agenda { background: var(--ink-2); }

/* B · Manifiesto (#131313) — 1.11.5: titular y párrafo a la izquierda; a la derecha UN panel de cristal con los cuatro atributos (sin numeración) */
.pro-manifesto { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--hair); background: var(--ink-2); }
.pro-manifesto__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.pro-manifesto__copy { min-width: 0; }
.pro-manifesto__title { font-size: clamp(2rem, 4.6vw, 3.75rem); text-wrap: balance; max-width: 18ch; margin: 0 0 0.4em; }
.pro-manifesto__text { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: rgba(244, 242, 240, 0.8); max-width: 56ch; margin: 0 0 clamp(32px, 5vw, 48px); }
.pro-attrs {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;
	border-radius: var(--r-outer); border: 1px solid rgba(255, 255, 255, 0.16);
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0.035));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Celdas separadas por hilos internos (sin doble borde exterior) */
.pro-attrs__item { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 18px; min-height: 148px; padding: clamp(24px, 3vw, 40px); }
.pro-attrs__item:nth-child(even) { border-left: 1px solid var(--hair); }
.pro-attrs__item:nth-child(n + 3) { border-top: 1px solid var(--hair); }
/* Único acento rojo del bloque: 28 × 2 px en el borde superior de la primera celda */
.pro-attrs__item:first-child::before { content: ""; position: absolute; left: clamp(24px, 3vw, 40px); top: 0; width: 28px; height: 2px; background: var(--red); }
/* Lente óptica de cristal (mismo trazo que el acento de las etapas clínicas) */
.pro-attrs__lens { display: block; flex: none; width: 24px; height: 16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.34); background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
@media (forced-colors: active) { .pro-attrs__lens { border-color: CanvasText; background: none; box-shadow: none; } }
.pro-attrs__t { min-height: 2.5em; font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 600; line-height: 1.25; text-wrap: balance; color: var(--text); }   /* reserva dos líneas: las lentes quedan a la misma altura en cada fila */
@media (max-width: 599px) {
	.pro-attrs { grid-template-columns: minmax(0, 1fr); }
	.pro-attrs__item { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; min-height: 0; padding: 22px; }
	.pro-attrs__t { min-height: 0; }
	.pro-attrs__item:nth-child(even) { border-left: 0; }
	.pro-attrs__item:nth-child(n + 2) { border-top: 1px solid var(--hair); }
	.pro-attrs__item:first-child::before { left: 22px; }
}
@media (min-width: 1000px) {
	.pro-manifesto__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pro-gap); }
	.pro-manifesto__copy { grid-column: 1 / 7; align-self: center; }
	.pro-manifesto__text { margin-bottom: 0; }
	.pro-attrs { grid-column: 7 / -1; align-self: center; }
}

/* C · El proceso — 1.11.5: la fotografía entera en su marco de cristal; titular y cuatro etapas en columna junto a ella */
.pro-process { scroll-margin-top: calc(var(--header-h) + var(--safe-top) + 8px); }
.pro-process__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.pro-process__body { display: contents; }                          /* móvil y tableta: titular, fotografía y etapas se ordenan en la misma columna */
.pro-process__body > .pro-h2 { order: 1; margin: 0; }
.pro-process__fig { order: 2; max-width: 720px; margin-inline: auto; aspect-ratio: auto; }
.pro-process__body > .pro-steps { order: 3; }
.pro-process__fig img { height: auto; object-fit: initial; }
.pro-process__fig--def { margin-bottom: 28px; }   /* hueco para el pie de foto (solo con la fotografía del tema) */
.pro-process__cap { position: absolute; left: 4px; right: 4px; top: calc(100% + 12px); margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--muted); }
/* Etapas (solo las del proceso; «Piezas clínicas» conserva las suyas) */
.pro-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--pro-gap); margin: 0; padding: 0; list-style: none; }
.pro-steps__item { padding: 20px 0 28px; border-top: 1px solid var(--hair); position: relative; }
.pro-steps__item::before { content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 2px; background: var(--red); }
/* Acento decorativo (v1.9.2): una lente óptica fina en lugar del número; solo adorno, sin texto ni movimiento. */
.pro-steps__glass { display: block; width: 24px; height: 16px; margin-bottom: 15px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.34); background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
@media (forced-colors: active) { .pro-steps__glass { border-color: CanvasText; background: none; box-shadow: none; } }
.pro-steps__title { font-size: 1.25rem; margin: 0 0 8px; }
.pro-steps__text { margin: 0; color: var(--muted); max-width: 36ch; }
@media (min-width: 600px) { .pro-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pro-process .pro-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (max-width: 599px) { .pro-process .pro-steps__item:last-child { border-bottom: 1px solid var(--hair); } }
@media (min-width: 600px) { .pro-process .pro-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--pro-gap); } }   /* tableta y escritorio estrecho: cuadrícula 2 × 2 bajo la fotografía */
.pro-process .pro-steps__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start; padding: clamp(18px, 2.2vw, 26px) 0; }
.pro-process .pro-steps__item::before { content: none; }
.pro-steps__n { grid-row: 1 / span 2; padding-top: 0.3em; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.12em; line-height: 1; color: var(--red); font-variant-numeric: tabular-nums; }
.pro-process .pro-steps__title { grid-column: 2; font-size: clamp(1.125rem, 1.5vw, 1.375rem); margin: 0 0 6px; }
.pro-process .pro-steps__text { grid-column: 2; max-width: 44ch; }
/* Dos columnas solo cuando la fotografía (seis columnas) es tan alta como las cuatro etapas: por debajo de ≈ 1200 px sería más baja y dejaría un vacío bajo ella. */
@media (min-width: 1200px) {
	.pro-process__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pro-gap); align-items: stretch; }
	.pro-process__body { display: flex; flex-direction: column; grid-column: 7 / -1; min-width: 0; }
	.pro-process__body > .pro-h2 { margin: 0 0 24px; }
	.pro-process__fig { order: 0; grid-column: 1 / 7; max-width: none; margin: 0; align-self: start; }
	.pro-process__fig--def { display: flex; flex-direction: column; align-self: stretch; margin-bottom: 0; }
	.pro-process__fig--def img { flex: 1 1 auto; min-height: 0; object-fit: cover; }   /* la fotografía del tema rellena el marco: el ajuste vertical es de unos pocos píxeles */
	.pro-process .pro-steps { flex: 1; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
	.pro-process .pro-steps__item { padding-block: clamp(14px, 1.15vw, 17px); }
	.pro-process .pro-steps__item:last-child { border-bottom: 1px solid var(--hair); }   /* el último hilo cierra la columna a la altura del marco */
	.pro-process__grid > .pro-process__body:only-child { grid-column: 1 / -1; }
}

/* D · Álbumes: pestañas con JavaScript; sin él, todos los álbumes seguidos con su título */
.pro-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.pro-tabs__tab { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.pro-tabs__tab:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.pro-tabs__tab[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.pro-albums.is-tabs .pro-album__title { display: none; }          /* con pestañas, el título del álbum es la pestaña */
.pro-album + .pro-album { margin-top: clamp(40px, 6vw, 72px); }
.pro-album__title { font-size: 1.25rem; margin: 0 0 18px; }
.pro-mosaic { --c: 4; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; max-width: calc(var(--c) * 340px + (var(--c) - 1) * 16px); }
.pro-more .pro-mosaic { margin-top: 16px; }
.pro-tile { margin: 0; }
.pro-tile__link { display: block; text-decoration: none; color: inherit; }
.pro-tile__frame { display: block; aspect-ratio: 4 / 5; padding: 6px; border-radius: 22px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 20px 40px -22px rgba(0, 0, 0, 0.7); transition: border-color 0.2s; }
.pro-tile__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 16px; }
.pro-tile__link:hover .pro-tile__frame { border-color: rgba(255, 255, 255, 0.4); }
.pro-tile__cap { margin: 10px 4px 0; font-size: 0.9375rem; color: var(--muted); }
/* Resultados: franjas de mirada 16:5, nunca recortadas a un solo ojo */
.pro-album--eye .pro-mosaic { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); max-width: calc(var(--c) * 560px + (var(--c) - 1) * 16px); }
.pro-tile--eye .pro-tile__frame { aspect-ratio: 16 / 5; }
.pro-tile--wide .pro-tile__frame { aspect-ratio: 5 / 4; }   /* 1.11.4: fotografías apaisadas de piezas (folleto), sin recorte lateral */
.pro-tile--eye .pro-tile__img { object-position: 50% var(--fy, 50%); }
.pro-more { margin-top: 28px; }
.pro-more > summary { list-style: none; cursor: pointer; width: fit-content; }
.pro-more > summary::-webkit-details-marker { display: none; }
.pro-more[open] > summary { display: none; }   /* una vez abierto, el listado completo queda a la vista */

/* E · Historias de pacientes: tarjetas con la franja de mirada, nombre o iniciales, testimonio y «Ver antes y después» */
.pro-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.pro-more .pro-cards { margin-top: 24px; }
.pro-card { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.pro-card__band { display: block; text-decoration: none; color: inherit; }
.pro-card__frame { display: block; aspect-ratio: 16 / 5; padding: 6px; border-radius: 22px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 20px 40px -22px rgba(0, 0, 0, 0.7); }
.pro-card__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 16px; object-position: 50% var(--fy, 50%); }
.pro-card__band:hover .pro-card__frame { border-color: rgba(255, 255, 255, 0.4); }
.pro-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-inline: 4px; }
.pro-card__name { margin: 0; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.pro-card__quote { margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--red); }
.pro-card__quote p { margin: 0; color: rgba(244, 242, 240, 0.88); font-size: 1.0625rem; max-width: 56ch; }
.pro-note { margin: 28px 0 0; font-size: 0.9375rem; color: var(--muted); max-width: 70ch; }

/* F · Agenda: panel de cristal con una luz roja tenue; el calendario del plugin sobre tarjeta clara, el contacto al lado */
.pro-agenda { scroll-margin-top: calc(var(--header-h) + var(--safe-top) + 8px); }
.pro-agenda__panel {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center;
	padding: clamp(28px, 5vw, 72px); border-radius: var(--r-outer); overflow: hidden; isolation: isolate;
	background: radial-gradient(60% 80% at 100% 0%, rgba(215, 14, 22, 0.14), transparent 70%), linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0.04));
	border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 36px 64px -28px rgba(0, 0, 0, 0.8);
}
/* Aros de lente concéntricos, apenas visibles: el vidrio óptico de la marca sin adorno añadido. */
.pro-agenda__panel::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	width: clamp(280px, 38vw, 520px); aspect-ratio: 1; right: calc(-1 * clamp(80px, 10vw, 160px)); bottom: calc(-1 * clamp(100px, 14vw, 220px));
	border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.09);
	box-shadow: 0 0 0 clamp(24px, 3.4vw, 48px) rgba(255, 255, 255, 0.015), 0 0 0 calc(clamp(24px, 3.4vw, 48px) + 1px) rgba(255, 255, 255, 0.06);
}
.pro-agenda__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.pro-agenda__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--red); flex: none; }
.pro-agenda .pro-h2 { font-size: clamp(1.875rem, 3.8vw, 3rem); line-height: 1.12; margin-bottom: 20px; max-width: 18ch; }
.pro-agenda .pro-lead { margin-bottom: 0; max-width: 46ch; }
.pro-agenda__cta { margin-top: clamp(28px, 3.5vw, 40px); gap: 12px 14px; }
.pro-agenda__cta .btn { gap: 10px; }
.pro-contact.pro-agenda__contact { margin: 0; align-self: center; }
.pro-agenda__contact li:first-child { padding-top: 0; border-top: 0; }
.pro-agenda__contact a { overflow-wrap: anywhere; }
.pro-agenda__contact a:hover { text-decoration-color: var(--red); }
.pro-agenda__slot { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.pro-agenda__panel { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pro-gap); }
	.pro-agenda__copy { grid-column: 1 / 8; }
	.pro-agenda__contact { grid-column: 9 / -1; padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid var(--hair); }
}
@media (max-width: 560px) {
	.pro-agenda__cta .btn { width: 100%; padding: 12px 16px; min-height: 52px; font-size: 0.9375rem; line-height: 1.25; text-align: center; }
	.pro-agenda__contact { padding-top: 24px; border-top: 1px solid var(--hair); }
	.pro-agenda__contact li:first-child { padding-top: 0; }
}
.pro-contact { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.pro-contact li { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid var(--hair); }
.pro-contact__k { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }
.pro-contact a { color: var(--text); font-size: 1.125rem; font-weight: 600; text-underline-offset: 3px; }
/* Los plugins de reservas suelen estar hechos para fondo claro: se muestran sobre una tarjeta clara. */
.pro-booking { padding: clamp(16px, 3vw, 32px); border-radius: var(--r-inner); background: #fff; color: #1a1718; overflow-x: auto; }
.pro-booking :focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a1718; }

/* «Agendar» fijo en móvil: sobre la cápsula de navegación, tras la cabecera y oculto mientras la agenda está a la vista */
.pro-sticky { position: fixed; z-index: 45; left: 50%; transform: translateX(-50%); bottom: calc(92px + var(--safe-bottom)); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.75); }
@media (min-width: 861px) { .pro-sticky { display: none; } }

/* G · Preguntas frecuentes (acordeón nativo, sin JavaScript) */
.pro-faq__wrap { max-width: calc(860px + 2 * var(--gutter)); }
.pro-faq__list { border-top: 1px solid var(--hair); }
.pro-faq__item { border-bottom: 1px solid var(--hair); }
.pro-faq__item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 4px; font-size: 1.125rem; font-weight: 600; }
.pro-faq__item > summary::-webkit-details-marker { display: none; }
.pro-faq__item > summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg) translateY(-3px); }
.pro-faq__item[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.pro-faq__a { padding: 0 4px 22px; color: var(--muted); max-width: 64ch; }
.pro-faq__a > :last-child { margin-bottom: 0; }

/* Contenido adicional de la página (editor), si el propietario lo escribe */
.pro-entry { font-size: 1.0625rem; line-height: 1.7; color: rgba(244, 242, 240, 0.88); }
.pro-entry > * + * { margin-top: 1.1em; }
.pro-entry a { color: var(--text); text-underline-offset: 3px; }
.pro-entry img { border-radius: var(--r-inner); }

/* Imagen ampliada (protesis.js): <dialog> nativo, foco atrapado, Esc cierra */
html:has(.pro-lightbox[open]) { overflow: hidden; }
.pro-lightbox { border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: 100vw; max-height: 100dvh; background: transparent; color: #fff; }
.pro-lightbox::backdrop { background: rgba(5, 5, 5, 0.93); }
.pro-lightbox__stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); height: 100%; padding: calc(56px + var(--safe-top)) clamp(12px, 5vw, 72px) calc(16px + var(--safe-bottom)); }
.pro-lightbox__fig { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
.pro-lightbox__imgs { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 0; }
.pro-lightbox__half { margin: 0; flex: 1 1 0; min-width: 0; min-height: 0; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pro-lightbox__img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 12px; }
.pro-lightbox__img.is-band { height: auto; max-height: 100%; aspect-ratio: 16 / 5; object-fit: cover; }   /* franjas de mirada: siempre recortadas */
.pro-lightbox__tag { font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.pro-lightbox--pair .pro-lightbox__imgs { flex-direction: column; }
@media (min-width: 900px) { .pro-lightbox--pair .pro-lightbox__imgs { flex-direction: row; align-items: center; } .pro-lightbox--pair .pro-lightbox__img.is-band { max-height: none; } }
.pro-lightbox__text { max-width: 70ch; margin-inline: auto; text-align: center; max-height: 24dvh; overflow-y: auto; }
.pro-lightbox__text p { margin: 0 0 0.5em; color: #fff; font-size: 1rem; }
.pro-lightbox__text .pro-lightbox__story { color: rgba(255, 255, 255, 0.82); font-size: 0.9375rem; }
.pro-lightbox__btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(20, 20, 20, 0.8); color: #fff; font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.pro-lightbox__btn:hover { background: rgba(60, 60, 60, 0.9); border-color: #fff; }
.pro-lightbox__close { top: calc(8px + var(--safe-top)); right: clamp(8px, 2vw, 24px); }
.pro-lightbox__prev, .pro-lightbox__next { top: 50%; margin-top: -24px; }
.pro-lightbox__prev { left: clamp(4px, 1.5vw, 20px); }
.pro-lightbox__next { right: clamp(4px, 1.5vw, 20px); }
.pro-lightbox__btn[hidden] { display: none; }
@media (max-width: 600px) { .pro-lightbox__prev, .pro-lightbox__next { top: auto; bottom: 8px; margin-top: 0; } }
@media (forced-colors: active) { .pro-tabs__tab[aria-selected="true"] { outline: 3px solid Highlight; } }