/* La Alquimia de tu Belleza: paleta rosa y oro + secciones nuevas */
:root, :root[data-paleta] {
  --papel:#FFFBFA; --niebla:#F7EDEB; --linea:#EBDCD9; --tinta:#2E2224; --grafito:#75625F;
  --berenjena:#A24D62; --berenjena-osc:#863B4F; --oro:#C2A05A; --plata:#E3B7B5;
  --oro-texto:#8A6A2A;
}

/* Fotos: espacios para imágenes. Mientras no hay foto, se ven con los colores de la estación y una nota de qué foto va. */
.foto { position:relative; margin:0; border-radius:16px; overflow:hidden; aspect-ratio:4/5; max-width:100%;
  background: radial-gradient(120% 90% at 30% 20%, var(--a, #E8C6B8), transparent 60%), linear-gradient(160deg, var(--b, #C98F86), var(--c, #7E4A52)); }
.foto img { width:100%; height:100%; object-fit:cover; display:block; }
.foto::before { content:''; position:absolute; left:50%; top:16%; width:34%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%; background:rgba(255,255,255,.22); }
.foto::after { content:''; position:absolute; left:50%; top:46%; width:62%; height:70%; transform:translateX(-50%); border-radius:45% 45% 0 0; background:rgba(255,255,255,.16); }
.foto-nota { position:absolute; left:8px; right:8px; bottom:8px; z-index:2; background:rgba(46,34,36,.78); color:#fff; font-size:0.72rem; line-height:1.35; padding:6px 8px; border-radius:8px; }
.foto-nota b { font-weight:500; color:#F3D9A4; }
.foto .insignia { position:absolute; top:10px; left:10px; z-index:2; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--papel); color:var(--berenjena); display:grid; place-items:center; }
.foto .insignia svg { width:60%; height:auto; }

/* Hero con collage */
.collage { width:100%; display:grid; grid-template-columns: 1fr 1fr; gap:12px; max-width:32rem; margin-left:auto; }
.collage .foto { aspect-ratio: 4/5; }
.collage .foto:nth-child(even) { transform: translateY(1.5rem); }
.hero .acciones .boton.secundario { min-height: 3.25rem; }

/* Productos */
.productos { display:grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.producto { background:#fff; border:1px solid var(--linea); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; }
.producto .foto { border-radius:0; aspect-ratio: 16/10; }
.producto-cuerpo { padding: 1.5rem 1.5rem 1.75rem; display:flex; flex-direction:column; gap:0.75rem; flex:1; }
.producto h3 { font-family:var(--display); font-style:italic; font-weight:300; font-size:var(--t3); }
.producto .gratis { color:var(--oro-texto); font-weight:500; font-size:var(--t0); margin:0; }
.producto ul { margin:0; padding-left:1.1em; font-size:var(--t0); color:var(--grafito); }
.producto li { margin-bottom:0.3rem; }
.producto .pie-prod { margin-top:auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; padding-top:0.75rem; border-top:1px solid var(--linea); }
.producto .precio-g { font-size:var(--t0); color:var(--grafito); }
.producto .precio-g strong { font-family:var(--display); font-size:var(--t3); color:var(--tinta); font-weight:400; }

.combo { margin-top:1.5rem; border-radius:20px; background:var(--tinta); color:var(--papel); display:grid; grid-template-columns: 1fr 1.3fr; overflow:hidden; }
.combo .foto { border-radius:0; aspect-ratio:auto; min-height:18rem; }
.combo-cuerpo { padding: 2rem; display:flex; flex-direction:column; gap:0.9rem; }
.combo h3 { font-family:var(--display); font-style:italic; font-weight:300; font-size:var(--t4); color:var(--papel); }
.combo p { color:#EBDCD9; margin:0; font-size:var(--t0); }
.combo .formula { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; font-size:var(--t0); }
.combo .formula span { border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:0.3rem 0.85rem; }
.combo .formula b { color:var(--oro); font-weight:400; font-size:1.2rem; }
.combo .precio-combo { font-family:var(--display); font-size:var(--t4); color:var(--papel); }
.combo .precio-combo small { font-family:var(--texto); font-size:var(--t0); color:#D9C3BF; margin-left:0.5rem; }
.combo .boton { align-self:flex-start; background:var(--papel); color:var(--tinta); }
.combo .boton:hover { background:var(--niebla); }
.combo .nota { color:#D9C3BF; }

/* Estaciones */
.familias { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top:2.5rem; }
.familia h3 { font-family:var(--display); font-style:italic; font-weight:300; font-size:var(--t3); margin:0.9rem 0 0.25rem; }
.familia p { font-size:var(--t0); color:var(--grafito); margin:0 0 0.6rem; }
.familia .tira { display:flex; gap:3px; height:0.9rem; }
.familia .tira i { flex:1; border-radius:2px; }
.est-intro { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items:center; }

/* Estilos */
.estilos-fila { display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; margin-top:2.5rem; }
.estilo-card h3 { font-family:var(--display); font-style:italic; font-weight:300; font-size:var(--t2); margin:0.7rem 0 0.2rem; }
.estilo-card p { font-size:var(--t-1); color:var(--grafito); margin:0; }
.estilo-card .foto-nota { font-size:0.62rem; }

/* Ejemplo de combinación */
.ejemplo { display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items:center; }
.ejemplo .titulo-combo { font-family:var(--display); font-style:italic; font-weight:300; font-size:var(--t4); margin:0 0 1rem; }
.formulas { list-style:none; padding:0; margin:1.25rem 0 0; display:grid; gap:0.75rem; }
.formulas li { display:grid; grid-template-columns: auto 1fr; gap:0.9rem; align-items:center; font-size:var(--t0); }
.formulas .chips { display:flex; gap:3px; }
.formulas .chips i { width:1.6rem; height:2.4rem; border-radius:4px; }

/* Oferta debajo del resultado */
.oferta { margin-top:2.5rem; padding:1.75rem; border-radius:20px; background:var(--niebla); }
.oferta h2 { font-size:var(--t4); margin-bottom:0.5rem; }
.reloj { background:#fff; border:1px solid var(--oro); border-radius:12px; padding:0.75rem 1rem; font-size:var(--t0); }
.reloj strong { font-variant-numeric: tabular-nums; color:var(--berenjena); font-weight:500; }
.of-opciones { display:grid; gap:0.75rem; margin:1.25rem 0 1rem; }
.of-combo { flex-direction:column; align-items:flex-start; text-align:left; padding:1rem 1.5rem; border-radius:18px; }
.of-tit { font-size:var(--t1); }
.of-sub { font-size:var(--t-1); opacity:0.85; font-weight:400; }
.of-links { display:flex; flex-wrap:wrap; gap:0.5rem 1.25rem; font-size:var(--t0); margin:0; }
.link { background:none; border:0; padding:0; font:inherit; color:inherit; text-decoration:underline; text-underline-offset:0.18em; cursor:pointer; }
.compra-ok { margin-top:2rem; }
.compra-ok h2 { font-size:var(--t4); margin:0.5rem 0; }

/* Test de estilo */
.opciones.vertical { flex-direction:column; align-items:stretch; }
.opciones.vertical .opcion span { border-radius:12px; width:100%; }
.barra-estilo { display:grid; grid-template-columns: 7rem 1fr 3rem; gap:0.75rem; align-items:center; font-size:var(--t0); margin-bottom:0.5rem; }
.barra-estilo .b { height:0.6rem; border-radius:999px; background:var(--linea); overflow:hidden; }
.barra-estilo .b i { display:block; height:100%; background:var(--berenjena); border-radius:999px; }
.claves { display:flex; flex-wrap:wrap; gap:0.5rem; padding:0; list-style:none; margin:1rem 0; }
.claves li { background:#fff; border:1px solid var(--linea); border-radius:999px; padding:0.3rem 0.9rem; font-size:var(--t0); }

@media (max-width: 960px) {
  .familias { grid-template-columns: repeat(2, 1fr); }
  .estilos-fila { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:0.75rem; }
  .estilo-card { flex: 0 0 11rem; scroll-snap-align:start; }
}
@media (max-width: 860px) {
  .collage { max-width: 26rem; margin: 0 auto; }
  .collage .foto:first-child { min-height: 18rem; }
  .productos, .combo, .ejemplo, .est-intro { grid-template-columns: 1fr; }
  .combo .foto { min-height: 14rem; }
}

.foto:has(img)::before, .foto:has(img)::after { display:none; }
.foto img { position:absolute; inset:0; }
.foto .insignia { z-index:3; }

/* Botones fijos abajo (celular) */
.barra-fija { position:fixed; left:0; right:0; bottom:0; z-index:40; display:none; gap:0.5rem; padding:0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); background:rgba(255,251,250,.96); border-top:1px solid var(--linea); backdrop-filter: blur(6px); }
.barra-fija .boton { flex:1; min-height:2.9rem; padding:0.6rem 1rem; font-size:var(--t0); }
.barra-fija .boton.secundario { background:var(--papel); }
@media (max-width: 860px) {
  .barra-fija:not([hidden]) { display:flex; }
  body { padding-bottom: 4.5rem; }
  /* Portada: fotos primero, en tira, y título más compacto */
  .hero { gap: 1.5rem; padding-top: 0.5rem; }
  .hero > div:last-child { order: -1; }
  .collage { grid-template-columns: repeat(4, 1fr); gap:8px; max-width:none; }
  .collage .foto:nth-child(even) { transform:none; }
  .collage .foto, .collage .foto:first-child { grid-row:auto; aspect-ratio: 3/4; min-height:0; }
  .collage .foto .insignia { width:1.8rem; height:1.8rem; top:6px; left:6px; }
  .hero h1 { font-size: 2.6rem; margin-bottom: 1rem; }
  .hero .bajada { font-size: var(--t1); }
  .hero .acciones { margin-top: 1.25rem; }
}
/* Barra de oferta fija en el resultado */
.barra-oferta { position:fixed; left:0; right:0; bottom:0; z-index:40; padding:0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); background:var(--tinta); color:var(--papel); display:flex; align-items:center; gap:0.75rem; }
.barra-oferta[hidden] { display:none; }
.barra-oferta .txt { flex:1; font-size:0.85rem; line-height:1.3; }
.barra-oferta .txt strong { color:#F3D9A4; font-weight:500; font-variant-numeric: tabular-nums; }
.barra-oferta .boton { min-height:2.6rem; padding:0.5rem 1rem; font-size:0.9rem; background:var(--papel); color:var(--tinta); white-space:nowrap; }
@media (min-width: 861px) { .barra-oferta { left:auto; right:1.5rem; bottom:1.5rem; border-radius:16px; max-width:30rem; box-shadow:0 8px 30px rgba(46,34,36,.25); } }
/* Preguntas de a una */
.contador-preg { font-size: var(--t-1); color: var(--grafito); margin: -1rem 0 1.5rem; }
.combo .foto { aspect-ratio: 4/5; min-height: 0; align-self: stretch; height: 100%; }
@media (max-width: 860px) { .combo .foto { height: auto; } }
/* Promo 2x1 destacada en el combo */
.promo-2x1 { background:var(--plata); color:var(--tinta); border-radius:14px; padding:0.9rem 1.1rem; display:flex; flex-direction:column; gap:0.35rem; box-shadow:0 0 0 4px rgba(227,183,181,.25); }
.promo-2x1 .promo-et { align-self:flex-start; background:var(--tinta); color:#F3D9A4; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; border-radius:999px; padding:0.2rem 0.7rem; font-weight:500; }
.combo .promo-2x1 p { color:var(--tinta); font-size:var(--t1); line-height:1.35; }
.promo-2x1 strong { font-weight:500; }
.familia .variantes { font-size:var(--t-1); color:var(--grafito); }
.titulo-combo .pre-combo { display:block; font-family:var(--texto); font-style:normal; font-size:var(--t0); letter-spacing:0.08em; text-transform:uppercase; color:var(--oro-texto); margin-bottom:0.4rem; }
.claves-look { margin:1.25rem 0 0; padding-left:1.1em; display:grid; gap:0.6rem; font-size:var(--t0); }
.claves-look li::marker { color:var(--oro); }
.familia .variantes { display:block; white-space:nowrap; }
@media (max-width: 960px) { .familia .variantes { white-space:normal; min-height:2.6em; } }
/* Ver otro ejemplo */
.ej-nav { display:flex; align-items:center; gap:1rem; margin-top:1.5rem; flex-wrap:wrap; }
.ej-puntos { display:flex; gap:6px; }
.ej-puntos i { width:8px; height:8px; border-radius:50%; background:var(--linea); }
.ej-puntos i.on { background:var(--oro); }
.ej-anim figure, .ej-anim #ej-tit, .ej-anim #ej-lista { animation: ejFade .45s ease; }
@keyframes ejFade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .ej-anim figure, .ej-anim #ej-tit, .ej-anim #ej-lista { animation:none; } }

/* Páginas de muestra de las guías */
.muestras-tit { margin: 1.75rem 0 0.75rem; font-size: var(--t2); }
.muestras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.muestra-pag { padding: 0; border: 1px solid var(--linea, #EBDCD9); border-radius: 10px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 6px 18px rgba(46,34,36,.08); transition: transform .2s; }
.muestra-pag:hover { transform: translateY(-3px); }
.muestra-pag img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
@media (max-width: 720px) { .muestras { grid-template-columns: 1fr; } }
.visor { padding: 0; border: 0; background: transparent; max-width: 94vw; }
.visor::backdrop { background: rgba(46,34,36,.75); }
.visor img { display: block; max-width: 94vw; max-height: 88vh; border-radius: 8px; }
.visor-cerrar { position: absolute; top: 6px; right: 10px; border: 0; background: #fff; border-radius: 50%; width: 34px; height: 34px; font-size: 22px; cursor: pointer; }
.combo-portadas { display: grid; gap: 0.6rem; align-content: center; background: var(--niebla, #F7EDEB); padding: 0.8rem; }
.combo-portadas img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; box-shadow: 0 4px 12px rgba(46,34,36,.12); }

/* Código de descuento en la oferta */
.of-codigo { margin: 0 0 1rem; font-size: var(--t0); }
.of-codigo summary { cursor: pointer; color: var(--rosa, #A24D62); }
.of-codigo-fila { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.of-codigo-fila input { flex: 1; min-width: 10rem; padding: 0.7rem 0.9rem; border: 1px solid var(--linea, #EBDCD9); border-radius: 12px; font: inherit; text-transform: uppercase; letter-spacing: .08em; }
/* Página de compra */
.guia-fila { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.75rem; padding:1rem 1.25rem; border:1px solid var(--linea, #EBDCD9); border-radius:16px; background:#fff; margin-bottom:0.75rem; }
.guia-fila h3 { margin:0; font-size:var(--t2); }