/*
Theme Name:   SPIRUP Child
Theme URI:    https://frsoluciones.com
Description:  Child theme de Astra para el ecommerce SPIRUP. Desarrollo en PHP puro.
Author:       FR Soluciones
Author URI:   https://frsoluciones.com
Template:     astra
Version:      1.0.0
Text Domain:  astra-child
*/

/* ==========================================================================
   Variables de marca SPIRUP
   ========================================================================== */
:root {
	--spirup-dark:   #17343d;
	--spirup-teal:   #2f918f;
	--spirup-mint:   #d5e9e1;
	--spirup-orange: #f5a623;
	--spirup-white:  #ffffff;
	--spirup-max:    1240px;
}

/* ==========================================================================
   Base
   ========================================================================== */
body.astra-child,
.spirup-site {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--spirup-dark);
}
.spirup-site * { box-sizing: border-box; }
.spirup-site { overflow-x: hidden; }

/* Scroll suave al navegar a secciones por ancla (#por-que, #beneficios...) */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }

.spirup-container {
	max-width: var(--spirup-max);
	margin: 0 auto;
	padding: 0 24px;
}

/* Ocultamos restos del header/footer de Astra si aparecieran */
.site-header, .ast-above-header-wrap, #masthead { display: none; }
/* Botón "subir" azul de Astra: fuera (no combina con la marca) */
#ast-scroll-top, .ast-scroll-top-wrap { display: none !important; }

/* ==========================================================================
   Barra de anuncio superior
   ========================================================================== */
.spirup-topbar {
	background: var(--spirup-teal);
	color: #fff;
	font-size: clamp(12px, 0.82vw, 26px);
	letter-spacing: .04em;
	text-align: center;
}
.spirup-topbar__inner {
	max-width: min(94vw, 3500px);
	margin: 0 auto;
	padding: clamp(9px, 0.7vw, 16px) 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	text-transform: uppercase;
	font-weight: 500;
}
.spirup-topbar__dot { font-size: 14px; }

/* ==========================================================================
   Cabecera
   ========================================================================== */
.spirup-header {
	background: #f1f1f1;
	position: relative;
}
.spirup-header__inner {
	/* Llena el ancho hasta 4K (logo a la izq, acciones a la der) */
	max-width: min(94vw, 3500px);
	margin: 0 auto;
	padding: clamp(24px, 2vw, 70px) clamp(28px, 3vw, 90px);
	display: flex;
	align-items: center;
	gap: clamp(22px, 2vw, 64px);
}
.spirup-logo { flex: 0 0 auto; line-height: 0; }
/* Escala con el ancho (como el texto del hero), sin tope bajo */
.spirup-logo img { height: clamp(70px, 4.4vw, 180px); width: auto; display: block; }

.spirup-nav {
	display: flex;
	align-items: center;
	gap: clamp(30px, 2.6vw, 88px);
	margin-left: auto;   /* empuja el menu a la derecha, junto a "Reservar" */
}
.spirup-nav a {
	color: var(--spirup-dark);
	text-decoration: none;
	font-size: clamp(19px, 1.4vw, 54px);
	font-weight: 500;
	transition: color .15s ease;
}
.spirup-nav a:hover { color: var(--spirup-teal); }

.spirup-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
}
.spirup-iconbtn {
	background: none;
	border: 0;
	padding: 4px;
	color: var(--spirup-dark);
	cursor: pointer;
	display: inline-flex;
	line-height: 0;
	transition: color .15s ease;
}
.spirup-iconbtn:hover { color: var(--spirup-teal); }
.spirup-iconbtn svg { width: clamp(26px, 1.9vw, 64px); height: clamp(26px, 1.9vw, 64px); }

/* Reservar mas grande, acorde al header alto */
.spirup-header .spirup-btn--orange {
	padding: clamp(13px, 1.15vw, 38px) clamp(30px, 2.5vw, 92px);
	font-size: clamp(16px, 1.3vw, 46px);
	background: #E97000;
}
.spirup-header .spirup-btn--orange:hover {
	background: #cf6300;
	box-shadow: 0 6px 16px rgba(233, 112, 0, .35);
}

/* Boton hamburguesa (oculto en escritorio) */
.spirup-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 8px;
	background: none;
	border: 0;
	cursor: pointer;
}
.spirup-burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--spirup-dark);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.spirup-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.spirup-burger.is-open span:nth-child(2) { opacity: 0; }
.spirup-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Botones
   ========================================================================== */
.spirup-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.spirup-btn--orange {
	background: var(--spirup-orange);
	color: #fff;
	padding: 10px 22px;
	font-size: 15px;
}
.spirup-btn--orange:hover {
	background: #e8940f;
	box-shadow: 0 6px 16px rgba(245, 166, 35, .35);
	transform: translateY(-1px);
	color: #fff;
}

/* ==========================================================================
   Figuras (imagenes compuestas del diseno)
   ========================================================================== */
.spirup-figura {
	position: relative;
}
/* Fondo aqua compartido: rellena las zonas transparentes de figura1 y parte2
   para que conecten sin costura (mismo color = #c6e7e6, el top de parte2). */
.spirup-figura,
.spirup-parte2 {
	position: relative;
	/* aqua arriba -> teal abajo, para cubrir las zonas transparentes de la imagen */
	background: linear-gradient(180deg, #c6e7e6 0%, #c6e7e6 85%, #3a8b86 99%);
}
.spirup-figura__img {
	display: block;
	width: 100%;
	height: auto;
}
/* Boton superpuesto: posicion en % -> se mantiene sobre el mismo punto de la
   imagen a cualquier tamaño. El tamaño escala con el ancho (vw + clamp). */
.spirup-figura__cta {
	position: absolute;
	left: 11%;                       /* alineado al borde izquierdo del titulo */
	top: 60%;                        /* justo debajo del titulo */
	transform: none;
	/* Escala con el ancho, proporcional al texto "Refrescante por naturaleza"
	   (que va incrustado en la imagen y crece con la pantalla). */
	font-size: clamp(15px, 1.75vw, 60px);
	padding: clamp(11px, 1.35vw, 46px) clamp(22px, 2.8vw, 98px);
}
/* En hover se queda estatico (no se mueve) */
.spirup-figura__cta:hover {
	transform: none;
}

/* --------------------------------------------------------------------------
   PARTE 2: composicion centrada con ancho maximo (no full-bleed) para que no
   se vea gigante en pantallas grandes. El fondo aqua sigue a todo el ancho.
   -------------------------------------------------------------------------- */
.spirup-parte2__inner {
	position: relative;
	/* Escala con el ancho de pantalla: en monitores grandes crece, en normales
	   no baja de ~1040px, y en movil nunca pasa del 94% del ancho. */
	width: min(90vw, 1600px);
	margin: 0 auto;
	/* variables de encaje de la lata 3D (en % respecto a este contenedor) */
	--l3d-left: 30%;    /* borde izquierdo del canvas */
	--l3d-top: 14%;     /* borde superior del canvas */
	--l3d-width: 40%;   /* ancho del canvas */
	--l3d-height: 76%;  /* alto del canvas (define el tamaño de la lata) */
}

/* Lata 3D encajada en el hueco central, ENTRE el fondo y la capa de agua. */
.spirup-lata3d {
	position: absolute;
	left: var(--l3d-left);
	top: var(--l3d-top);
	width: var(--l3d-width);
	height: var(--l3d-height);
	z-index: 1;
}
.spirup-lata3d canvas {
	display: block;
	width: 100%;
	height: 100%;
	/* Sombra suave y organica que sigue la silueta de la lata (no exagerada). */
	filter: drop-shadow(5px 14px 14px rgba(9, 52, 60, 0.24));
}
/* Flechas para girar la lata (como el mockup) */
.spirup-lata-arrow {
	position: absolute;
	top: 46%;
	transform: translateY(-50%);
	width: clamp(30px, 2.3vw, 46px);
	height: clamp(46px, 3.6vw, 72px);
	border: 0;
	padding: 0;
	background: transparent;
	color: #3a8b86;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: color .15s ease, transform .12s ease;
}
.spirup-lata-arrow:hover { color: #17343d; }
.spirup-lata-arrow:active { transform: translateY(-50%) scale(.88); }
.spirup-lata-arrow svg { width: 100%; height: 100%; }
.spirup-lata-arrow--prev { left: 2%; }
.spirup-lata-arrow--next { right: 2%; }
@media (max-width: 700px) {
	.spirup-lata-arrow { display: none; }
}

/* Capa frontal (agua/limones/badges): va POR DELANTE de la lata, calcada sobre
   la imagen de fondo. pointer-events:none deja arrastrar la lata por debajo. */
.spirup-parte2__front {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

/* ==========================================================================
   PARTE 3: "Ingredientes con proposito" (onda + panel teal + tarjetas HTML)
   ========================================================================== */
.spirup-parte3 {
	position: relative;
	background: #3a8b86;   /* teal: continua el teal del borde de la imagen */
	/* solapa el borde ondulado (teal) de la imagen para una union sin costura */
	margin-top: calc(min(90vw, 1600px) * -0.035);
}
/* Onda de conexion: transparente arriba (aqua) y teal abajo */
.spirup-parte3__wave {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: -1px;   /* sin costura con el panel */
	position: relative;
	z-index: 1;
}
/* Panel teal a TODO el ancho (gradiente vertical como en el diseno) */
.spirup-parte3__panel {
	background: linear-gradient(180deg, #3a8b86 0%, #59a497 48%, #81c5ac 100%);
	padding-bottom: clamp(30px, 3vw, 60px);
}
.spirup-parte3__inner {
	max-width: min(90vw, 1600px);       /* compacto como el diseno (~1000px) */
	margin: 0 auto;
	padding: 0 clamp(16px, 1.4vw, 30px);
}
/* Badge "Que contiene" */
.spirup-parte3__badge {
	display: inline-block;
	background: rgba(9, 40, 45, .42);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #e6f6f2;
	border-radius: 999px;
	padding: clamp(7px, 0.5vw, 11px) clamp(16px, 1.1vw, 26px);
	font-size: clamp(13px, 0.9vw, 16px);
	letter-spacing: .01em;
}
.spirup-parte3__title {
	margin: clamp(14px, 1.2vw, 26px) 0 clamp(22px, 2vw, 40px);
	color: #fff;
	font-weight: 800;
	line-height: 1.12;
	font-size: clamp(22px, 2.4vw, 34px);
}
/* Tarjetas repartidas a todo el ancho */
.spirup-parte3__cards {
	display: flex;
	gap: clamp(14px, 1.4vw, 26px);
	align-items: stretch;
}
.spirup-card {
	flex: 1 1 0;
	min-width: 0;
	border-radius: clamp(14px, 1vw, 20px);
	overflow: hidden;
	background: #d6f0e6;                 /* zona de texto (clara) */
	box-shadow: 0 10px 24px rgba(9, 52, 60, .12);
	text-align: center;
	display: flex;
	flex-direction: column;
}
.spirup-card__top {
	background: #a9d9c6;                 /* zona del icono (media) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 1.5vw, 28px) 10px;
}
.spirup-card__top img {
	display: block;
	width: auto;
	height: clamp(34px, 3vw, 50px);
}
.spirup-card__body {
	padding: clamp(14px, 1.2vw, 26px) clamp(10px, 0.9vw, 20px) clamp(16px, 1.4vw, 30px);
}
.spirup-card__body strong {
	display: block;
	color: var(--spirup-dark);
	font-weight: 700;
	font-size: clamp(15px, 1.2vw, 22px);
	margin-bottom: 0.35em;
}
.spirup-card__body span {
	display: block;
	color: #37585d;
	line-height: 1.3;
	font-size: clamp(13px, 1vw, 17px);
}
@media (max-width: 760px) {
	.spirup-parte3__cards { flex-wrap: wrap; }
	.spirup-card { flex: 1 1 42%; }
}

/* ==========================================================================
   Franja CTA amarilla
   ========================================================================== */
.spirup-cta {
	background: #f4c44e;
}
/* Mismo contenedor que las tarjetas -> alineada con ellas */
.spirup-cta__inner {
	max-width: min(90vw, 1600px);
	margin: 0 auto;
	padding: clamp(22px, 2.2vw, 44px) clamp(16px, 1.4vw, 30px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 2vw, 40px);
	flex-wrap: wrap;
}
.spirup-cta__title {
	margin: 0;
	color: var(--spirup-dark);
	font-weight: 800;
	font-size: clamp(20px, 2vw, 32px);
}
.spirup-cta__actions {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.2vw, 24px);
	flex-wrap: wrap;
}
.spirup-cta__btn {
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	padding: clamp(12px, 1vw, 20px) clamp(24px, 2vw, 40px);
	font-size: clamp(16px, 1.15vw, 20px);
	transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.spirup-cta__btn--solid {
	background: var(--spirup-teal);
	color: #fff;
}
.spirup-cta__btn--solid:hover {
	background: #26746f;
	box-shadow: 0 6px 16px rgba(47, 145, 143, .35);
}
.spirup-cta__btn--ghost {
	background: transparent;
	color: var(--spirup-teal);
	border: 2px solid var(--spirup-teal);
}
.spirup-cta__btn--ghost:hover {
	background: rgba(47, 145, 143, .1);
}

/* ==========================================================================
   PARTE 4: Potencial de las microalgas (foto + texto)
   ========================================================================== */
.spirup-parte4 {
	background: #fff;
}
.spirup-parte4__inner {
	max-width: min(90vw, 1600px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 46%) minmax(0, 54%);
	align-items: center;
	gap: clamp(20px, 2.6vw, 80px);
}
.spirup-parte4__media {
	align-self: stretch;
	display: flex;
	align-items: center;
}
.spirup-parte4__media img {
	display: block;
	width: 100%;
	height: auto;
}
.spirup-parte4__text {
	padding: clamp(30px, 3vw, 90px) clamp(24px, 4vw, 150px) clamp(30px, 3vw, 90px) 0;
	max-width: 1100px;
}
.spirup-parte4__title {
	color: var(--spirup-teal);
	font-weight: 800;
	line-height: 1.14;
	font-size: clamp(22px, 2.35vw, 36px);
	margin: 0 0 clamp(14px, 1.2vw, 32px);
}
.spirup-parte4__desc {
	color: #5b6d70;
	line-height: 1.5;
	font-size: clamp(14px, 1.05vw, 28px);
	margin: 0 0 clamp(18px, 1.7vw, 44px);
	max-width: 44em;
}
.spirup-parte4__list {
	list-style: none;
	margin: 0 0 clamp(22px, 2vw, 52px);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(11px, 0.9vw, 24px);
}
.spirup-parte4__list li {
	display: flex;
	align-items: center;
	gap: clamp(10px, 0.8vw, 20px);
	color: var(--spirup-dark);
	font-weight: 600;
	font-size: clamp(14px, 1.1vw, 30px);
}
.spirup-parte4__list .ico {
	flex: 0 0 auto;
	display: inline-flex;
	width: clamp(20px, 1.5vw, 40px);
	height: clamp(20px, 1.5vw, 40px);
}
.spirup-parte4__list .ico svg { width: 100%; height: 100%; }
.spirup-parte4__list .is-no .ico { color: #E97000; }
.spirup-parte4__list .is-yes .ico { color: var(--spirup-teal); }
.spirup-parte4__btn {
	display: inline-block;
	border: 2px solid #bcd4d1;
	color: var(--spirup-teal);
	border-radius: 999px;
	padding: clamp(11px, 1vw, 28px) clamp(22px, 1.9vw, 56px);
	font-weight: 600;
	text-decoration: none;
	font-size: clamp(14px, 1.05vw, 30px);
	transition: background .15s ease;
}
.spirup-parte4__btn:hover { background: rgba(47, 145, 143, .08); }

/* ==========================================================================
   PARTE 5: "Energia que dura" (grid de 6 tarjetas)
   ========================================================================== */
.spirup-parte5 {
	background: #d9ede3;
	padding: clamp(40px, 4vw, 120px) 0 clamp(50px, 5vw, 140px);
}
.spirup-parte5__inner {
	max-width: min(90vw, 1600px);
	margin: 0 auto;
	padding: 0 clamp(16px, 1.5vw, 40px);
	text-align: center;
}
.spirup-parte5__title {
	color: var(--spirup-teal);
	font-weight: 800;
	line-height: 1.14;
	font-size: clamp(22px, 2.4vw, 36px);
	margin: 0 0 clamp(12px, 1vw, 28px);
}
.spirup-parte5__sub {
	color: #5b6d70;
	line-height: 1.5;
	font-size: clamp(14px, 1.05vw, 28px);
	max-width: 62em;
	margin: 0 auto clamp(30px, 3vw, 84px);
}
.spirup-parte5__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 1.6vw, 46px);
}
.spirup-feature {
	background: #c6e4d5;
	border-radius: clamp(14px, 1.1vw, 30px);
	padding: clamp(26px, 2.4vw, 72px) clamp(18px, 1.7vw, 50px) clamp(30px, 2.8vw, 82px);
	text-align: center;
}
.spirup-feature__ico {
	display: inline-flex;
	color: var(--spirup-teal);
	width: clamp(34px, 2.6vw, 74px);
	height: clamp(34px, 2.6vw, 74px);
	margin-bottom: clamp(14px, 1.2vw, 34px);
}
.spirup-feature__ico svg { width: 100%; height: 100%; }
.spirup-feature h3 {
	color: var(--spirup-dark);
	font-weight: 700;
	line-height: 1.2;
	font-size: clamp(16px, 1.25vw, 34px);
	margin: 0 0 clamp(8px, 0.6vw, 18px);
}
.spirup-feature p {
	color: #4b6468;
	line-height: 1.4;
	font-size: clamp(13px, 1vw, 26px);
	margin: 0;
}
@media (max-width: 900px) {
	.spirup-parte5__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
	.spirup-parte4__inner { grid-template-columns: 1fr; gap: 0; }
	.spirup-parte4__text {
		padding: clamp(24px, 6vw, 48px) clamp(18px, 6vw, 48px) clamp(34px, 8vw, 60px);
		max-width: 100%;
	}
}
@media (max-width: 560px) {
	.spirup-parte5__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PARTE 6: Banner "Si tu dia no para" (foto latas + barra degradada)
   ========================================================================== */
.spirup-parte6__photo img { display: block; width: 100%; height: auto; }
.spirup-parte6__bar {
	background: linear-gradient(90deg, #badd3d 0%, #4dc88b 48%, #108fa7 100%);
}
.spirup-parte6__barinner {
	max-width: min(90vw, 1600px);
	margin: 0 auto;
	padding: clamp(12px, 1vw, 30px) clamp(20px, 2vw, 60px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(14px, 2vw, 44px);
	flex-wrap: wrap;
}
.spirup-parte6__slogan {
	color: #fff;
	font-weight: 700;
	font-size: clamp(18px, 1.7vw, 50px);
}
.spirup-parte6__btn {
	background: #0f2a3a;
	color: #fff;
	border-radius: 999px;
	text-decoration: none;
	padding: clamp(9px, 0.8vw, 22px) clamp(20px, 1.5vw, 46px);
	font-weight: 600;
	font-size: clamp(13px, 1vw, 28px);
	white-space: nowrap;
	transition: background .15s ease;
}
.spirup-parte6__btn:hover { background: #1b3f52; }

/* ==========================================================================
   PARTE 7: Historia + linea de tiempo
   ========================================================================== */
.spirup-parte7 { background: #d5e9e1; }
.spirup-parte7__inner {
	max-width: min(90vw, 1600px);
	margin: 0 auto;
	padding: clamp(40px, 4vw, 120px) clamp(16px, 1.5vw, 40px);
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(30px, 4vw, 120px);
	align-items: start;
}
.spirup-parte7__title {
	color: var(--spirup-teal);
	font-weight: 800;
	line-height: 1.14;
	font-size: clamp(22px, 2.3vw, 36px);
	margin: 0 0 clamp(16px, 1.4vw, 36px);
}
.spirup-parte7__text p {
	color: #4d6266;
	line-height: 1.55;
	font-size: clamp(14px, 1.05vw, 28px);
	margin: 0 0 clamp(14px, 1.2vw, 30px);
}
.spirup-parte7__text strong { color: var(--spirup-dark); font-weight: 700; }
.spirup-parte7__timeline { padding-top: clamp(6px, 1vw, 30px); }
.spirup-tl {
	position: relative;
	padding: 0 0 clamp(20px, 1.8vw, 50px) clamp(24px, 1.4vw, 44px);
	border-left: 2px solid rgba(233, 112, 0, .35);
	margin-left: 6px;
}
.spirup-tl:last-child { padding-bottom: 0; }
.spirup-tl::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #E97000;
	box-shadow: 0 0 0 3px #d5e9e1;
}
.spirup-tl h3 {
	color: #E97000;
	font-weight: 700;
	margin: 0 0 6px;
	font-size: clamp(16px, 1.2vw, 32px);
}
.spirup-tl p {
	color: #4d6266;
	line-height: 1.4;
	margin: 0;
	font-size: clamp(13px, 1vw, 26px);
}

/* ==========================================================================
   PARTE 8: Productos "Elige como quieres tu SPIR UP"
   ========================================================================== */
.spirup-parte8 {
	background: linear-gradient(180deg, #1e7477 0%, #2d807f 35%, #529f94 72%, #80c4ac 100%);
}
.spirup-parte8__inner {
	max-width: min(90vw, 1600px);
	margin: 0 auto;
	padding: clamp(40px, 4vw, 120px) clamp(16px, 1.5vw, 40px) clamp(50px, 5vw, 140px);
}
.spirup-parte8__title {
	color: #fff;
	text-align: center;
	font-weight: 800;
	font-size: clamp(22px, 2.4vw, 36px);
	margin: 0 0 clamp(30px, 3vw, 84px);
}
.spirup-parte8__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 1.5vw, 40px);
}
.spirup-product {
	background: #fff;
	border-radius: clamp(14px, 1.1vw, 28px);
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(9, 52, 60, .18);
	display: flex;
	flex-direction: column;
}
.spirup-product__img {
	background: linear-gradient(160deg, #eef7f3, #dcefe8);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.spirup-product__ph { color: #a6cec2; width: 26%; display: inline-flex; }
.spirup-product__ph svg { width: 100%; height: auto; }
.spirup-product__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	padding: clamp(14px, 1.2vw, 30px) clamp(14px, 1.1vw, 28px) clamp(16px, 1.3vw, 32px);
}
.spirup-product__info { display: flex; flex-direction: column; }
.spirup-product__info h3 {
	color: var(--spirup-dark);
	font-weight: 700;
	margin: 0;
	font-size: clamp(15px, 1.15vw, 30px);
}
.spirup-product__meta {
	color: #7a8f92;
	font-size: clamp(12px, 0.9vw, 22px);
	margin: 2px 0 6px;
}
.spirup-product__price {
	color: var(--spirup-dark);
	font-weight: 700;
	font-size: clamp(14px, 1.05vw, 28px);
}
.spirup-product__cart {
	flex: 0 0 auto;
	width: clamp(38px, 3vw, 72px);
	height: clamp(38px, 3vw, 72px);
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background: #eaf5f0;
	color: var(--spirup-teal);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease;
}
.spirup-product__cart svg { width: 52%; height: 52%; }
.spirup-product__cart:hover { background: var(--spirup-teal); color: #fff; }

@media (max-width: 900px) {
	.spirup-parte8__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
	.spirup-parte7__inner { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 48px); }
}
@media (max-width: 560px) {
	.spirup-parte8__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PARTE 9: Reserva tu lugar (registro de correo)
   ========================================================================== */
.spirup-parte9 { background: #fff; }
.spirup-parte9__inner {
	max-width: min(760px, 92vw);
	margin: 0 auto;
	padding: clamp(44px, 4.5vw, 130px) clamp(16px, 1.5vw, 40px) clamp(48px, 5vw, 140px);
	text-align: center;
}
.spirup-parte9__title {
	color: #1585a3;
	font-weight: 800;
	line-height: 1.15;
	font-size: clamp(22px, 2.3vw, 36px);
	margin: 0 0 clamp(18px, 1.6vw, 44px);
}
.spirup-parte9__lead {
	color: #566a6d;
	line-height: 1.55;
	font-size: clamp(14px, 1.05vw, 28px);
	margin: 0 auto clamp(14px, 1.1vw, 28px);
	max-width: 40em;
}
.spirup-parte9__form {
	display: flex;
	align-items: center;
	max-width: 640px;
	margin: clamp(22px, 2vw, 50px) auto clamp(12px, 1vw, 26px);
	border: 1.5px solid #cdddda;
	border-radius: 999px;
	background: #fff;
	padding: clamp(4px, 0.4vw, 10px) clamp(6px, 0.5vw, 12px) clamp(4px, 0.4vw, 10px) clamp(20px, 1.6vw, 44px);
}
.spirup-parte9__form input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--spirup-dark);
	font-family: inherit;
	font-size: clamp(15px, 1.05vw, 26px);
	padding: clamp(12px, 1vw, 26px) 0;
}
.spirup-parte9__form input::placeholder { color: #9aabad; }
.spirup-parte9__form button {
	flex: 0 0 auto;
	width: clamp(40px, 3vw, 70px);
	height: clamp(40px, 3vw, 70px);
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--spirup-teal);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease;
}
.spirup-parte9__form button svg { width: 52%; height: 52%; }
.spirup-parte9__form button:hover { background: var(--spirup-teal); color: #fff; }
.spirup-parte9__note {
	color: var(--spirup-teal);
	font-size: clamp(12px, 0.9vw, 22px);
	margin: 0;
}

/* ==========================================================================
   Paginas legales (Politica de privacidad, etc.)
   ========================================================================== */
.spirup-legal { background: #fff; }
.spirup-legal__inner {
	max-width: min(92vw, 1180px);
	margin: 0 auto;
	padding: clamp(30px, 3vw, 70px) clamp(16px, 2vw, 40px) clamp(30px, 3vw, 60px);
	color: #4d6266;
}
.spirup-legal__title {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1vw, 20px);
	color: var(--spirup-dark);
	font-weight: 800;
	line-height: 1.1;
	font-size: clamp(30px, 3.4vw, 52px);
	margin: 0 0 clamp(18px, 1.6vw, 32px);
}
.spirup-legal__bolt {
	flex: 0 0 auto;
	display: inline-flex;
	color: #62c04a;
	width: clamp(30px, 3vw, 54px);
	height: clamp(30px, 3vw, 54px);
}
.spirup-legal__bolt svg { width: 100%; height: 100%; }
.spirup-legal__intro {
	line-height: 1.5;
	font-size: clamp(15px, 1.05vw, 19px);
	margin: 0 0 6px;
}
.spirup-legal__h2 {
	color: var(--spirup-teal);
	font-weight: 800;
	line-height: 1.2;
	font-size: clamp(22px, 2vw, 32px);
	margin: clamp(30px, 2.6vw, 54px) 0 clamp(14px, 1.1vw, 22px);
}
.spirup-legal p {
	line-height: 1.55;
	font-size: clamp(15px, 1.05vw, 19px);
	margin: 0 0 clamp(12px, 1vw, 18px);
}
.spirup-legal__list {
	margin: 0 0 clamp(14px, 1.1vw, 22px);
	padding-left: 1.3em;
}
.spirup-legal__list li {
	line-height: 1.5;
	font-size: clamp(15px, 1.05vw, 19px);
	margin-bottom: 8px;
}
.spirup-legal strong { color: var(--spirup-dark); }
.spirup-legal a { color: var(--spirup-teal); }
.spirup-legal em { font-style: italic; }

.spirup-legal__tablewrap { overflow-x: auto; margin: 0 0 clamp(14px, 1.1vw, 22px); }
.spirup-legal__table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: clamp(14px, 1vw, 18px);
}
.spirup-legal__table th {
	background: var(--spirup-teal);
	color: #fff;
	text-align: left;
	font-weight: 700;
	padding: clamp(12px, 1vw, 18px) clamp(14px, 1.1vw, 22px);
}
.spirup-legal__table td {
	background: #e6f3ee;
	color: #3a5559;
	padding: clamp(12px, 1vw, 18px) clamp(14px, 1.1vw, 22px);
	border: 3px solid #fff;
	vertical-align: middle;
	line-height: 1.4;
}
.spirup-legal__td--moment {
	font-weight: 600;
	color: var(--spirup-dark);
	background: #d7ecdf;
}
.spirup-legal__contact { margin-top: clamp(20px, 2vw, 40px); }

/* Tabla de zonas de envio (filas en degradado teal -> menta) */
.spirup-zona {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: clamp(14px, 1vw, 18px);
}
.spirup-zona td {
	padding: clamp(14px, 1.1vw, 22px);
	border: 3px solid #fff;
	vertical-align: top;
	line-height: 1.4;
}
.spirup-zona .zname { font-weight: 700; white-space: nowrap; }
.spirup-zona .zprice { font-weight: 700; white-space: nowrap; }
.spirup-zona tr.z1 td { background: #1f797a; color: #fff; }
.spirup-zona tr.z1 .zdist { font-weight: 700; }
.spirup-zona tr.z2 td { background: #61a19f; color: #fff; }
.spirup-zona tr.z3 td { background: #a9cec8; color: #17343d; }
.spirup-zona tr.z4 td { background: #d5e9e1; color: #17343d; }

.spirup-legal__law {
	background: linear-gradient(90deg, #badd3d 0%, #4dc88b 50%, #108fa7 100%);
}
.spirup-legal__law-inner {
	max-width: min(92vw, 1180px);
	margin: 0 auto;
	padding: clamp(22px, 2vw, 44px) clamp(16px, 2vw, 40px);
}
.spirup-legal__law strong {
	display: block;
	color: #0f3a44;
	font-weight: 700;
	line-height: 1.5;
	font-size: clamp(15px, 1.1vw, 22px);
}

/* ==========================================================================
   Libro de reclamaciones (formulario + modal)
   ========================================================================== */
.spirup-lr__inner {
	max-width: min(92vw, 1180px);
	margin: 0 auto;
	padding: clamp(30px, 3vw, 70px) clamp(16px, 2vw, 40px) 0;
}
.spirup-lr__intro {
	color: #5b6d70;
	line-height: 1.5;
	font-size: clamp(14px, 1vw, 18px);
	margin: 0 0 clamp(20px, 2vw, 44px);
}
.spirup-lr__sec { padding: clamp(24px, 2.4vw, 54px) 0; }
.spirup-lr__sec--gray {
	background: #f2f2f2;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: clamp(30px, 3vw, 66px) 0;
}
/* Contenedor interno: alinea el contenido con las secciones 1 y 3 */
.spirup-lr__wrap {
	max-width: min(92vw, 1180px);
	margin: 0 auto;
	padding: 0 clamp(16px, 2vw, 40px);
}
.spirup-lr__h2 {
	color: var(--spirup-teal);
	font-weight: 800;
	line-height: 1.2;
	font-size: clamp(20px, 1.9vw, 30px);
	margin: 0 0 clamp(18px, 1.8vw, 34px);
}

.spirup-lr__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 clamp(18px, 2vw, 44px);
}
.spirup-field { display: flex; flex-direction: column; margin-bottom: clamp(14px, 1.4vw, 26px); }
.spirup-field label { color: #5b6d70; font-size: clamp(13px, 0.95vw, 17px); margin-bottom: 8px; }
.spirup-field label span { color: #E97000; }
.spirup-field input,
.spirup-field select,
.spirup-field textarea {
	font-family: inherit;
	font-size: clamp(14px, 1vw, 18px);
	color: var(--spirup-dark);
	background: #fff;
	border: 1.5px solid #cdddda;
	border-radius: 999px;
	padding: clamp(11px, 0.9vw, 16px) clamp(16px, 1.3vw, 24px);
	width: 100%;
	outline: none;
	transition: border-color .15s ease;
}
.spirup-field textarea { border-radius: 18px; resize: vertical; min-height: 120px; line-height: 1.5; }
.spirup-field input:focus,
.spirup-field select:focus,
.spirup-field textarea:focus { border-color: var(--spirup-teal); }
.spirup-field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232f918f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right clamp(16px, 1.3vw, 24px) center;
	padding-right: 44px;
}

.spirup-radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--spirup-dark); font-size: clamp(14px, 1.05vw, 18px); }
.spirup-radio input { position: absolute; opacity: 0; pointer-events: none; }
.spirup-radio > span { width: 20px; height: 20px; border: 2px solid #9bb3b0; border-radius: 50%; flex: 0 0 auto; position: relative; transition: border-color .15s ease; }
.spirup-radio input:checked + span { border-color: var(--spirup-teal); }
.spirup-radio input:checked + span::after { content: ""; position: absolute; inset: 3px; background: var(--spirup-teal); border-radius: 50%; }
.spirup-lr__radios { display: flex; gap: clamp(30px, 4vw, 80px); margin-bottom: 8px; }
.spirup-lr__hint { color: #8a9a9c; font-size: clamp(13px, 0.9vw, 16px); margin: 0 0 clamp(16px, 1.4vw, 28px); }

.spirup-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; color: var(--spirup-dark); font-size: clamp(14px, 1vw, 18px); line-height: 1.4; margin-bottom: 12px; }
.spirup-check input { position: absolute; opacity: 0; pointer-events: none; }
.spirup-check > span { width: 22px; height: 22px; border: 2px solid #9bb3b0; border-radius: 6px; flex: 0 0 auto; position: relative; margin-top: 1px; transition: background .15s ease, border-color .15s ease; }
.spirup-check input:checked + span { background: var(--spirup-teal); border-color: var(--spirup-teal); }
.spirup-check input:checked + span::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

.spirup-lr__file {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	border: 2px dashed #a9c7c3;
	border-radius: 14px;
	padding: clamp(16px, 1.4vw, 28px) clamp(28px, 2.4vw, 54px);
	cursor: pointer;
	margin: clamp(8px, 1vw, 20px) 0 clamp(20px, 2vw, 40px);
}
.spirup-lr__file-btn { display: inline-flex; align-items: center; gap: 10px; color: var(--spirup-teal); font-weight: 700; font-size: clamp(15px, 1.1vw, 20px); }
.spirup-lr__file-btn svg { width: 22px; height: 22px; flex: 0 0 auto; }
.spirup-lr__file small { color: #8a9a9c; font-size: clamp(12px, 0.85vw, 15px); }
.spirup-lr__note { color: #8a9a9c; font-style: italic; font-size: clamp(13px, 0.95vw, 17px); margin: clamp(14px, 1.4vw, 28px) 0; }
.spirup-lr__submit { text-align: center; padding: clamp(10px, 1vw, 20px) 0 clamp(30px, 3vw, 60px); }
.spirup-lr__btn {
	background: #bcdb3f;
	color: #1a6b66;
	font-weight: 700;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	padding: clamp(12px, 1vw, 20px) clamp(34px, 3vw, 64px);
	font-size: clamp(16px, 1.15vw, 22px);
	transition: background .15s ease, transform .12s ease;
}
.spirup-lr__btn:hover { background: #aecf2f; transform: translateY(-1px); }

/* Modal de exito */
.spirup-lr__modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(40, 60, 62, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.spirup-lr__modal[hidden] { display: none; }
.spirup-lr__modal-card {
	background: #fff;
	border-radius: 22px;
	max-width: 560px;
	width: 100%;
	padding: clamp(32px, 3vw, 58px) clamp(24px, 2.5vw, 54px);
	text-align: center;
	position: relative;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
}
.spirup-lr__modal-close { position: absolute; top: 14px; right: 20px; background: none; border: 0; font-size: 28px; line-height: 1; color: #9bb3b0; cursor: pointer; }
.spirup-lr__badge { width: 64px; height: 64px; border-radius: 50%; background: #6cc24a; color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.spirup-lr__badge svg { width: 60%; height: 60%; }
.spirup-lr__modal-card h3 { color: var(--spirup-teal); font-weight: 800; font-size: clamp(20px, 1.7vw, 30px); margin: 0 0 16px; }
.spirup-lr__modal-meta { margin: 2px 0; color: #4d6266; font-size: clamp(14px, 1vw, 18px); }
.spirup-lr__modal-meta strong { color: var(--spirup-dark); }
.spirup-lr__modal-card p { color: #5b6d70; line-height: 1.5; font-size: clamp(14px, 1vw, 18px); margin: 14px 0 0; }
.spirup-lr__modal-thanks { margin-top: 18px !important; color: var(--spirup-dark); font-weight: 600; }

@media (max-width: 720px) {
	.spirup-lr__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.spirup-footer {
	background: #1e7477;
}
.spirup-footer__inner {
	max-width: min(90vw, 1600px);
	margin: 0 auto;
	padding: clamp(40px, 3.5vw, 110px) clamp(16px, 1.5vw, 40px) clamp(34px, 3vw, 90px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(22px, 2vw, 56px);
}
.spirup-footer__logo { line-height: 0; }
.spirup-footer__logo img {
	height: clamp(64px, 5vw, 150px);
	width: auto;
	display: block;
}
.spirup-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(20px, 2.4vw, 70px);
}
.spirup-footer__links a {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	font-size: clamp(14px, 1vw, 26px);
	transition: color .15s ease;
}
.spirup-footer__links a:hover { color: #fff; }
.spirup-footer__social {
	display: flex;
	align-items: center;
	gap: clamp(18px, 1.6vw, 44px);
}
.spirup-footer__social a {
	color: #fff;
	display: inline-flex;
	width: clamp(24px, 1.9vw, 52px);
	height: clamp(24px, 1.9vw, 52px);
	transition: opacity .15s ease;
}
.spirup-footer__social a:hover { opacity: .7; }
.spirup-footer__social svg { width: 100%; height: 100%; }

/* ==========================================================================
   Responsive: menu hamburguesa
   ========================================================================== */
@media (max-width: 900px) {
	.spirup-burger { display: flex; }

	.spirup-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		margin: 0;
		padding: 8px 0;
		border-bottom: 1px solid #eef2f1;
		box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
		display: none;
		z-index: 50;
	}
	.spirup-nav.is-open { display: flex; }
	.spirup-nav a { width: 100%; padding: 13px 24px; font-size: 16px; }

	.spirup-header__inner { gap: 14px; }
	.spirup-header__actions { margin-left: auto; }
	.spirup-topbar__inner { font-size: 11px; gap: 8px; }
}

@media (max-width: 640px) {
	/* En movil dejamos solo carrito + hamburguesa. */
	.spirup-header__actions .spirup-iconbtn:not(.spirup-iconbtn--cart) { display: none; }
	.spirup-header__inner { padding: 14px 16px; gap: 8px; }
	.spirup-header__actions { gap: 8px; }
	.spirup-logo img { height: 52px; }
	.spirup-header .spirup-btn--orange { padding: 9px 16px; font-size: 14px; }
	.spirup-iconbtn svg { width: 24px; height: 24px; }
	.spirup-burger { width: 34px; height: 34px; padding: 6px; }
}

/* ==========================================================================
   Carrito lateral (drawer) + badge
   ========================================================================== */
.spirup-cart { position: fixed; inset: 0; z-index: 1200; }
.spirup-cart[hidden] { display: none; }
.spirup-cart__overlay { position: absolute; inset: 0; background: rgba(10, 30, 32, .45); opacity: 0; transition: opacity .3s ease; }
.spirup-cart.is-open .spirup-cart__overlay { opacity: 1; }
.spirup-cart__panel {
	position: absolute; top: 0; right: 0; height: 100%;
	width: min(420px, 92vw);
	background: #f9f1dc;
	display: flex; flex-direction: column;
	transform: translateX(100%); transition: transform .3s ease;
	box-shadow: -10px 0 44px rgba(0, 0, 0, .22);
}
.spirup-cart.is-open .spirup-cart__panel { transform: none; }
.spirup-cart__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 12px; }
.spirup-cart__logo { height: 42px; width: auto; display: block; }
.spirup-cart__close { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #efe6cd; color: #17343d; font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s ease; }
.spirup-cart__close:hover { background: #e6dabb; }
.spirup-cart__body { flex: 1 1 auto; overflow-y: auto; padding: 6px 24px; }
.spirup-cart__empty { color: #8a805f; text-align: center; padding: 48px 0; }
.spirup-cart__items { list-style: none; margin: 0; padding: 0; }
.spirup-cart__item { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-top: 1px solid #eadfc2; }
.spirup-cart__item:first-child { border-top: 0; }
.spirup-cart__thumb { flex: 0 0 auto; }
.spirup-cart__thumb img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #fff; display: block; }
.spirup-cart__info { flex: 1 1 auto; min-width: 0; }
.spirup-cart__name { display: block; color: #17343d; font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .02em; }
.spirup-cart__price { display: block; color: #4d6266; font-size: 14px; margin: 2px 0 10px; }
.spirup-cart__qty { display: inline-flex; align-items: center; border: 1px solid #d9cca8; border-radius: 8px; overflow: hidden; background: #fff; }
.spirup-cart__qbtn { width: 30px; height: 30px; border: 0; background: transparent; color: #17343d; cursor: pointer; font-size: 16px; line-height: 1; }
.spirup-cart__qbtn:hover { background: #f0e7cf; }
.spirup-cart__qval { width: 34px; height: 30px; border: 0; border-left: 1px solid #d9cca8; border-right: 1px solid #d9cca8; text-align: center; background: transparent; color: #17343d; font-size: 14px; font-family: inherit; }
.spirup-cart__remove { flex: 0 0 auto; border: 0; background: transparent; color: #b89b6a; cursor: pointer; padding: 4px; }
.spirup-cart__remove:hover { color: #c0392b; }
.spirup-cart__remove svg { width: 20px; height: 20px; display: block; }
.spirup-cart__foot { flex: 0 0 auto; padding: 18px 24px 26px; border-top: 1px solid #eadfc2; display: flex; flex-direction: column; gap: 12px; }
.spirup-cart__pay { display: block; text-align: center; background: #1e7477; color: #fff; border-radius: 999px; padding: 15px; font-weight: 700; text-decoration: none; transition: background .15s ease; }
.spirup-cart__pay:hover { background: #17595c; color: #fff; }
.spirup-cart__keep { border: 1.5px solid #cbb98e; background: transparent; color: #1e7477; border-radius: 999px; padding: 13px; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 15px; transition: background .15s ease; }
.spirup-cart__keep:hover { background: rgba(30, 116, 119, .07); }
.spirup-cart.is-loading .spirup-cart__body { opacity: .5; pointer-events: none; }

/* Badge del icono del carrito */
.spirup-iconbtn--cart { position: relative; }
.spirup-cart-count {
	position: absolute; top: -5px; right: -6px;
	min-width: 18px; height: 18px; padding: 0 4px;
	border-radius: 999px; background: #E97000; color: #fff;
	font-size: 11px; font-weight: 700; line-height: 1;
	display: none; align-items: center; justify-content: center;
}
.spirup-cart-count.is-visible { display: inline-flex; }

/* Ocultar el "Ver carrito" que WooCommerce añade tras el boton (icono limpio) */
.spirup-product .added_to_cart { display: none !important; }
.spirup-product__cart.loading { opacity: .6; }
.spirup-product__cart.added { color: var(--spirup-teal); }

/* ==========================================================================
   Flujo de compra: pedido exitoso, checkout, header minimo
   ========================================================================== */
/* Fondo crema en checkout y pedido recibido */
.woocommerce-checkout, .woocommerce-order-received { background: #faf6ea; }

/* Header minimo en el flujo de compra: solo logo (centrado) + carrito */
.woocommerce-checkout .spirup-topbar,
.woocommerce-order-received .spirup-topbar,
.woocommerce-checkout .spirup-nav,
.woocommerce-order-received .spirup-nav,
.woocommerce-checkout .spirup-burger,
.woocommerce-order-received .spirup-burger,
.woocommerce-checkout .spirup-header__actions .spirup-btn--orange,
.woocommerce-order-received .spirup-header__actions .spirup-btn--orange,
.woocommerce-checkout .spirup-header__actions .spirup-iconbtn:not(.spirup-iconbtn--cart),
.woocommerce-order-received .spirup-header__actions .spirup-iconbtn:not(.spirup-iconbtn--cart) { display: none !important; }
.woocommerce-checkout .spirup-header,
.woocommerce-order-received .spirup-header { background: #faf6ea; border-bottom: 1px solid #ece2c9; }
.woocommerce-checkout .spirup-header__inner,
.woocommerce-order-received .spirup-header__inner { position: relative; justify-content: center; }
.woocommerce-checkout .spirup-logo,
.woocommerce-order-received .spirup-logo { margin: 0 auto; }
.woocommerce-checkout .spirup-header__actions,
.woocommerce-order-received .spirup-header__actions { position: absolute; right: clamp(28px, 3vw, 90px); top: 50%; transform: translateY(-50%); }

/* Pedido exitoso */
.spirup-thankyou { display: flex; align-items: center; justify-content: center; min-height: 46vh; padding: clamp(40px, 5vw, 100px) 20px; }
.spirup-thankyou__card { text-align: center; max-width: 540px; }
.spirup-thankyou__badge { width: 66px; height: 66px; border-radius: 50%; background: #6cc24a; color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.spirup-thankyou__badge svg { width: 60%; height: 60%; }
.spirup-thankyou__title { color: var(--spirup-teal); font-weight: 800; font-size: clamp(22px, 2vw, 34px); margin: 0 0 12px; }
.spirup-thankyou__text { color: #5b6d70; line-height: 1.5; font-size: clamp(14px, 1vw, 18px); margin: 0 0 8px; }
.spirup-thankyou__meta { color: #7a8f92; font-size: 14px; margin: 0 0 26px; }
.spirup-thankyou__btn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #bcd4d1; color: var(--spirup-teal); border-radius: 999px; padding: 12px 32px; font-weight: 600; text-decoration: none; transition: background .15s ease; }
.spirup-thankyou__btn:hover { background: rgba(47, 145, 143, .08); }

/* Checkout on-brand */
.woocommerce-checkout .site-content, .woocommerce-checkout .ast-container,
.woocommerce-checkout #content { max-width: min(94vw, 1200px); margin: 0 auto; }
.woocommerce-checkout h3, .woocommerce-checkout h2 { color: var(--spirup-dark); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
	border: 1.5px solid #d9cca8 !important; border-radius: 10px !important; background: #fff !important;
	padding: 12px 14px !important; min-height: 46px; font-family: inherit;
}
.woocommerce #payment, .woocommerce-checkout-review-order {
	background: #fff; border: 1px solid #ece2c9; border-radius: 14px; padding: 20px;
}
#place_order, .woocommerce-checkout #payment #place_order {
	background: #1e7477 !important; color: #fff !important; border: 0 !important;
	border-radius: 999px !important; padding: 15px 28px !important; font-weight: 700 !important;
	width: 100%; font-size: 16px;
}
#place_order:hover { background: #17595c !important; }
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message { border-top-color: var(--spirup-teal); }

/* Pedido exitoso: solo la tarjeta (ocultamos las tablas por defecto de WC) */
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details,
.woocommerce-order-received ul.woocommerce-order-overview { display: none; }