/* ==========================================================================
   59 · Frasco de romero
   Para una línea capilar de preparación propia con un solo producto en el
   catálogo: shampoo y acondicionador a base de romero, en frascos de 500 ml.

   Todo sale del envase y del logo de Brillitos: el marrón de la marca
   (#563D00), la crema de la etiqueta (#FFF2D5), la miel de la tapa dorada y
   el verde del romero. La chispa de cuatro puntas del logo es la firma: es el
   separador, es el ornamento de cada título y es el destello alrededor de la
   foto.

   Faustina, serifa de texto con cursiva, para los títulos: tiene el aire de
   una etiqueta de botica sin caer en la serifa de alto contraste de siempre.
   Kumbh Sans, geométrica y limpia, para leer y para los rótulos del envase.

   Los rótulos NO van en mayúsculas con tracking: van en cursiva de Faustina
   con una chispa delante. Es la decisión que separa esta página de la
   plantilla de siempre.

   Contrastes medidos (WCAG AA):
     tinta #2E2102 sobre crema #FFF2D5 .......... 14,17:1
     cacao #563D00 sobre crema .................. 9,17:1
     miel hondo #7A5410 sobre crema ............. 6,10:1
     miel luz #E8C27A sobre cacao ............... 6,02:1
     crema sobre cacao hondo #3A2900 ............ 12,63:1
     romero hondo #36452B sobre crema ........... 9,26:1
     blanco sobre romero #4A5A3C ................ 7,45:1
   El miel #C6922E solo rellena: sobre cacao da 3,66:1 y no aguanta letra.
   ========================================================================== */

:root{
  --cacao:      #563D00;
  --cacao-hondo:#3A2900;
  --crema:      #FFF2D5;
  --papel:      #FFFBF0;
  --arena:      #F6E7C4;
  --miel:       #C6922E;
  --miel-hondo: #7A5410;
  --miel-luz:   #E8C27A;
  --romero:     #4A5A3C;
  --romero-hondo:#36452B;
  --tinta:      #2E2102;
  --tinta-2:    #5C4F30;
  --linea:      rgba(86,61,0,.16);
  --linea-clara:rgba(255,242,213,.26);
  --ease:cubic-bezier(.2,.8,.25,1);
  --r:18px;
}
/* El motor define --lav y --navy a partir de los dos colores del paquete, y
   aquí los dos son el mismo marrón: la página saldría sin un solo acento.
   Se rehacen con más peso que el :root en línea del <head> (error 93). */
html:root{--lav:#C6922E; --navy:#3A2900}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{margin:0; background:var(--papel); color:var(--tinta); line-height:1.7}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-family:var(--f-titulo); font-weight:600; line-height:1.1}
h1 em,h2 em,h3 em{font-style:italic}
p{margin:0 0 1rem}
.blob{display:none !important}

.wrap{width:min(1160px,92vw); margin:0 auto}
.sec{padding:96px 0; position:relative}
.centrado{text-align:center}

/* La chispa de cuatro puntas del logo: ornamento de todos los títulos. */
.fr-chispa{flex:none; width:22px; height:22px; fill:var(--miel); overflow:visible}
.anim .fr-chispa{animation:brillarFr 5s ease-in-out infinite}
@keyframes brillarFr{0%,100%{opacity:.55; rotate:0deg} 50%{opacity:1; rotate:45deg}}

/* El rótulo de sección: cursiva de Faustina con su chispa. Nada de versalitas
   con tracking encima de cada bloque. */
.fr-rotulo{display:flex; align-items:center; gap:10px; margin:0 0 10px;
  font-family:var(--f-titulo); font-style:italic; font-weight:400; font-size:1.12rem;
  line-height:1.3; color:var(--miel-hondo)}
.fr-head{max-width:640px; margin:0 0 46px}
.fr-head.centro{margin-inline:auto; text-align:center}
.fr-head.centro .fr-rotulo{justify-content:center}
.fr-head h2{font-size:clamp(2.1rem,4.2vw,3.1rem); color:var(--cacao)}
.fr-head p{margin:14px 0 0; color:var(--tinta-2)}

.fr-sello{display:inline-flex; align-items:center; gap:9px; padding:9px 16px;
  border:2px solid var(--miel); border-radius:999px; background:var(--papel);
  font-size:.88rem; font-weight:600; color:var(--miel-hondo)}
.fr-sello svg{width:17px; height:17px; color:var(--miel-hondo)}
.chip{display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border-radius:999px;
  background:var(--papel); border:2px solid var(--linea); font-weight:600; color:var(--tinta-2)}
.chip svg{width:17px; height:17px; color:var(--romero)}

/* ---------- Encabezado ---------- */
#hdr{position:sticky; top:0; z-index:60; background:rgba(255,242,213,.95);
  backdrop-filter:blur(12px); border-bottom:2px solid var(--linea);
  transition:box-shadow .3s var(--ease)}
#hdr.stuck{box-shadow:0 10px 0 -8px var(--miel), 0 22px 36px -32px rgba(58,41,0,.7)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0}
.brand > span{display:flex; flex-direction:column; min-width:0}
.brand b{font-family:var(--f-titulo); font-weight:600; font-size:1.42rem; line-height:1.1;
  color:var(--cacao); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand i{font-family:var(--f-titulo); font-style:italic; font-size:.98rem; color:var(--miel-hondo);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav-links{display:flex; gap:24px}
.nav-links a{position:relative; text-decoration:none; padding:8px 0; font-weight:600; color:var(--tinta)}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:var(--miel); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  font-weight:700; border-radius:999px; border:2px solid transparent; cursor:pointer;
  transition:all .3s var(--ease)}
.btn svg{width:1.12em; height:1.12em; flex:none}
.btn-primary{background:var(--cacao); color:var(--crema); box-shadow:0 4px 0 0 var(--cacao-hondo)}
.btn-primary:hover{background:var(--cacao-hondo); color:#fff}
.btn-ghost,.btn-linea{background:transparent; color:var(--cacao); border-color:var(--cacao)}
.btn-ghost:hover,.btn-linea:hover{background:var(--cacao); color:var(--crema)}
.btn-ghost:not(.btn-sm),.btn-linea:not(.btn-sm){padding:1rem 2rem}
.btn-wa{background:#25D366; color:#06280F}

.progress{position:fixed; top:0; left:0; height:4px; width:0; z-index:100; background:var(--miel)}

/* ---------- 1 · Portada: el frasco ---------- */
.fr-hero{position:relative; overflow:hidden; background-color:var(--papel);
  background-image:
    radial-gradient(42% 52% at 80% 34%, rgba(198,146,46,.20) 0, rgba(198,146,46,0) 70%),
    radial-gradient(38% 46% at 6% 92%, rgba(74,90,60,.16) 0, rgba(74,90,60,0) 70%),
    radial-gradient(circle at 1px 1px, rgba(86,61,0,.13) 1px, transparent 1.4px);
  background-size:auto, auto, 18px 18px}
.fr-hero-grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,5vw,66px); align-items:center;
  padding-block:clamp(40px,6vw,80px) clamp(86px,9vw,120px)}
.fr-hero h1{font-size:clamp(2.9rem,6vw,5rem); line-height:1; color:var(--cacao)}
.fr-hero h1 span{display:block}
.fr-hero h1 span:nth-child(2){padding-left:.42em; color:var(--romero-hondo)}
.fr-hero h1 span:nth-child(3){padding-left:.84em; font-style:italic; color:var(--miel-hondo)}
.fr-lead{font-size:1.06rem; color:var(--tinta-2); max-width:44ch; margin:24px 0 0}
.fr-cta{display:flex; flex-wrap:wrap; gap:14px; margin:30px 0 22px}
.fr-firmas{display:flex; flex-wrap:wrap; gap:10px}

/* El frasco: hombros redondos, tapa dorada y la banda del contenido neto.
   No es una foto recortada en un rectángulo: es la silueta del envase. */
.fr-fig{position:relative; margin:0; display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(12px,2vw,26px)}
/* El frasco se dibuja por partes, que es lo que hace que se lea como un frasco:
   tapa estrecha con sus estrías, cuello algo más ancho y, debajo, el hombro
   redondo del vidrio. Una sola caja redondeada se leía como una lata. */
.fr-frasco{position:relative; width:min(100%,360px)}
.fr-tapa{display:block; width:30%; height:42px; margin:0 auto; border-radius:10px 10px 3px 3px;
  background-color:var(--miel);
  background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, rgba(0,0,0,0) 2px 7px),
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(0,0,0,.2))}
.fr-cuello{display:block; width:42%; height:20px; margin:0 auto -10px;
  border-radius:4px 4px 0 0; background-color:var(--miel-hondo);
  background-image:linear-gradient(180deg, rgba(255,255,255,.3), rgba(0,0,0,.25))}
.fr-vidrio{position:relative; aspect-ratio:3/5; overflow:hidden;
  border-radius:50% 50% 9% 9% / 24% 24% 5% 5%;
  background:var(--arena);
  box-shadow:0 0 0 3px var(--papel), 0 0 0 6px var(--miel), 0 36px 60px -36px rgba(58,41,0,.75)}
.fr-vidrio img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:52% 46%}
.fr-banda{position:absolute; left:0; right:0; bottom:13%; z-index:3; display:flex;
  align-items:center; justify-content:center; gap:.5em; padding:9px 0;
  background:var(--cacao-hondo); color:var(--miel-luz);
  font-size:.82rem; font-weight:700; letter-spacing:.1em}

/* La escala del contenido, al lado del frasco: el nivel sube al aparecer.
   Crece con scaleY, que no rehace la página: solo compone. */
.fr-escala{position:relative; align-self:stretch; width:66px; flex:none;
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;
  padding-left:16px; border-left:2px solid var(--linea)}
.fr-escala span{position:relative; font-size:.76rem; font-weight:700; color:var(--miel-hondo);
  letter-spacing:.06em}
.fr-escala span::before{content:""; position:absolute; left:-18px; top:50%; width:12px; height:2px;
  background:var(--miel)}
/* El nivel está lleno de salida: solo se encoge mientras la figura no ha
   aparecido, y solo con la capa de animación encendida. Si el guion falla, la
   escala se ve completa en vez de quedarse en cero para siempre. */
.fr-nivel{position:absolute; left:-4px; top:0; bottom:0; width:6px; border-radius:6px;
  background:var(--miel); transform-origin:bottom; transform:scaleY(1);
  transition:transform 1.5s var(--ease) .35s}
.anim .fr-fig:not(.visto) .fr-nivel{transform:scaleY(0)}

/* ---------- 2 · La cinta de ingredientes ---------- */
.fr-cinta{background:var(--cacao); color:var(--crema); text-align:center}
.fr-cinta-tit{font-family:var(--f-titulo); font-style:italic; font-size:clamp(1.4rem,2.6vw,1.9rem);
  margin-bottom:16px; color:var(--miel-luz)}
.fr-cinta ul{list-style:none; margin:0; padding-left:0; display:flex; flex-wrap:wrap;
  justify-content:center; gap:10px 14px}
.fr-cinta li{display:flex; align-items:center; gap:9px; padding:8px 18px; border-radius:999px;
  border:2px solid var(--miel); font-weight:600; font-size:.95rem}
.fr-cinta li svg{width:15px; height:15px; fill:var(--miel-luz)}

/* ---------- 3 · El producto ---------- */
.fr-producto{background:var(--crema)}
.fr-ficha{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(26px,4vw,56px); align-items:center; padding:clamp(22px,3vw,34px);
  border:2px solid var(--cacao); border-radius:var(--r); background:var(--papel);
  box-shadow:10px 10px 0 0 var(--miel)}
.fr-ficha-foto{position:relative; display:block; overflow:hidden; aspect-ratio:4/5;
  border-radius:12px; background:var(--arena)}
.fr-ficha-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease)}
.fr-ficha:hover .fr-ficha-foto img{transform:scale(1.04)}
.fr-ficha h3{font-size:clamp(1.7rem,3.2vw,2.4rem); color:var(--cacao); margin-bottom:10px}
/* El nombre es el enlace a la ficha: con la letra sola la zona de toque no
   llega a 44 px. El relleno la sube sin agrandar la letra. */
.fr-ficha h3 a{display:inline-block; padding-block:6px; text-decoration:none}
.fr-ficha > div > p{color:var(--tinta-2); margin-bottom:18px}
.fr-precio{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin-bottom:18px}
.fr-precio b{font-family:var(--f-titulo); font-weight:600; font-size:2.5rem; line-height:1.2;
  color:var(--cacao)}
.fr-precio small{color:var(--miel-hondo); font-weight:700}
.fr-puntos{list-style:none; margin:0 0 22px; padding-left:0; display:grid; gap:10px}
.fr-puntos li{display:flex; gap:11px; align-items:flex-start; color:var(--tinta-2)}
.fr-puntos li svg{flex:none; width:15px; height:15px; margin-top:7px; fill:var(--miel)}
.fr-ficha .variants small{color:var(--tinta-2)}
.cat-note{margin:40px auto 0; max-width:62ch; text-align:center; color:var(--tinta-2)}
.cat-note a{color:var(--miel-hondo); font-weight:700}
.fr-aviso{margin:22px auto 0; max-width:64ch; text-align:center; color:var(--tinta-2);
  font-size:.88rem; line-height:1.6}

/* ---------- 4 · La línea: los dos frascos y los sellos ---------- */
.fr-linea-sec{background:var(--arena)}
.fr-dos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px}
.fr-bote{position:relative; padding:30px 28px 26px; border-radius:var(--r);
  background:var(--papel); border:2px solid var(--cacao);
  box-shadow:7px 7px 0 0 var(--cacao); transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.fr-bote:hover{transform:translate(-3px,-3px); box-shadow:12px 12px 0 0 var(--cacao)}
.fr-bote-ic{display:grid; place-items:center; width:54px; height:70px; margin-bottom:18px;
  border-radius:34% 34% 14% 14% / 20% 20% 8% 8%; background:var(--cacao); color:var(--miel-luz)}
.fr-bote-ic svg{width:22px; height:22px}
.fr-bote h3{font-size:1.45rem; color:var(--cacao); margin-bottom:8px}
.fr-bote p{margin:0; color:var(--tinta-2)}
.fr-sellos{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:40px}
.fr-sellos-tit{margin:44px 0 0; text-align:center; font-family:var(--f-titulo); font-style:italic;
  font-size:1.2rem; color:var(--miel-hondo)}

/* ---------- 5 · Nosotros ---------- */
.fr-historia{background:var(--papel)}
.fr-his-grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,5vw,70px); align-items:center}
/* El logo ya es un sello redondo: el medallón se le ciñe en vez de dibujar un
   segundo disco mucho mayor alrededor. */
.fr-marca{position:relative; display:grid; place-items:center; padding:26px;
  width:min(100%,300px); justify-self:center;
  border-radius:50%; aspect-ratio:1; background:var(--crema);
  box-shadow:inset 0 0 0 3px var(--miel), 0 30px 54px -38px rgba(58,41,0,.7)}
.fr-marca img{width:100%; height:auto}
.fr-historia h2{font-size:clamp(2rem,3.9vw,3rem); color:var(--cacao); margin-bottom:14px}
.fr-historia .hist > summary{color:var(--miel-hondo)}
.fr-mv{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px}
.fr-mv > div{padding:22px 22px 18px; border-radius:14px; background:var(--crema);
  border-left:5px solid var(--miel)}
.fr-mv > div:last-child{border-left-color:var(--romero)}
.fr-mv h3{font-size:1.18rem; color:var(--cacao); margin-bottom:6px}
.fr-mv p{margin:0; color:var(--tinta-2); font-size:.94rem}

/* ---------- 6 · Cómo pedir, sobre romero ---------- */
.fr-pedir{background:var(--romero); color:#fff}
.fr-pedir .fr-rotulo{color:#E3EBDB}
.fr-pedir .fr-chispa{fill:var(--miel-luz)}
.fr-pedir h2{color:#fff}
.fr-pedir .fr-head p{color:rgba(255,255,255,.88)}
.fr-pasos{list-style:none; margin:0; padding-left:0; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
.fr-pasos li{position:relative; padding:28px 24px 24px; border-radius:var(--r);
  background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.3)}
.fr-paso-n{display:grid; place-items:center; width:46px; height:46px; margin-bottom:16px;
  border-radius:50%; background:var(--miel-luz); color:var(--cacao-hondo);
  font-family:var(--f-titulo); font-weight:600; font-size:1.5rem; line-height:1}
.fr-pasos h3{font-size:1.3rem; margin-bottom:6px}
.fr-pasos p{margin:0; color:rgba(255,255,255,.88)}
.fr-pedir-cta{text-align:center; margin-top:44px}

/* ---------- 7 · Contacto ---------- */
.fr-contacto{position:relative; overflow:hidden; background:var(--cacao)}
.fr-flota{position:absolute; right:-70px; bottom:-60px; width:300px; pointer-events:none; opacity:.18}
.fr-flota .fr-chispa{width:100%; height:auto; fill:var(--miel-luz)}
.fr-contacto, .fr-contacto h2{color:var(--crema)}
.fr-contacto .fr-rotulo{color:var(--miel-luz)}
.fr-contacto .fr-chispa{fill:var(--miel-luz)}
.fr-con-grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,66px); align-items:center}
.fr-contacto h2{font-size:clamp(2.1rem,4.2vw,3.1rem); margin-bottom:14px}
.fr-con-txt{color:rgba(255,242,213,.88); max-width:42ch}
.fr-etiqueta{padding:30px 30px 24px; border-radius:var(--r); background:var(--crema);
  color:var(--tinta); box-shadow:10px 10px 0 0 var(--miel-hondo)}
.fr-etiqueta ul{list-style:none; margin:0; padding-left:0}
.fr-etiqueta li a{display:flex; align-items:center; gap:14px; padding:12px 6px;
  border-bottom:2px dotted var(--linea); text-decoration:none; min-height:44px}
.fr-etiqueta li:last-child a{border-bottom:0}
.fr-red-ic{flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--papel); border:2px solid var(--miel); color:var(--miel-hondo)}
.fr-red-ic svg{width:20px; height:20px}
.fr-red-tx{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.fr-red-tx small{font-size:.76rem; font-weight:700; color:var(--tinta-2)}
.fr-red-tx b{font-weight:700; font-size:.98rem; overflow-wrap:anywhere; color:var(--cacao)}

/* ---------- Pie ---------- */
footer{background:var(--cacao-hondo); color:rgba(255,242,213,.78); padding:54px 0 38px}
footer .brand b{color:var(--crema)}
footer .brand i{color:var(--miel-luz)}
.foot-top{display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between;
  padding-bottom:22px; border-bottom:1px solid var(--linea-clara)}
.foot-social{display:flex; gap:12px}
.foot-social a{width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  border:2px solid var(--linea-clara); color:var(--crema); transition:all .3s var(--ease)}
.foot-social a:hover{background:var(--miel); border-color:var(--miel); color:var(--cacao-hondo)}
.foot-social svg{width:20px; height:20px}
.foot-bot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:18px}
.foot-aviso{margin:14px 0 0; color:rgba(255,242,213,.66); max-width:70ch}

/* ---------- Flotantes y piezas de la casa ---------- */
.wa-float{position:fixed; right:22px; bottom:22px; z-index:90; display:inline-flex; align-items:center;
  gap:10px; background:#25D366; color:#06280F; text-decoration:none; border-radius:999px;
  box-shadow:0 16px 34px -16px rgba(37,211,102,.95)}
.anim .wa-float{animation:latirFr 3.4s ease-out infinite}
@keyframes latirFr{
  0%{box-shadow:0 16px 34px -16px rgba(37,211,102,.95), 0 0 0 0 rgba(37,211,102,.5)}
  70%,100%{box-shadow:0 16px 34px -16px rgba(37,211,102,.95), 0 0 0 16px rgba(37,211,102,0)}}
.arriba{background:var(--cacao); color:var(--crema)}
/* La capa de acabado pinta la selección y el foco con el acento. El miel no
   aguanta letra blanca encima (2,5:1) ni se ve como aro sobre crema, así que
   aquí se cambian por colores que sí llegan: cacao sobre claro, miel claro
   sobre las paredes oscuras. */
html body ::selection{background:var(--cacao); color:var(--crema)}
html body :focus-visible{outline-color:var(--cacao)}
html body .fr-cinta :focus-visible, html body .fr-pedir :focus-visible,
html body .fr-contacto :focus-visible, html body footer :focus-visible,
html body .fp-cab :focus-visible{outline-color:var(--miel-luz)}
.insignia, .insignia-linea{border-radius:999px}
.insignia-linea{background:var(--miel-luz); color:var(--cacao-hondo); font-weight:700}
.hist > summary{color:var(--miel-hondo)}
.barra-compra{background:var(--crema); border-top:2px solid var(--cacao)}

/* ---------- Ficha de producto ---------- */
.fp-cab{position:relative; overflow:hidden; background-color:var(--cacao); color:var(--crema)}
.fp-cab-chispa{position:absolute; right:4%; top:50%; width:clamp(90px,12vw,170px); height:auto;
  translate:0 -50%; fill:var(--miel); opacity:.5; pointer-events:none}
.fp-cab-in{position:relative; z-index:1; padding-block:30px 38px}
.p-migas{margin:0 0 14px; font-weight:600; color:rgba(255,242,213,.88)}
.p-migas a{text-decoration:none}
.p-migas span{margin:0 8px; color:var(--miel-luz)}
.fp-cab h1{max-width:22ch; font-size:clamp(2rem,4vw,3rem)}
.fp-cuerpo{padding:52px 0 76px; background:var(--papel)}
.fp-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(26px,4vw,60px); align-items:start; width:min(1160px,92vw); margin:0 auto}
.fp-fotos{position:relative}
.fp-foto{position:relative; overflow:hidden; border-radius:36% 36% 10% 10% / 15% 15% 5% 5%;
  background:var(--arena);
  box-shadow:0 0 0 3px var(--papel), 0 0 0 6px var(--miel), 0 34px 58px -38px rgba(58,41,0,.75)}
.fp-foto img{width:100%; height:auto}
.fp-banda{position:absolute; left:0; right:0; bottom:11%; z-index:3; display:flex;
  align-items:center; justify-content:center; padding:9px 0; background:var(--cacao-hondo);
  color:var(--miel-luz); font-size:.8rem; font-weight:700; letter-spacing:.1em}
.p-miniaturas{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.p-miniaturas button{width:70px; height:70px; padding:0; border-radius:12px; overflow:hidden;
  cursor:pointer; background:none; border:3px solid transparent}
.p-miniaturas button[aria-current="true"]{border-color:var(--miel)}
.p-miniaturas img{width:100%; height:100%; object-fit:cover}
.fp-nombre{font-size:clamp(1.7rem,3vw,2.3rem); color:var(--cacao); margin-bottom:10px}
.p-desc{color:var(--tinta-2)}
.p-precio{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:20px 0 6px}
.p-precio b{font-family:var(--f-titulo); font-weight:600; font-size:2.5rem; line-height:1.2;
  color:var(--cacao)}
.p-precio small{color:var(--miel-hondo); font-weight:700}
.p-opciones{margin:22px 0}
.p-opciones h3{color:var(--miel-hondo); margin-bottom:8px}
.p-chips{display:flex; flex-wrap:wrap; gap:9px}
.p-chips button{min-height:44px; padding-inline:18px; border-radius:999px; border:2px solid var(--linea);
  background:var(--papel); cursor:pointer; font:inherit; font-weight:700; color:var(--tinta)}
.p-chips button[aria-pressed="true"]{background:var(--cacao); border-color:var(--cacao); color:var(--crema)}
.p-puntos{list-style:none; margin:22px 0 0; padding-left:0; display:grid; gap:11px}
.p-puntos li{display:flex; gap:11px; align-items:flex-start; color:var(--tinta-2)}
.p-puntos li svg{flex:none; width:15px; height:15px; margin-top:7px; fill:var(--miel)}
.p-cta{margin-top:26px}
.btn-block{width:100%}
.p-nota{display:flex; align-items:flex-start; gap:9px; margin-top:16px; color:var(--tinta-2)}
.p-nota svg{width:18px; height:18px; color:var(--romero); flex:none; margin-top:5px}
.p-agotado{padding:5px 12px; border-radius:999px; background:var(--crema); color:var(--cacao);
  font-weight:700}
.fp-det{padding:0 0 84px; background:var(--papel)}
.fp-ficha{max-width:760px; margin:0 auto; padding:32px 34px 26px; border-radius:var(--r);
  background:var(--crema); border:2px solid var(--cacao); box-shadow:9px 9px 0 0 var(--miel)}
.fp-ficha .rico{color:var(--tinta-2)}
.fp-otros{padding:76px 0; background:var(--arena)}
.fp-otros-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:26px}
.fp-otro{display:flex; flex-direction:column; gap:5px; padding:12px 12px 18px; border-radius:var(--r);
  background:var(--papel); border:2px solid var(--cacao); text-decoration:none;
  box-shadow:6px 6px 0 0 var(--cacao); transition:transform .35s var(--ease)}
.fp-otro:hover{transform:translate(-3px,-3px)}
.fp-otro-foto{position:relative; display:block; overflow:hidden; aspect-ratio:1; border-radius:10px;
  margin-bottom:10px}
.fp-otro-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.fp-otro b{font-family:var(--f-titulo); font-weight:600; font-size:1.2rem; color:var(--cacao)}
.fp-otro small{font-weight:700; color:var(--miel-hondo)}

/* ---------- Pantallas ---------- */
@media (max-width:1000px){
  .nav-links{display:none}
  .fr-hero-grid, .fr-his-grid, .fr-con-grid, .fr-ficha, .fp-grid{grid-template-columns:minmax(0,1fr)}
  /* En una columna, el bloque de texto deja de ser una caja y sus partes pasan
     a ser celdas de la misma rejilla. Así el frasco se mete entre los botones y
     los sellos: el botón sigue entrando sin bajar y del producto ya se ve algo. */
  .fr-hero-txt{display:contents}
  .fr-fig{order:4; justify-content:flex-start; margin-top:26px}
  .fr-firmas{order:5}
  .fr-frasco{width:min(74%,300px)}
}
@media (max-width:820px){
  .sec{padding:76px 0}
  .fr-pasos{grid-template-columns:minmax(0,1fr)}
  .fr-mv{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .brand i{display:none}
  .fr-hero h1{font-size:clamp(2.4rem,11vw,3.2rem)}
  .fr-hero h1 span:nth-child(2){padding-left:.2em}
  .fr-hero h1 span:nth-child(3){padding-left:.4em}
  .fr-escala{display:none}
  .fr-frasco{width:min(88%,280px)}
  /* Se recorta el aire del héroe para que el botón quede holgado sobre la
     primera pantalla y asome ya el hombro del frasco. */
  .fr-hero-grid{padding-block:20px 72px}
  .fr-lead{margin-top:18px}
  .fr-cta{margin:24px 0 0}
  .fr-fig{margin-top:20px}
  /* Los sellos en un carril que se desliza, no en tres renglones apilados:
     con tres filas el frasco se iba trescientos píxeles más abajo. */
  .fr-firmas{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-inline:-4vw; padding:2px 4vw 6px}
  .fr-firmas::-webkit-scrollbar{display:none}
  .fr-firmas .chip{flex:none}
  .fr-dos{grid-template-columns:minmax(0,1fr)}
  .fr-ficha{padding:16px; box-shadow:6px 6px 0 0 var(--miel)}
  .fr-etiqueta{padding:22px 18px 18px; box-shadow:6px 6px 0 0 var(--miel-hondo)}
  .fr-sellos{gap:9px}
  .fp-ficha{padding:24px 20px 20px; box-shadow:6px 6px 0 0 var(--miel)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn, .fr-bote, .fr-ficha-foto img, .fp-otro{transition:none}
  .anim .fr-chispa, .anim .wa-float{animation:none}
  .fr-nivel, .anim .fr-fig:not(.visto) .fr-nivel{transition:none; transform:scaleY(1)}
}