/**
 * A RÚA · Apertura de portada (la gota).
 * Se carga solo en la portada cuando la apertura está activa.
 */

.gota {
	--gota-ratio: .8808;
	--hold: 2800ms;
	--ease-gota: cubic-bezier(.7, 0, .25, 1);
	background: var(--papel);
	color: var(--tinta);
	border-bottom: 1px solid rgba(20, 19, 15, .14);
	overflow: hidden;
}

.gota__stage {
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
	padding: 20px var(--margin) 18px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Ventana: la gota con la fotografía dentro (recorte SVG nativo, igual en todos los navegadores). */
.gota__window {
	position: relative;
	width: 100%;
	transform-origin: 0 0;
}
.gota__window::before { content: ""; display: block; padding-top: 88.08%; }
.gota__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.gota__frame { opacity: 0; }
.gota__frame.is-current, .gota__frame.is-entering { opacity: 1; }
.gota__cover { fill: var(--tinta); opacity: 0; pointer-events: none; }

/* Texto: frases del relato y titular de la historia. */
.gota__text { display: grid; gap: 14px; }
.gota__lines { display: grid; }
.gota__line {
	grid-area: 1 / 1;
	margin: 0;
	font-family: var(--f-display);
	font-weight: 700;
	font-variation-settings: "opsz" 72;
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.4rem);
	line-height: 1.04;
	letter-spacing: -.015em;
	text-wrap: balance;
	opacity: 0;
}
.gota__line[data-line="1"] { opacity: 1; }

.gota__captions { display: grid; }
.gota__caption { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.gota__caption.is-current { opacity: 1; visibility: visible; }
.gota__kicker { margin-bottom: 10px; }
.gota__title {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 700;
	font-variation-settings: "opsz" 72;
	font-size: clamp(1.3rem, 1.05rem + 1vw, 2rem);
	line-height: 1.1;
	letter-spacing: -.01em;
	text-wrap: balance;
}
.gota__title a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .35s var(--ease); }
.gota__title a:hover, .gota__title a:focus-visible { background-size: 100% 2px; }

/* Barra: índice de historias, controles y salto al contenido. */
.gota__bar {
	display: flex;
	align-items: center;
	gap: 14px 20px;
	flex-wrap: wrap;
	padding-top: 12px;
	border-top: 1px solid rgba(20, 19, 15, .14);
	font-family: var(--f-ui);
}
.gota__index {
	flex: 1 1 100%;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gota__item { position: relative; padding-top: 10px; }
.gota__item::before, .gota__progress {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 2px;
	background: rgba(20, 19, 15, .16);
	width: 100%;
}
.gota__progress { background: var(--tinta); width: 0; }
.gota__item.is-done .gota__progress { width: 100%; }
.gota__item a { display: flex; gap: 8px; color: inherit; text-decoration: none; font-size: var(--fs-small); line-height: 1.3; }
.gota__num { font-weight: 700; font-variant-numeric: tabular-nums; }
.gota__name { color: var(--granito); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gota__item.is-current .gota__name, .gota__item a:hover .gota__name { color: var(--tinta); }

.gota__controls { display: flex; gap: 8px; }
.gota__controls[hidden] { display: none; }
.gota__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1.5px solid var(--tinta);
	border-radius: 99px;
	background: transparent;
	color: var(--tinta);
	font: 600 var(--fs-small) / 1 var(--f-ui);
	cursor: pointer;
}
.gota__btn--prev, .gota__btn--next { padding: 0; width: 44px; }
.gota__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.gota__btn:hover { background: var(--tinta); color: var(--papel); }
.gota__skip { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); font-weight: 600; font-size: var(--fs-small); text-decoration: none; min-height: 44px; }
.gota__skip svg { width: 16px; height: 16px; transform: rotate(90deg); }

/* Marca: el logotipo del que sale la gota. Solo existe con JavaScript. */
.gota__brand {
	position: absolute;
	z-index: 6;
	left: 0;
	right: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	pointer-events: none;
}
.gota__logo { width: min(82%, 980px); height: auto; overflow: visible; }
.gota__letters { fill: var(--tinta); transition: opacity .7s var(--ease); }
.gota__accent { fill: var(--tinta); }
.gota__tagline {
	margin: 0;
	max-width: 40ch;
	text-align: center;
	font-family: var(--f-read);
	font-size: var(--fs-lead);
	line-height: 1.35;
	color: var(--granito);
	opacity: 0;
	transition: opacity .6s var(--ease) .5s;
}

/* ---------- Con JavaScript: estados del relato ---------- */

.gota.is-ready .gota__brand { display: flex; }
.gota.is-ready .gota__accent { fill: transparent; }
.gota.is-ready .gota__window { transition: transform 1.5s var(--ease-gota); }
.gota.is-ready .gota__cover { transition: opacity .9s var(--ease); }
.gota.is-ready .gota__line { transform: translateY(.25em); transition: opacity .28s linear, transform .28s linear; }
.gota.is-ready .gota__line.is-on { opacity: 1; transform: none; transition: opacity .6s var(--ease) .32s, transform .6s var(--ease) .32s; }
.gota.is-ready .gota__line:not(.is-on) { opacity: 0; }
.gota.is-ready .gota__caption { transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s .55s; }
.gota.is-ready .gota__caption.is-current { transform: none; transition: opacity .55s var(--ease) .15s, transform .55s var(--ease) .15s, visibility 0s; }
.gota.is-ready .gota__text { transition: opacity .5s var(--ease); }
.gota.is-ready .gota__frame { transition: opacity .3s linear; }

/* El logotipo está entero; la gota es su acento. */
.gota[data-state="logo"] .gota__cover,
.gota[data-state="lift"] .gota__cover,
.gota[data-state="close"] .gota__cover,
.gota[data-state="end"] .gota__cover { opacity: 1; }

.gota[data-state="logo"] .gota__text,
.gota[data-state="close"] .gota__text,
.gota[data-state="end"] .gota__text { opacity: 0; pointer-events: none; }
.gota[data-state="logo"] .gota__caption,
.gota[data-state="lift"] .gota__caption { opacity: 0; visibility: hidden; }

.gota[data-state="lift"] .gota__letters,
.gota[data-state="open"] .gota__letters,
.gota[data-state="story"] .gota__letters { opacity: 0; }
.gota[data-state="close"] .gota__tagline,
.gota[data-state="end"] .gota__tagline { opacity: 1; }

.gota.is-paused .gota__item.is-current .gota__progress { animation-play-state: paused; }
.gota.is-playing .gota__item.is-current .gota__progress { animation: gota-progress var(--hold) linear forwards; }
@keyframes gota-progress { from { width: 0; } to { width: 100%; } }

/* ---------- Móvil ---------- */

@media (max-width: 759.98px) {
	.gota__brand { top: 20px; height: calc((100vw - 2 * var(--margin)) * .8808); }
	.gota__logo { width: 86%; }
	.gota__tagline { font-size: 1.05rem; }
	.gota__text { min-height: 8.6rem; align-content: start; }
	.gota__lines { min-height: 2.2em; }
	.gota__line { font-size: 1.6rem; }
	.gota__name { display: none; }
	.gota__index { gap: 6px; }
	.gota__item { padding-top: 0; height: 12px; }
	.gota__item a { position: absolute; inset: -14px 0 -10px; }
	.gota__num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.gota__skip { margin-left: auto; }
}

/* ---------- Tableta y escritorio ---------- */

@media (min-width: 760px) {
	.gota__stage {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-rows: auto auto;
		column-gap: var(--gutter);
		row-gap: 14px;
		padding-top: 28px;
	}
	.gota__window {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		align-self: center;
		width: min(100%, calc((100svh - var(--header-h) - 150px) / .8808), 900px);
	}
	.gota__text { grid-column: 1; grid-row: 1; align-self: center; gap: 28px; padding-bottom: 24px; }
	.gota__lines { min-height: 3.2em; align-content: end; }
	.gota__captions { min-height: 8.5rem; align-content: start; }
	.gota__bar { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; }
	.gota__index { flex: 1 1 auto; }
	.gota__brand { top: 0; bottom: 70px; }
	.gota__logo { width: min(74%, 1000px); }
}

/* ---------- Movimiento reducido: sin relato, la misma composición ---------- */

@media (prefers-reduced-motion: reduce) {
	.gota.is-ready .gota__brand { display: none; }
	.gota.is-playing .gota__item.is-current .gota__progress { animation: none; }
}

/* El botón no cambia de ancho entre «Pausar», «Reproducir» y «Volver a ver». */
.gota__btn--play { min-width: 7.2rem; }
@media (max-width: 759.98px) {
	.gota__bar { gap: 10px; }
	.gota__controls { gap: 6px; }
	.gota__btn--play { min-width: 6.6rem; padding: 0 10px; }
}
.gota__btn[hidden] { display: none; }
@media (min-width: 760px) and (max-width: 1099.98px) {
	.gota__name { display: none; }
	.gota__index { gap: 8px; }
}

/* Antes de que cargue el script: la portada abre directamente en el logotipo, sin parpadeo.
   Si el script no llega a ejecutarse, a los 3 segundos se muestra la composición estática. */
@media (prefers-reduced-motion: no-preference) {
	.js .gota[data-autoplay="1"]:not(.is-ready) .gota__brand { display: flex; animation: gota-hide 0s 3s forwards; }
	.js .gota[data-autoplay="1"]:not(.is-ready) .gota__window,
	.js .gota[data-autoplay="1"]:not(.is-ready) .gota__text { opacity: 0; animation: gota-show .4s 3s forwards; }
}
@keyframes gota-hide { to { opacity: 0; visibility: hidden; } }
@keyframes gota-show { to { opacity: 1; } }
.gota.is-instant, .gota.is-instant * { transition: none !important; }

/* Modo oscuro: pista de progreso visible. La gota sólida (acento) usa la tinta del tema, clara en oscuro. */
@media screen and (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .gota__item::before { background: rgba(239, 232, 218, .2); }

}

/* Modo oscuro elegido con el botón de la gota (prevalece sobre el sistema). */
@media screen {
	:root[data-theme="dark"] .gota__item::before { background: rgba(239, 232, 218, .2); }

}