/* =====================================================================
   KAISÉ — INICIO v2
   Hoja de estilos específica para la página de Inicio, construida a
   partir de la comparación pixel a pixel con la referencia visual.
   Se carga DESPUÉS de style.css y sobrescribe solo lo necesario.
   ===================================================================== */

/* ---------------- Logo: sans-serif liviano, sin cursiva ---------------- */
.logo-text {
	font-family: 'Inter', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 2.1rem;
	letter-spacing: .01em;
}

/* ---------------- Header: iconos naranjos ---------------- */
.site-header__actions { gap: 18px; }
.icon-btn {
	color: var(--kaise-accent);
	display: flex;
	position: relative;
}
.icon-btn svg { display: block; }
.icon-btn .cart-count,
.icon-btn .fav-count {
	position: absolute; top: -7px; right: -8px;
	background: var(--kaise-accent); color: #fff;
	font-size: .62rem; font-weight: 700;
	width: 16px; height: 16px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero-v2 {
	position: relative;
	min-height: 620px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
}
.hero-v2__decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }

.hero-v2__circle {
	position: absolute;
	border: 1.5px solid rgba(255,255,255,.55);
	border-radius: 50%;
}
.hero-v2__circle--a { width: 560px; height: 560px; top: -320px; left: -140px; }
.hero-v2__circle--b { width: 900px; height: 900px; top: -120px; right: -520px; }

.hero-v2__wordmark {
	position: absolute;
	top: -4%;
	right: 1%;
	font-family: 'Inter', sans-serif;
	font-weight: 100; /* XD: Inter Thin */
	font-size: 100px; /* fijo, no vw: en vertical-rl un tamaño basado en el ancho del viewport
		hacía que la palabra completa superara los 620px de alto del hero y se cortara
		("no se lee kaisé por completo") — este tamaño cabe completo con margen */
	line-height: .82;
	color: rgba(255,255,255,.16); /* XD: "Kaisé va con relleno, no delineado" — relleno sólido, sin contorno */
	white-space: nowrap;
	writing-mode: vertical-rl;
	letter-spacing: -.02em;
	user-select: none;
}

.hero-v2__dot {
	position: absolute; width: 16px; height: 16px; border-radius: 50%;
	background: rgba(255,255,255,.9);
	bottom: 26%; right: 21%;
}
.hero-v2__tick {
	position: absolute; width: 3px; height: 60px;
	background: rgba(255,255,255,.85);
	transform: rotate(35deg);
	top: 14%; right: 30%;
	border-radius: 2px;
}

.hero-v2__content { position: relative; z-index: 2; max-width: 430px; color: #fff; }
.hero-v2__content h1 {
	font-family: 'Inter', sans-serif;
	font-weight: 700; /* banners definitivos: se ve más grueso que SemiBold */
	text-transform: uppercase; /* confirmado por los 3 banners definitivos de Maria: los 3 títulos van en mayúsculas */
	font-size: clamp(2.2rem, 4.4vw, 4rem); /* XD: 64px en desktop */
	line-height: 1.15;
	margin-bottom: .5em;
	letter-spacing: -.01em;
	text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.hero-v2__content p { font-size: 1.125rem; opacity: .95; margin-bottom: 1.8em; max-width: 420px; line-height: 1.4; text-shadow: 0 1px 12px rgba(0,0,0,.35); }

.hero-v2__row { display: flex; align-items: center; gap: 16px; }
.hero-v2__arrow {
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,.18);
	border: none;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: background .2s;
	flex: none;
}
.hero-v2__arrow:hover { background: rgba(255,255,255,.3); }

.hero-v2__lines { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 2; }
.hero-v2__lines button {
	width: 34px; height: 3px; border-radius: 3px;
	background: rgba(255,255,255,.45);
	border: none; padding: 0; cursor: pointer;
	transition: background .25s;
}
.hero-v2__lines button.is-active { background: #fff; }

.hero-v2__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; z-index: 1; transition: opacity .7s ease; }
.hero-v2__slide.is-active { opacity: 1; z-index: 2; }
/*
 * Velo oscuro del lado izquierdo (donde va el texto) para asegurar
 * legibilidad del texto blanco sin importar qué tan clara sea la foto
 * de fondo de cada diapositiva. Antes solo había un text-shadow muy
 * sutil, insuficiente contra fondos claros como el de Zenith (teal/menta),
 * donde el subtítulo quedaba casi ilegible.
 */
.hero-v2__slide::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(12,22,32,.5) 0%, rgba(12,22,32,.28) 32%, rgba(12,22,32,0) 60%);
	z-index: 1;
	pointer-events: none;
}
.hero-v2__slides { position: relative; width: 100%; min-height: 620px; }
.hero-v2__slide-inner { position: absolute; inset: 0; display: flex; align-items: center; z-index: 2; }
/* El .container usa margin:auto para centrarse en flujo normal; dentro de un
   flex row eso lo encoge y centra como item (bug). Forzamos ancho completo
   para que el centrado ocurra puertas adentro, no como item flex. */
.hero-v2__slide-inner > .container { width: 100%; }

/* ---------------- Beneficios: iconos reales ---------------- */
.benefits-v2 { border-bottom: 1px solid var(--kaise-border); padding: 24px 0; background: #fff; }
.benefits-v2__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 44px; }
.benefits-v2__list li { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 500; color: var(--kaise-dark); }
.benefits-v2__list svg { color: var(--kaise-accent); flex: none; }

/* =====================================================================
   NUESTROS PRODUCTOS
   ===================================================================== */
.productos-v2-head { text-align: center; margin-bottom: 46px; }
.productos-v2-head h2 {
	font-family: 'Inter', sans-serif;
	font-style: italic;
	font-weight: 700;
	color: var(--kaise-primary);
	font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}

.pcard {
	background: #fff;
	border: 1px solid var(--kaise-border);
	border-radius: 0; /* diseño original: esquinas cuadradas, no redondeadas */
	padding: 20px;
	min-width: 0;
	transition: box-shadow .25s, transform .25s;
}
.pcard:hover { box-shadow: 0 20px 40px rgba(20,50,70,.08); transform: translateY(-3px); }
.pcard__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pcard__shipping { font-size: .78rem; color: var(--kaise-gray); }
.pcard__icons { display: flex; gap: 8px; }
.pcard__icons button {
	width: 32px; height: 32px; border-radius: 50%;
	border: 1px solid var(--kaise-border); background: #fff;
	display: flex; align-items: center; justify-content: center;
	color: var(--kaise-dark); transition: all .2s;
}
.pcard__icons button:hover, .pcard__icons button.is-active { border-color: var(--kaise-accent); color: var(--kaise-accent); }
.pcard__media { position: relative; display: flex; align-items: center; justify-content: center; padding: 18px 10px 26px; min-height: 210px; }
.pcard__media img { max-height: 190px; max-width: 100%; width: auto; margin: 0 auto; }
/* Estado normal: frasco + caja. Al hacer hover, solo el frasco (crossfade). */
.pcard__img { position: absolute; opacity: 1; transition: opacity .4s ease; }
.pcard__img--hover { opacity: 0; }
.pcard:hover .pcard__img--normal,
.pcard.is-expanded .pcard__img--normal { opacity: 0; }
.pcard:hover .pcard__img--hover,
.pcard.is-expanded .pcard__img--hover { opacity: 1; }
.pcard__name { font-weight: 600; font-size: 1rem; color: var(--kaise-dark); margin-bottom: 2px; }
.pcard__meta-row { display: flex; justify-content: space-between; align-items: baseline; }
.pcard__meta { font-size: .82rem; color: var(--kaise-gray); }
.pcard__price { font-weight: 700; color: var(--kaise-primary); font-size: 1.02rem; }

/* =====================================================================
   QUOTE BANNER
   ===================================================================== */
.quote-v2 {
	position: relative; min-height: 300px;
	background-size: cover; background-position: center;
	display: flex; align-items: center;
}
.quote-v2 > .container { width: 100%; }
.quote-v2 blockquote {
	position: relative; z-index: 2; color: #fff;
	font-weight: 700; font-style: italic;
	font-size: clamp(1.4rem, 3vw, 2.25rem); /* XD: 36px en desktop */
	line-height: 1.3; max-width: 640px;
	margin: 0 auto; text-align: center;
	text-shadow: 0 2px 18px rgba(0,20,40,.25);
}
.quote-v2 u { text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* =====================================================================
   FRAGANCIAS (fondo blanco -> azul, sin overlay oscuro)
   ===================================================================== */
.fragancias-v2 { background-size: cover; background-position: top center; padding: 90px 0 70px; }
.fragancias-v2-head { text-align: center; max-width: 720px; margin: 0 auto 50px; }
.fragancias-v2-head h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); color: var(--kaise-dark); font-weight: 700; } /* XD: 36px */
.fragancias-v2-head h2 em { color: var(--kaise-primary); font-style: italic; }
.fragancias-v2-head p { color: #707070; font-size: 1.125rem; line-height: 1.6; } /* XD: 18px, gris #707070 */
.fragancias-v2-head p strong { font-weight: 600; color: var(--kaise-dark); } /* XD: semibold, no bold */

.perfumes-v2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 80px; }
.perfume-v2-card {
	position: relative; aspect-ratio: 1 / 1; border-radius: 0; overflow: hidden; /* XD: el rectángulo de fondo mide 810×810 — cuadrado, no un rectángulo alargado */
	display: flex; align-items: flex-end; padding: 38px;
	background-size: cover; background-position: center;
	color: var(--kaise-dark);
}
.perfume-v2-card__eyebrow { font-size: 1rem; color: #707070; display: block; margin-bottom: 4px; } /* XD: "Perfume" en 16px, gris #707070 */
.perfume-v2-card h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: clamp(2.4rem, 4.4vw, 4rem); color: #707070; margin-bottom: 8px; } /* XD: 64px SemiBold, gris #707070 (no negro) */
.perfume-v2-card p { color: #707070; font-size: 1.25rem; margin-bottom: 20px; max-width: 280px; } /* XD: 20px, gris #707070 */
.perfume-v2-card__actions { display: flex; gap: 10px; }
.perfume-v2-card .btn-outline-light { background: #fff; color: var(--kaise-dark); border: 1px solid rgba(0,0,0,.15); }
.perfume-v2-card .btn-outline-light:hover { background: var(--kaise-light-gray); }

.essence-v2-title { text-align: center; color: #fff; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: 34px; } /* XD: 36px */
.essence-v2-title em { font-style: italic; }

/* Tarjetas de ancho fijo (grid, no flex-grow horizontal). Al hacer hover
   o tap, la tarjeta se expande VERTICALMENTE revelando texto adicional,
   la foto hace crossfade a una segunda imagen, y el número cambia de
   color — replica la interacción real del diseño XD. */
.essence-v2-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.essence-v2-card {
	position: relative; border-radius: 0; overflow: visible; /* antes "hidden": recortaba el panel expandido, que ahora es absolute y sobresale de la tarjeta a propósito */
	background: #fff;
	cursor: pointer;
}
.essence-v2-card__media { position: relative; height: 300px; overflow: hidden; }
.essence-v2-card__img {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 1;
	transition: opacity .5s ease, transform .6s ease;
}
.essence-v2-card__img--hover { opacity: 0; }
.essence-v2-card:hover .essence-v2-card__img--normal,
.essence-v2-card.is-expanded .essence-v2-card__img--normal { opacity: 0; }
.essence-v2-card:hover .essence-v2-card__img--hover,
.essence-v2-card.is-expanded .essence-v2-card__img--hover { opacity: 1; }
.essence-v2-card:hover .essence-v2-card__img--hover,
.essence-v2-card.is-expanded .essence-v2-card__img--hover { transform: scale(1.04); }

.essence-v2-card__caption {
	position: relative; z-index: 2;
	background: #fff;
	padding: 14px 16px;
	display: flex; align-items: center; gap: 12px;
}
.essence-v2-card__num {
	width: 34px; height: 34px; border-radius: 50%;
	background: #9a9a9a; color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.125rem; font-weight: 600; flex: none; /* XD: 18px SemiBold */
	transition: background-color .3s ease;
}
.essence-v2-card:hover .essence-v2-card__num,
.essence-v2-card.is-expanded .essence-v2-card__num { background: var(--kaise-accent); }
.essence-v2-card__label {
	font-weight: 700; color: var(--kaise-dark); font-size: 1rem; /* medido con precisión contra tu captura: ~16px, no los 24px que tenía antes */
	transition: color .3s ease;
}
.essence-v2-card:hover .essence-v2-card__label,
.essence-v2-card.is-expanded .essence-v2-card__label { color: var(--kaise-accent); }

.essence-v2-card__extra {
	position: absolute; top: 100%; left: 0; right: 0; /* flota sobre lo que sigue abajo, en vez de empujarlo (así "EAU DE PARFUM" no se mueve al expandir) */
	max-height: 0; overflow: hidden;
	background: #fff; z-index: 5;
	box-shadow: 0 18px 30px rgba(20,40,60,.12);
	transition: max-height .45s cubic-bezier(.2,.8,.2,1);
}
.essence-v2-card:hover .essence-v2-card__extra,
.essence-v2-card.is-expanded .essence-v2-card__extra { max-height: 280px; }
.essence-v2-card__extra-inner { padding: 2px 16px 18px; }
.essence-v2-card__extra p { font-size: 1rem; color: #707070; line-height: 1.5; margin: 0 0 .8em; } /* XD: 16px, #707070 */
.essence-v2-card__extra p.cta { font-style: italic; font-weight: 600; color: var(--kaise-dark); margin: 0; } /* XD: SemiBold Italic, no Bold */

.eau-v2-band { text-align: center; margin-top: 60px; }
.eau-v2-band__text {
	display: inline-block;
	width: 100%; /* la "caja" ya es el .container que lo envuelve */
	white-space: nowrap;
	font-family: 'Inter', sans-serif;
	font-weight: 400; /* ajustado por Kaisé vía Personalizador (antes 100/Thin) */
	font-size: clamp(1.8rem, 5vw, 3.2rem);
	letter-spacing: .35em; /* valor de respaldo; JS lo recalcula para llegar exacto al borde (ver main.js) */
	color: rgba(255,255,255,.4); /* ajustado por Kaisé vía Personalizador (antes .6) */
}

/* =====================================================================
   NOSOTROS / EXPERIENCIA — con foto arriba
   ===================================================================== */
.two-cards-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.info-card-v2 {
	background: #fff; border: 1px solid var(--kaise-border); border-radius: 0;
	overflow: hidden; box-shadow: 0 10px 30px rgba(20,40,60,.05);
}
.info-card-v2__media { height: 230px; overflow: hidden; }
.info-card-v2__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s ease; } /* object-position:top agregado por Kaisé vía Personalizador */
.info-card-v2:hover .info-card-v2__media img { transform: scale(1.05); }
.info-card-v2__body { padding: 40px 44px; text-align: center; }
.info-card-v2__body h3 { font-size: 1.5rem; font-weight: 700; color: var(--kaise-dark); }
.info-card-v2__body h3 em { font-style: italic; color: inherit; }
.info-card-v2__body p { color: var(--kaise-gray); font-size: .92rem; max-width: 380px; margin: 10px auto 22px; }

/* =====================================================================
   CONTACTO — columna única
   ===================================================================== */
.contact-v2 { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: 0; overflow: hidden; }
.contact-v2__form { padding: 80px 60px; }
.contact-v2__form h2 { font-size: 2.25rem; margin-bottom: 30px; font-weight: 700; } /* XD: 36px */
.contact-v2__form h2 em { font-style: italic; color: var(--kaise-primary); }
.contact-v2__fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 6px; }
.field-v2 {
	width: 100%; padding: 14px 18px; border: none;
	background: var(--kaise-light-gray); border-radius: 0; outline: none; /* diseño original: cuadrado */
	font-size: .92rem; transition: box-shadow .2s;
}
.field-v2:focus { box-shadow: 0 0 0 2px var(--kaise-primary); }
textarea.field-v2 { min-height: 120px; resize: vertical; }
.contact-v2__media { background-size: cover; background-position: center; min-height: 420px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 991px) {
	.perfumes-v2-grid, .two-cards-v2, .contact-v2 { grid-template-columns: 1fr; }
	.essence-v2-row { grid-template-columns: repeat(2, 1fr); }
	.essence-v2-card__media { height: 240px; }
	.hero-v2__wordmark { display: none; }
}
@media (max-width: 767px) {
	.essence-v2-row { grid-template-columns: 1fr; }
	.benefits-v2__list { gap: 20px 28px; justify-content: flex-start; }
	.contact-v2__form { padding: 40px 24px; }
	.hero-v2__content h1 { font-size: 2rem; }
}

/* =====================================================================
   FOOTER — ajustes puntuales (iconos sociales blancos, botón newsletter)
   ===================================================================== */
.social-icons a { background: #fff; color: var(--kaise-primary); border: none; }
.social-icons a:hover { background: rgba(255,255,255,.85); }
.newsletter-form button { background: #fff; color: var(--kaise-primary); font-weight: 600; }
.newsletter-form button:hover { background: rgba(255,255,255,.9); }
.site-footer__legal a::after { content: ''; }

/* =====================================================================
   QUIZ — componente compartido (Nosotros, Experiencia, y cualquier
   página que incluya la sección "¿No sabes cuál fragancia elegir?").
   Vive aquí (inicio.css) porque es el único CSS que cargan TODAS
   las páginas del sitio; ponerlo en un CSS de página específica
   rompe el componente en cualquier otra página que lo reutilice.
   ===================================================================== */
.about-quiz { display: grid; grid-template-columns: 1fr 1fr; min-height: 580px; } /* XD: más altura, las fotos se cortaban */
.about-quiz__left {
	display: flex; align-items: center; justify-content: center; text-align: center;
	background-image: url('../images/quiz-floral.jpg');
	background-size: cover; background-position: center;
	padding: 60px 40px;
}
.about-quiz__left-inner { max-width: 380px; }
.about-quiz__left h2 { font-size: 1.7rem; font-weight: 700; color: var(--kaise-dark); margin-bottom: 20px; }
.about-quiz__left h2 em { font-style: italic; color: var(--kaise-primary); }
.about-quiz__left p { color: #4a4a4a; font-size: .95rem; margin-bottom: 30px; }
.about-quiz__left p strong { color: var(--kaise-dark); font-weight: 700; }
.about-quiz__right {
	background-image: url('../images/quiz-bottles-black.jpg');
	background-size: cover; background-position: center;
}
@media (max-width: 991px) {
	.about-quiz { grid-template-columns: 1fr; }
	.about-quiz__right { min-height: 320px; }
}