/**
 * Páginas de contenido: la plantilla «Texto con índice» (términos,
 * privacidad, ayuda, nosotros, contacto), el formulario de contacto y las
 * landings de ancho completo (Accesorios Séfora).
 */

/* ---------------------------------------------------------------
   Texto con índice
   --------------------------------------------------------------- */

.flv-texto {
	/* El margen interno de la hoja blanca del texto. */
	--flv-texto-pad: 20px;

	max-width: var(--flv-ancho-sitio);
	margin: 0 auto;
	padding: var(--flv-sp-7) var(--flv-pad-x) var(--flv-sp-9);
}

@media ( min-width: 768px ) {
	.flv-texto {
		--flv-texto-pad: 56px;
	}
}

.flv-texto__cuerpo {
	max-width: calc( var(--flv-container-narrow) + 2 * var(--flv-texto-pad) );
	margin: 0 auto;
}

/* El índice queda sobre el beige de la página; el texto, en una hoja blanca. */
.flv-texto__principal {
	padding: calc( var(--flv-texto-pad) + 8px ) var(--flv-texto-pad) calc( var(--flv-texto-pad) + 16px );
	border-radius: var(--flv-radius-md);
	background: var(--flv-white);
}

.flv-texto__cabeza {
	margin-bottom: var(--flv-sp-6);
	padding-bottom: var(--flv-sp-5);
	border-bottom: 1px solid var(--flv-color-border);
}

.flv-texto__titulo {
	margin: 0;
	font-family: var(--flv-font-display);
	font-size: clamp( 32px, 5vw, var(--flv-fs-3xl) );
	font-weight: var(--flv-fw-medium);
	line-height: var(--flv-lh-snug);
	color: var(--flv-color-text);
}

.flv-texto__fecha {
	margin: 12px 0 0;
	font-size: var(--flv-fs-sm);
	color: var(--flv-color-text-muted);
}

/* El índice: en computadora al costado, fijo mientras se lee; en el celular,
   plegado arriba del texto. */
.flv-texto__indice {
	display: none;
}

.flv-texto__indice-titulo,
.flv-texto__indice-movil summary {
	margin: 0 0 12px;
	font-family: var(--flv-font-ui);
	font-size: 13px;
	font-weight: var(--flv-fw-bold);
	letter-spacing: var(--flv-tracking-wide);
	text-transform: uppercase;
	color: var(--flv-color-text-muted);
}

.flv-texto__indice-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.flv-texto__indice-lista li {
	margin: 0;
}

.flv-texto__indice-lista a {
	display: block;
	padding: 7px 0 7px 14px;
	border-left: 2px solid var(--flv-color-border);
	font-size: 15px;
	line-height: var(--flv-lh-snug);
	color: var(--flv-brown-800);
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.flv-texto__indice-lista a:hover,
.flv-texto__indice-lista a:focus-visible {
	color: var(--flv-burgundy-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* La sección que se está leyendo (assets/js/pagina.js). */
.flv-texto__indice-lista a.is-activo {
	border-left-color: var(--flv-burgundy-700);
	font-weight: var(--flv-fw-bold);
	color: var(--flv-burgundy-700);
}

.flv-texto__indice-movil {
	margin: 0 0 var(--flv-sp-6);
	padding: 14px 16px;
	border: 1px solid var(--flv-color-border);
	border-radius: var(--flv-radius-md);
	background: var(--flv-color-bg-warm);
}

.flv-texto__indice-movil summary {
	margin: 0;
	cursor: pointer;
}

.flv-texto__indice-movil[open] summary {
	margin-bottom: 8px;
}

/* La columna de al lado: en la página de contacto, los datos. Va sobre el
   beige de la página, como el índice, y el formulario queda en la hoja
   blanca. En el celular, arriba del formulario. */
/* En el celular las dos columnas se apilan y los datos van al final: arriba
   tiene que quedar el título de la página, que vive en la hoja blanca. */
.flv-texto__cuerpo--con-lateral {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
}

.flv-texto__lateral {
	order: 2;
	margin: var(--flv-sp-5) 0 0;
}

.flv-texto__lateral :is( h2, h3 ) {
	margin: 0 0 14px;
	font-family: var(--flv-font-display);
	font-size: clamp( 20px, 2.4vw, 24px );
	font-weight: var(--flv-fw-regular);
	line-height: 1.2;
	color: var(--flv-color-text);
}

.flv-texto__lateral .flv-contacto {
	grid-template-columns: minmax( 0, 1fr );
	margin: 0;
}

.flv-texto__lateral .flv-contacto__dato {
	background: var(--flv-white);
}

@media ( min-width: 1024px ) {
	.flv-texto__cuerpo--con-lateral {
		display: grid;
		grid-template-columns: 300px minmax( 0, calc( var(--flv-container-narrow) + 2 * var(--flv-texto-pad) ) );
		gap: 48px;
		max-width: calc( 300px + 48px + var(--flv-container-narrow) + 2 * var(--flv-texto-pad) );
	}

	.flv-texto__lateral {
		position: sticky;
		top: 24px;
		align-self: start;
		order: 0;
		margin: 0;
		padding-top: calc( var(--flv-texto-pad) + 8px );
	}

	.flv-texto__cuerpo--con-indice {
		display: grid;
		grid-template-columns: 240px minmax( 0, calc( var(--flv-container-narrow) + 2 * var(--flv-texto-pad) ) );
		gap: 56px;
		max-width: calc( 240px + 56px + var(--flv-container-narrow) + 2 * var(--flv-texto-pad) );
	}

	.flv-texto__indice {
		display: block;
		position: sticky;
		top: 120px;
		align-self: start;
		padding-top: calc( var(--flv-texto-pad) + 8px );
	}

	.flv-texto__indice-movil {
		display: none;
	}
}

/* El texto */
.flv-texto__contenido {
	font-size: var(--flv-fs-md);
	line-height: var(--flv-lh-loose);
	color: var(--flv-color-text);
}

.flv-texto__contenido > :first-child {
	margin-top: 0;
}

.flv-texto__contenido p {
	margin: 0 0 1.1em;
}

.flv-texto__contenido h2 {
	margin: 2.2em 0 0.6em;
	font-family: var(--flv-font-display);
	font-size: var(--flv-fs-xl);
	font-weight: var(--flv-fw-medium);
	line-height: var(--flv-lh-snug);
	color: var(--flv-color-text);
	/* El sitio ya deja libre la cabecera fija al saltar a un ancla
	   (scroll-padding-top en site.css): acá no hay que sumar nada. */
}

.flv-texto__contenido h3 {
	margin: 1.8em 0 0.4em;
	font-family: var(--flv-font-sans);
	font-size: var(--flv-fs-md);
	font-weight: var(--flv-fw-bold);
	line-height: var(--flv-lh-snug);
	color: var(--flv-color-text);
}

.flv-texto__contenido :is( ul, ol ) {
	margin: 0 0 1.1em;
	padding-left: 1.3em;
}

.flv-texto__contenido li {
	margin: 0 0 0.4em;
}

.flv-texto__contenido a {
	color: var(--flv-burgundy-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.flv-texto__contenido strong {
	font-weight: var(--flv-fw-bold);
}

/* ---------------------------------------------------------------
   Contacto: los datos y el formulario (Contact Form 7)
   --------------------------------------------------------------- */

.flv-contacto {
	display: grid;
	gap: 12px;
	margin: 0 0 var(--flv-sp-6);
}

@media ( min-width: 640px ) {
	.flv-contacto {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.flv-contacto__dato {
	padding: 16px 18px;
	border: 1px solid var(--flv-color-border);
	border-radius: var(--flv-radius-md);
	/* Sobre la hoja blanca del texto, en beige. */
	background: var(--flv-color-bg-warm);
}

.flv-contacto dt {
	margin: 0 0 4px;
	font-family: var(--flv-font-ui);
	font-size: 13px;
	font-weight: var(--flv-fw-bold);
	letter-spacing: var(--flv-tracking-wide);
	text-transform: uppercase;
	color: var(--flv-color-text-muted);
}

.flv-contacto dd {
	margin: 0;
	font-size: var(--flv-fs-md);
	line-height: var(--flv-lh-normal);
}

.flv-texto__contenido .wpcf7 {
	margin-top: var(--flv-sp-4);
}

.flv-texto__contenido .wpcf7-form p {
	margin: 0 0 18px;
}

.flv-texto__contenido .wpcf7-form label {
	display: block;
	font-size: var(--flv-fs-base);
	color: var(--flv-brown-800);
}

.flv-texto__contenido .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.flv-texto__contenido .wpcf7-form :is( input[type="text"], input[type="email"], input[type="tel"], textarea ) {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--flv-color-border-strong);
	border-radius: var(--flv-radius-md);
	background: var(--flv-color-surface);
	font-family: var(--flv-font-ui);
	font-size: 16px;
	color: var(--flv-color-text);
}

.flv-texto__contenido .wpcf7-form textarea {
	min-height: 160px;
	resize: vertical;
}

.flv-texto__contenido .wpcf7-form :is( input, textarea ):focus-visible {
	outline: 3px solid var(--flv-burgundy-700);
	outline-offset: 2px;
}

.flv-texto__contenido .wpcf7-submit {
	min-height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--flv-radius-md);
	background: var(--flv-espresso-900);
	font-family: var(--flv-font-ui);
	font-size: 16px;
	font-weight: var(--flv-fw-bold);
	color: var(--flv-white);
	cursor: pointer;
}

.flv-texto__contenido .wpcf7-submit:hover {
	background: var(--flv-brown-800);
}

.flv-texto__contenido .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 15px;
	color: var(--flv-rojo-titulo);
}

.flv-texto__contenido .wpcf7-response-output {
	margin: 16px 0 0 !important;
	padding: 12px 14px !important;
	border-radius: var(--flv-radius-md);
	font-size: var(--flv-fs-base);
}

/* ---------------------------------------------------------------
   Landing de ancho completo (Accesorios Séfora), como la original:
   por cada accesorio, su etiqueta y una grilla de fotos; la grande
   lleva el texto encima.
   --------------------------------------------------------------- */

.flv-landing {
	max-width: var(--flv-container);
	margin: 0 auto;
	padding: var(--flv-sp-7) var(--flv-pad-x) var(--flv-sp-9);
}

/* El título de la página, para buscadores y lectores de pantalla: a la
   vista, cada sección ya dice qué es. */
.flv-landing .flv-landing__oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

.flv-landing .flv-landing__seccion {
	margin: 0 0 var(--flv-sp-7);
}

/* Con la misma letra y el mismo aire que los títulos de sección del sitio. */
.flv-landing .flv-landing__etiqueta {
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--flv-color-border);
	font-family: var(--flv-font-display);
	font-size: clamp( 20px, 2.4vw, 26px );
	font-weight: var(--flv-fw-regular);
	line-height: 1.2;
	color: var(--flv-espresso-900);
}

/* La grilla. En el celular: la foto grande a lo ancho y las demás de a dos. */
.flv-landing .flv-landing__grilla {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 8px;
	margin: 0;
}

.flv-landing__grilla > *,
.flv-landing__principal > .wp-block-image {
	min-width: 0;
	margin: 0;
}

.flv-landing__principal {
	position: relative;
	grid-column: 1 / -1;
}

/* Un poco más alta que las chicas: el texto le come el pie. */
.flv-landing__principal > .wp-block-image {
	aspect-ratio: 3 / 4;
}

.flv-landing__grilla > .wp-block-image {
	aspect-ratio: 3 / 4;
}

.flv-landing__grilla--una-alta > .wp-block-image {
	grid-column: 1 / -1;
	aspect-ratio: 4 / 5;
}

.flv-landing__grilla .wp-block-image {
	overflow: hidden;
	background: var(--flv-color-bg-warm);
}

.flv-landing__grilla .wp-block-image a {
	display: block;
	height: 100%;
}

.flv-landing__grilla .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.flv-landing__grilla .wp-block-image a:hover img {
	transform: scale( 1.03 );
}

@media ( prefers-reduced-motion: reduce ) {
	.flv-landing__grilla .wp-block-image img {
		transition: none;
	}
}

/* En computadora: 12 columnas y 2 filas de alto fijo. La foto grande ocupa
   la mitad (dos tercios si al lado va una sola) y las demás, según la
   variante: de a cuatro, dos altas o dos anchas una sobre otra. */
@media ( min-width: 768px ) {
	.flv-landing .flv-landing__grilla {
		grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
		grid-template-rows: repeat( 2, minmax( 0, 1fr ) );
		gap: 10px;
		height: clamp( 440px, 46vw, 600px );
	}

	.flv-landing__principal {
		grid-column: span 6;
		grid-row: span 2;
	}

	.flv-landing__principal > .wp-block-image {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}

	.flv-landing__grilla > .wp-block-image {
		grid-column: span 3;
		aspect-ratio: auto;
	}

	.flv-landing__grilla--dos-altas > .wp-block-image {
		grid-row: span 2;
	}

	.flv-landing__grilla--dos-anchas > .wp-block-image {
		grid-column: span 6;
	}

	.flv-landing__grilla--una-alta > .flv-landing__principal {
		grid-column: span 8;
	}

	.flv-landing__grilla--una-alta > .wp-block-image {
		grid-column: span 4;
		grid-row: span 2;
	}

	.flv-landing__grilla--sola > .flv-landing__principal {
		grid-column: 1 / -1;
	}
}

/* El texto va sobre la foto grande, tras un velo, como la original: en el
   celular a lo ancho del pie de la foto, y en computadora abajo a la derecha
   (o al medio). El velo del celular es un poco más oscuro porque el texto
   cae sobre toda la foto, no sobre una franja elegida. */
.flv-landing .flv-landing__caja {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 16px 18px 18px;
	background: rgba( 0, 0, 0, 0.45 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 );
	color: var(--flv-white);
}

@media ( min-width: 768px ) {
	.flv-landing .flv-landing__caja {
		left: auto;
		width: max( 45%, 260px );
		max-width: 100%;
		padding: 20px 22px 22px;
		background: rgba( 0, 0, 0, 0.36 );
		text-align: right;
		text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.25 );
	}

	.flv-landing .flv-landing__caja--medio {
		top: 50%;
		bottom: auto;
		transform: translateY( -50% );
	}

	.flv-landing .flv-landing__boton {
		justify-content: flex-end;
	}
}

.flv-landing .flv-landing__caja > * {
	margin: 0;
}

.flv-landing .flv-landing__caja p {
	margin-top: 10px;
	font-size: 14px;
	line-height: var(--flv-lh-normal);
	color: var(--flv-white);
}

.flv-landing .flv-landing__caja .flv-landing__titulo {
	margin-top: 0;
	font-family: var(--flv-font-display);
	font-size: clamp( 24px, 2.6vw, 34px );
	font-weight: var(--flv-fw-regular);
	line-height: 1.2;
}

.flv-landing .flv-landing__caja .flv-landing__sub {
	margin-top: 2px;
	font-family: var(--flv-font-ui);
	font-size: 15px;
}

.flv-landing .flv-landing__boton {
	margin-top: 14px;
}

/* Con la forma de los botones del sitio (.flv-boton), en blanco porque va
   sobre la foto. */
.flv-landing .flv-landing__boton .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 var(--flv-sp-3);
	border: 1.5px solid var(--flv-white);
	border-radius: var(--flv-radius-md);
	background: transparent;
	font-family: var(--flv-font-ui);
	font-size: 14px;
	font-weight: var(--flv-fw-semibold);
	text-shadow: none;
	color: var(--flv-white);
	transition: background var(--flv-dur-fast) var(--flv-ease-out), color var(--flv-dur-fast) var(--flv-ease-out);
}

.flv-landing .flv-landing__boton .wp-block-button__link:hover,
.flv-landing .flv-landing__boton .wp-block-button__link:focus-visible {
	background: var(--flv-white);
	color: var(--flv-color-text);
}

.flv-landing .flv-landing__intro {
	max-width: 760px;
	margin: 0 auto var(--flv-sp-7);
	font-size: var(--flv-fs-md);
	line-height: var(--flv-lh-loose);
	text-align: center;
	color: var(--flv-brown-800);
}

.flv-landing .flv-landing__final {
	justify-content: center;
	margin-top: var(--flv-sp-6);
}

.flv-landing .flv-landing__final .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 var(--flv-sp-3);
	border-radius: var(--flv-radius-md);
	font-family: var(--flv-font-ui);
	font-size: 14px;
	font-weight: var(--flv-fw-semibold);
}