/* ══════════════════════════════════════════════════════════════════════════════
   LOCURA PERFUMES · hoja de las páginas generadas
   (perfume/*.html · marca/*.html · aroma/*.html)

   Va ENCIMA de tienda.css y no en vez de: todo lo que ya existe —tipografías,
   colores, .btn, .chip, .card, .grid, el header, el pie— se hereda tal cual. Si
   estas páginas tuvieran su propia paleta, en un mes serían otra tienda.
   Aquí sólo vive lo que no existía: la ficha de producto y la migaja de ruta.
   ══════════════════════════════════════════════════════════════════════════════ */

/* El header es `position:fixed` y la franja de arriba también, así que el
   contenido arranca debajo de los dos. --barh la mide perfume.js igual que lo
   hace tienda.js: la franja no mide lo mismo en un teléfono que en un monitor. */
.pg main{padding-top:calc(var(--barh,34px) + 104px);padding-bottom:80px;min-height:70vh}

/* ---------- migaja de ruta ---------- */
.miga{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:.75rem;
  letter-spacing:.05em;color:var(--faint);margin-bottom:26px}
.miga a{color:var(--muted);transition:color .2s}
.miga a:hover{color:var(--gold-t)}
.miga i{font-style:normal;opacity:.45}
.miga span[aria-current]{color:var(--txt)}

/* ══════════════════════════════════════════════════════════════════════════════
   FICHA DE PERFUME
   ══════════════════════════════════════════════════════════════════════════════ */
.pf-top{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

.pf-im{border:1px solid var(--line2);border-radius:var(--r);background:var(--ink2);
  aspect-ratio:1/1;overflow:hidden;position:relative;display:grid;place-items:center}
.pf-im img{width:100%;height:100%;object-fit:cover}
/* Mismos tres tratamientos que la tarjeta del catálogo: recortado flota con
   halo, blanco va sobre blanco y sin sombra, el resto a sangre. */
.pf-im.cut{padding:11% 13%;background:
  radial-gradient(58% 52% at 50% 44%,rgba(232,181,75,.16),transparent 72%),var(--ink2)}
.pf-im.cut img{object-fit:contain;filter:drop-shadow(0 26px 34px rgba(60,40,10,.24))}
.pf-im.cut::after{content:"";position:absolute;left:50%;bottom:10%;transform:translateX(-50%);
  width:52%;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(60,40,10,.2),transparent)}
.pf-im.blanco{background:#fff;padding:6%}
.pf-im.blanco img{object-fit:contain}
.pf-sinfoto{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

.pf-info .eyebrow{margin-bottom:10px}
.pf-info .eyebrow a{color:var(--gold-t);text-decoration:underline;text-underline-offset:3px}
.pf h1{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.1rem);font-weight:500;
  line-height:1.06;margin:0 0 16px}
.pf .chips{margin-bottom:20px}
.chip.ok{color:var(--ok);border-color:rgba(21,128,61,.3)}
.chip.enc{color:var(--gold-t);border-color:var(--line)}

.pf-precio{display:flex;align-items:baseline;gap:10px;margin-bottom:20px}
.pf-precio b{font-family:var(--serif);font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:500}
.pf-precio small{font-size:.74rem;color:var(--faint)}

.pf .sizes{margin-bottom:22px}
/* La talla activa la marca perfume.js con data-on, no con una clase: así el
   HTML generado ya sale con la correcta puesta y no parpadea al cargar. */
.pf .size[data-on]{border-color:var(--gold);background:rgba(232,181,75,.09)}

.pf-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.pf-envio{font-size:.82rem;line-height:1.65;color:var(--muted);
  border-left:2px solid var(--line);padding-left:14px}
.pf-envio b{color:var(--txt);font-weight:600}

/* Los 14 que heredan la pirámide (desodorantes y estuches). Va ARRIBA y no en
   letra chica: es lo primero que necesita saber quien llegó buscando el frasco
   y cayó en el estuche — y es lo que impide que esta página se lea como una
   copia de la del perfume. */
.pf-hereda{margin-top:14px;font-size:.85rem;line-height:1.65;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r);padding:12px 15px;
  background:rgba(232,181,75,.06)}
.pf-hereda a{color:var(--gold-t);text-decoration:underline;text-underline-offset:3px}
.pf-hereda b{font-weight:600}

.pf-eco{font-size:.83rem;color:var(--muted);margin-top:14px;
  background:rgba(232,181,75,.07);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 15px}
.pf-eco b{color:var(--txt);font-weight:600}
.pf-eco a{color:var(--faint);text-decoration:underline;text-underline-offset:2px}

/* ---------- cómo huele ---------- */
.pf-notas{margin-top:66px;padding-top:38px;border-top:1px solid var(--line2)}
.pf h2{font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:500;margin:0 0 16px}
.pf-prosa{font-size:1.02rem;line-height:1.75;color:var(--muted);max-width:62ch;margin:0 0 26px}
.pf-prosa b{color:var(--txt);font-weight:600}

.nt{display:grid;gap:1px;background:var(--line2);border:1px solid var(--line2);
  border-radius:var(--r);overflow:hidden;max-width:640px}
.nt-f{display:grid;grid-template-columns:112px 1fr;gap:16px;background:var(--ink);
  padding:15px 18px;align-items:start}
.nt-l{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding-top:4px}
.nt-v{display:flex;flex-wrap:wrap;gap:7px}
.nt-v i{font-style:normal;font-size:.83rem;color:var(--txt);
  border:1px solid var(--line);border-radius:40px;padding:4px 12px;background:rgba(232,181,75,.05)}

.pf-fam{margin-top:20px;font-size:.83rem;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pf-fam a.chip{color:var(--gold-t);border-color:var(--line);transition:.22s}
.pf-fam a.chip:hover{background:rgba(232,181,75,.1);border-color:var(--gold)}

/* El aviso de honestidad no es letra chica escondida: es lo que separa decir
   qué LLEVA el frasco de prometer cómo va a oler en una piel que no conocemos. */
.pf-aviso{margin-top:24px;font-size:.79rem;line-height:1.7;color:var(--faint);max-width:62ch}
.pf-aviso b{color:var(--muted);font-weight:600}
.pf-aviso a{color:var(--faint);text-decoration:underline;text-underline-offset:2px}

/* ---------- gemelos y parecidos ---------- */
.pf-rel{margin-top:52px}
.pf-sub{font-size:.86rem;color:var(--muted);max-width:60ch;margin:-6px 0 20px}
.rel-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.rel{border:1px solid var(--line2);border-radius:var(--r);background:var(--ink2);
  padding:15px 17px;display:block;transition:.24s}
.rel:hover{border-color:var(--gold);background:rgba(232,181,75,.07);transform:translateY(-2px)}
.rel b{display:block;font-weight:500;font-size:.95rem;margin-bottom:4px;color:var(--txt)}
.rel span{font-size:.78rem;color:var(--faint)}

.pf-mas{margin-top:56px;padding-top:32px;border-top:1px solid var(--line2);
  display:flex;gap:12px;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════════════════════════
   MARCA Y FAMILIA
   ══════════════════════════════════════════════════════════════════════════════ */
.pg-lista .sec-h{max-width:720px;margin-bottom:38px}
.pg-lista h1{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.2rem);font-weight:500;
  line-height:1.06;margin:12px 0 14px}
.pg-lista .sec-h p{color:var(--muted);font-size:1rem;line-height:1.7}
.pg-conteo{font-size:.84rem !important;color:var(--faint) !important;margin-top:10px}
.pg-pie{margin-top:44px;padding-top:26px;border-top:1px solid var(--line2);
  font-size:.88rem;color:var(--muted);line-height:1.7}
.pg-pie a{color:var(--gold-t);text-decoration:underline;text-underline-offset:3px}
.pg-pie b{color:var(--txt);font-weight:600}

/* La tarjeta del catálogo la dibuja JavaScript y abre una ventana; ésta es un
   enlace de verdad, que es justo lo que hace falta para que Google llegue a las
   fichas sin ejecutar nada. Hereda .card entera y sólo apaga el subrayado. */
a.cardl{text-decoration:none;color:inherit}
a.cardl .c-img{cursor:pointer}

/* ══════════════════════════════════════════════════════════════════════════════
   NAVEGACIÓN POR AROMA Y POR MARCA (va en catalogo.html)
   Esta hoja también la carga catalogo.html: es el único trozo de aquí que no
   vive en las páginas generadas, y está aquí para no tener dos hojas que
   mantener.
   ══════════════════════════════════════════════════════════════════════════════ */
.hubs{margin-top:56px;padding-top:38px;border-top:1px solid var(--line2);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px}
.hubs h2{font-family:var(--serif);font-size:1.28rem;font-weight:500;margin:0 0 16px}
.hub-l{display:flex;flex-wrap:wrap;gap:9px}
.hub-l a{font-size:.83rem;color:var(--muted);border:1px solid var(--line2);
  border-radius:40px;padding:7px 15px;transition:.22s;line-height:1.3}
.hub-l a:hover{color:var(--txt);border-color:var(--gold);background:rgba(232,181,75,.08)}
@media(max-width:820px){.hubs{grid-template-columns:1fr;gap:32px;margin-top:44px}}

/* ---------- móvil ---------- */
@media(max-width:900px){
  .pf-top{grid-template-columns:1fr;gap:30px}
  .pf-im{max-width:460px}
}
@media(max-width:600px){
  .pg main{padding-top:calc(var(--barh,34px) + 84px)}
  .nt-f{grid-template-columns:1fr;gap:8px}
  .nt-l{padding-top:0}
  .pf-cta .btn{width:100%}
}