/* ══════════════════════════════════════════════════════════════════════
   Alfantic Perfumería — perfumes-home.css
   ─────────────────────────────────────────────────────────────────────
   Rediseño del storefront (perfumes.html). Sistema de diseño nuevo.
   · Se carga DESPUÉS de perfumes-styles.css.
   · TODO va con prefijo .ph- y bajo body.ph-home, para no sobrescribir
     ni una sola regla existente (el modal de envío, el carrito de cart.js
     y las páginas de producto siguen usando perfumes-styles.css intacto).
   ══════════════════════════════════════════════════════════════════════ */

body.ph-home{
  /* ── Paleta (atelier de perfumería: crema cálida + espresso + oro antiguo) ── */
  --ph-ink:      #241B15;   /* casi negro cálido: texto y bandas oscuras   */
  --ph-espresso: #3B2E28;   /* marrón marca: superficies oscuras           */
  --ph-espresso-2:#2C221C;  /* marrón más profundo para degradados         */
  --ph-gold:     #B0895A;   /* oro antiguo: acento principal               */
  --ph-gold-2:   #C9A96B;   /* oro claro: hover / brillos                  */
  --ph-garnet:   #8C3A2E;   /* granate joya: % de descuento (uso mínimo)   */
  --ph-cream:    #F7F2E9;   /* crema cálida: fondo de catálogo             */
  --ph-cream-2:  #FBF8F1;   /* crema clara: tarjetas/alternos              */
  --ph-paper:    #FFFFFF;
  --ph-muted:    #8A7B6C;   /* texto secundario                            */
  --ph-muted-2:  #B7A896;
  --ph-line:     rgba(36,27,21,.12);
  --ph-line-soft:rgba(36,27,21,.07);
  --ph-line-gold:rgba(176,137,90,.35);
  --ph-green:    #4E7C59;   /* envío gratis                                */
  --ph-radius:   16px;
  --ph-radius-sm:11px;
  --ph-shadow:   0 14px 40px rgba(60,44,30,.10);
  --ph-shadow-sm:0 6px 18px rgba(60,44,30,.08);
  --ph-ease:     cubic-bezier(.22,1,.36,1);

  font-family:'Jost',system-ui,-apple-system,sans-serif;
  color:var(--ph-ink);
  background:var(--ph-cream);
  margin:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Ocultar el botón flotante de cart.js SOLO en el storefront:
   aquí el carrito vive en el header. En páginas de producto sigue igual. */
body.ph-home #alf-cart-btn{ display:none !important; }

body.ph-home *{ box-sizing:border-box; }

.ph-home img{ max-width:100%; display:block; }
.ph-home a{ color:inherit; text-decoration:none; }
.ph-home h1,.ph-home h2,.ph-home h3{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500; margin:0; line-height:1.08; letter-spacing:.005em;
}
.ph-home em{ font-style:italic; color:var(--ph-gold); }

.ph-eyebrow{
  font-family:'Jost',sans-serif; font-weight:500;
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ph-gold); margin:0 0 .9rem;
}
.ph-eyebrow.on-dark{ color:var(--ph-gold-2); }

.ph-wrap{ max-width:1200px; margin:0 auto; padding:0 1.4rem; }
.ph-section{ padding:4.5rem 0; }
.ph-section-head{ text-align:center; max-width:640px; margin:0 auto 2.6rem; }
.ph-section-head h2{ font-size:clamp(1.9rem,4vw,2.9rem); }
.ph-section-head p{ color:var(--ph-muted); font-size:1rem; line-height:1.6; margin:.9rem 0 0; }

/* Botones ─────────────────────────────────────────────────────────── */
.ph-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:'Jost',sans-serif; font-weight:500; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  border:1px solid transparent; border-radius:999px; padding:.95rem 2rem;
  transition:transform .25s var(--ph-ease), background .25s, color .25s, border-color .25s;
}
.ph-btn:active{ transform:translateY(1px); }
.ph-btn-gold{ background:var(--ph-gold); color:#fff; }
.ph-btn-gold:hover{ background:var(--ph-gold-2); transform:translateY(-2px); }
.ph-btn-outline{ background:transparent; color:var(--ph-ink); border-color:var(--ph-line-gold); }
.ph-btn-outline:hover{ border-color:var(--ph-gold); color:var(--ph-gold); }
.ph-btn-outline.on-dark{ color:#F3EADD; border-color:rgba(201,169,107,.5); }
.ph-btn-outline.on-dark:hover{ color:#fff; border-color:var(--ph-gold-2); background:rgba(201,169,107,.10); }
.ph-btn-block{ width:100%; }

/* ══════════════════════ HEADER ══════════════════════ */
.ph-header{
  position:sticky; top:0; z-index:200;
  background:rgba(251,248,241,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ph-line);
}
.ph-header-in{
  max-width:1200px; margin:0 auto; padding:.85rem 1.4rem;
  display:flex; align-items:center; gap:1.4rem;
}
.ph-logo{ display:flex; align-items:center; gap:.7rem; flex:0 0 auto; }
.ph-logo img{ height:40px; width:auto; }
.ph-logo-txt{ display:flex; flex-direction:column; line-height:1; }
.ph-logo-txt strong{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.35rem; letter-spacing:.04em; }
.ph-logo-txt span{ font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ph-muted); margin-top:2px; }

.ph-nav{ display:flex; align-items:center; gap:1.5rem; margin:0 auto; }
.ph-nav a{
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ph-ink);
  padding:.35rem 0; position:relative; transition:color .2s; white-space:nowrap;
}
.ph-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px;
  background:var(--ph-gold); transition:right .28s var(--ph-ease);
}
.ph-nav a:hover{ color:var(--ph-gold); }
.ph-nav a:hover::after{ right:0; }

.ph-header-actions{ display:flex; align-items:center; gap:.4rem; flex:0 0 auto; }
.ph-icon-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid transparent;
  background:none; cursor:pointer; color:var(--ph-ink);
  display:flex; align-items:center; justify-content:center; position:relative;
  transition:background .2s, color .2s;
}
.ph-icon-btn:hover{ background:rgba(176,137,90,.10); color:var(--ph-gold); }
.ph-icon-btn svg{ width:20px; height:20px; }
.ph-cart-count{
  position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:var(--ph-gold); color:#fff;
  font-family:'Jost',sans-serif; font-size:.64rem; font-weight:600;
  display:none; align-items:center; justify-content:center; line-height:1;
}
.ph-burger{ display:none; }

/* Barra de búsqueda desplegable */
.ph-searchbar{
  max-height:0; overflow:hidden; border-top:1px solid transparent;
  transition:max-height .3s var(--ph-ease);
  background:rgba(251,248,241,.98);
}
.ph-searchbar.open{ max-height:80px; border-top-color:var(--ph-line); }
.ph-searchbar-in{ max-width:1200px; margin:0 auto; padding:.8rem 1.4rem; display:flex; align-items:center; gap:.7rem; }
.ph-searchbar svg{ width:18px; height:18px; color:var(--ph-muted); flex:0 0 auto; }
.ph-searchbar input{
  flex:1; border:none; background:none; outline:none;
  font-family:'Jost',sans-serif; font-size:1rem; color:var(--ph-ink); padding:.5rem 0;
}
.ph-searchbar input::placeholder{ color:var(--ph-muted-2); }

/* Menú móvil */
.ph-mobile-nav{
  position:fixed; inset:0 0 0 auto; width:82vw; max-width:340px; z-index:300;
  background:var(--ph-espresso); color:#F3EADD; transform:translateX(100%);
  transition:transform .35s var(--ph-ease); padding:1.6rem 1.5rem;
  display:flex; flex-direction:column; gap:.2rem; overflow-y:auto;
}
.ph-mobile-nav.open{ transform:translateX(0); }
.ph-mobile-ov{ position:fixed; inset:0; z-index:299; background:rgba(20,14,10,.55); opacity:0; pointer-events:none; transition:opacity .3s; }
.ph-mobile-ov.open{ opacity:1; pointer-events:auto; }
.ph-mobile-nav .ph-mn-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.ph-mobile-nav .ph-mn-head strong{ font-family:'Cormorant Garamond',serif; font-size:1.4rem; }
.ph-mobile-nav .ph-mn-close{ background:none; border:none; color:#F3EADD; font-size:1.4rem; cursor:pointer; }
.ph-mobile-nav a{
  font-size:.95rem; letter-spacing:.06em; padding:.85rem 0;
  border-bottom:1px solid rgba(201,169,107,.14); color:#EDE3D4;
}
.ph-mobile-nav a:hover{ color:var(--ph-gold-2); }

/* ══════════════════════ HERO ══════════════════════ */
.ph-hero{
  position:relative; overflow:hidden; color:#F3EADD;
  background:
    radial-gradient(120% 90% at 78% 15%, rgba(176,137,90,.22) 0%, transparent 55%),
    linear-gradient(155deg, var(--ph-espresso) 0%, var(--ph-espresso-2) 55%, var(--ph-ink) 100%);
}
.ph-hero-in{
  max-width:1200px; margin:0 auto; padding:5rem 1.4rem 5.5rem;
  display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; position:relative; z-index:2;
}
.ph-hero h1{ font-size:clamp(2.7rem,6.5vw,5rem); color:#FBF7EF; margin:.4rem 0 1.2rem; }
.ph-hero h1 em{ color:var(--ph-gold-2); }
.ph-hero p{ color:#D7C9B7; font-size:1.05rem; line-height:1.7; max-width:30rem; margin:0 0 2rem; }
.ph-hero-actions{ display:flex; gap:.8rem; flex-wrap:wrap; }
.ph-hero-visual{ position:relative; aspect-ratio:1/1; }
.ph-hero-visual .ph-hero-frame{
  position:absolute; inset:8%; border:1px solid var(--ph-line-gold); border-radius:var(--ph-radius);
}
.ph-hero-visual .ph-hero-bottle{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.ph-hero-visual img{ max-height:100%; object-fit:contain; filter:drop-shadow(0 30px 40px rgba(0,0,0,.4)); }
/* Placeholder elegante si aún no hay imagen de hero */
.ph-hero-bottle .ph-bottle-ph{
  width:46%; aspect-ratio:.5/1; border-radius:60px 60px 14px 14px;
  background:linear-gradient(160deg, rgba(201,169,107,.30), rgba(201,169,107,.05));
  border:1px solid var(--ph-line-gold); position:relative;
}
.ph-hero-bottle .ph-bottle-ph::before{
  content:''; position:absolute; top:-12%; left:50%; transform:translateX(-50%);
  width:26%; height:14%; background:rgba(201,169,107,.4); border-radius:6px;
}
.ph-hero-scent{ position:absolute; left:6%; bottom:8%; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1rem; color:rgba(215,201,183,.6); }

/* ══════════════════════ BENEFICIOS ══════════════════════ */
.ph-benefits{ background:var(--ph-cream-2); border-bottom:1px solid var(--ph-line); }
.ph-benefits-grid{
  max-width:1200px; margin:0 auto; padding:2rem 1.4rem;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.ph-benefit{ display:flex; gap:.85rem; align-items:flex-start; padding:.8rem 1.3rem; }
.ph-benefit + .ph-benefit{ border-left:1px solid var(--ph-line); }
.ph-benefit svg{ width:26px; height:26px; flex:0 0 auto; stroke:var(--ph-gold); stroke-width:1.4; fill:none; }
.ph-benefit b{ display:block; font-family:'Jost',sans-serif; font-weight:600; font-size:.85rem; color:var(--ph-ink); margin-bottom:.15rem; }
.ph-benefit span{ font-size:.78rem; color:var(--ph-muted); line-height:1.4; }

/* ══════════════════════ CATEGORÍAS ══════════════════════ */
.ph-cats-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.ph-cat{
  position:relative; border-radius:var(--ph-radius); overflow:hidden; aspect-ratio:3/4;
  border:1px solid var(--ph-line); background:var(--ph-espresso); color:#fff;
  display:flex; align-items:flex-end; transition:transform .3s var(--ph-ease), box-shadow .3s;
}
.ph-cat:hover{ transform:translateY(-4px); box-shadow:var(--ph-shadow); }
.ph-cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; }
.ph-cat::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,14,10,.82) 8%, rgba(20,14,10,.15) 60%); }
.ph-cat-label{ position:relative; z-index:2; padding:1.1rem 1.1rem 1.2rem; width:100%; }
.ph-cat-label b{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.5rem; letter-spacing:.02em; display:block; }
.ph-cat-label span{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ph-gold-2); }
.ph-cat-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(201,169,107,.35); font-family:'Cormorant Garamond',serif; font-size:3rem; }

/* ══════════════════════ TOOLBAR (búsqueda + filtros del catálogo) ══════════════════════ */
.ph-toolbar{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; margin-bottom:2.2rem; }
.ph-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; }
.ph-filters::-webkit-scrollbar{ display:none; }
.pf-cat-btn, .ph-filter{
  font-family:'Jost',sans-serif; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.6rem 1.15rem; border-radius:999px; border:1px solid var(--ph-line);
  background:var(--ph-paper); color:var(--ph-ink); cursor:pointer; white-space:nowrap;
  transition:all .2s;
}
.pf-cat-btn:hover, .ph-filter:hover{ border-color:var(--ph-gold); color:var(--ph-gold); }
.pf-cat-btn.active, .ph-filter.active{ background:var(--ph-espresso); color:#fff; border-color:var(--ph-espresso); }

/* ══════════════════════ GRID + TARJETA PREMIUM ══════════════════════ */
.ph-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }

.ph-card{
  background:var(--ph-paper); border:1px solid var(--ph-line); border-radius:var(--ph-radius);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition:transform .3s var(--ph-ease), box-shadow .3s var(--ph-ease), border-color .3s;
}
.ph-card:hover{ transform:translateY(-5px); box-shadow:var(--ph-shadow); border-color:var(--ph-line-gold); }

.ph-card-media{
  position:relative; aspect-ratio:4/5; background:linear-gradient(165deg,var(--ph-cream-2),#efe7d8);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ph-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ph-ease); }
.ph-card:hover .ph-card-media img{ transform:scale(1.05); }
.ph-card-media .ph-media-ph{
  width:42%; aspect-ratio:.52/1; border-radius:40px 40px 10px 10px;
  background:linear-gradient(160deg, rgba(176,137,90,.22), rgba(176,137,90,.05));
  border:1px solid var(--ph-line-gold); position:relative;
}
.ph-card-media .ph-media-ph::before{
  content:''; position:absolute; top:-10%; left:50%; transform:translateX(-50%);
  width:24%; height:12%; background:rgba(176,137,90,.35); border-radius:4px;
}
.ph-badge-oferta{
  position:absolute; top:.7rem; left:.7rem; z-index:3;
  font-family:'Jost',sans-serif; font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  background:var(--ph-espresso); color:var(--ph-gold-2); padding:.32rem .6rem; border-radius:6px;
}
.ph-badge-tipo{
  position:absolute; bottom:.7rem; left:.7rem; z-index:3;
  font-family:'Jost',sans-serif; font-size:.58rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(255,255,255,.9); color:var(--ph-muted); padding:.28rem .55rem; border-radius:5px; backdrop-filter:blur(4px);
}
.ph-fav{
  position:absolute; top:.6rem; right:.6rem; z-index:3; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.9); border:1px solid var(--ph-line); cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--ph-muted);
  transition:color .2s, transform .2s; backdrop-filter:blur(4px);
}
.ph-fav:hover{ color:var(--ph-garnet); transform:scale(1.08); }
.ph-fav svg{ width:15px; height:15px; }
.ph-fav.on{ color:var(--ph-garnet); }
.ph-fav.on svg{ fill:currentColor; }

.ph-card-body{ padding:1rem 1rem 1.15rem; display:flex; flex-direction:column; gap:.42rem; flex:1; }

/* Banner promocional por producto (viene de la BD: banner_texto) */
.ph-card-banner{
  position:relative; z-index:4;
  background:var(--ph-garnet); color:#fff; text-align:center;
  font-family:'Jost',sans-serif; font-size:.6rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; line-height:1.3;
  /* Deja hueco a la derecha para el corazón y permite 2 líneas sin cortarse */
  padding:.42rem 2.6rem .42rem .7rem;
  overflow-wrap:anywhere; word-break:break-word; hyphens:auto;
}
/* Si hay banner, el corazón se ajusta para no encimarse con el texto */
.ph-card-banner ~ .ph-fav{ top:.34rem; width:28px; height:28px; }
.ph-card-banner ~ .ph-fav svg{ width:13px; height:13px; }

/* Etiquetas del producto (campo etiquetas) */
.ph-tags{ display:flex; flex-wrap:wrap; gap:.3rem; }
.ph-tag{
  font-family:'Jost',sans-serif; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ph-muted); background:var(--ph-cream); border:1px solid var(--ph-line-soft);
  padding:.2rem .48rem; border-radius:4px;
}
.ph-card-rating{ display:flex; align-items:center; gap:.4rem; font-size:.74rem; color:var(--ph-muted); min-height:16px; }
.ph-card-rating .ph-stars{ color:var(--ph-gold); letter-spacing:.06em; font-size:.82rem; }
.ph-card-rating .ph-stars .off{ color:#dccdb6; }
.ph-card-rating.empty{ color:var(--ph-muted-2); font-style:italic; }
.ph-card-brand{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ph-gold); }
.ph-card-name{
  font-family:'Jost',sans-serif; font-weight:500; font-size:.92rem; line-height:1.3; color:var(--ph-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em;
}
.ph-card-meta{ font-size:.74rem; color:var(--ph-muted); }
.ph-card-price{ display:flex; align-items:baseline; gap:.5rem; margin-top:.25rem; }
.ph-price-now{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.55rem; color:var(--ph-ink); line-height:1; }
.ph-price-now small{ font-family:'Jost',sans-serif; font-size:.6rem; font-weight:500; letter-spacing:.08em; color:var(--ph-muted); }
.ph-price-old{ font-size:.85rem; color:var(--ph-muted-2); text-decoration:line-through; }
.ph-price-off{ font-family:'Jost',sans-serif; font-size:.64rem; font-weight:600; color:var(--ph-garnet); letter-spacing:.04em; }

.ph-card-actions{ margin-top:.7rem; display:flex; gap:.5rem; }
.ph-add{
  flex:1; font-family:'Jost',sans-serif; font-weight:500; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--ph-espresso); background:var(--ph-espresso); color:#fff; border-radius:999px; padding:.72rem .5rem; cursor:pointer;
  transition:background .2s, transform .15s;
}
.ph-add:hover{ background:var(--ph-gold); border-color:var(--ph-gold); }
.ph-add:active{ transform:scale(.98); }
.ph-buy{
  flex:0 0 auto; font-family:'Jost',sans-serif; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--ph-line-gold); background:transparent; color:var(--ph-ink); border-radius:999px; padding:.72rem 1rem; cursor:pointer;
  transition:border-color .2s, color .2s;
}
.ph-buy:hover{ border-color:var(--ph-gold); color:var(--ph-gold); }

/* Filas horizontales (ofertas / skincare) */
.ph-row{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:1.4rem; overflow-x:auto; padding:.4rem .2rem 1rem; scroll-snap-type:x mandatory; }
.ph-row::-webkit-scrollbar{ height:6px; }
.ph-row::-webkit-scrollbar-thumb{ background:var(--ph-line-gold); border-radius:6px; }
.ph-row .ph-card{ scroll-snap-align:start; }
.ph-row-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.ph-row-head h2{ font-size:clamp(1.6rem,3.4vw,2.3rem); }
.ph-row-head p{ color:var(--ph-muted); font-size:.9rem; margin:.4rem 0 0; }
.ph-row-link{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ph-gold); white-space:nowrap; border-bottom:1px solid transparent; transition:border-color .2s; }
.ph-row-link:hover{ border-color:var(--ph-gold); }

.ph-loading, .ph-empty{ grid-column:1/-1; text-align:center; padding:3rem 1rem; color:var(--ph-muted); font-size:.9rem; }

/* Fondos alternos por sección */
.ph-sec-cream2{ background:var(--ph-cream-2); }
.ph-sec-skincare{ background:linear-gradient(180deg,#FBFAF6,#F4F6F2); }

/* ══════════════════════ BANNER DE ENVÍO ══════════════════════ */
.ph-ship{ background:linear-gradient(120deg,var(--ph-espresso),var(--ph-ink)); color:#F3EADD; }
.ph-ship-in{ max-width:1200px; margin:0 auto; padding:1.5rem 1.4rem; display:flex; align-items:center; justify-content:center; gap:1rem; text-align:center; flex-wrap:wrap; }
.ph-ship svg{ width:30px; height:30px; stroke:var(--ph-gold-2); stroke-width:1.4; fill:none; flex:0 0 auto; }
.ph-ship b{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.5rem; color:#FBF7EF; }
.ph-ship span{ color:#D7C9B7; font-size:.9rem; }

/* ══════════════════════ POR QUÉ ALFANTIC ══════════════════════ */
.ph-why-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.6rem; }
.ph-why{ text-align:center; padding:1rem .6rem; }
.ph-why-ico{ width:56px; height:56px; margin:0 auto 1rem; border-radius:50%; border:1px solid var(--ph-line-gold); display:flex; align-items:center; justify-content:center; }
.ph-why-ico svg{ width:24px; height:24px; stroke:var(--ph-gold); stroke-width:1.4; fill:none; }
.ph-why b{ display:block; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.15rem; margin-bottom:.35rem; }
.ph-why span{ font-size:.8rem; color:var(--ph-muted); line-height:1.5; }

/* ══════════════════════ RESEÑAS (carrusel infinito) ══════════════════════ */
.ph-reviews{ background:var(--ph-espresso); color:#F3EADD; overflow:hidden; }
.ph-reviews .ph-section-head h2{ color:#FBF7EF; }
.ph-reviews .ph-section-head p{ color:#C9BAA7; }
.ph-marquee{ position:relative; width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.ph-marquee-track{ display:flex; gap:1.3rem; width:max-content; animation:phMarquee 60s linear infinite; }
.ph-marquee:hover .ph-marquee-track{ animation-play-state:paused; }
@keyframes phMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ph-review-card{
  flex:0 0 auto; width:340px; background:rgba(251,247,239,.05); border:1px solid rgba(201,169,107,.2);
  border-radius:var(--ph-radius); padding:1.5rem 1.6rem; backdrop-filter:blur(2px);
}
.ph-review-card .ph-stars{ color:var(--ph-gold-2); letter-spacing:.1em; font-size:.95rem; }
.ph-review-card .ph-r-text{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.15rem; line-height:1.5; color:#EFE6D7; margin:.9rem 0 1.1rem; }
.ph-review-card .ph-r-who{ display:flex; align-items:center; gap:.7rem; }
.ph-review-card .ph-r-ava{ width:38px; height:38px; border-radius:50%; background:var(--ph-gold); color:var(--ph-espresso); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.1rem; }
.ph-review-card .ph-r-name{ font-family:'Jost',sans-serif; font-weight:500; font-size:.86rem; color:#F3EADD; }
.ph-review-card .ph-r-prod{ font-size:.72rem; color:var(--ph-gold-2); letter-spacing:.04em; }

/* ══════════════════════ FAQ ══════════════════════ */
.ph-faq{ max-width:780px; margin:0 auto; }
.ph-faq-item{ border-bottom:1px solid var(--ph-line); }
.ph-faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:1.25rem .2rem;
  font-family:'Jost',sans-serif; font-size:1rem; font-weight:500; color:var(--ph-ink);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.ph-faq-ico{ flex:0 0 auto; width:24px; height:24px; border:1px solid var(--ph-line-gold); border-radius:50%; position:relative; transition:transform .25s var(--ph-ease); }
.ph-faq-ico::before,.ph-faq-ico::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--ph-gold); }
.ph-faq-ico::before{ width:11px; height:1.6px; }
.ph-faq-ico::after{ width:1.6px; height:11px; transition:opacity .2s; }
.ph-faq-item.open .ph-faq-ico{ transform:rotate(180deg); }
.ph-faq-item.open .ph-faq-ico::after{ opacity:0; }
.ph-faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ph-ease); }
.ph-faq-item.open .ph-faq-a{ max-height:280px; }
.ph-faq-a p{ margin:0; padding:0 .2rem 1.3rem; font-size:.92rem; line-height:1.7; color:var(--ph-muted); }
.ph-faq-a a{ color:var(--ph-gold); }

/* ══════════════════════ CTA FINAL ══════════════════════ */
.ph-cta-final{
  text-align:center; color:#F3EADD;
  background:radial-gradient(120% 100% at 50% 0%, rgba(176,137,90,.20), transparent 60%), linear-gradient(160deg,var(--ph-espresso),var(--ph-ink));
}
.ph-cta-final h2{ font-size:clamp(2rem,5vw,3.4rem); color:#FBF7EF; }
.ph-cta-final p{ color:#D7C9B7; font-size:1.05rem; margin:1rem auto 2rem; max-width:34rem; line-height:1.6; }

/* ══════════════════════ FOOTER ══════════════════════ */
.ph-footer{ background:var(--ph-ink); color:#C9BAA7; padding:3.4rem 0 2rem; border-top:1px solid rgba(201,169,107,.2); }
.ph-footer-grid{ max-width:1200px; margin:0 auto; padding:0 1.4rem; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; }
.ph-footer-brand img{ height:42px; margin-bottom:.9rem; }
.ph-footer-brand p{ font-size:.85rem; line-height:1.6; color:#A99A88; max-width:22rem; }
.ph-footer h4{ font-family:'Jost',sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ph-gold-2); margin:0 0 1rem; }
.ph-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.ph-footer a{ font-size:.85rem; color:#C9BAA7; transition:color .2s; }
.ph-footer a:hover{ color:var(--ph-gold-2); }
.ph-footer-bottom{ max-width:1200px; margin:2.6rem auto 0; padding:1.4rem 1.4rem 0; border-top:1px solid rgba(201,169,107,.14); display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.ph-footer-bottom span{ font-size:.75rem; color:#8A7B6C; letter-spacing:.04em; }

/* ══════════════════════ REVEAL ══════════════════════ */
.ph-reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ph-ease), transform .7s var(--ph-ease); }
.ph-reveal.in{ opacity:1; transform:none; }

/* ══════════════════════ RESPONSIVE ══════════════════════ */
@media (max-width:1080px){
  .ph-grid{ grid-template-columns:repeat(3,1fr); }
  .ph-why-grid{ grid-template-columns:repeat(3,1fr); row-gap:2rem; }
  .ph-cats-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px){
  .ph-nav{ display:none; }
  .ph-burger{ display:flex; }
  .ph-hero-in{ grid-template-columns:1fr; text-align:center; padding:3.4rem 1.4rem 3.8rem; }
  .ph-hero p{ margin-left:auto; margin-right:auto; }
  .ph-hero-actions{ justify-content:center; }
  .ph-hero-visual{ max-width:320px; margin:1.5rem auto 0; }
  .ph-benefits-grid{ grid-template-columns:repeat(2,1fr); }
  .ph-benefit:nth-child(3), .ph-benefit:nth-child(4){ border-top:1px solid var(--ph-line); }
  .ph-benefit:nth-child(odd){ border-left:none; }
  .ph-footer-grid{ grid-template-columns:1fr 1fr; }
  .ph-footer-brand{ grid-column:1/-1; }
}
@media (max-width:620px){
  .ph-section{ padding:3.2rem 0; }
  .ph-grid{ grid-template-columns:repeat(2,1fr); gap:.9rem; }
  .ph-cats-grid{ display:flex; overflow-x:auto; gap:.8rem; scroll-snap-type:x mandatory; padding-bottom:.6rem; }
  .ph-cat{ flex:0 0 46%; scroll-snap-align:start; }
  .ph-card-body{ padding:.8rem .8rem 1rem; gap:.34rem; }
  .ph-price-now{ font-size:1.35rem; }
  .ph-card-name{ font-size:.85rem; }
  .ph-card-actions{ flex-direction:column; }
  .ph-buy{ padding:.65rem; }
  .ph-why-grid{ grid-template-columns:repeat(2,1fr); }
  .ph-review-card{ width:280px; }
  .ph-header-in{ gap:.6rem; }
  .ph-logo-txt span{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .ph-marquee-track{ animation:none; }
  .ph-reveal{ opacity:1; transform:none; transition:none; }
  .ph-card, .ph-cat, .ph-btn{ transition:none; }
}