/* Silere · hero.css — banner principal de la portada (slider .cc-hero, pagina-inicio.php).
   Dos slides con los textos originales: 1) "Silere · Momentos de luz" sobre foto clara con
   velo cera a la derecha; 2) ceremonia sobre foto, con velo oscuro para leer el texto.
   Mismo sistema en ambos: contenido alineado al ancho del sitio, botón de la marca,
   flechas y puntos propios. Solo se anima transform/opacity.
   Ancla #page-container #et-boc (2,x,x) contra los estilos por módulo de Divi. */

/* ---- Alto y contenedor --------------------------------------------------------------------- */
/* Divi muestra un slide a la vez (display) y centra el texto con una tabla: .et_pb_container
   (display: table, alto en línea) y una celda centrada. No se toca el display: el alto se
   fija en el contenedor (en una tabla, el alto actúa como mínimo). */
#page-container #et-boc .cc-hero .et_pb_slide {
	padding: 0 !important; /* El slider trae padding en % por breakpoint (51 % abajo en móvil). */
}

/* El contenido arranca en la misma línea que el logo y el resto del sitio. */
#page-container #et-boc .cc-hero .et_pb_slide .et_pb_container {
	width: min(100% - 2 * var(--gvid-cc-margen-lateral), var(--gvid-cc-ancho-contenido));
	max-width: none;
	height: clamp(560px, 78vh, 760px) !important; /* Reemplaza el alto que Divi calcula en línea. */
	margin-inline: auto !important; /* Una regla global deja .et_pb_container con margin: 0 !important. */
}

#page-container #et-boc .cc-hero .et_pb_slider_container_inner {
	width: 100%;
	padding-block: clamp(4rem, 3rem + 4vw, 6rem);
	vertical-align: middle;
}

#page-container #et-boc .cc-hero .et_pb_slide_description {
	max-width: 520px;
	padding: 0;
	text-shadow: none;
}

/* ---- Tipografía común -------------------------------------------------------------------------- */
#page-container #et-boc .cc-hero .et_pb_slide_content p {
	padding-bottom: 0.9rem;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	font-weight: 300;
	line-height: 1.7;
}

#page-container #et-boc .cc-hero .et_pb_slide_content strong {
	font-weight: 400;
}

/* "Momentos de luz": etiqueta espaciada bajo el nombre. Trae tamaño en línea (25px). */
#page-container #et-boc .cc-hero .et_pb_slide_content p:first-child {
	padding-bottom: 1.5rem;
	font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem) !important;
	letter-spacing: 0.4em;
	line-height: 1.4;
}

#page-container #et-boc .cc-hero .et_pb_slide_content p:first-child strong {
	font-weight: 600;
}

/* ---- Botón de la marca (ambos slides) ------------------------------------------------------------ */
#page-container #et-boc .cc-hero .et_pb_button_wrapper {
	margin-top: 1.25rem;
}

#page-container #et-boc .cc-hero a.et_pb_more_button {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 1rem 2.2rem !important; /* El slider fija el padding del botón con !important. */
	border: 1px solid var(--cc-texto);
	border-radius: var(--gvid-cc-radio-pildora);
	background-color: var(--cc-texto);
	box-shadow: 0 14px 28px -14px rgba(24, 48, 40, 0.55);
	font-family: "Quicksand", sans-serif;
	font-size: 0.78rem !important;
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.2 !important;
	text-transform: uppercase;
	color: var(--cc-superficie);
	transition: background-color var(--cc-duracion) var(--cc-curva), color var(--cc-duracion) var(--cc-curva), transform var(--cc-duracion) var(--cc-curva);
}

/* Flecha dibujada: acompaña el movimiento al pasar el mouse. */
#page-container #et-boc .cc-hero a.et_pb_more_button::after {
	content: "" !important;
	position: static;
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin: 0;
	opacity: 1;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--cc-duracion) var(--cc-curva);
}

#page-container #et-boc .cc-hero a.et_pb_more_button:hover {
	background-color: transparent;
	color: var(--cc-texto);
}

#page-container #et-boc .cc-hero a.et_pb_more_button:hover::after {
	transform: translateX(4px);
}

#page-container #et-boc .cc-hero a.et_pb_more_button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* ---- Slide 1: "Silere · Momentos de luz" (fondo claro, texto a la derecha) ------------------------ */
/* Divi centra el bloque con margin: auto; aquí va al borde derecho, sobre el velo cera. */
#page-container #et-boc .cc-hero .et_pb_slide.et_pb_bg_layout_light .et_pb_slide_description {
	margin-right: 0;
	margin-left: auto;
	text-align: right;
}

#page-container #et-boc .cc-hero .et_pb_bg_layout_light .et_pb_slide_title {
	padding-bottom: 0.5rem;
	font-size: clamp(4.5rem, 2.5rem + 6vw, 7.5rem);
	line-height: 1;
}

#page-container #et-boc .cc-hero .et_pb_bg_layout_light .et_pb_slide_title a {
	letter-spacing: 0;
}

#page-container #et-boc .cc-hero .et_pb_bg_layout_light .et_pb_slide_content {
	color: var(--cc-texto-suave);
}

#page-container #et-boc .cc-hero .et_pb_bg_layout_light .et_pb_slide_content p:first-child {
	color: var(--cc-eucalipto-texto);
}

/* ---- Slide 2: ceremonia (foto, velo oscuro, texto a la izquierda) --------------------------------- */
/* El velo va en un pseudo-elemento: la foto queda intacta y el texto siempre se lee. */
#page-container #et-boc .cc-hero .et_pb_slide.et_pb_bg_layout_dark {
	position: relative;
	background-position: center 35%;
}

#page-container #et-boc .cc-hero .et_pb_slide.et_pb_bg_layout_dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(18, 30, 24, 0.72) 0%, rgba(18, 30, 24, 0.45) 38%, rgba(18, 30, 24, 0) 68%);
	pointer-events: none;
}

#page-container #et-boc .cc-hero .et_pb_slide.et_pb_bg_layout_dark .et_pb_container {
	position: relative;
	z-index: 2;
}

/* Sin la caja gris translúcida de Divi detrás del título. */
#page-container #et-boc .cc-hero .et_pb_text_overlay_wrapper {
	padding: 0;
	border-radius: 0;
	background: none;
}

#page-container #et-boc .cc-hero .et_pb_bg_layout_dark .et_pb_slide_description {
	margin-right: auto;
	margin-left: 0;
	text-align: left;
}

#page-container #et-boc .cc-hero .et_pb_bg_layout_dark .et_pb_slide_title {
	padding: 0 0 0.5rem;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem) !important; /* El slider fija el tamaño del H5 por breakpoint. */
	font-style: italic;
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: 0;
	text-wrap: balance;
	color: var(--cc-texto-sobre-oscuro) !important; /* El preset por defecto fuerza el color de títulos. */
}

#page-container #et-boc .cc-hero .et_pb_bg_layout_dark .et_pb_slide_title a {
	color: inherit;
}

#page-container #et-boc .cc-hero .et_pb_bg_layout_dark .et_pb_button_wrapper {
	text-align: left;
}

/* Sobre foto oscura, el botón va en claro. */
#page-container #et-boc .cc-hero .et_pb_bg_layout_dark a.et_pb_more_button {
	border-color: var(--cc-superficie);
	background-color: var(--cc-superficie);
	box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.6);
	color: var(--cc-texto) !important; /* Divi pone blanco los botones de slides oscuros con !important. */
}

#page-container #et-boc .cc-hero .et_pb_bg_layout_dark a.et_pb_more_button:hover {
	background-color: transparent;
	color: var(--cc-superficie) !important;
}

/* ---- Flechas y puntos ------------------------------------------------------------------------------- */
#page-container #et-boc .cc-hero .et-pb-slider-arrows a {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-top: -26px;
	border-radius: 50%;
	background-color: rgba(250, 245, 234, 0.88);
	box-shadow: 0 8px 20px -10px rgba(24, 48, 40, 0.5);
	font-size: 0;
	color: var(--cc-texto);
	transition: opacity var(--cc-duracion) var(--cc-curva), background-color var(--cc-duracion) var(--cc-curva), transform var(--cc-duracion) var(--cc-curva);
}

#page-container #et-boc .cc-hero .et-pb-slider-arrows a::before {
	content: "";
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

#page-container #et-boc .cc-hero .et-pb-slider-arrows a.et-pb-arrow-next::before {
	transform: scaleX(-1);
}

#page-container #et-boc .cc-hero .et-pb-slider-arrows a.et-pb-arrow-prev {
	left: 1.5rem;
}

#page-container #et-boc .cc-hero .et-pb-slider-arrows a.et-pb-arrow-next {
	right: 1.5rem;
}

#page-container #et-boc .cc-hero .et-pb-slider-arrows a:hover {
	background-color: var(--cc-superficie);
	transform: scale(1.06);
}

/* Puntos en una cápsula clara: se ven igual sobre foto clara u oscura. El activo se alarga. */
#page-container #et-boc .cc-hero .et-pb-controllers {
	bottom: 1.5rem;
	left: 50%;
	display: flex;
	gap: 0.5rem;
	width: auto;
	padding: 0.55rem 0.8rem;
	border-radius: var(--gvid-cc-radio-pildora);
	background-color: rgba(250, 245, 234, 0.75);
	transform: translateX(-50%);
}

#page-container #et-boc .cc-hero .et-pb-controllers a {
	width: 8px;
	height: 8px;
	margin: 0;
	border-radius: 999px;
	background-color: rgba(24, 48, 40, 0.3);
	opacity: 1;
	transition: width var(--cc-duracion) var(--cc-curva), background-color var(--cc-duracion) var(--cc-curva);
}

#page-container #et-boc .cc-hero .et-pb-controllers a.et-pb-active-control {
	width: 24px;
	background-color: var(--cc-texto);
}

/* ---- Tableta y móvil ------------------------------------------------------------------------------------ */
/* Las flechas solo caben fuera del ancho de contenido (1200 px + márgenes): por debajo
   tapaban el texto. Se cambia de slide con los puntos o deslizando. */
@media (max-width: 1379px) {
	#page-container #et-boc .cc-hero .et-pb-slider-arrows {
		display: none;
	}
}

@media (max-width: 767px) {
	/* Texto abajo: la foto respira arriba. */
	#page-container #et-boc .cc-hero .et_pb_slide .et_pb_container {
		height: min(82svh, 680px) !important;
	}

	#page-container #et-boc .cc-hero .et_pb_slider_container_inner {
		padding-block: 3rem 5rem;
		vertical-align: bottom;
	}

	/* Texto centrado y abajo, sobre un velo que sube desde el borde inferior. */
	#page-container #et-boc .cc-hero .et_pb_slide_description,
	#page-container #et-boc .cc-hero .et_pb_slide.et_pb_bg_layout_light .et_pb_slide_description,
	#page-container #et-boc .cc-hero .et_pb_bg_layout_dark .et_pb_slide_description {
		max-width: none;
		margin-inline: auto;
		text-align: center;
	}

	#page-container #et-boc .cc-hero .et_pb_button_wrapper,
	#page-container #et-boc .cc-hero .et_pb_bg_layout_dark .et_pb_button_wrapper,
	#page-container #et-boc .cc-hero .et_pb_slide_title,
	#page-container #et-boc .cc-hero .et_pb_slide_content,
	#page-container #et-boc .cc-hero .et_pb_slide_content p {
		text-align: center !important; /* El título trae alineación a la derecha por breakpoint. */
	}

	#page-container #et-boc .cc-hero .et_pb_slide.et_pb_bg_layout_dark::before {
		background: linear-gradient(0deg, rgba(18, 30, 24, 0.82) 0%, rgba(18, 30, 24, 0.45) 45%, rgba(18, 30, 24, 0) 75%);
	}

	#page-container #et-boc .cc-hero .et_pb_bg_layout_light .et_pb_slide_title {
		font-size: clamp(4rem, 3rem + 6vw, 5rem);
	}

	/* En móvil el slide 1 usa su foto oscura propia: textos en claro. */
	#page-container #et-boc .cc-hero .et_pb_bg_layout_light .et_pb_slide_content,
	#page-container #et-boc .cc-hero .et_pb_bg_layout_light .et_pb_slide_content p:first-child {
		color: var(--cc-texto-sobre-oscuro);
	}

	#page-container #et-boc .cc-hero .et_pb_bg_layout_light a.et_pb_more_button {
		border-color: var(--cc-superficie);
		background-color: var(--cc-superficie);
		color: var(--cc-texto) !important; /* El slider fija el color del botón con !important. */
	}

	#page-container #et-boc .cc-hero .et-pb-controllers {
		bottom: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	#page-container #et-boc .cc-hero :is(a.et_pb_more_button, a.et_pb_more_button::after, .et-pb-slider-arrows a, .et-pb-controllers a) {
		transition: none;
	}
}