/* Alhelí Design — sitio de sublimación y estampados DTF
   Paleta, tipografías y motivos tomados del material de marca del taller. */

:root {
	--color-primario: #a9d2e5;
	--color-secundario: #6fa8c7;
	--color-marca: #1e3a5f;
	--color-contraste: #4a86a8;
	--color-base: #ffffff;
	--color-texto: #2b2b2b;
	--color-acento: #d6eaf5;

	/* Aguas: tintes de acuarela derivados de la paleta de marca */
	--agua-1: #eef7fb;
	--agua-2: #d6eaf5;
	--agua-3: #a9d2e5;
	--agua-4: #6fa8c7;
	--agua-5: #4a86a8;
	--perla: #fbfdff;
	--lavanda: #c3d3ea;

	--font-marca: 'Alex Brush', cursive;
	--font-titulo: 'Playfair Display', serif;
	--font-cuerpo: 'Poppins', sans-serif;

	--sombra-suave: 0 10px 30px rgba(30, 58, 95, 0.12);
	--sombra-flotante: 0 22px 45px -18px rgba(30, 58, 95, 0.35);
	--sombra-tarjeta: 0 18px 38px -22px rgba(30, 58, 95, 0.4);
	/* Transición base del sitio: lenta y suave, no un salto */
	--transicion: 0.55s cubic-bezier(0.22, 0.8, 0.28, 1);
	--transicion-corta: 0.35s cubic-bezier(0.22, 0.8, 0.28, 1);
	/* Radios coherentes con el material de marca: formas suaves y orgánicas */
	--radio: 1.5rem;
	--radio-lg: 2rem;
	--alto-cabecera: 4.75rem;
}

/* ---------- Desplazamiento suave para los enlaces internos ---------- */

html {
	/* Tipograf?a fluida: crece con el ancho de la ventana hasta un tope.
	   Los extremos en % respetan el tama?o de fuente que el visitante
	   haya configurado en su navegador. */
	font-size: clamp(100%, 0.49vw + 59.4%, 106.2%);
	scroll-behavior: smooth;
	scroll-padding-top: var(--alto-cabecera);
}

/* Cualquier destino de ancla queda por debajo de la cabecera fija */
[id] {
	scroll-margin-top: var(--alto-cabecera);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-cuerpo);
	color: var(--color-texto);
	background: var(--color-base);
	line-height: 1.6;
}

img {
	display: block;
	max-width: 100%;
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, var(--color-acento) 0%, var(--color-base) 72%);
	padding: 3rem 1rem 4.5rem;
	min-height: 100svh;
	display: flex;
	align-items: center;
}

/* Manchas de acuarela (gradientes suaves, estilo del material de marca) */
.acuarela {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 420px 300px at 88% 12%, rgba(169, 210, 229, 0.55), transparent 70%),
		radial-gradient(ellipse 520px 380px at 5% 88%, rgba(214, 234, 245, 0.85), transparent 70%),
		radial-gradient(ellipse 320px 240px at 60% 95%, rgba(169, 210, 229, 0.35), transparent 70%);
}

/* Corazones y destellos */
.deco {
	position: absolute;
	color: var(--color-secundario);
}

.deco-corazon-1 {
	width: 2rem;
	top: 12%;
	left: 6%;
	transform: rotate(-12deg);
}

.deco-destello-1 {
	width: 1.6rem;
	top: 8%;
	right: 12%;
	color: var(--color-primario);
}

/* Rama botánica */
.rama {
	position: absolute;
	width: 110px;
	left: -20px;
	bottom: -10px;
	transform: rotate(12deg);
	color: var(--color-secundario);
	opacity: 0.6;
}

.hero .contenedor {
	position: relative;
	max-width: min(62rem, 92vw);
	margin: 0 auto;
	display: grid;
	gap: 2.5rem;
	align-items: center;
	width: 100%;
}

/* Wordmark: "Design" serif + "Alhelí" script superpuesto */
.wordmark {
	line-height: 0.95;
}

.w-design {
	font-family: var(--font-titulo);
	font-weight: 600;
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	color: var(--color-texto);
}

.w-alheli {
	font-family: var(--font-marca);
	font-size: clamp(2.5rem, 5.5vw, 3.7rem);
	color: var(--color-secundario);
	margin-left: -0.55rem;
}

.slogan {
	font-family: var(--font-marca);
	/* La cursiva se lee más chica que una sans del mismo tamaño: necesita
	   ir un escalón por encima para verse como corresponde. */
	font-size: 1.9rem;
	line-height: 1.3;
	color: var(--color-marca);
	margin: 0.85rem 0 0.5rem;
}

h1 {
	font-family: var(--font-titulo);
	font-weight: 700;
	font-size: clamp(1.7rem, 4vw, 2.45rem);
	line-height: 1.15;
	color: var(--color-marca);
	margin: 0.75rem 0 1rem;
}

.descripcion {
	max-width: 46ch;
}

.acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.boton-whatsapp,
.boton-instagram,
.boton-marca {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	font-weight: 600;
	padding: 0.8rem 1.6rem;
	border-radius: 999px;
	transition: background-color var(--transicion), color var(--transicion),
		border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}

.boton-whatsapp:hover,
.boton-instagram:hover,
.boton-marca:hover {
	transform: translateY(-2px);
	box-shadow: var(--sombra-tarjeta);
}

.boton-whatsapp:active,
.boton-instagram:active,
.boton-marca:active {
	transform: translateY(0) scale(0.98);
}

.boton-marca {
	background: var(--color-marca);
	color: #fff;
}

.boton-marca:hover {
	background: var(--color-secundario);
}

.boton-whatsapp {
	background: #25d366;
	color: #fff;
}

.boton-whatsapp:hover {
	background: #1eb85a;
}

.boton-instagram {
	border: 2px solid var(--color-secundario);
	color: var(--color-marca);
}

.boton-instagram:hover {
	background: var(--color-acento);
}

.boton-whatsapp svg,
.boton-instagram svg {
	width: 1.3rem;
	height: 1.3rem;
	fill: currentColor;
}

/* Foco visible para navegación por teclado */
:focus-visible {
	outline: 3px solid var(--color-marca);
	outline-offset: 3px;
	border-radius: 4px;
}

.boton-whatsapp:focus-visible,
.boton-instagram:focus-visible {
	border-radius: 999px;
	outline-color: var(--color-marca);
}

/* Marco circular doble, como el sello del material de marca */
.visual {
	display: flex;
	justify-content: center;
}

.anillo {
	position: relative;
	width: min(100%, 24rem);
	border-radius: 50%;
	padding: 0.9rem;
	background: #fff;
	border: 2px solid rgba(111, 168, 199, 0.6);
}

.anillo::before {
	content: '';
	position: absolute;
	inset: -12px;
	border-radius: 50%;
	border: 1.5px solid rgba(111, 168, 199, 0.35);
}

.anillo picture {
	display: block;
}

.anillo img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: var(--sombra-suave);
}

/* ---------- Ubicación ---------- */

.mapa {
	margin-top: 0.75rem;
	border-radius: var(--radio-lg);
	padding: 0.6rem;
	background: var(--color-acento);
	border: 1.5px solid rgba(111, 168, 199, 0.4);
	box-shadow: var(--sombra-suave);
}

.mapa iframe {
	display: block;
	width: 100%;
	height: 18rem;
	border: 0;
	border-radius: var(--radio);
}

.mapa-acciones {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

/* Enlace secundario al mapa externo */
.mapa-fallback {
	color: #526579;
	font-size: 0.8rem;
	font-weight: 400;
	text-decoration-color: rgba(82, 101, 121, 0.45);
	text-underline-offset: 3px;
	transition: color var(--transicion-corta), text-decoration-color var(--transicion-corta);
}

.mapa-fallback:hover {
	color: var(--color-secundario);
}

@media (max-width: 640px) {
	.mapa-acciones {
		flex-wrap: nowrap;
	}

	.mapa-acciones .boton-whatsapp {
		padding: 0.65rem 0.8rem;
		font-size: 0.85rem;
	}
}

@media (max-width: 380px) {
	.mapa-acciones {
		flex-wrap: wrap;
	}
}

/* ---------- Footer ---------- */

.footer {
	background: var(--color-marca);
	color: var(--color-acento);
	padding: 3rem 1rem 2.5rem;
	text-align: center;
	/* El borde superior irregular lo dibuja #contacto con su separador */
}

.footer .marca {
	line-height: 1;
}

.footer .w-design {
	font-size: 1.55rem;
	color: #fff;
	margin-left: 0.35rem;
}

.footer .w-alheli {
	font-size: 2.2rem;
	color: var(--color-primario);
	margin-left: 0;
}

.footer .frase {
	font-size: 0.9rem;
	margin-top: 0.4rem;
}

.footer .legal {
	font-size: 0.8rem;
	margin-top: 1.25rem;
	opacity: 0.8;
}

/* ---------- Responsive ---------- */

@media (min-width: 860px) {
	.hero .contenedor {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

@media (max-width: 520px) {
	.rama {
		display: none;
	}
}

/* Foco visible sobre fondo marino (footer) */
.footer :focus-visible {
	outline-color: var(--color-primario);
}

/* Respeto por quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==================================================================
   Estructura del sitio: cabecera, secciones, tarjetas y páginas
   ================================================================== */

/* ---------- Enlace para saltar al contenido ---------- */

.skip {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 30;
	background: var(--color-marca);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 0.6rem 1.1rem;
	border-radius: 0 0 0.75rem 0.75rem;
}

.skip:focus {
	top: 0;
}

/* ---------- Cabecera ---------- */

.cabecera {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(111, 168, 199, 0.25);
}

.cabecera-interior {
	max-width: min(62rem, 92vw);
	margin: 0 auto;
	padding: 0.6rem 1rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
}

.marca-enlace {
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
}

.marca-enlace .w-design {
	font-size: 1.4rem;
	margin-left: 0.35rem;
}

.marca-enlace .w-alheli {
	font-size: 2rem;
	margin-left: 0;
}

.nav {
	margin-left: auto;
}

.nav ul {
	display: flex;
	gap: 1.1rem;
	list-style: none;
	overflow-x: auto;
}

.nav a {
	display: inline-block;
	color: var(--color-marca);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	padding: 0.3rem 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color var(--transicion-corta), border-color var(--transicion);
}

.nav a:hover {
	color: var(--color-secundario);
}

.nav a[aria-current='page'],
.nav a[aria-current='true'] {
	border-bottom-color: var(--color-secundario);
}

.boton-cabecera {
	padding: 0.5rem 1.15rem;
	font-size: 0.9rem;
}

/* ---------- Secciones genéricas ---------- */

.seccion {
	padding: 4rem 1rem;
}

.seccion-alterna {
	background: linear-gradient(180deg, var(--color-base) 0%, var(--color-acento) 100%);
}

.seccion-interior {
	max-width: min(62rem, 92vw);
	margin: 0 auto;
}

.seccion h2 {
	font-family: var(--font-titulo);
	font-weight: 600;
	font-size: clamp(1.7rem, 4vw, 2.45rem);
	color: var(--color-marca);
}

.seccion h3 {
	font-family: var(--font-titulo);
	font-weight: 600;
	font-size: clamp(1.3rem, 2.6vw, 1.6rem);
	color: var(--color-marca);
}

/* Bloques internos dentro de una misma sección */
.seccion-interior + .seccion-interior {
	margin-top: 3.5rem;
}

.seccion-intro {
	max-width: 62ch;
	margin-top: 0.85rem;
}

.seccion-acciones {
	margin-top: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ---------- Rejilla de tarjetas ---------- */

.rejilla {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
	margin-top: 2rem;
}

/* Para secciones con exactamente tres tarjetas: se reparten el ancho */
.rejilla-3 {
	grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
}

.tarjeta {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	background: #fff;
	border: 1.5px solid rgba(111, 168, 199, 0.35);
	border-radius: var(--radio-lg);
	padding: 1.6rem;
	box-shadow: var(--sombra-suave);
}

.tarjeta[hidden] {
	display: none;
}

.tarjeta .icono {
	width: 3rem;
	height: 3rem;
	color: var(--color-secundario);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tarjeta h3 {
	font-family: var(--font-titulo);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--color-marca);
}

.tarjeta p {
	font-size: 0.95rem;
}

.tarjeta .boton-whatsapp {
	margin-top: auto;
	align-self: flex-start;
	padding: 0.6rem 1.2rem;
	font-size: 0.9rem;
}

.tarjeta .boton-whatsapp svg {
	width: 1.1rem;
	height: 1.1rem;
}

/* ---------- Filtros del catálogo ---------- */

.filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.filtros a {
	display: inline-block;
	background: #fff;
	border: 1.5px solid var(--color-secundario);
	border-radius: 999px;
	color: var(--color-marca);
	font-size: 0.9rem;
	font-weight: 500;
	padding: 0.4rem 1.05rem;
	text-decoration: none;
}

.filtros a:hover {
	background: var(--color-acento);
}

.filtros a[aria-current='true'] {
	background: var(--color-marca);
	border-color: var(--color-marca);
	color: #fff;
}

.aviso-filtro {
	margin-top: 1.5rem;
	padding: 0.9rem 1.1rem;
	background: var(--color-acento);
	border-radius: var(--radio);
	font-size: 0.95rem;
}

.aviso-filtro[hidden] {
	display: none;
}

/* ---------- Pasos ---------- */

.pasos {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin-top: 2rem;
}

.paso {
	background: #fff;
	border: 1.5px dashed rgba(111, 168, 199, 0.55);
	border-radius: var(--radio-lg);
	padding: 1.5rem 1.4rem;
}

.paso-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: var(--color-primario);
	color: var(--color-marca);
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.paso h3 {
	font-family: var(--font-titulo);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--color-marca);
	margin-bottom: 0.35rem;
}

/* ---------- Preguntas frecuentes ---------- */

/* Ocupa todo el ancho del contenedor de la sección, igual que las demás tarjetas */
.faq {
	width: 100%;
	margin-top: 2rem;
}

.faq details {
	background: #fff;
	border: 1.5px solid rgba(111, 168, 199, 0.35);
	border-radius: var(--radio);
	box-shadow: var(--sombra-suave);
	margin-bottom: 0.85rem;
	padding: 0.2rem 1.1rem;
	transition: box-shadow var(--transicion), border-color var(--transicion), background-color var(--transicion);
}

/* Preguntas en sans legible: la serif se veía demasiado fina a este tamaño */
.faq summary {
	cursor: pointer;
	font-family: var(--font-cuerpo);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.45;
	letter-spacing: 0.005em;
	color: var(--color-marca);
	padding: 0.95rem 0;
	transition: color var(--transicion-corta);
}

.faq summary:hover {
	color: var(--color-secundario);
}

.faq details[open] summary {
	border-bottom: 1px solid rgba(111, 168, 199, 0.3);
}

/* Contenedor de la respuesta: se anima su alto al abrir y cerrar */
.faq-respuesta {
	overflow: hidden;
}

.faq details p {
	padding: 0.9rem 0 1rem;
	font-size: 0.95rem;
}

/* ---------- Bloque final de llamada a la acción ---------- */

.cta-final {
	background: var(--color-marca);
	border-radius: var(--radio-lg);
	color: #fff;
	margin-top: 2.5rem;
	padding: 2.5rem 1.5rem;
	text-align: center;
}

.cta-final h2 {
	color: #fff;
	font-size: clamp(1.5rem, 3.4vw, 2rem);
}

.cta-final p {
	margin: 0.75rem auto 0;
	max-width: 52ch;
}

.cta-final .acciones {
	justify-content: center;
}

.cta-final .boton-instagram {
	border-color: var(--color-primario);
	color: #fff;
}

.cta-final .boton-instagram:hover {
	background: rgba(255, 255, 255, 0.12);
}

.cta-final :focus-visible {
	outline-color: var(--color-primario);
}

/* ---------- Datos de contacto ---------- */

.datos-contacto {
	list-style: none;
	display: grid;
	gap: 1.1rem;
	margin-top: 1.75rem;
	max-width: 620px;
}

.datos-contacto li {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
}

.datos-contacto svg {
	flex: 0 0 auto;
	width: 1.4rem;
	height: 1.4rem;
	margin-top: 0.2rem;
	color: var(--color-secundario);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.datos-contacto strong {
	display: block;
	color: var(--color-marca);
}

.datos-contacto a {
	color: var(--color-marca);
}

/* ---------- Pie de página ---------- */

.footer a {
	color: var(--color-primario);
	text-decoration: none;
	transition: color var(--transicion-corta);
}

.footer a:hover {
	text-decoration: underline;
}

.footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1.25rem;
	margin-top: 1.5rem;
	font-size: 0.9rem;
}

.footer-contacto {
	margin-top: 1rem;
	font-size: 0.9rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
	.cabecera-interior {
		gap: 0.6rem;
	}

	.nav {
		order: 3;
		width: 100%;
		margin-left: 0;
	}

	.nav ul {
		flex-wrap: wrap;
		overflow: visible;
	}

	.boton-cabecera {
		margin-left: auto;
	}

	.nosotros-intro {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.nosotros-intro__acciones {
		justify-content: center;
		flex-wrap: nowrap;
		gap: 0.5rem;
		margin-top: 0;
	}

	.nosotros-intro__acciones > a {
		flex: 0 1 auto;
		justify-content: center;
		padding: 0.6rem 0.5rem;
		font-size: 0.72rem;
		white-space: nowrap;
	}
}

@media (min-width: 860px) {
	.columnas {
		display: grid;
		grid-template-columns: 1.05fr 0.95fr;
		gap: 2.5rem;
		align-items: start;
	}

	.nosotros-intro {
		grid-template-areas:
			"texto visual"
			"acciones visual";
		grid-template-rows: auto 1fr;
	}

	.nosotros-intro__texto {
		grid-area: texto;
	}

	.nosotros-intro > .visual {
		grid-area: visual;
	}

	.nosotros-intro__acciones {
		grid-area: acciones;
		margin-top: 0;
	}
}

/* Separación entre párrafos consecutivos dentro de una columna de texto */
.columnas p + p {
	margin-top: 0.9rem;
}

/* ==================================================================
   Sistema decorativo de acuarela
   Motivos dibujados en SVG (flor de alhelí, corazones, destellos,
   ramas, pinceladas y ondas) aplicados como fondos para no repetir
   marcado en cada página.
   ================================================================== */

:root {
	--svg-flor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%236fa8c7' fill-opacity='.5'><ellipse cx='50' cy='30' rx='14' ry='22'/><ellipse cx='50' cy='30' rx='14' ry='22' transform='rotate(72 50 50)'/><ellipse cx='50' cy='30' rx='14' ry='22' transform='rotate(144 50 50)'/><ellipse cx='50' cy='30' rx='14' ry='22' transform='rotate(216 50 50)'/><ellipse cx='50' cy='30' rx='14' ry='22' transform='rotate(288 50 50)'/></g><g fill='%23ffffff' fill-opacity='.55'><ellipse cx='50' cy='34' rx='6' ry='12'/><ellipse cx='50' cy='34' rx='6' ry='12' transform='rotate(72 50 50)'/><ellipse cx='50' cy='34' rx='6' ry='12' transform='rotate(144 50 50)'/><ellipse cx='50' cy='34' rx='6' ry='12' transform='rotate(216 50 50)'/><ellipse cx='50' cy='34' rx='6' ry='12' transform='rotate(288 50 50)'/></g><circle cx='50' cy='50' r='6' fill='%231e3a5f' fill-opacity='.3'/></svg>");

	--svg-destello: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><path d='M0 -12 L3 -3 L12 0 L3 3 L0 12 L-3 3 L-12 0 L-3 -3 Z' fill='%236fa8c7'/></svg>");

	/* Estrella de cinco puntas con uniones redondeadas, como pétalos */
	--svg-estrella: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.00 2.60 L14.70 8.28 L20.94 9.10 L16.37 13.42 L17.53 19.60 L12.00 16.60 L6.47 19.60 L7.63 13.42 L3.06 9.10 L9.30 8.28 Z' fill='%23a9d2e5' stroke='%236fa8c7' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/><circle cx='12' cy='12' r='2' fill='%23ffffff' fill-opacity='.85'/></svg>");

	--svg-corazon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11Z' fill='none' stroke='%236fa8c7' stroke-width='1.6' stroke-linejoin='round'/></svg>");

	--svg-rama: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 160'><path d='M30 158 C27 110 33 54 30 4' fill='none' stroke='%236fa8c7' stroke-width='2' stroke-linecap='round'/><g fill='%23d6eaf5' stroke='%236fa8c7' stroke-width='1.2'><ellipse cx='16' cy='120' rx='12' ry='5' transform='rotate(-32 16 120)'/><ellipse cx='45' cy='100' rx='12' ry='5' transform='rotate(30 45 100)'/><ellipse cx='15' cy='80' rx='11' ry='5' transform='rotate(-28 15 80)'/><ellipse cx='46' cy='60' rx='11' ry='5' transform='rotate(33 46 60)'/><ellipse cx='18' cy='40' rx='10' ry='4' transform='rotate(-26 18 40)'/></g></svg>");

	--svg-pincel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 18'><path d='M4 12 C 30 4, 58 15, 86 8 C 110 2, 130 11, 146 7' fill='none' stroke='%236fa8c7' stroke-width='3.4' stroke-linecap='round' opacity='.75'/><path d='M10 16 C 40 10, 70 19, 104 13' fill='none' stroke='%23a9d2e5' stroke-width='2.2' stroke-linecap='round' opacity='.65'/><circle cx='140' cy='5' r='3' fill='%23a9d2e5'/></svg>");

	--svg-ola: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0 44 C 240 96, 470 4, 720 34 C 960 62, 1200 8, 1440 48 L1440 96 L0 96 Z' fill='%23fbfdff'/><path d='M0 62 C 260 100, 520 30, 780 52 C 1030 72, 1230 30, 1440 64' fill='none' stroke='%23a9d2e5' stroke-width='2' opacity='.5'/></svg>");

	--svg-guia: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'><path d='M0 13 C 20 3, 40 23, 60 13 C 80 3, 100 23, 120 13' fill='none' stroke='%236fa8c7' stroke-width='1.5' opacity='.55'/><circle cx='30' cy='11' r='2' fill='%23a9d2e5'/><circle cx='90' cy='15' r='2' fill='%23a9d2e5'/></svg>");

	/* Grano de papel muy suave para que el blanco no se vea plano */
	--svg-grano: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23g)' opacity='.42'/></svg>");

	/* Anillos de agua: manchas concéntricas al estilo acuarela */
	--anillos-agua:
		radial-gradient(circle at 50% 50%, rgba(111, 168, 199, 0.22) 0 30%, transparent 32%),
		radial-gradient(circle at 50% 50%, rgba(111, 168, 199, 0.13) 0 50%, transparent 52%),
		radial-gradient(circle at 50% 50%, rgba(111, 168, 199, 0.07) 0 70%, transparent 72%);
}

/* ---------- Fondos de agua ---------- */

body {
	background-color: var(--perla);
	background-image:
		radial-gradient(ellipse 1200px 700px at 12% -12%, rgba(169, 210, 229, 0.32), transparent 70%),
		radial-gradient(ellipse 900px 620px at 108% 6%, rgba(214, 234, 245, 0.8), transparent 72%),
		radial-gradient(ellipse 1000px 720px at 50% 118%, rgba(169, 210, 229, 0.26), transparent 74%);
	background-repeat: no-repeat;
}

/* Grano de papel sobre todo el sitio */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 60;
	opacity: 0.26;
	pointer-events: none;
	background-image: var(--svg-grano);
	background-size: 160px 160px;
}

/* ---------- Anclas: los títulos de sección se leen al llegar ---------- */

.seccion,
.seccion-alterna,
.hero {
	position: relative;
}

.seccion {
	overflow: hidden;
}

.seccion-alterna {
	overflow: hidden;
}

/* Flor de agua en la esquina de las secciones alternas */
.seccion-alterna::after {
	content: '';
	position: absolute;
	right: -120px;
	bottom: -110px;
	width: 360px;
	height: 360px;
	background-image: var(--svg-flor);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.5;
	transform: rotate(12deg);
	pointer-events: none;
}

/* La flor de #contacto caía justo encima de la del pie y se leían como la
   misma repetida. En la franja del pie queda sólo la del footer. */
#contacto::after {
	display: none;
}

/* ---------- Hero de portada ---------- */

.hero {
	background-image:
		radial-gradient(circle at 76% 16%, rgba(214, 234, 245, 0.92), transparent 55%),
		radial-gradient(circle at 10% 84%, rgba(169, 210, 229, 0.5), transparent 62%),
		linear-gradient(158deg, var(--agua-2) 0%, var(--perla) 56%, var(--agua-1) 100%);
}

/* Onda al pie del hero: enlaza con la sección siguiente */
.hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 96px;
	z-index: 0;
	pointer-events: none;
	background-image: var(--svg-ola);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 100%;
}

.hero .contenedor {
	z-index: 1;
}

/* Flor grande y difusa detrás del anillo del logo */
.hero .visual {
	position: relative;
}

.hero .visual::before {
	content: '';
	position: absolute;
	inset: -14% -10%;
	background-image: var(--svg-flor);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.32;
	transform: rotate(8deg);
	pointer-events: none;
}

.anillo {
	z-index: 1;
	animation: flotar-suave 8s ease-in-out infinite alternate;
}

.deco-destello-1 {
	animation: girar-lento 26s linear infinite;
}

@keyframes flotar-suave {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-12px);
	}
}

@keyframes girar-lento {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Cabecera con pincelada ---------- */

.cabecera {
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 14px 34px -28px rgba(30, 58, 95, 0.65);
}

.cabecera::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background-image: linear-gradient(
		90deg,
		transparent,
		rgba(111, 168, 199, 0.55),
		rgba(169, 210, 229, 0.85),
		rgba(111, 168, 199, 0.55),
		transparent
	);
}

/* ---------- Pincelada bajo los títulos de sección ---------- */

.seccion h2::after {
	content: '';
	display: block;
	width: 152px;
	height: 18px;
	margin-top: 0.7rem;
	background-image: var(--svg-pincel);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

/* La banda de cierre no lleva pincelada. Ojo: su titular hereda la de
   `.seccion h2::after` porque la banda vive dentro de #contacto, que es una
   sección; por eso hay que apagarla explícitamente. */
.cta-final h2::after {
	display: none;
}

.etiqueta {
	font-family: var(--font-cuerpo);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--agua-5);
	margin-bottom: 0.6rem;
}

/* ---------- Tarjetas con lavado de acuarela ---------- */

.tarjeta {
	position: relative;
	overflow: hidden;
	border-color: rgba(111, 168, 199, 0.3);
	background-image:
		radial-gradient(circle at 100% 0%, rgba(214, 234, 245, 0.9), transparent 55%),
		linear-gradient(165deg, #ffffff 0%, var(--agua-1) 100%);
	background-color: #fff;
	box-shadow: var(--sombra-tarjeta);
	transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.tarjeta::after {
	content: '';
	position: absolute;
	top: -28px;
	right: -28px;
	width: 112px;
	height: 112px;
	background-image: var(--svg-flor);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.36;
	transform: rotate(14deg);
	transition: transform var(--transicion), opacity var(--transicion);
	pointer-events: none;
}

.tarjeta:hover {
	transform: translateY(-6px);
	box-shadow: var(--sombra-flotante);
	border-color: rgba(111, 168, 199, 0.6);
}

.tarjeta:hover::after {
	opacity: 0.55;
	transform: rotate(28deg) scale(1.08);
}

.tarjeta.configurador-abierto {
	z-index: 45;
	overflow: visible;
}

.tarjeta > * {
	position: relative;
}

/* Corazón pequeño en lugar del destello en la tarjeta de personalización */
.tarjeta .icono {
	color: var(--agua-5);
}

/* ---------- Pasos del proceso ---------- */

.paso {
	position: relative;
	overflow: hidden;
	border: 1.5px solid rgba(111, 168, 199, 0.32);
	background-image: linear-gradient(160deg, #ffffff 0%, var(--agua-1) 100%);
	box-shadow: var(--sombra-tarjeta);
	transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.paso:hover {
	transform: translateY(-6px);
	box-shadow: var(--sombra-flotante);
	border-color: rgba(111, 168, 199, 0.6);
}

.paso::before {
	content: '';
	position: absolute;
	right: -46px;
	bottom: -56px;
	width: 180px;
	height: 180px;
	background-image: var(--anillos-agua);
	pointer-events: none;
}

.paso > * {
	position: relative;
}

.paso-numero {
	background-image: linear-gradient(140deg, var(--agua-2), var(--agua-3));
	box-shadow: inset 0 0 0 1px rgba(111, 168, 199, 0.45);
}

/* ---------- Filtros del catálogo ---------- */

.filtros a {
	transition: background-color var(--transicion), color var(--transicion),
		border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}

.filtros a:hover {
	transform: translateY(-2px);
}

.filtros a[aria-current='true'] {
	background-image: linear-gradient(140deg, #24466f, var(--agua-5));
	box-shadow: 0 12px 22px -14px rgba(30, 58, 95, 0.8);
}

/* ---------- Preguntas frecuentes ---------- */

.faq details {
	background-image: linear-gradient(160deg, #ffffff 0%, var(--perla) 100%);
	border-color: rgba(111, 168, 199, 0.28);
	transition: box-shadow var(--transicion), border-color var(--transicion), background-color var(--transicion);
}

.faq details[open] {
	background-image: linear-gradient(160deg, #ffffff 0%, var(--agua-1) 100%);
	border-color: rgba(111, 168, 199, 0.55);
	box-shadow: var(--sombra-flotante);
}

.faq summary {
	position: relative;
	padding-right: 2.4rem;
	list-style: none;
}

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

/* Estrella de cinco puntas que gira al abrir */
.faq summary::after {
	content: '';
	position: absolute;
	right: 0.15rem;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	background-image: var(--svg-estrella);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform var(--transicion), opacity var(--transicion-corta);
}

.faq details[open] summary::after {
	transform: rotate(36deg) scale(1.08);
}

/* ---------- Mapa ---------- */

.mapa {
	background-image: linear-gradient(150deg, #ffffff, var(--agua-2));
}

/* ---------- Bloque final de llamada a la acción ---------- */

.cta-final {
	position: relative;
	overflow: hidden;
	background-image:
		radial-gradient(ellipse 620px 320px at 10% 0%, rgba(169, 210, 229, 0.35), transparent 70%),
		radial-gradient(ellipse 520px 340px at 100% 100%, rgba(111, 168, 199, 0.42), transparent 72%),
		linear-gradient(150deg, #24466f 0%, var(--color-marca) 58%, #16304f 100%);
	box-shadow: var(--sombra-flotante);
}

.cta-final::before {
	content: '';
	position: absolute;
	top: -80px;
	right: -60px;
	width: 300px;
	height: 300px;
	background-image: var(--svg-flor);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.22;
	transform: rotate(-14deg);
	pointer-events: none;
}

.cta-final::after {
	content: '';
	position: absolute;
	left: 7%;
	bottom: 14%;
	width: 22px;
	height: 22px;
	background-image: var(--svg-destello);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.7;
	pointer-events: none;
}

.cta-final > * {
	position: relative;
}

/* ---------- Pie de página ---------- */

.footer {
	position: relative;
	overflow: hidden;
	background-image:
		radial-gradient(ellipse 820px 320px at 12% 0%, rgba(169, 210, 229, 0.22), transparent 70%),
		radial-gradient(ellipse 700px 360px at 100% 100%, rgba(111, 168, 199, 0.3), transparent 72%),
		linear-gradient(165deg, #24466f 0%, var(--color-marca) 62%, #16304f 100%);
}

.footer::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 12px;
	height: 26px;
	opacity: 0.45;
	pointer-events: none;
	background-image: var(--svg-guia);
	background-repeat: repeat-x;
	background-position: center;
	background-size: 120px 26px;
}

.footer::after {
	content: '';
	position: absolute;
	right: -80px;
	bottom: -100px;
	width: 340px;
	height: 340px;
	background-image: var(--svg-flor);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.16;
	transform: rotate(10deg);
	pointer-events: none;
}

.footer .seccion-interior {
	position: relative;
}

.volver-arriba {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 1.4rem;
	font-size: 0.85rem;
}

.volver-arriba::before {
	content: '↑';
	font-size: 1rem;
	line-height: 1;
}

/* ---------- Señal de scroll del hero ---------- */

.scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 5.5rem;
	z-index: 2;
	width: 2.6rem;
	height: 2.6rem;
	margin-left: -1.3rem;
	border: 2px solid var(--agua-4);
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--sombra-flotante);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--transicion), border-color var(--transicion), transform var(--transicion);
}

.scroll-cue:hover {
	background: #fff;
	border-color: var(--agua-4);
	transform: translateY(3px);
}

.scroll-cue span {
	width: 0.75rem;
	height: 0.75rem;
	border-right: 2.5px solid var(--color-marca);
	border-bottom: 2.5px solid var(--color-marca);
	transform: rotate(45deg) translate(-1px, -1px);
	animation: latido-flecha 2.2s ease-in-out infinite;
}

@keyframes latido-flecha {
	0%,
	100% {
		transform: rotate(45deg) translate(-1px, -1px);
	}
	50% {
		transform: rotate(45deg) translate(2px, 2px);
	}
}

/* Entrada con rebote al aparecer + flote suave constante en todo el botón */
html .hero-propuesta .scroll-cue.scroll-cue--visible {
	animation:
		scroll-cue-entrada 1s cubic-bezier(0.22, 0.8, 0.28, 1) 1,
		scroll-cue-flota 1s ease-in-out 1s infinite;
}

@keyframes scroll-cue-entrada {
	0% {
		transform: translateY(-56px) scale(0.5);
		opacity: 0;
	}
	55% {
		transform: translateY(12px) scale(1.06);
		opacity: 1;
	}
	75% {
		transform: translateY(-6px) scale(1);
	}
	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

@keyframes scroll-cue-flota {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(45px);
	}
}

/* ---------- Anillo pequeño (retrato de marca en secciones) ---------- */

.anillo--chico {
	width: min(100%, 17rem);
	animation: none;
}

.visual + .anillo,
.anillo--chico {
	justify-self: center;
}

/* ---------- Ajustes para pantallas chicas ---------- */

@media (max-width: 640px) {
	:root {
		--alto-cabecera: 6.6rem;
	}

	body::after {
		opacity: 0.16;
		background-size: 120px 120px;
	}

	.hero::after {
		height: 58px;
	}

	.seccion-alterna::after,
	.cta-final::before {
		width: 200px;
		height: 200px;
		opacity: 0.28;
	}

	.footer::after {
		opacity: 0.12;
	}

	.seccion h2::after {
		width: 120px;
		height: 14px;
	}

	.scroll-cue {
		display: none;
	}
}

/* ==================================================================
   Pedido: configurador por tarjeta y panel de cotización
   ================================================================== */

/* Los respaldos sólo se ocultan cuando el pedido está funcionando */
.con-carrito .respaldo-cabecera,
.con-carrito .respaldo-cotizar {
	display: none;
}

/* ---------- Botón del pedido (cabecera, siempre visible) ---------- */

.boton-pedido {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 0;
	background: linear-gradient(140deg, #24466f, var(--color-marca));
	color: #fff;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0.55rem 1.05rem;
	border-radius: 999px;
	cursor: pointer;
	transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion);
}

.boton-pedido[hidden] {
	display: none;
}

.boton-pedido:hover {
	transform: translateY(-2px);
	box-shadow: var(--sombra-tarjeta);
}

.boton-pedido:active {
	transform: translateY(0) scale(0.98);
}

.pedido-contador {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.45rem;
	height: 1.45rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: var(--agua-2);
	color: var(--color-marca);
	font-size: 0.78rem;
	font-weight: 600;
}

.pedido-contador[data-vacio='si'] {
	background: rgba(255, 255, 255, 0.28);
	color: #fff;
}

@keyframes latido-contador {
	0% {
		transform: scale(1);
	}
	45% {
		transform: scale(1.22);
	}
	100% {
		transform: scale(1);
	}
}

.pedido-contador.pulso {
	animation: latido-contador 0.55s cubic-bezier(0.22, 0.8, 0.28, 1);
}

/* ---------- Configurador dentro de la tarjeta ---------- */

.boton-agregar {
	margin-top: auto;
	align-self: flex-start;
}

.boton-compacto {
	padding: 0.6rem 1.2rem;
	font-size: 0.9rem;
}

.configurador {
	display: grid;
	gap: 0.8rem;
	margin-top: 0.2rem;
	overflow: visible;
}

.configurador[hidden] {
	display: none;
}

.campo {
	display: grid;
	gap: 0.3rem;
}

.campo label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--color-marca);
}

.campo select,
.campo input[type='text'],
.campo input[type='number'] {
	width: 100%;
	font-family: inherit;
	font-size: 0.92rem;
	color: var(--color-texto);
	background: #fff;
	border: 1.5px solid rgba(111, 168, 199, 0.45);
	border-radius: 0.85rem;
	padding: 0.5rem 0.7rem;
	transition: border-color var(--transicion-corta), box-shadow var(--transicion-corta);
}

.campo select:focus,
.campo input:focus {
	outline: none;
	border-color: var(--color-secundario);
	box-shadow: 0 0 0 3px rgba(111, 168, 199, 0.25);
}

.select-estilizado {
	position: relative;
	width: 100%;
}

.select-estilizado__native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.select-estilizado__boton {
	display: flex;
	width: 100%;
	min-height: 2.8rem;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	padding: 0.55rem 0.8rem;
	border: 1.5px solid rgba(111, 168, 199, 0.45);
	border-radius: 0.85rem;
	background: #fff;
	color: var(--color-texto);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--transicion-corta), box-shadow var(--transicion-corta);
}

.select-estilizado__boton:focus-visible,
.select-estilizado--abierto .select-estilizado__boton {
	outline: none;
	border-color: var(--color-secundario);
	box-shadow: 0 0 0 3px rgba(111, 168, 199, 0.2);
}

.select-estilizado__texto {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.select-estilizado__flecha {
	flex: 0 0 0.55rem;
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid var(--color-marca);
	border-bottom: 2px solid var(--color-marca);
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--transicion-corta);
}

.select-estilizado--abierto .select-estilizado__flecha {
	transform: translateY(2px) rotate(225deg);
}

.select-estilizado__lista {
	position: absolute;
	top: calc(100% + 0.35rem);
	left: 0;
	z-index: 40;
	display: grid;
	width: 100%;
	max-height: min(17rem, 45vh);
	gap: 0.2rem;
	overflow-y: auto;
	padding: 0.4rem;
	border: 1px solid rgba(111, 168, 199, 0.35);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 12px 30px rgba(27, 57, 83, 0.18);
}

.select-estilizado__lista[hidden] {
	display: none;
}

.select-estilizado__opcion {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 0;
	border-radius: 0.7rem;
	background: transparent;
	color: var(--color-texto);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--transicion-corta), color var(--transicion-corta);
}

.select-estilizado__opcion:hover,
.select-estilizado__opcion:focus-visible {
	outline: none;
	background: var(--agua-1);
	color: var(--color-marca);
}

.select-estilizado__opcion[aria-selected='true'] {
	background: var(--agua-2);
	color: var(--color-marca);
	font-weight: 600;
}

.select-estilizado__opcion:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.select-estilizado--abierto {
	z-index: 41;
}

.filtros-movil .select-estilizado__boton {
	min-height: 2.9rem;
	padding: 0.65rem 0.9rem;
	border-radius: 999px;
	color: var(--color-marca);
	font-weight: 600;
}

.filtros-movil .select-estilizado--abierto {
	z-index: 60;
}

.tarjeta.select-con-lista-abierta {
	z-index: 45;
	overflow: visible;
}

.campo-color {
	display: grid;
	gap: 0.55rem;
}

.campo input[type='color'] {
	width: 100%;
	height: 3rem;
	padding: 0.25rem;
	border: 1.5px solid rgba(111, 168, 199, 0.45);
	border-radius: 0.85rem;
	background: #fff;
	cursor: pointer;
}

.campo input[type='color']::-webkit-color-swatch-wrapper {
	padding: 0.15rem;
}

.campo input[type='color']::-webkit-color-swatch {
	border: 0;
	border-radius: 0.55rem;
}

.campo input[type='color']::-moz-color-swatch {
	border: 0;
	border-radius: 0.55rem;
}

.contador {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.contador button {
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	border: 1.5px solid rgba(111, 168, 199, 0.6);
	background: #fff;
	color: var(--color-marca);
	font-family: inherit;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--transicion-corta), transform var(--transicion-corta);
}

.contador button:hover {
	background: var(--agua-1);
	transform: translateY(-1px);
}

.contador input {
	width: 3.8rem;
	text-align: center;
	font-weight: 600;
}

.configurador .error {
	font-size: 0.82rem;
	font-weight: 500;
	color: #9c3b45;
}

.configurador .error[hidden] {
	display: none;
}

.configurador .confirmacion {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--agua-5);
}

.configurador .confirmacion[hidden] {
	display: none;
}

/* ---------- Panel del pedido ---------- */

.pedido-fondo {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(22, 48, 79, 0.45);
	opacity: 0;
	transition: opacity var(--transicion);
}

.pedido-fondo[hidden] {
	display: none;
}

.pedido-fondo.visible {
	opacity: 1;
}

.pedido {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 71;
	width: min(27rem, 94vw);
	display: flex;
	flex-direction: column;
	background-image: linear-gradient(170deg, #ffffff 0%, var(--agua-1) 100%);
	box-shadow: -30px 0 60px -28px rgba(30, 58, 95, 0.6);
	transform: translateX(102%);
	transition: transform var(--transicion);
}

.pedido[hidden] {
	display: none;
}

.pedido.abierto {
	transform: translateX(0);
}

.pedido-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border-bottom: 1px solid rgba(111, 168, 199, 0.3);
}

.pedido-cabecera h2 {
	font-family: var(--font-titulo);
	font-size: 1.35rem;
	color: var(--color-marca);
}

.pedido-cerrar {
	border: 0;
	background: transparent;
	color: var(--color-marca);
	font-size: 1.7rem;
	line-height: 1;
	padding: 0 0.35rem;
	border-radius: 0.6rem;
	cursor: pointer;
	transition: background-color var(--transicion-corta);
}

.pedido-cerrar:hover {
	background: var(--agua-1);
}

.pedido-cuerpo {
	flex: 1;
	overflow-y: auto;
	padding: 1.1rem 1.25rem;
}

.pedido-resumen {
	font-size: 0.85rem;
	margin-bottom: 0.9rem;
}

.pedido-resumen[hidden],
.pedido-vacio[hidden] {
	display: none;
}

.pedido-vacio {
	padding: 2.2rem 0.5rem;
	text-align: center;
	font-size: 0.95rem;
}

.pedido-lineas {
	list-style: none;
	display: grid;
	gap: 0.85rem;
}

.linea {
	display: grid;
	gap: 0.55rem;
	background: #fff;
	border: 1.5px solid rgba(111, 168, 199, 0.35);
	border-radius: var(--radio);
	padding: 0.9rem 1rem;
	box-shadow: var(--sombra-suave);
}

.linea h3 {
	font-family: var(--font-cuerpo);
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--color-marca);
}

.linea-opciones {
	display: block;
	font-size: 0.85rem;
	margin-top: 0.2rem;
}

.linea-pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.linea-pie .contador button {
	width: 1.8rem;
	height: 1.8rem;
	font-size: 1rem;
}

.linea-pie .contador input {
	width: 3rem;
	padding: 0.25rem 0.1rem;
	font-size: 0.9rem;
}

.linea-quitar {
	border: 0;
	background: transparent;
	color: var(--agua-5);
	font-family: inherit;
	font-size: 0.82rem;
	text-decoration: underline;
	cursor: pointer;
	padding: 0.25rem;
}

.boton-enlace {
	border: 0;
	background: transparent;
	color: var(--agua-5);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
	padding: 0.25rem 0;
	justify-self: start;
}

.boton-enlace:hover {
	color: var(--color-marca);
}

.linea-quitar:hover {
	color: var(--color-marca);
}

.pedido-pie {
	display: grid;
	gap: 0.7rem;
	padding: 1.1rem 1.25rem;
	background: #fff;
	border-top: 1px solid rgba(111, 168, 199, 0.3);
}

.pedido-pie label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--color-marca);
}

.pedido-pie textarea {
	width: 100%;
	min-height: 3.1rem;
	font-family: inherit;
	font-size: 0.92rem;
	color: var(--color-texto);
	border: 1.5px solid rgba(111, 168, 199, 0.45);
	border-radius: 0.85rem;
	padding: 0.55rem 0.7rem;
	resize: vertical;
	transition: border-color var(--transicion-corta), box-shadow var(--transicion-corta);
}

.pedido-pie textarea:focus {
	outline: none;
	border-color: var(--color-secundario);
	box-shadow: 0 0 0 3px rgba(111, 168, 199, 0.25);
}

.pedido-aviso {
	font-size: 0.78rem;
	line-height: 1.45;
}

.pedido-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.pedido-acciones .boton-whatsapp,
.pedido-acciones button {
	padding: 0.7rem 1.2rem;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	border-radius: 999px;
	cursor: pointer;
}

.pedido-acciones button {
	border: 1.5px solid var(--color-secundario);
	background: #fff;
	color: var(--color-marca);
	transition: background-color var(--transicion), transform var(--transicion);
}

.pedido-acciones button:hover {
	background: var(--agua-1);
	transform: translateY(-2px);
}

.pedido-acciones button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.pedido-acciones .boton-whatsapp[aria-disabled='true'] {
	opacity: 0.5;
	pointer-events: none;
}

/* El fondo no se desplaza mientras el panel está abierto */
body.pedido-abierto {
	overflow: hidden;
}

@media (max-width: 640px) {
	.pedido {
		width: 100%;
	}

	.boton-pedido {
		font-size: 0.85rem;
		padding: 0.5rem 0.9rem;
	}

	.pedido-cabecera h2 {
		font-size: 1.2rem;
	}
}


/* ==================================================================
   Bordes irregulares entre secciones
   Cada junta es una banda con forma (máscara) y color en degradado:
   la forma vive en --svg-sep-* (sólo geometría, sin color incrustado)
   y el tinte en --sep-color, para poder combinar cualquier forma con
   cualquier tono. La línea del borde va en --svg-sep-*-filo.
   ================================================================== */

:root {
	--alto-separador: clamp(3.5rem, 7vw, 6.5rem);
	--svg-sep-duna: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 78 C 180 40, 330 96, 520 84 C 700 72, 800 30, 980 46 C 1130 60, 1200 96, 1330 88 C 1382 85, 1412 74, 1440 66 L1440 120 L0 120 Z' fill='%23000'/></svg>");
	--svg-sep-duna-filo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 78 C 180 40, 330 96, 520 84 C 700 72, 800 30, 980 46 C 1130 60, 1200 96, 1330 88 C 1382 85, 1412 74, 1440 66' fill='none' stroke='%236fa8c7' stroke-width='2.2' stroke-linecap='round' opacity='.45'/></svg>");
	--svg-sep-encaje: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 96 C 27 96, 39 48, 78 48 C 114 48, 126 104, 150 104 C 180 104, 194 70, 238 70 C 269 70, 279 98, 300 98 C 333 98, 349 40, 398 40 C 430 40, 440 106, 462 106 C 494 106, 509 66, 556 66 C 592 66, 604 100, 628 100 C 657 100, 670 44, 712 44 C 745 44, 756 104, 778 104 C 811 104, 827 72, 876 72 C 910 72, 921 98, 944 98 C 974 98, 988 42, 1032 42 C 1066 42, 1077 106, 1100 106 C 1133 106, 1148 64, 1196 64 C 1229 64, 1240 100, 1262 100 C 1295 100, 1310 50, 1358 50 C 1399 50, 1412 92, 1440 92 L1440 120 L0 120 Z' fill='%23000'/></svg>");
	--svg-sep-encaje-filo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 96 C 27 96, 39 48, 78 48 C 114 48, 126 104, 150 104 C 180 104, 194 70, 238 70 C 269 70, 279 98, 300 98 C 333 98, 349 40, 398 40 C 430 40, 440 106, 462 106 C 494 106, 509 66, 556 66 C 592 66, 604 100, 628 100 C 657 100, 670 44, 712 44 C 745 44, 756 104, 778 104 C 811 104, 827 72, 876 72 C 910 72, 921 98, 944 98 C 974 98, 988 42, 1032 42 C 1066 42, 1077 106, 1100 106 C 1133 106, 1148 64, 1196 64 C 1229 64, 1240 100, 1262 100 C 1295 100, 1310 50, 1358 50 C 1399 50, 1412 92, 1440 92' fill='none' stroke='%236fa8c7' stroke-width='2.2' stroke-linecap='round' opacity='.45'/></svg>");
	--svg-sep-desgarro: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 96 C 60 88, 96 70, 168 74 C 240 78, 268 96, 336 92 C 420 86, 452 58, 528 62 C 600 66, 636 88, 712 84 C 800 79, 838 52, 918 58 C 992 63, 1024 86, 1104 82 C 1184 78, 1216 60, 1296 68 C 1360 74, 1400 90, 1440 84 L1440 120 L0 120 Z' fill='%23000'/></svg>");
	--svg-sep-desgarro-filo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 96 C 60 88, 96 70, 168 74 C 240 78, 268 96, 336 92 C 420 86, 452 58, 528 62 C 600 66, 636 88, 712 84 C 800 79, 838 52, 918 58 C 992 63, 1024 86, 1104 82 C 1184 78, 1216 60, 1296 68 C 1360 74, 1400 90, 1440 84' fill='none' stroke='%236fa8c7' stroke-width='2.2' stroke-linecap='round' opacity='.45'/></svg>");
	--svg-sep-colina: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 104 C 200 100, 420 86, 640 62 C 820 42, 980 36, 1120 44 C 1250 52, 1350 74, 1440 92 L1440 120 L0 120 Z' fill='%23000'/></svg>");
	--svg-sep-colina-filo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 104 C 200 100, 420 86, 640 62 C 820 42, 980 36, 1120 44 C 1250 52, 1350 74, 1440 92' fill='none' stroke='%236fa8c7' stroke-width='2.2' stroke-linecap='round' opacity='.45'/></svg>");
	--svg-sep-gotas: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 96 C 40 96, 60 92, 92 74 C 118 60, 150 62, 176 78 C 196 90, 216 96, 252 96 C 290 96, 306 88, 336 64 C 362 44, 398 48, 420 72 C 436 88, 456 96, 492 96 C 528 96, 548 90, 576 70 C 600 54, 634 58, 656 78 C 672 92, 694 96, 726 96 C 800 96, 860 92, 940 88 C 1060 82, 1240 84, 1440 90 L1440 120 L0 120 Z' fill='%23000'/></svg>");
	--svg-sep-gotas-filo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 96 C 40 96, 60 92, 92 74 C 118 60, 150 62, 176 78 C 196 90, 216 96, 252 96 C 290 96, 306 88, 336 64 C 362 44, 398 48, 420 72 C 436 88, 456 96, 492 96 C 528 96, 548 90, 576 70 C 600 54, 634 58, 656 78 C 672 92, 694 96, 726 96 C 800 96, 860 92, 940 88 C 1060 82, 1240 84, 1440 90' fill='none' stroke='%236fa8c7' stroke-width='2.2' stroke-linecap='round' opacity='.45'/></svg>");
	--svg-sep-medias-lunas: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 64 C 220 20, 420 108, 640 96 C 860 84, 1010 30, 1200 44 C 1320 53, 1390 84, 1440 100 L1440 120 L0 120 Z' fill='%23000'/></svg>");
	--svg-sep-medias-lunas-filo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 64 C 220 20, 420 108, 640 96 C 860 84, 1010 30, 1200 44 C 1320 53, 1390 84, 1440 100' fill='none' stroke='%236fa8c7' stroke-width='2.2' stroke-linecap='round' opacity='.45'/></svg>");
}

.separador {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	height: var(--alto-separador);
	pointer-events: none;
	background-image: linear-gradient(
		180deg,
		var(--sep-desde, var(--sep-color)) 0%,
		var(--sep-color) 88%,
		var(--sep-color) 100%
	);
	-webkit-mask-image: var(--forma);
	mask-image: var(--forma);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* La misma curva, dibujada como línea fina: la familia visual del hero */
.separador::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--filo);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 100%;
}

.separador--duna {
	--forma: var(--svg-sep-duna);
	--filo: var(--svg-sep-duna-filo);
}

.separador--encaje {
	--forma: var(--svg-sep-encaje);
	--filo: var(--svg-sep-encaje-filo);
}

.separador--desgarro {
	--forma: var(--svg-sep-desgarro);
	--filo: var(--svg-sep-desgarro-filo);
}

.separador--colina {
	--forma: var(--svg-sep-colina);
	--filo: var(--svg-sep-colina-filo);
}

.separador--gotas {
	--forma: var(--svg-sep-gotas);
	--filo: var(--svg-sep-gotas-filo);
}

.separador--medias-lunas {
	--forma: var(--svg-sep-medias-lunas);
	--filo: var(--svg-sep-medias-lunas-filo);
}

/* Sin soporte de máscaras: la banda queda como degradado suave, sin forma */
@supports not ((mask-image: url('#')) or (-webkit-mask-image: url('#'))) {
	.separador {
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--sep-color) 100%);
	}

	.separador::after {
		display: none;
	}
}

/* ---------- Gradientes por sección: claro y oscuro alternados ---------- */

/* El gradiente dejó de vivir en la clase y pasó a cada sección */

#pilares {
	background-image:
		radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.9), transparent 60%),
		linear-gradient(135deg, var(--perla) 0%, var(--agua-1) 55%, var(--agua-2) 100%);
}

#catalogo {
	background-image:
		radial-gradient(ellipse 760px 420px at 100% 0%, rgba(255, 255, 255, 0.85), transparent 65%),
		linear-gradient(195deg, var(--agua-1) 0%, var(--agua-2) 60%, var(--agua-3) 100%);
}

#como-funciona {
	background-image:
		radial-gradient(ellipse 700px 430px at 0% 100%, rgba(255, 255, 255, 0.92), transparent 62%),
		linear-gradient(160deg, var(--agua-2) 0%, var(--agua-1) 55%, var(--perla) 100%);
}

#nosotros {
	background-image:
		radial-gradient(ellipse 820px 520px at 88% 8%, rgba(195, 211, 234, 0.5), transparent 68%),
		linear-gradient(150deg, var(--agua-1) 0%, var(--agua-2) 45%, var(--agua-1) 100%);
}

#faq {
	background-image:
		radial-gradient(ellipse 720px 430px at 100% 100%, rgba(214, 234, 245, 0.75), transparent 68%),
		linear-gradient(200deg, var(--perla) 0%, var(--agua-1) 100%);
}

#contacto {
	background-image:
		radial-gradient(ellipse 760px 460px at 12% 10%, rgba(255, 255, 255, 0.9), transparent 65%),
		linear-gradient(160deg, var(--agua-2) 0%, var(--agua-1) 70%, var(--agua-1) 100%);
}

/* ---------- Tinte de cada junta: el color con el que arranca la de abajo ----------
   --sep-color es el color de la sección siguiente (para que el empalme sea
   invisible) y --sep-desde es el dobladillo de acuarela que dibuja el borde. */

#pilares .separador {
	--sep-color: var(--agua-1);
	--sep-desde: var(--agua-3);
}

#catalogo .separador {
	--sep-color: var(--agua-2);
	--sep-desde: var(--agua-3);
}

#como-funciona .separador {
	--sep-color: var(--agua-1);
	--sep-desde: var(--agua-2);
}

#nosotros .separador {
	--sep-color: var(--perla);
	--sep-desde: var(--agua-3);
}

#faq .separador {
	--sep-color: var(--agua-2);
	--sep-desde: var(--agua-3);
}

#contacto .separador {
	--sep-color: var(--color-marca);
	--sep-desde: var(--agua-3);
}

/* ---------- Aire para que ninguna banda tape contenido ---------- */

#pilares,
#catalogo,
#como-funciona,
#nosotros,
#faq {
	padding-bottom: calc(4rem + var(--alto-separador));
}

#contacto {
	padding-bottom: calc(2rem + var(--alto-separador));
}

@media (max-width: 640px) {
	:root {
		--alto-separador: clamp(44px, 13vw, 74px);
	}

	/* En pantallas angostas la forma se estira. Se amplía la máscara para ver
	   menos motivos y más anchos, en vez de dientes comprimidos. */
	.separador {
		-webkit-mask-size: 260% 100%;
		mask-size: 260% 100%;
	}

	.separador::after {
		background-size: 260% 100%;
	}

	/* Las gotas están en la mitad izquierda del dibujo: no se pueden centrar */
	.separador--gotas,
	.separador--gotas::after {
		-webkit-mask-position: left bottom;
		mask-position: left bottom;
		background-position: left bottom;
	}

	#pilares,
	#catalogo,
	#como-funciona,
	#nosotros,
	#faq {
		padding-bottom: calc(3.2rem + var(--alto-separador));
	}

	#contacto {
		padding-bottom: calc(1.6rem + var(--alto-separador));
	}
}

/* ---------- Interruptor de idioma ES/EN (pill-switch) ---------- */
button.lang-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	padding: 0.15rem;
	border: 1.5px solid rgba(111, 168, 199, 0.55);
	border-radius: 999px;
	background: #fff;
	font: 600 0.8rem var(--font-cuerpo);
	cursor: pointer;
	transition: box-shadow var(--transicion-corta);
}
button.lang-switch .lang-knob {
	position: absolute;
	top: 0.15rem;
	bottom: 0.15rem;
	left: 0.15rem;
	width: calc(50% - 0.15rem);
	border-radius: 999px;
	background: var(--color-marca);
	transform: translateX(0);
	transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.28, 1);
}
button.lang-switch.is-en .lang-knob {
	transform: translateX(100%);
}
button.lang-switch .lang-opt {
	position: relative;
	z-index: 1;
	background: transparent;
	border-radius: 999px;
	padding: 0.35rem 0.7rem;
	color: var(--color-marca);
	opacity: 0.55;
	transition: background-color var(--transicion-corta), color var(--transicion-corta), opacity var(--transicion-corta);
}
button.lang-switch:not(.is-en) .lang-opt[data-lang-label="es"],
button.lang-switch.is-en .lang-opt[data-lang-label="en"] {
	color: #fff;
	opacity: 1;
}
button.lang-switch:hover {
	box-shadow: var(--sombra-tarjeta);
}
@media (max-width: 640px) {
	button.lang-switch {
		order: 2;
		margin-left: auto;
	}
	button.lang-switch .lang-opt {
		padding: 0.4rem 0.6rem;
		font-size: 0.75rem;
	}
}

/* ---------- Dinos quién eres (nombre solo en este dispositivo) ---------- */
.recuerdame {
	margin-top: 1.75rem;
	max-width: 620px;
	background: #fff;
	border: 1.5px solid rgba(111, 168, 199, 0.35);
	border-radius: var(--radio-lg);
	padding: 1.6rem;
	box-shadow: var(--sombra-suave);
}

.recuerdame > p {
	margin-top: 0.4rem;
	font-size: 0.95rem;
}

.recuerdame form {
	display: grid;
	gap: 0.8rem;
	margin-top: 1rem;
}

.recuerdame-permiso {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.85rem;
	cursor: pointer;
}

.recuerdame-permiso input {
	flex: 0 0 auto;
	width: 1.2rem;
	height: 1.2rem;
	margin-top: 0.15rem;
	accent-color: var(--color-marca);
}

.recuerdame-nota {
	font-size: 0.8rem;
	opacity: 0.75;
}

.recuerdame .error {
	font-size: 0.85rem;
	font-weight: 500;
	color: #9c3b45;
}

.recuerdame .error[hidden] {
	display: none;
}

.recuerdame [data-recuerdame-saludo] p {
	font-size: 1rem;
}

.recuerdame [data-recuerdame-saludo] strong {
	color: var(--color-marca);
}

.recuerdame [data-recuerdame-saludo] .boton-enlace {
	margin-top: 0.4rem;
}

.recuerdame form[hidden],
.recuerdame [data-recuerdame-saludo][hidden],
.recuerdame [data-recuerdame-intro][hidden] {
	display: none;
}

.recuerdame-calido {
	margin-top: 0.4rem;
	font-size: 0.9rem;
}

/* ---------- Contacto en filas: form | info + mapa completo ---------- */
.contacto-rejilla {
	margin-top: 1.75rem;
}

.contacto-rejilla > .recuerdame {
	margin-top: 0;
	max-width: none;
}

.contacto-info .datos-contacto {
	margin-top: 0;
}

.mapa-bloque {
	margin-top: 2.5rem;
}

@media (min-width: 860px) {
	.contacto-info {
		border-left: 1.5px solid rgba(111, 168, 199, 0.35);
		padding-left: 2.5rem;
	}
}

@media (max-width: 859px) {
	.contacto-info {
		border-top: 1.5px solid rgba(111, 168, 199, 0.35);
		padding-top: 2rem;
	}
}