/* =====================================================================
   Adribel — hoja de estilo propia (complementa Tailwind CDN)
   Identidad: glicerina traslúcida, luz suave, tinta ciruela.
   ===================================================================== */

:root{
  --tinta:#241A2E;
  --perla:#FBF7F8;
  --malva:#EDE1E9;
  --rosa:#A85E7E;
  --salvia:#6F9483;
  --humo:#6B5C74;
}

/* Evita el parpadeo mientras carga Tailwind desde CDN */
html{ background:var(--perla); }
body{
  background:var(--perla); color:var(--tinta);
  font-family:'Manrope',system-ui,sans-serif;
  font-weight:450;            /* Manrope es variable: 450 da un trazo con más cuerpo que 400 */
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--rosa); color:#fff; }

/* Foco visible y consistente en todo el sitio */
:focus-visible{
  outline:2px solid var(--rosa);
  outline-offset:3px;
  border-radius:6px;
}

/* ------------------------------------------------------------------ */
/*  Navegación                                                         */
/* ------------------------------------------------------------------ */
.nav-link{ position:relative; padding-bottom:2px; }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-2px;
  height:1px; width:0; background:var(--rosa);
  transition:width .35s cubic-bezier(.22,1,.36,1);
}
.nav-link:hover::after,
.nav-link--activo::after{ width:100%; }
.nav-link--activo{ color:var(--rosa); }

/* ------------------------------------------------------------------ */
/*  Atmósfera de glicerina: manchas de color a la deriva               */
/* ------------------------------------------------------------------ */
.atmosfera{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.gota{
  position:absolute; border-radius:50%;
  filter:blur(60px); opacity:.55;
  animation:derivar 26s ease-in-out infinite alternate;
}
.gota--rosa   { width:34rem; height:34rem; background:#E9C6D6; top:-8rem;  left:-6rem; }
.gota--salvia { width:26rem; height:26rem; background:#CBE0D3; bottom:-6rem; right:-4rem; animation-delay:-9s; }
.gota--oro    { width:20rem; height:20rem; background:#F3E3C4; top:38%; right:22%; animation-delay:-16s; }

@keyframes derivar{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(3rem,-2rem,0) scale(1.08); }
  100% { transform:translate3d(-2rem,2.5rem,0) scale(.96); }
}

/* ------------------------------------------------------------------ */
/*  Tarjeta de producto: la pastilla de jabón                          */
/* ------------------------------------------------------------------ */
.jabon{
  position:relative;
  border-radius:2.25rem;
  overflow:hidden;
  background:linear-gradient(160deg,#fff 0%,var(--malva) 100%);
  isolation:isolate;
}
.jabon img{
  transition:transform .7s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.jabon-card:hover .jabon img{ transform:scale(1.05); }

/* Destello especular: la luz que atraviesa la glicerina */
.jabon::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.65) 46%,transparent 60%);
  transform:translateX(-120%);
  transition:transform .9s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.jabon-card:hover .jabon::after{ transform:translateX(120%); }

.jabon-card{ transition:transform .4s cubic-bezier(.22,1,.36,1); }
.jabon-card:hover{ transform:translateY(-4px); }

/* Etiqueta de oferta / estado */
.sello{
  display:inline-flex; align-items:center; gap:.35rem;
  border-radius:999px; padding:.2rem .7rem;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}

/* Faja diagonal "Oferta" sobre la esquina de la foto (el .jabon que la
   contiene tiene overflow:hidden, así que las puntas quedan recortadas) */
.faja-oferta{
  position:absolute; top:18px; left:-40px; z-index:4;
  width:150px; padding:.3rem 0;
  transform:rotate(-45deg);
  background:var(--rosa); color:#fff;
  text-align:center;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 2px 10px rgba(36,26,46,.3);
}
.faja-oferta--agotado{ background:rgba(36,26,46,.6); }

/* ------------------------------------------------------------------ */
/*  Tipografía editorial                                               */
/* ------------------------------------------------------------------ */
.titular{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;                              /* antes 400: se veía fino en pantalla */
  font-variation-settings:'SOFT' 30,'opsz' 120;
  letter-spacing:-0.018em;
  line-height:1.05;
}

/* Los títulos que usan font-display de Tailwind también van con más cuerpo */
.font-display{ font-weight:600; }
.antetitulo{
  font-size:11px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--humo);
}
.texto-rico p{ margin-bottom:1rem; line-height:1.75; }
.texto-rico{ font-weight:450; }
.texto-rico p:last-child{ margin-bottom:0; }
.texto-rico strong{ color:var(--tinta); font-weight:700; }

/* ------------------------------------------------------------------ */
/*  Galería del producto                                               */
/* ------------------------------------------------------------------ */
.miniatura{ border:1px solid transparent; transition:border-color .25s, opacity .25s; opacity:.72; }
.miniatura:hover{ opacity:1; }
.miniatura[aria-current="true"]{ border-color:var(--rosa); opacity:1; }

/* Botón-lupa sobre la foto principal: invita a ampliar */
.visor-lupa{
  position:absolute; right:.9rem; bottom:.9rem; z-index:3;
  display:inline-flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; border-radius:999px;
  background:rgba(251,247,248,.9); color:var(--tinta);
  box-shadow:0 8px 22px -10px rgba(36,26,46,.5);
  opacity:0; transform:translateY(.35rem);
  transition:opacity .3s, transform .3s;
  pointer-events:none;
}
#abrir-visor:hover .visor-lupa,
#abrir-visor:focus-visible .visor-lupa{ opacity:1; transform:none; }
@media (hover: none){ .visor-lupa{ opacity:1; transform:none; } }

/* ------------------------------------------------------------------ */
/*  Visor de galería a pantalla completa (lightbox)                    */
/* ------------------------------------------------------------------ */
.visor{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem, 4vw, 3rem);
}
.visor[hidden]{ display:none; }

.visor__fondo{
  position:absolute; inset:0;
  background:rgba(20,14,26,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .25s ease;
}
.visor--abierto .visor__fondo{ opacity:1; }

.visor__caja{
  position:relative; z-index:1;
  width:100%; max-width:70rem;
  padding:0 3.5rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.97);
  transition:opacity .25s ease, transform .25s ease;
}
.visor--abierto .visor__caja{ opacity:1; transform:none; }

.visor__marco{
  margin:0; max-width:100%;
  display:flex; align-items:center; justify-content:center;
}
.visor__marco img{
  max-width:100%; max-height:82vh;
  width:auto; height:auto; object-fit:contain;
  border-radius:1rem;
  background:var(--malva);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.7);
}

.visor__cerrar{
  position:fixed; top:1rem; right:1rem;
  width:2.75rem; height:2.75rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(251,247,248,.9); color:var(--tinta); border:0; cursor:pointer;
  transition:background-color .2s, transform .3s;
}
.visor__cerrar:hover{ background:#fff; transform:rotate(90deg); }

.visor__flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  width:3rem; height:3rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(251,247,248,.85); color:var(--tinta); border:0; cursor:pointer;
  transition:background-color .2s;
  z-index:2;
}
.visor__flecha:hover{ background:#fff; }
.visor__flecha--prev{ left:0; }
.visor__flecha--next{ right:0; }

.visor__contador{
  position:absolute; left:0; right:0; bottom:-2.5rem;
  text-align:center; color:var(--perla);
  font-size:13px; letter-spacing:.14em;
}

.visor--una .visor__flecha,
.visor--una .visor__contador{ display:none; }

@media (max-width: 640px){
  .visor__caja{ padding:0 2.5rem; }
  .visor__flecha{ width:2.5rem; height:2.5rem; background:rgba(251,247,248,.78); }
  .visor__marco img{ max-height:74vh; }
}

@media (prefers-reduced-motion: reduce){
  .visor__fondo,
  .visor__caja{ transition:none; }
  .visor__cerrar:hover{ transform:none; }
}

/* ------------------------------------------------------------------ */
/*  Formulario                                                         */
/* ------------------------------------------------------------------ */
.campo{
  width:100%; font-weight:450; border:1px solid rgba(36,26,46,.14); background:#fff;
  border-radius:1rem; padding:.8rem 1rem; font-size:15px;
  transition:border-color .25s, box-shadow .25s;
}
.campo:focus{ outline:none; border-color:var(--rosa); box-shadow:0 0 0 3px rgba(168,94,126,.14); }
.etiqueta{ display:block; font-size:13px; color:var(--humo); margin-bottom:.4rem; }

/* Opciones tipo "chip" del formulador
   Ojo: el selector apunta al span que sigue al input (hijo directo).
   Con ".chip span" a secas también se estilarían los span anidados
   del rótulo y la nota, y cada uno se dibujaría como una pastilla. */
.chip{ display:block; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }

.chip > input + span{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  min-height:5.25rem; cursor:pointer; text-align:center;
  border:1px solid rgba(36,26,46,.16); border-radius:1.25rem;
  padding:.85rem 1rem; font-size:15px; line-height:1.3;
  background:#fff; color:var(--tinta);
  transition:background-color .25s, border-color .25s, color .25s, transform .25s;
}
.chip > input + span:hover{ border-color:var(--rosa); transform:translateY(-2px); }

.chip-nombre{ display:block; font-weight:600; }
.chip-nota{ display:block; margin-top:.25rem; font-size:12.5px; opacity:.72; }

/* Marca de selección: un tilde en la esquina, para no depender solo del color */
.chip > input + span::after{
  content:''; position:absolute; top:.6rem; right:.7rem;
  width:1.15rem; height:1.15rem; border-radius:50%;
  border:1px solid currentColor; opacity:.28;
  transition:opacity .25s, background-color .25s;
}
.chip > input:checked + span::after{
  opacity:1; border-color:transparent;
  background:var(--rosa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.75rem no-repeat;
}

.chip > input:checked + span{ border-color:var(--tinta); box-shadow:0 8px 24px -12px rgba(36,26,46,.5); }
.chip > input:focus-visible + span{ outline:2px solid var(--rosa); outline-offset:3px; }

/* Variante sobre fondo oscuro (el formulador).
   Va en CSS y no con clases "!" de Tailwind, porque el !important
   pisaría el estado seleccionado. */
.chip--oscuro > input + span{
  background:rgba(251,247,248,.07); color:var(--perla);
  border-color:rgba(251,247,248,.22);
}
.chip--oscuro .chip-nota{ opacity:.78; }
.chip--oscuro > input + span:hover{ background:rgba(251,247,248,.13); border-color:rgba(251,247,248,.55); }
.chip--oscuro > input:checked + span{
  background:var(--perla); color:var(--tinta); border-color:var(--perla);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
}

/* ------------------------------------------------------------------ */
/*  Carrusel de marca                                                  */
/* ------------------------------------------------------------------ */
.carrusel{ position:relative; }
.carrusel-marco{
  position:relative; overflow:hidden;
  border-radius:2.25rem; background:var(--malva);
  aspect-ratio:1536 / 750;
  box-shadow:0 30px 70px -40px rgba(36,26,46,.55);
}
.carrusel-slide{
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden;
  transition:opacity .8s ease, visibility .8s;
}
.carrusel-slide.activo{ opacity:1; visibility:visible; }
.carrusel-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Pie de foto sobre un velo, para que se lea sobre cualquier imagen */
.carrusel-pie{
  position:absolute; left:0; right:0; bottom:0;
  padding:3.5rem 1.5rem 1.25rem;
  font-size:15px; color:#fff; text-align:center;
  background:linear-gradient(to top, rgba(20,14,26,.78) 0%, rgba(20,14,26,.45) 45%, transparent 100%);
}

.carrusel-flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border-radius:50%;
  background:rgba(251,247,248,.85); color:var(--tinta);
  backdrop-filter:blur(4px); border:0; cursor:pointer;
  transition:background-color .25s, transform .25s;
}
.carrusel-flecha:hover{ background:#fff; }
.carrusel-flecha--prev{ left:1rem; }
.carrusel-flecha--next{ right:1rem; }

.carrusel-puntos{ display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
.carrusel-punto{
  width:.55rem; height:.55rem; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(36,26,46,.22); transition:background-color .25s, width .25s;
}
.carrusel-punto:hover{ background:rgba(36,26,46,.45); }
.carrusel-punto.activo{ width:1.6rem; border-radius:999px; background:var(--rosa); }

@media (max-width: 640px){
  .carrusel-marco{ border-radius:1.5rem; }
  .carrusel-flecha{ width:2.25rem; height:2.25rem; }
  .carrusel-flecha--prev{ left:.5rem; }
  .carrusel-flecha--next{ right:.5rem; }
  .carrusel-pie{ font-size:13px; padding:2.5rem 1rem 1rem; }
}

/* ------------------------------------------------------------------ */
/*  Aparición al hacer scroll                                          */
/* ------------------------------------------------------------------ */
.aparece{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.aparece.visible{ opacity:1; transform:none; }

/* ------------------------------------------------------------------ */
/*  Preferencia de movimiento reducido                                 */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .aparece{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------------
   Cuenta de cliente en el checkout
   El panel de contraseñas aparece solo si la casilla está marcada.
   Se usa :has() y, donde no exista, el panel queda siempre visible
   (nunca inaccesible).
---------------------------------------------------------------- */
@supports selector(:has(*)) {
  .bloque-cuenta .panel-cuenta { display: none; }
  .bloque-cuenta:has(input[name="crear_cuenta"]:checked) .panel-cuenta { display: block; }
}

/* ------------------------------------------------------------------ */
/*  Pantalla de carga                                                  */
/* ------------------------------------------------------------------ */
.cargador{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(40rem 30rem at 50% 40%, rgba(237,225,233,.9), transparent 70%),
    var(--perla, #FBF7F8);
  transition:opacity .45s ease, visibility .45s ease;
  /* Respaldo: si el JavaScript no llega a sacarla, se retira sola a los 4 s */
  animation:cargador-respaldo 0s linear 4s forwards;
}
.cargador--fuera{ opacity:0; visibility:hidden; }
@keyframes cargador-respaldo{ to{ opacity:0; visibility:hidden; } }

.cargador-centro{ display:flex; flex-direction:column; align-items:center; gap:.9rem; }

.cargador-logo{
  width:72px; height:72px; border-radius:50%;
  box-shadow:0 16px 40px -22px rgba(36,26,46,.6);
  animation:cargador-latido 1.6s ease-in-out infinite;
}
@keyframes cargador-latido{
  0%,100%{ transform:scale(1);    opacity:1; }
  50%    { transform:scale(1.06); opacity:.86; }
}

.cargador-marca{
  font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:19px;
  letter-spacing:.01em; color:var(--tinta, #241A2E);
}

/* Barrita indeterminada: avanza sin prometer un porcentaje que no sabemos */
.cargador-barra{
  position:relative; width:132px; height:3px; border-radius:999px;
  background:rgba(36,26,46,.1); overflow:hidden;
}
.cargador-barra > span{
  position:absolute; inset:0 auto 0 0; width:42%; border-radius:999px;
  background:linear-gradient(90deg, var(--rosa, #A85E7E), var(--salvia, #6F9483));
  animation:cargador-corre 1.15s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes cargador-corre{
  0%  { transform:translateX(-110%); }
  100%{ transform:translateX(260%); }
}

/* ------------------------------------------------------------------ */
/*  Barra de progreso entre páginas                                    */
/* ------------------------------------------------------------------ */
.progreso{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:95;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.progreso.activa{ opacity:1; }
.progreso > span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--rosa, #A85E7E), var(--salvia, #6F9483));
  border-radius:0 999px 999px 0;
  transition:width .25s ease;
}

/* ------------------------------------------------------------------ */
/*  Aviso de vista previa (sitio cerrado al público)                   */
/* ------------------------------------------------------------------ */
.aviso-obra{
  position:relative; z-index:45;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.4rem 1.25rem;
  padding:.6rem 1rem; text-align:center;
  background:#A85E7E; color:#fff; font-size:13px; line-height:1.6;
}
.aviso-obra a{ color:#fff; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.aviso-obra a:hover{ opacity:.8; }

@media (prefers-reduced-motion: reduce){
  .cargador-logo, .cargador-barra > span{ animation:none !important; }
  .cargador-barra > span{ width:100%; }
}

/* Rueda chica para los botones que están trabajando */
.girito{
  display:inline-block; width:13px; height:13px; margin-right:.5rem;
  vertical-align:-2px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:girito-vuelta .7s linear infinite;
}
@keyframes girito-vuelta{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .girito{ animation-duration:2s; } }

/* ------------------------------------------------------------------ */
/*  Formulador: opción sin jabón hoy ("a pedido")                      */
/*  No se bloquea: elegirla es justamente la forma de encargarlo.      */
/*  Solo se atenúa, para que la decisión se tome sabiendo.             */
/* ------------------------------------------------------------------ */
.chip--apedido > input + span{ opacity:.5; }
.chip--apedido > input:checked + span{ opacity:1; }

.chip-aviso{
  display:inline-block; margin-top:.45rem;
  padding:.1rem .5rem; border-radius:999px;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(251,247,248,.18); color:inherit;
}
.chip--apedido > input:checked + span .chip-aviso{
  background:var(--rosa); color:#fff;
}