/* =========================================================
   Tokens
   ========================================================= */
:root{
  /* Los dos colores de la marca, tomados del logo */
  --fucsia:#F41165;
  --menta:#E7FDF8;

  --negro:#141018;
  --tinta:#1D1520;
  --gris:#7C7280;
  --linea:#E8E0E6;
  /* El crema se reemplaza por la menta rebajada: mismo papel de fondo suave,
     pero de la familia de la marca en vez de una tierra que no pega con el
     fucsia. */
  --crema:#F2FBF9;
  --crema-2:#E7FDF8;
  --blanco:#fff;
  --rosa:#FFE9F1;
  --rosa-fuerte:var(--fucsia);
  --salvia:#DDF4EC;
  --cielo:#E2F1FB;
  /* Para el precio rebajado no se usa el fucsia: con el fucsia por todos
     lados, un descuento deja de destacarse. */
  --oferta:#C2185B;

  --radio:26px;
  --radio-chico:14px;
  --ancho:1280px;
  --pad:clamp(18px,4vw,48px);

  --t-xxl:clamp(2.4rem,5.2vw,4rem);
  --t-xl:clamp(2rem,3.6vw,2.9rem);
  --t-l:clamp(1.5rem,2.4vw,2rem);
  --t-m:1.0625rem;
  --t-s:.9375rem;
  --t-xs:.8125rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--tinta);
  background:var(--blanco);
  font-size:var(--t-m);
  line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.08;
  margin:0;
  color:var(--negro);
}
:focus-visible{outline:2px solid var(--negro);outline-offset:3px;border-radius:4px}

.env{max-width:var(--ancho);margin:0 auto;padding-inline:var(--pad)}
.seccion{padding-block:clamp(56px,7vw,104px)}
.seccion--crema{background:var(--crema)}
.seccion--rosa{background:var(--rosa)}
.centro{text-align:center}

/* =========================================================
   Botones
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--fucsia);color:#fff;
  border:1px solid var(--fucsia);
  border-radius:999px;
  padding:.95rem 2.1rem;
  font-size:var(--t-s);font-weight:500;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{background:#D10E58;border-color:#D10E58}
.btn--claro{background:#fff;color:var(--fucsia);border-color:var(--fucsia)}
.btn--claro:hover{background:var(--fucsia);color:#fff}
.btn--fantasma{background:transparent;color:var(--negro);border-color:var(--linea)}
/* Sin esto heredaba el hover de .btn: el fondo se pintaba de fucsia y el
   texto seguía negro, que era justo el caso ilegible. */
.btn--fantasma:hover{background:var(--fucsia);color:#fff;border-color:var(--fucsia)}
.btn--ancho{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

.redonda{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--linea);background:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .18s ease,background .18s ease;
}
.redonda:hover{border-color:var(--negro)}
.redonda:disabled{opacity:.3;cursor:default}

/* =========================================================
   Cinta de anuncios
   ========================================================= */
.cinta{background:var(--fucsia);color:var(--menta);overflow:hidden;padding-block:.65rem}
.cinta__pista{display:flex;width:max-content;animation:correr 38s linear infinite}
.cinta__item{
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;padding-inline:2.6rem;opacity:.92;
}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cinta__pista{animation:none}}

/* =========================================================
   Header
   ========================================================= */
.cabecera{
  position:sticky;top:0;z-index:60;
  background:#fff;border-bottom:1px solid transparent;
  transition:box-shadow .2s ease;
}
.cabecera.pegada{box-shadow:0 1px 0 var(--linea)}
.cabecera__fila{
  display:flex;align-items:center;gap:1.5rem;
  min-height:76px;
}
.logo{display:inline-flex;align-items:center}
.logo img{height:38px;width:auto;display:block}
/* Respaldo tipográfico por si la imagen no carga */
.logo__palabra{font-size:1.6rem;font-weight:700;letter-spacing:-.05em;color:var(--fucsia)}
.pie__logo img{height:34px;width:auto}

.nav{display:flex;gap:1.6rem;margin-inline:auto}
.nav__item{position:relative}
.nav__enlace{
  display:inline-flex;align-items:center;gap:.35rem;
  padding-block:1.4rem;font-size:var(--t-s);
}
.nav__enlace::after{
  content:'';position:absolute;left:0;bottom:1.1rem;height:1px;width:0;background:var(--negro);
  transition:width .2s ease;
}
.nav__item:hover .nav__enlace::after,.nav__enlace[aria-current]::after{width:100%}
.nav__flecha{width:10px;height:10px;transition:transform .2s ease}
.nav__item:hover .nav__flecha{transform:rotate(180deg)}
.submenu{
  position:absolute;top:100%;left:-1rem;min-width:230px;
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio-chico);
  padding:.6rem;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.35);
}
.nav__item:hover .submenu,.nav__item:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.submenu a{display:block;padding:.55rem .85rem;border-radius:9px;font-size:var(--t-s)}
.submenu a:hover{background:var(--crema)}

.acciones{display:flex;align-items:center;gap:.4rem}
.icono{
  width:42px;height:42px;border:0;background:transparent;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;position:relative;
}
.icono:hover{background:var(--crema)}
/* El carrito va en el color de la marca: es la acción que queremos que se
   encuentre sin buscarla. La lupa queda en tinta para no competir. */
.acciones .icono[aria-label="Carrito"]{color:var(--fucsia)}
.globo{
  position:absolute;top:4px;right:3px;min-width:18px;height:18px;padding:0 5px;
  background:var(--fucsia);color:#fff;border-radius:999px;
  font-size:.66rem;font-weight:600;display:grid;place-items:center;
}
.hamburguesa{display:none}

/* Buscador desplegable */
.buscador{border-bottom:1px solid var(--linea);background:#fff;display:none}
.buscador.abierto{display:block}
.buscador form{display:flex;gap:.75rem;padding-block:1.1rem}
.buscador input{
  flex:1;border:0;border-bottom:1px solid var(--linea);background:transparent;
  padding:.6rem 0;font:inherit;font-size:1.1rem;
}
.buscador input:focus{outline:0;border-color:var(--negro)}

/* =========================================================
   Hero: carrusel con vecinos asomando
   ========================================================= */
.hero{padding-block:clamp(14px,2vw,26px) 8px;overflow:hidden}
.hero__pista{
  display:flex;gap:18px;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.hero__slide{
  flex:0 0 calc(100% - 2 * (var(--asomo, 9vw)));
  border-radius:var(--radio);
  overflow:hidden;min-height:clamp(520px,66vh,720px);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  background:var(--crema-2);
}
.hero__slide:first-child{margin-left:calc(var(--asomo, 9vw) * -1)}
.hero__texto{padding:clamp(28px,4vw,64px);max-width:32ch}
.hero__intro{font-size:var(--t-s);color:#50504c;margin:0 0 1rem}
.hero__titulo{font-size:var(--t-xl);margin-bottom:1.8rem}
.hero__arte{
  height:100%;min-height:260px;position:relative;
  display:grid;place-items:center;padding:clamp(20px,4vw,56px);
}
.hero__arte img{
  max-height:min(52vh,460px);width:auto;object-fit:contain;
  /* La sombra despega el producto del bloque de color: sin esto, una foto
     recortada sobre fondo blanco se ve pegada como una calcomanía. */
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.18));
}
.hero--salvia{background:linear-gradient(115deg,#E7FDF8,#BFEFE4)}
.hero--cielo{background:linear-gradient(115deg,#FFE9F1,#FFC2D9)}
.hero--rosa{background:linear-gradient(115deg,#F41165,#FF5C96)}
.hero__puntos{display:flex;gap:8px;justify-content:center;margin-top:22px}
.hero__punto{
  width:10px;height:10px;border-radius:999px;border:0;background:#d6d0c9;
  transition:width .25s ease,background .25s ease;
}
.hero__punto[aria-current="true"]{width:42px;background:var(--fucsia)}

/* =========================================================
   Grilla y ficha de producto
   ========================================================= */
.grilla{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.ficha{
  background:#fff;border-radius:var(--radio);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  border:1px solid transparent;
  transition:border-color .2s ease;
}
.ficha:hover{border-color:var(--linea)}
.ficha__medio{position:relative;aspect-ratio:1;background:#fff;overflow:hidden}
.ficha__img{width:100%;height:100%;object-fit:contain;padding:12%}
.ficha__marca{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--fucsia);color:#fff;border-radius:8px;
  font-size:var(--t-xs);font-weight:600;padding:.3rem .55rem;
}
.ficha__agregar{
  position:absolute;left:14px;right:14px;bottom:14px;
  background:#fff;border:1px solid var(--linea);border-radius:999px;
  padding:.8rem 1rem;font-size:var(--t-s);text-align:center;
  opacity:0;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease;
}
.ficha:hover .ficha__agregar,.ficha:focus-within .ficha__agregar{opacity:1;transform:none}
.ficha__cuerpo{padding:1rem 1.25rem 1.5rem}
.ficha__tipo{font-size:var(--t-s);color:var(--gris);margin:0 0 .3rem}
.ficha__nombre{font-size:1.05rem;font-weight:500;letter-spacing:-.015em;margin:0 0 .6rem}
.ficha__precios{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.ficha__precio{font-weight:600}
.ficha__precio--rebaja{color:var(--oferta)}
.ficha__antes{color:var(--gris);text-decoration:line-through;font-size:var(--t-s)}
@media (hover:none){.ficha__agregar{opacity:1;transform:none;position:static;margin:0 1.25rem}}

/* Placeholder mientras no hay fotos reales */
.sinfoto{
  position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 30% 15%,#FFF5F9,#FFE0EC);
  color:#C98FAB;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
}

/* =========================================================
   Solapas
   ========================================================= */
.solapas{
  display:flex;gap:1.9rem;justify-content:center;flex-wrap:wrap;
  margin:2.2rem 0 2.8rem;
}
.solapa{
  border:0;background:transparent;padding:.3rem 0 .5rem;
  font-size:var(--t-m);color:#6f6a64;border-bottom:1.5px solid transparent;
}
.solapa[aria-selected="true"]{color:var(--fucsia);border-color:var(--fucsia)}
.panel[hidden]{display:none}

/* =========================================================
   Banda editorial con palabras + imágenes
   ========================================================= */
.banda{padding-block:clamp(48px,6vw,92px);background:#fff}
.banda__frase{
  font-size:clamp(1.8rem,4.4vw,3.2rem);
  font-weight:600;letter-spacing:-.03em;line-height:1.35;
  text-align:center;max-width:22ch;margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:.35em;align-items:center;justify-content:center;
}
.banda__pildora{
  display:inline-block;width:clamp(90px,11vw,160px);height:.95em;
  border-radius:999px;background:linear-gradient(110deg,#FFC2D9,#F41165);
  vertical-align:middle;overflow:hidden;position:relative;
}
.banda__pildora img{
  width:100%;height:100%;object-fit:cover;object-position:center;
}

/* =========================================================
   Temas ("Explora tu intimidad con calma")
   ========================================================= */
.temas{display:grid;grid-template-columns:minmax(260px,25%) 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.temas__intro p{color:#4b4844;max-width:42ch}
.temas__flechas{display:flex;gap:12px;margin-top:2rem}
.carril{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:6px;
}
.carril::-webkit-scrollbar{display:none}
.carril>*{scroll-snap-align:start}
.tema{flex:0 0 min(360px,78vw);background:#fff;border-radius:var(--radio);overflow:hidden}
.tema__arte{aspect-ratio:4/3.4;position:relative}
.tema--noche{background:linear-gradient(150deg,#3a332e,#6b5b4d)}
.tema--ambar{background:linear-gradient(150deg,#4a3a2a,#8a6a46)}
.tema--ciruela{background:linear-gradient(150deg,#3b2c33,#7a5560)}
.tema--bruma{background:linear-gradient(150deg,#39413f,#6d7a74)}
.tema--arena{background:linear-gradient(150deg,#4a423a,#93826d)}
.tema__cuerpo{padding:1.4rem 1.5rem 1.8rem}
.tema__titulo{font-size:1.35rem;margin-bottom:.35rem}
.tema__conteo{font-size:var(--t-s);color:var(--gris);margin:0 0 .8rem}
.tema__bajada{font-size:var(--t-s);color:#4b4844;margin:0}

/* =========================================================
   Combo (foto + lista numerada)
   ========================================================= */
.combo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.combo__foto{
  aspect-ratio:1;border-radius:var(--radio);
  background:linear-gradient(140deg,#FFE9F1,#F8A6C4);position:relative;
}
.combo__lista{list-style:none;margin:2.2rem 0 0;padding:0}
.combo__item{
  display:grid;grid-template-columns:34px 64px 1fr auto;
  gap:1rem;align-items:center;
  padding:1.1rem 0;border-top:1px solid var(--linea);
}
.combo__item:last-of-type{border-bottom:1px solid var(--linea)}
.combo__n{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--linea);
  display:grid;place-items:center;font-size:var(--t-s);color:var(--gris);
}
.combo__mini{aspect-ratio:1;border-radius:10px;background:var(--crema);position:relative;overflow:hidden}
.combo__mini img{width:100%;height:100%;object-fit:contain;padding:8%}
.combo__nombre{font-size:var(--t-s)}
.combo__precio{font-weight:600;font-size:var(--t-s);white-space:nowrap}

/* =========================================================
   Trío de imágenes con pie
   ========================================================= */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,38px);margin-top:3rem}
.trio__figura{margin:0}
.trio__arte{
  aspect-ratio:3/3.4;border-radius:var(--radio);overflow:hidden;
  background:linear-gradient(140deg,#FFE9F1,#FFC2D9);
  display:grid;place-items:center;padding:14%;
}
.trio__arte img{max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.14))}
.trio__pie{margin:1.1rem auto 0;text-align:center;font-size:var(--t-s);max-width:30ch;color:#4b4844}

/* Pastillas de garantías */
.pastillas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding-block:clamp(38px,5vw,64px)}
.pastilla{
  display:inline-flex;align-items:center;gap:.6rem;
  border:1px solid var(--linea);border-radius:999px;padding:.6rem 1.15rem;font-size:var(--t-s);
}
.pastilla__tic{
  width:22px;height:22px;border-radius:50%;background:var(--crema);
  display:grid;place-items:center;font-size:.7rem;
}

/* =========================================================
   Bloque doble (banner + dos carruseles)
   ========================================================= */
.doble{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.doble__banner{position:sticky;top:110px}
.doble__arte{
  aspect-ratio:1;border-radius:var(--radio);overflow:hidden;
  background:linear-gradient(150deg,#E7FDF8,#A8E6D6);
  display:grid;place-items:center;padding:12%;
}
.doble__arte img{max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.18))}
.doble__frase{font-size:var(--t-l);text-align:center;margin-top:1.6rem;max-width:18ch;margin-inline:auto}
.fila__enc{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
.fila__titulo{font-size:1.6rem;max-width:18ch}
.fila__flechas{display:flex;gap:10px;flex:0 0 auto}
.doble .grilla{grid-template-columns:repeat(2,1fr)}
.doble .ficha{background:#fff}

/* =========================================================
   Acordeón de preguntas
   ========================================================= */
.faq{display:grid;grid-template-columns:minmax(220px,24%) minmax(0,28%) 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.faq__arte{aspect-ratio:3/4;border-radius:var(--radio);background:linear-gradient(150deg,#FFE9F1,#F8A6C4)}
.faq__lista{border-top:1px solid var(--linea)}
.faq__item{border-bottom:1px solid var(--linea)}
.faq__boton{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  background:transparent;border:0;padding:1.5rem 0;text-align:left;
  font-size:1.1rem;font-weight:500;color:var(--negro);
}
.faq__signo{flex:0 0 auto;width:20px;height:20px;position:relative}
.faq__signo::before,.faq__signo::after{
  content:'';position:absolute;inset:50% 0 auto;height:1.5px;background:var(--negro);
  transition:transform .2s ease;
}
.faq__signo::after{transform:rotate(90deg)}
.faq__item.abierto .faq__signo::after{transform:rotate(0)}
.faq__cuerpo{display:none;padding:0 0 1.6rem;max-width:62ch;color:#4b4844}
.faq__item.abierto .faq__cuerpo{display:block}

/* =========================================================
   Footer
   ========================================================= */
.pie{
  /* Fucsia, no negro. El pie es el último bloque que ve la persona y ahora
     cierra con el color de la marca en vez de con un neutro prestado. */
  background:var(--fucsia);
  color:rgba(255,255,255,.82);
  padding-block:clamp(48px,6vw,84px) 2rem;margin-top:0;
}
.pie a{transition:color .16s ease}
.pie a:hover{color:var(--menta)}
.pie__grilla{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.pie h3{color:#fff;font-size:var(--t-s);font-weight:600;margin-bottom:1rem}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:var(--t-s)}
.pie li a{color:#fff}
.pie__logo{margin-bottom:1rem}
.pie__nota{font-size:var(--t-s);max-width:36ch;color:rgba(255,255,255,.8)}
.pie__legal{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.22);margin-top:3rem;padding-top:1.6rem;
  font-size:var(--t-xs);color:rgba(255,255,255,.72);
}

/* =========================================================
   Flotantes
   ========================================================= */
.flotantes{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;align-items:center;gap:12px}
.wa{
  width:70px;height:70px;border-radius:50%;background:#25d366;color:#fff;
  display:grid;place-items:center;box-shadow:0 12px 28px -10px rgba(0,0,0,.45);
  transition:transform .18s ease;
}
.wa:hover{transform:scale(1.06)}
.wa svg{width:36px;height:36px}
.arriba{
  width:46px;height:46px;border-radius:50%;background:var(--negro);color:var(--menta);border:0;
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.arriba.visible{opacity:1;pointer-events:auto}

/* =========================================================
   Páginas internas
   ========================================================= */
.enc-col{padding-block:clamp(40px,5vw,72px) clamp(24px,3vw,40px);text-align:center}
.enc-col h1{font-size:var(--t-xxl);margin-bottom:1rem}
.enc-col p{max-width:58ch;margin:0 auto;color:#4b4844}

.barra-filtros{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1.4rem;flex-wrap:wrap;
}
.barra-filtros select{
  border:1px solid var(--linea);border-radius:999px;background:#fff;
  padding:.55rem 1rem;font:inherit;font-size:var(--t-s);
}
.conteo{font-size:var(--t-s);color:var(--gris)}

.paginado{display:flex;gap:8px;justify-content:center;margin-top:3rem}
.paginado a,.paginado span{
  min-width:42px;height:42px;border-radius:999px;border:1px solid var(--linea);
  display:grid;place-items:center;font-size:var(--t-s);
}
.paginado [aria-current]{background:var(--fucsia);color:#fff;border-color:var(--fucsia)}

/* Detalle de producto */
.detalle{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);padding-block:clamp(28px,4vw,56px)}
.detalle__arte{border-radius:var(--radio);background:var(--crema);aspect-ratio:1;position:relative;overflow:hidden}
.detalle__arte img{width:100%;height:100%;object-fit:contain;padding:10%}
.detalle__tipo{color:var(--gris);font-size:var(--t-s);margin:0 0 .5rem}
.detalle h1{font-size:var(--t-xl);margin-bottom:1rem}
.detalle__precios{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1.4rem}
.detalle__precio{font-size:1.6rem;font-weight:600}
.detalle__form{display:flex;gap:12px;align-items:center;margin-block:1.8rem;flex-wrap:wrap}
.cantidad{display:inline-flex;align-items:center;border:1px solid var(--linea);border-radius:999px}
.cantidad button{width:42px;height:46px;border:0;background:transparent;font-size:1.1rem}
.cantidad input{width:44px;border:0;text-align:center;font:inherit;background:transparent}
.cantidad input:focus{outline:0}
.detalle__datos{border-top:1px solid var(--linea);margin-top:2rem;padding-top:1.4rem;display:grid;gap:.6rem;font-size:var(--t-s);color:#4b4844}

/* Carrito y checkout */
.carro{display:grid;grid-template-columns:1fr minmax(280px,360px);gap:clamp(24px,4vw,56px);padding-block:clamp(24px,3vw,48px);align-items:start}
.carro__linea{display:grid;grid-template-columns:96px 1fr auto;gap:1.2rem;align-items:center;padding:1.3rem 0;border-bottom:1px solid var(--linea)}
.carro__mini{aspect-ratio:1;border-radius:var(--radio-chico);background:var(--crema);position:relative;overflow:hidden}
.carro__mini img{width:100%;height:100%;object-fit:contain;padding:10%}
.resumen{background:var(--crema);border-radius:var(--radio);padding:1.8rem;position:sticky;top:110px}
.resumen__fila{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;font-size:var(--t-s)}
.resumen__total{font-size:1.25rem;font-weight:600;border-top:1px solid var(--linea);margin-top:.8rem;padding-top:1rem}
.vacio{text-align:center;padding-block:clamp(48px,8vw,120px)}

.formulario{display:grid;gap:1.1rem}
.campo{display:grid;gap:.4rem}
.campo label{font-size:var(--t-s);color:#4b4844}
.campo input,.campo select,.campo textarea{
  border:1px solid var(--linea);border-radius:var(--radio-chico);
  padding:.85rem 1rem;font:inherit;background:#fff;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:var(--negro)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.opciones{display:grid;gap:.7rem}
.opcion{display:flex;gap:.8rem;align-items:flex-start;border:1px solid var(--linea);border-radius:var(--radio-chico);padding:1rem}
.opcion input{margin-top:.25rem}
.opcion strong{display:block;font-weight:500}
.opcion small{color:var(--gris)}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1080px){
  .temas,.faq,.doble,.combo,.detalle,.carro{grid-template-columns:1fr}
  .faq__arte,.doble__banner{display:none}
  .resumen{position:static}
}
@media (max-width:860px){
  .nav{
    display:none;position:fixed;inset:76px 0 auto;background:#fff;
    flex-direction:column;gap:0;padding:1rem var(--pad) 2rem;
    border-bottom:1px solid var(--linea);max-height:calc(100vh - 76px);overflow:auto;
  }
  .nav.abierto{display:flex}
  .nav__enlace{padding-block:.9rem;font-size:1.05rem;width:100%;justify-content:space-between}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;padding:0 0 .6rem 1rem}
  .hamburguesa{display:inline-flex}
  .hero__slide{grid-template-columns:1fr;--asomo:16px;min-height:0}
  .hero__arte{order:-1;min-height:240px;padding:24px}
  .hero__arte img{max-height:230px}
  .hero__texto{padding:1.6rem 1.4rem 2.2rem}
  .trio{grid-template-columns:1fr}
  .pie__grilla{grid-template-columns:1fr 1fr}
  .doble .grilla{grid-template-columns:1fr 1fr}
  .grilla{grid-template-columns:repeat(2,1fr);gap:12px}
  .combo__item{grid-template-columns:28px 52px 1fr;grid-template-areas:'n m t' '. . p';row-gap:.3rem}
  .combo__n{grid-area:n}.combo__mini{grid-area:m}.combo__nombre{grid-area:t}.combo__precio{grid-area:p;text-align:left}
}
@media (max-width:520px){
  .pie__grilla{grid-template-columns:1fr}
  .dos{grid-template-columns:1fr}
  .carro__linea{grid-template-columns:72px 1fr;row-gap:.6rem}
}

/* =========================================================
   Pago con tarjeta dentro del sitio
   ========================================================= */
.caja-pago{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  /* Generoso a los costados y arriba. Antes el formulario arrancaba pegado
     al borde de la tarjeta y el conjunto se leía apretado justo en la
     pantalla donde la persona está por poner su tarjeta. */
  padding:clamp(24px,4vw,44px) clamp(20px,3.5vw,40px);
  /* Sin min-height: la caja toma el alto del formulario. Con 280px fijos
     quedaba un vacío grande abajo cuando todavía no se eligió el medio de
     pago, y ese vacío hace dudar de si terminó de cargar. */
}
.caja-pago > div{min-width:0}

/* La columna del pago no necesita ser tan ancha: un formulario de tarjeta a
   700px deja los campos larguísimos y cuesta más leerlos que completarlos. */
.pagina-pago{max-width:560px}
.aviso-pago{
  border-radius:var(--radio-chico);padding:.9rem 1.1rem;margin-bottom:1rem;
  font-size:var(--t-s);
}
.aviso-pago.mal{background:#fbe9e6;color:var(--oferta)}
.aviso-pago.ok{background:#e9f1ea;color:#2f7d4f}

/* =========================================================
   Checkout en tres pasos
   ========================================================= */
.pasos{
  display:flex;gap:.4rem;list-style:none;margin:0 0 1.8rem;padding:0;
  flex-wrap:wrap;font-size:var(--t-s);
}
.paso{
  display:flex;align-items:center;gap:.5rem;color:var(--gris);
  padding:.4rem .9rem .4rem .4rem;border-radius:999px;
}
.paso i{
  width:24px;height:24px;border-radius:50%;background:var(--crema);
  display:grid;place-items:center;font-style:normal;font-size:.8rem;
}
.paso.on{color:var(--negro);font-weight:500}
.paso.on i{background:var(--fucsia);color:#fff}
.paso.hecho{color:var(--negro);cursor:pointer}
.paso.hecho i{background:#F8A6C4;color:#fff}

.etapa.oculto,.campo.oculto{display:none}

.opt-envio{
  display:flex;align-items:center;gap:1rem;
  border:1px solid var(--linea);border-radius:var(--radio-chico);
  padding:1.1rem 1.2rem;margin-bottom:.7rem;cursor:pointer;
  transition:border-color .16s ease;
}
.opt-envio:hover{border-color:var(--gris)}
.opt-envio.on{border-color:var(--fucsia);border-width:1.5px}
.opt-envio input{margin:0;flex:0 0 auto}
.opt-envio div{flex:1}
.opt-envio h4{font-size:var(--t-m);font-weight:500;margin:0 0 .15rem}
.opt-envio p{margin:0;font-size:var(--t-s);color:var(--gris)}
.opt-envio .costo{font-weight:600;white-space:nowrap}

/* El error aparece recién cuando el campo se marca mal, no antes:
   un formulario que abre con todo en rojo es un formulario que intimida. */
.err{display:none;font-size:var(--t-xs);color:var(--oferta);margin-top:.3rem}
.campo.con-error .err{display:block}
.campo.con-error input,.campo.con-error select,.campo.con-error textarea{border-color:var(--oferta)}
.err.visible{display:block}
.resumen-envio{margin-top:1rem}

/* =========================================================
   Sobre fondo fucsia
   
   El fucsia es oscuro: cualquier texto en tinta encima queda ilegible y el
   botón de marca desaparece contra su propio color. Se agrupa acá y no en
   cada bloque para que valga en todos los lugares donde la marca pinta el
   fondo, presentes y futuros.
   ========================================================= */
.hero--rosa,
.sobre-fucsia{color:#fff}

.hero--rosa .hero__titulo,
.hero--rosa h2, .hero--rosa h3,
.sobre-fucsia h1, .sobre-fucsia h2, .sobre-fucsia h3{color:#fff}

.hero--rosa .hero__intro,
.sobre-fucsia p{color:rgba(255,255,255,.88)}

/* El botón se invierte: blanco con letra fucsia. Un botón fucsia sobre fondo
   fucsia solo se distingue por la sombra, y en celular casi no se ve. */
.hero--rosa .btn,
.sobre-fucsia .btn{background:#fff;color:var(--fucsia);border-color:#fff}
.hero--rosa .btn:hover,
.sobre-fucsia .btn:hover{background:var(--menta);border-color:var(--menta);color:var(--fucsia)}

/* =========================================================
   Aire al final del checkout
   ========================================================= */
/* La última fila de botones quedaba pegada al pie de la página. */
.carro{padding-bottom:clamp(40px,6vw,80px)}
.etapa .campo:last-of-type{margin-bottom:1.8rem}
.etapa > div:last-child{margin-top:.6rem}
.campo textarea{min-height:110px;resize:vertical}

/* =========================================================
   Contacto
   ========================================================= */
.contacto{
  display:grid;grid-template-columns:1.4fr 1fr;
  gap:clamp(20px,3vw,40px);align-items:start;
}
.caja-contacto{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:clamp(22px,3.5vw,40px);
}
.caja-contacto--datos{background:var(--crema);border-color:transparent}
.dato{padding-block:.9rem;border-top:1px solid var(--linea)}
.dato:first-of-type{border-top:0;padding-top:0}
.dato h3{font-size:var(--t-s);color:var(--gris);font-weight:400;margin-bottom:.2rem}
.dato p{margin:0;font-weight:500}
.dato a{color:var(--fucsia)}
.dato small{display:block;color:var(--gris);font-size:var(--t-xs);margin-top:.3rem}
@media (max-width:860px){ .contacto{grid-template-columns:1fr} }