/*
Theme Name:   L'Estrella Child
Theme URI:    https://lestrelladenamarta.com
Description:  Tema hijo de Astra para la web de L'Estrella de na Marta.
Author:       L'Estrella de na Marta
Template:     astra
Version:      1.5.12
Requires at least: 6.0
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  lestrella
*/

/*
 * Estilos globales del proyecto.
 *
 * Regla 3 de CLAUDE.md: el diseño global (colores, tipografías) vive en un
 * solo sitio: estilos globales de Elementor/Astra y este archivo. Los estilos
 * propios del proyecto van aquí, no sueltos página a página.
 *
 * Fuente de los colores (paleta C «Noche estrellada», T-039):
 * - Kit de Elementor (post 20): primary, secondary, text, accent y colores propios.
 * - Personalizador de Astra: paleta global (--ast-global-color-0…8).
 * Este archivo solo añade lo que ni el kit ni Astra cubren: foco visible y
 * tokens con nombre para el CSS propio. Si cambia un color, cámbialo primero
 * en el kit o en Astra y luego aquí. Guía: docs/diseno/guia-estilo.md.
 */

/* ==========================================================================
   1. Tokens de la paleta C
   ========================================================================== */

:root {
	/* Nombres según docs/diseno/guia-estilo.md, sección 0.1. */

	/* Acción: botón principal, siempre con texto tinta (kit: primary) */
	--lestrella-accion: #2DD4C5;
	--lestrella-accion-hover: #1FBFB1;      /* Hover sobre claro (kit: c0a1f01) */
	--lestrella-accion-hover-osc: #5CE3D7;  /* Hover sobre oscuro (kit: c0a1f02) */

	/* Texto */
	--lestrella-enlace: #00756B;            /* Enlaces y estado «info» (Astra 0, kit: accent) */
	--lestrella-tinta: #0F172A;             /* Títulos, texto de botón, foco sobre claro (Astra 1 y 2, kit: 3d7fc214) */
	--lestrella-texto: #3F4A5A;             /* Cuerpo (Astra 3, kit: text) */

	/* Fondos */
	--lestrella-papel: #FAF8F4;             /* Fondo de página (Astra 4) */
	--lestrella-blanco: #FFFFFF;            /* Tarjetas y secciones blancas (Astra 5, kit: 7b490eda) */
	--lestrella-niebla: #EAF5F4;            /* Secciones alternas, círculos de iconos (Astra 6) */
	--lestrella-linea: #E4E7EC;             /* Bordes y separadores (kit: c0a1f08) */

	/* Oscuros */
	--lestrella-noche: #14213D;             /* Cabecera, pie, botón secundario (Astra 7, kit: secondary) */
	--lestrella-noche-2: #1B2D52;           /* Bloques oscuros / ensayo (kit: c0a1f03) */
	--lestrella-velo: rgba(20, 33, 61, 0.88); /* Velo azul noche sobre fotos */

	/* Oro: solo decorativo, nunca texto ni icono sobre claro (1,77:1 con blanco) */
	--lestrella-oro: #F4B942;               /* Astra 8, kit: c0a1f04 */
	--lestrella-oro-texto: #8A5A00;         /* Texto en oro y estado «aviso» (kit: c0a1f05) */

	/* Estados */
	--lestrella-exito: #1E7A46;             /* kit: c0a1f06 */
	--lestrella-error: #B42318;             /* kit: c0a1f07 */
	--lestrella-aviso: #8A5A00;
	--lestrella-info: #00756B;

	/* Pie: texto secundario (blanco al 75 %: 9,51:1 sobre noche). Lo usa el HTML del pie (HFE 201). */
	--lestrella-pie-texto: rgba(255, 255, 255, 0.75);

	/* Foco: anillo de 3 px separado 3 px, con halo del color contrario */
	--lestrella-foco: var(--lestrella-tinta);
	--lestrella-foco-halo: var(--lestrella-papel);
	--lestrella-foco-ancho: 3px;
	--lestrella-foco-separacion: 3px;
}

/* Zonas oscuras: cabecera, llamada y pie de HFE, y cualquier bloque marcado
   con la clase .lestrella-oscuro (Elementor › Avanzado › Clases CSS). */
.site-header,
.hfe-before-footer-wrap,
.footer-width-fixer,
.site-footer,
.lestrella-oscuro {
	--lestrella-foco: var(--lestrella-accion);
	--lestrella-foco-halo: var(--lestrella-noche);
}

/* ==========================================================================
   2. Foco visible (WCAG 2.4.7 y 2.4.11; hallazgo 7 de la auditoría)
   --------------------------------------------------------------------------
   Anillo de 3 px separado 3 px del elemento, más un halo de 3 px del color
   contrario pegado al elemento (técnica C40 de WCAG): sobre claro se ve el
   anillo tinta (16,8:1); sobre fotos o fondos oscuros se ve el halo claro.
   En cabecera y pie, anillo turquesa (8,6:1 sobre noche).
   Astra quita el outline en button:focus e input; "body" sube la
   especificidad para ganarle sin !important.
   ========================================================================== */

body :focus-visible,
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body [tabindex]:focus-visible,
body .elementor-button:focus-visible {
	outline: var(--lestrella-foco-ancho) solid var(--lestrella-foco);
	outline-offset: var(--lestrella-foco-separacion);
	box-shadow: 0 0 0 var(--lestrella-foco-separacion) var(--lestrella-foco-halo);
}

/* ==========================================================================
   3. Iconos propios ([lestrella_icono], inc/iconos.php)
   --------------------------------------------------------------------------
   Trazo 1,75 en currentColor sobre rejilla de 24 px. La estrella de «socio»
   y «eventos» (__acento) va rellena de oro; sobre oscuro, sin relleno.
   Guía: docs/diseno/guia-estilo.md, sección 0.6.
   ========================================================================== */

.lestrella-icono {
	display: inline-grid;
	place-items: center;
	color: inherit;
	line-height: 0;
	vertical-align: middle;
}

.lestrella-icono svg {
	display: block;
	flex: none;
}

/* Tarjetas: círculo niebla de 56 px con el icono en azul noche (14,35:1). */
.lestrella-icono--circulo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--lestrella-niebla);
	color: var(--lestrella-noche);
	flex: none;
}

/* Sobre fondos oscuros: icono turquesa; con círculo, blanco al 8 %. */
.lestrella-icono--oscuro {
	color: var(--lestrella-accion);
}

.lestrella-icono--circulo.lestrella-icono--oscuro {
	background: rgba(255, 255, 255, 0.08);
}

.lestrella-icono__acento {
	fill: var(--lestrella-oro);
}

.lestrella-icono--oscuro .lestrella-icono__acento {
	fill: none;
}

/* ==========================================================================
   4. Portada y componentes de página (disenador, portada nueva, 2026-11-07)
   --------------------------------------------------------------------------
   Bloque añadido por el diseñador; el resto del archivo es compartido con
   desarrollador-wp. Clases que se ponen en Elementor (Avanzado › Clases CSS)
   y sirven para cualquier página. Los colores son los globales del kit
   (--e-global-color-*) o de Astra (--ast-global-color-*); aquí no hay hex.
   Guía: docs/diseno/guia-estilo.md, sección 0.7 (componentes).
   ========================================================================== */

:root {
	/* Azul noche (Astra 7) en rgb, para los velos con transparencia. */
	--lestrella-velo-rgb: 20, 33, 61;
}

/* 4.1 Escala tipográfica (Lexend 600 por los globales de Astra; aquí solo tamaño y peso).
   «.elementor-widget» sube la especificidad para ganar al interlineado de Astra (1,4 em en H1). */
.elementor-widget.lestrella-h1 .elementor-heading-title {
	font-size: clamp(34px, 5vw, 58px);
	line-height: 1.15;
	font-weight: 600;
	max-width: 16ch;
}

.elementor-widget.lestrella-h2 .elementor-heading-title {
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.15;
	font-weight: 600;
}

.elementor-widget.lestrella-h3 .elementor-heading-title {
	font-size: 20px;
	line-height: 1.25;
	font-weight: 600;
}

/* Antetítulo: DM Sans 600, 13 px, mayúsculas. Color por el widget (turquesa sobre oscuro). */
.elementor-widget.lestrella-antetitulo .elementor-heading-title {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lestrella-entradilla p {
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.6;
	max-width: 52ch;
}

.lestrella-texto-largo {
	font-size: 17px;
	line-height: 1.8;
}

/* Párrafos dentro del editor de texto: sin el margen final de Astra en el último. */
.lestrella-seccion .elementor-widget-text-editor p:last-child,
.lestrella-hero .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Texto destacado dentro de la caja del ensayo. */
.elementor-widget.lestrella-destacado .elementor-heading-title {
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.15;
	font-weight: 700;
}

/* Fecha de evento: Lexend 700, 13 px, mayúsculas, color enlace (por el widget). */
.elementor-widget.lestrella-fecha .elementor-heading-title {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Etiqueta «Evento pasado»: fondo línea con texto cuerpo. */
.elementor-widget.lestrella-etiqueta .elementor-heading-title {
	display: inline-block;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 8px;
	border-radius: 5px;
	background: var(--e-global-color-c0a1f08);
	color: var(--ast-global-color-3);
}

/* 4.2 Botones (guía 0.5): píldora, Lexend 700, 15 px, borde de 2 px, 44 px de alto mínimo.
   Los colores del principal vienen del kit (turquesa con texto tinta).
   Se sube la especificidad para ganar al botón del kit y al de Astra. */
body .elementor-widget.lestrella-boton .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.85em 1.4em;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}

body .elementor-widget.lestrella-boton--peq .elementor-button {
	font-size: 13px;
	padding: 0.7em 1.1em;
}

body .elementor-widget.lestrella-boton .elementor-button:hover {
	transform: translateY(-1px);
}

/* Principal sobre oscuro: hover más claro (kit c0a1f02). */
body .lestrella-oscuro .elementor-widget.lestrella-boton:not(.lestrella-boton--contorno-osc) .elementor-button:hover,
body .lestrella-oscuro .elementor-widget.lestrella-boton:not(.lestrella-boton--contorno-osc) .elementor-button:focus-visible {
	background-color: var(--e-global-color-c0a1f02);
}

/* Secundario sobre claro: contorno y texto azul noche; hover relleno. */
body .elementor-widget.lestrella-boton--contorno .elementor-button {
	background-color: transparent;
	color: var(--e-global-color-secondary);
	border-color: var(--e-global-color-secondary);
}

body .elementor-widget.lestrella-boton--contorno .elementor-button:hover,
body .elementor-widget.lestrella-boton--contorno .elementor-button:focus-visible {
	background-color: var(--e-global-color-secondary);
	color: var(--e-global-color-7b490eda);
}

/* Secundario sobre oscuro: contorno blanco al 60 %; hover turquesa. */
body .elementor-widget.lestrella-boton--contorno-osc .elementor-button {
	background-color: transparent;
	color: var(--e-global-color-7b490eda);
	border-color: color-mix(in srgb, var(--e-global-color-7b490eda) 60%, transparent);
}

body .elementor-widget.lestrella-boton--contorno-osc .elementor-button:hover,
body .elementor-widget.lestrella-boton--contorno-osc .elementor-button:focus-visible {
	background-color: transparent;
	color: var(--e-global-color-primary);
	border-color: var(--e-global-color-primary);
}

/* Enlace «Ver más →». */
.lestrella-mas {
	font-weight: 700;
	text-decoration: none;
	color: var(--e-global-color-accent);
}

.lestrella-mas::after {
	content: " →";
}

.lestrella-mas:hover {
	text-decoration: underline;
}

/* 4.3 Tarjetas: blancas con línea y radio 14 px; el pie de la tarjeta se va abajo. */
.lestrella-tarjeta.e-con {
	border: 1px solid var(--e-global-color-c0a1f08);
	border-radius: 14px;
	overflow: hidden;
	height: 100%;
}

.lestrella-tarjeta__cuerpo > .elementor-widget:last-child {
	margin-top: auto;
}

.lestrella-tarjeta__img img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.lestrella-tarjeta__img--izq img {
	object-position: left center;
}

/* Foto de sección (retrato de Marta). */
.lestrella-foto img {
	display: block;
	width: 100%;
	border-radius: 14px;
	object-fit: cover;
}

.lestrella-foto--retrato img {
	aspect-ratio: 4 / 5;
}

/* Iconos en widgets Shortcode: sin espacio extra; junto a títulos, color enlace. */
.lestrella-icono-widget .elementor-shortcode {
	line-height: 0;
}

.lestrella-icono-titulo .lestrella-icono {
	color: var(--e-global-color-accent);
}

.lestrella-titulo-icono > .elementor-widget {
	width: auto;
}

/* 4.4 Cabecera de portada: foto con velo azul noche en degradado (guía 0.5).
   Escritorio: 0,92 → 0,86 bajo el texto y 0,40 en el lado de la foto.
   Móvil (≤ 767 px, corte de Elementor): uniforme a 0,88. */
.lestrella-hero.e-con {
	position: relative;
	isolation: isolate;
}

.lestrella-hero.e-con::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg,
		rgba(var(--lestrella-velo-rgb), 0.92) 0%,
		rgba(var(--lestrella-velo-rgb), 0.86) 50%,
		rgba(var(--lestrella-velo-rgb), 0.4) 100%);
}

.lestrella-hero .elementor-widget-text-editor {
	color: inherit;
}

@media (max-width: 767px) {
	.lestrella-hero.e-con::before {
		background: rgba(var(--lestrella-velo-rgb), 0.88);
	}
}

/* Llamada final: velo uniforme de 0,82. */
.lestrella-cta.e-con {
	position: relative;
	isolation: isolate;
	text-align: center;
}

.lestrella-cta.e-con::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(var(--lestrella-velo-rgb), 0.82);
}

/* 4.5 Bloque oscuro del ensayo: caja translúcida y ficha con filete turquesa. */
.lestrella-caja-osc.e-con {
	background: color-mix(in srgb, var(--e-global-color-7b490eda) 6%, transparent);
	border: 1px solid color-mix(in srgb, var(--e-global-color-7b490eda) 14%, transparent);
	border-radius: 14px;
}

.lestrella-ficha {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
	font-size: 15px;
}

.lestrella-ficha li {
	border-left: 3px solid var(--e-global-color-primary);
	padding-left: 10px;
}

/* Franja de confianza bajo la llamada final; marca de verificación dibujada (sin glifos). */
.lestrella-confianza {
	list-style: none;
	margin: 10px auto 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 22px;
	max-width: 900px;
	font-size: 14px;
}

.lestrella-confianza li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.lestrella-confianza li::before {
	content: "";
	flex: none;
	width: 5px;
	height: 10px;
	margin-top: -3px;
	border: solid var(--e-global-color-primary);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* La portada ya trae su propia llamada final: se oculta solo allí la de HFE
   (plantilla 201, sección 53badde); el pie de datos sigue igual. */
body.home .elementor-201 .elementor-element-53badde {
	display: none;
}

/* Saltos a anclas: margen para que el título no quede pegado al borde. */
#la-causa,
#ensayo,
#eventos,
#ayudar,
#dona {
	scroll-margin-top: 16px;
}

@media (prefers-reduced-motion: no-preference) {
	html:has(body.home) {
		scroll-behavior: smooth;
	}
}

/* Botón «Dona» de la cabecera de Astra: nunca parte la palabra (en móvil compartía sitio con el logo). */
.ast-header-button-1 .ast-custom-button {
	white-space: nowrap;
}

/* Foco del botón «Dona» de la cabecera: Astra le pone un punteado fino
   (.ast-builder-button-wrap .ast-custom-button-link:focus); se usa el anillo del proyecto. */
body .ast-builder-button-wrap .ast-custom-button-link {
	display: inline-block;
	border-radius: 999px;
}

body .ast-builder-button-wrap:has(.ast-custom-button-link:focus) {
	outline: 0;
}

body .ast-builder-button-wrap .ast-custom-button-link:focus-visible {
	outline: var(--lestrella-foco-ancho) solid var(--lestrella-foco);
	outline-offset: var(--lestrella-foco-separacion);
	box-shadow: 0 0 0 var(--lestrella-foco-separacion) var(--lestrella-foco-halo);
}

/* 4.6 Bloque editorial con retrato entero (historia de la portada, #la-causa; 2026-11-08).
   Composición «1 · Editorial» de docs/diseno/propuesta-bloque-historia.md. Guía 0.7.
   - lestrella-foto--entera (Imagen, junto a lestrella-foto): ilustración entera en 2:3,
     sin recorte, de hasta 360 px y pegada al lado del texto; en móvil, centrada a 220 px.
   - lestrella-filete (Encabezado): filete corto de 48 × 3 px en color enlace sobre el título.
   - lestrella-columna-texto (Contenedor): columna de lectura de 600 px como máximo
     (unos 60 caracteres por línea con la entradilla de 20 px). Dentro, la entradilla
     ocupa toda la columna; su color (tinta) lo pone el widget con el global del kit. */
.elementor-widget.lestrella-foto--entera {
	justify-self: end;
	width: min(360px, 100%);
	max-width: 360px;
}

.lestrella-foto--entera img {
	aspect-ratio: 2 / 3;
	height: auto;
}

.elementor-widget.lestrella-filete::before {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-bottom: 20px;
	border-radius: 2px;
	background-color: var(--e-global-color-accent);
}

.e-con.lestrella-columna-texto {
	max-width: 600px;
}

/* Título repartido en líneas parecidas («propósito» no queda sola). */
.lestrella-columna-texto .elementor-heading-title {
	text-wrap: balance;
}

.lestrella-columna-texto .lestrella-entradilla p {
	font-size: clamp(18px, 1.8vw, 20px);
	line-height: 1.65;
	max-width: none;
}

@media (max-width: 767px) {
	.elementor-widget.lestrella-foto--entera {
		justify-self: center;
		width: min(220px, 62%);
	}
}

/* 4.7 Formularios (WPForms): nota de obligatorios y aviso de privacidad en Contacto (T-029). */
.wpforms-container .lestrella-nota-formulario {
	margin: 0 0 1em;
	font-size: 0.875rem;
	color: var(--lestrella-texto);
}

.wpforms-container .lestrella-aviso-formulario {
	margin: 0.75em 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--lestrella-texto);
}

.wpforms-container .lestrella-aviso-formulario a {
	color: var(--lestrella-enlace);
	text-decoration: underline;
}

/* ==========================================================================
   5. Páginas de donar (688) y Contacto (386) (disenador, 2026-11-08, T-044)
   --------------------------------------------------------------------------
   Componentes nuevos para cabeceras cortas, pestañas de donación, preguntas
   frecuentes con <details>, franja de datos y lista de datos de contacto.
   Colores de los globales del kit (--e-global-color-*); aquí no hay hex.
   Guía: docs/diseno/guia-estilo.md, sección 0.7.
   Detalle: docs/diseno/2026-11-08-donar-contacto.md.
   ========================================================================== */

/* 5.1 Cabecera corta (fondo azul noche por el widget, sin foto ni alto mínimo).
   El H1 puede ocupar algo más de ancho que en la portada. */
.lestrella-cabecera-corta .elementor-widget.lestrella-h1 .elementor-heading-title {
	max-width: 20ch;
	text-wrap: balance;
}

/* 5.2 Pestañas «Mensual / Puntual» (Pestañas anidadas de Elementor, clase lestrella-pestanas).
   Píldoras de 44 px que llenan la fila; colores y familia por los globales del widget. */
.elementor-widget.lestrella-pestanas .e-n-tab-title {
	min-height: 44px;
	padding: 10px 16px;
	border-radius: 999px;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

.elementor-widget.lestrella-pestanas .e-n-tab-title-text {
	font-size: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* 5.3 Bloque de donación: en el DOM, la tarjeta va primero (en móvil y tableta, arriba);
   en escritorio, el texto «Qué hacemos…» pasa a la columna izquierda. */
@media (min-width: 1025px) {
	.lestrella-donar > .lestrella-donar__texto {
		order: -1;
	}
}

.lestrella-donar > .lestrella-tarjeta.e-con {
	height: auto;
}

/* Franja de confianza con iconos (candado…) en vez de la marca dibujada. */
.lestrella-confianza--iconos {
	justify-content: flex-start;
	margin: 0;
	color: var(--e-global-color-text);
}

.lestrella-confianza--iconos li::before {
	content: none;
}

.lestrella-confianza--iconos .lestrella-icono {
	color: var(--e-global-color-accent);
}

/* Anclas internas de las dos páginas. */
#formulario-donar,
#otras-formas,
#preguntas,
#vias {
	scroll-margin-top: 16px;
}

/* La página de donar ya es la llamada a donar: se oculta allí la de HFE
   (plantilla 201, sección 53badde), como en la portada; el pie de datos sigue. */
body.page-id-688 .elementor-201 .elementor-element-53badde {
	display: none;
}

/* 5.4 Preguntas frecuentes con <details> nativo (teclado: Tab y Intro/Espacio). */
.e-con.lestrella-faq-columna {
	max-width: 760px;
}

.lestrella-faq details {
	border-bottom: 1px solid var(--e-global-color-c0a1f08);
}

.lestrella-faq details:first-child {
	border-top: 1px solid var(--e-global-color-c0a1f08);
}

.lestrella-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	padding: 16px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--e-global-color-3d7fc214);
}

.lestrella-faq summary::-webkit-details-marker {
	display: none;
}

/* Chevrón dibujado (sin glifos): abajo cerrado, arriba abierto. */
.lestrella-faq summary::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-right: 4px;
	border: solid var(--e-global-color-accent);
	border-width: 0 2px 2px 0;
	transform: translateY(-3px) rotate(45deg);
	transition: transform 0.2s;
}

.lestrella-faq details[open] > summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.lestrella-faq summary:hover {
	color: var(--e-global-color-accent);
}

.lestrella-faq__respuesta {
	padding: 0 0 20px;
	max-width: 65ch;
}

.lestrella-faq__respuesta p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.lestrella-faq summary::after {
		transition: none;
	}
}

/* Enlaces dentro de texto corrido de estas piezas: color enlace y subrayado
   (el color solo no basta frente al texto de cuerpo). */
.lestrella-faq a,
.lestrella-datos-contacto a,
.lestrella-tarjeta .elementor-widget-text-editor p a:not(.lestrella-mas) {
	color: var(--e-global-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* 5.5 Franja de datos de la asociación (texto pequeño al final de donar y bajo los datos de Contacto). */
.lestrella-datos-asociacion {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--e-global-color-text);
}

.lestrella-franja-datos.e-con {
	border-top: 1px solid var(--e-global-color-c0a1f08);
}

/* 5.6 Datos de contacto: icono en círculo niebla de 40 px, clave en mayúsculas y valor en tinta. */
.lestrella-datos-contacto {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: grid;
	gap: 16px;
}

.lestrella-datos-contacto li {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-weight: 600;
	color: var(--e-global-color-3d7fc214);
}

.lestrella-datos-contacto .lestrella-icono--circulo {
	width: 40px;
	height: 40px;
}

.lestrella-datos-contacto strong {
	display: block;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--e-global-color-text);
}

.lestrella-datos-contacto a {
	display: inline-block;
	min-height: 24px;
}

/* 5.7 Vías por motivo (Contacto): sin pie de tarjeta, el texto sigue al título. */
.lestrella-vias .lestrella-tarjeta__cuerpo > .elementor-widget:last-child {
	margin-top: 0;
}

/* 5.8 Correo con botón «Copiar correo» (Contacto, tema hijo 1.5.7). El botón sale oculto y lo
   muestra js/copiar.js; chip de 36 px como los de compartir de eventos, sin el relleno, el radio
   ni los colores de foco de los botones de Astra. El aviso va en role="status" (color enlace). */
.lestrella-copiar-fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.lestrella-datos-contacto a {
	overflow-wrap: anywhere;
}

body button.lestrella-copiar,
body button.lestrella-copiar:hover,
body button.lestrella-copiar:focus {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--lestrella-linea);
	border-radius: 999px;
	background: var(--lestrella-blanco);
	color: var(--lestrella-tinta);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}

body button.lestrella-copiar:hover {
	border-color: var(--lestrella-noche);
}

body button.lestrella-copiar:focus-visible {
	outline: 3px solid var(--lestrella-tinta);
	outline-offset: 2px;
}

body button.lestrella-copiar[hidden] {
	display: none;
}

.lestrella-copiar__aviso {
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--lestrella-enlace);
}

.lestrella-copiar__aviso:empty {
	display: none;
}