/* ---- Botones: rectangulares, negro sólido / contorno hairline ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:0 26px; border-radius:var(--radius); cursor:pointer;
  font-family:var(--font-body); font-weight:500; font-size:var(--fs-sm);
  background:var(--panel); color:var(--ink); border:1px solid var(--hairline-2);
  transition:all .18s ease; text-align:center }
.btn:hover{ border-color:var(--ink) }
.btn--primary{ background:#161511; color:#fff; border-color:#161511 }
.btn--primary:hover{ background:#000; border-color:#000 }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--hairline-2) }
.bleed--dark .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.4) }
.btn--quiet{ background:var(--paper-2); border-color:var(--hairline) }
.btn--lg{ min-height:56px; padding:0 32px; font-size:var(--fs-md) }
.btn--block{ width:100% }
.btn::after{ content:"→"; font-weight:400; opacity:.85 }
.btn.no-arrow::after, form .btn:not(.btn--lg)::after{ content:none }

/* ---- Chips: cápsula hairline, small caps ---- */
.chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border-radius:999px; background:var(--panel); border:1px solid var(--hairline);
  font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2) }
.chip--tint{ background:var(--tint); border-color:transparent; color:var(--ink) }
.chip--ok{ background:#EDF5EF; border-color:transparent; color:var(--acc-green) }

/* ---- Tarjetas: blanco + hairline, radio contenido ---- */
.card{ background:var(--panel); border:1px solid var(--hairline);
  border-radius:var(--radius-lg); padding:var(--space-8); box-shadow:var(--shadow-soft) }
.card--hover{ transition:all .18s ease }
.card--hover:hover{ border-color:var(--hairline-2); box-shadow:var(--shadow-float); transform:translateY(-2px) }
.card--surface{ background:var(--paper-2) }
.card--tint{ background:var(--tint); border-color:transparent }

/* ---- Navegación: barra editorial con hairline ---- */
.nav{ position:fixed; inset-inline:0; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--hairline) }
.nav__inner{ width:min(100% - 3rem, 1360px); margin-inline:auto; display:flex;
  align-items:center; gap:var(--space-8); min-height:72px }
.nav__logo{ display:flex; flex-direction:column; line-height:1.05; margin-right:var(--space-4) }
.nav__logo b{ font-weight:600; font-size:1.35rem; letter-spacing:-.02em }
.nav__logo small{ font-size:.56rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mist) }
.nav__links{ display:flex; gap:var(--space-6); font-size:var(--fs-sm); color:var(--ink-2); margin-inline:auto }
.nav__links a:hover{ color:var(--ink) }
.nav__cta{ display:flex; gap:var(--space-3); align-items:center }
@media (max-width:900px){ .nav__links{ display:none } }

/* ---- Bleed (secciones anchura completa): mundo claro por defecto ---- */
.bleed{ position:relative; min-height:92svh; display:grid; align-items:center;
  overflow:hidden; background:var(--paper) }
.bleed__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.bleed__overlay{ position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(242,240,234,.92) 0%, rgba(242,240,234,.55) 38%, rgba(242,240,234,0) 62%) }
.bleed__content{ position:relative; z-index:2; width:min(100% - 3rem, var(--container));
  margin-inline:auto; padding-block:var(--space-16); display:grid; gap:var(--space-6) }
.bleed--dark{ background:var(--night); color:#fff }
.bleed--dark .bleed__overlay{ background:linear-gradient(90deg, rgba(35,33,28,.86) 0%, rgba(35,33,28,.5) 40%, rgba(35,33,28,.05) 66%) }
.bleed--dark .lead{ color:#CFCBC2 } .bleed--dark .eyebrow{ color:#A6A199 }
.bleed--dark .chip{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#E4E1DA }

/* ---- Estadísticas ---- */
.stat{ background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius-lg);
  padding:var(--space-6) var(--space-8) }
.stat__num{ font-size:clamp(2rem,4vw,3rem); font-weight:500; letter-spacing:-.02em; line-height:1 }
.stat__label{ margin-top:8px; font-size:.72rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mist) }
.stat--blue .stat__num{ color:var(--acc-blue) } .stat--red .stat__num{ color:var(--acc-red) }
.stat--violet .stat__num{ color:var(--acc-violet) } .stat--orange .stat__num{ color:var(--acc-orange) }

/* ---- Anillo de métrica: aro fino estilo dataviz ---- */
.ring-wrap{ position:relative; width:230px; height:230px }
.ring{ width:100%; height:100%; border-radius:50%;
  background:conic-gradient(var(--acc-violet) calc(var(--v,77)*1%), var(--hairline) 0);
  -webkit-mask:radial-gradient(circle, transparent 62%, #000 63%); mask:radial-gradient(circle, transparent 62%, #000 63%) }
.ring-wrap__center{ position:absolute; inset:0; display:grid; place-items:center; text-align:center }
.ring-wrap__num{ font-size:3.4rem; font-weight:500; letter-spacing:-.02em }
.ring-wrap__label{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mist) }

/* ---- Fila de features (pie de hero, como el diseño) ---- */
.feat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-8);
  border-top:1px solid var(--hairline); padding-top:var(--space-8) }
.feat-row article{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start }
.feat-row .ic{ width:40px; height:40px; border:1px solid var(--hairline-2); border-radius:50%;
  display:grid; place-items:center; font-size:1rem; color:var(--ink-2) }
.feat-row b{ font-weight:600; font-size:var(--fs-sm) }
.feat-row p{ font-size:var(--fs-xs); color:var(--mist); line-height:1.5 }
@media (max-width:900px){ .feat-row{ grid-template-columns:repeat(2,1fr) } }

/* ---- Formularios ---- */
.field{ display:grid; gap:6px }
.field label{ font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--mist) }
.input,.select,.textarea{ width:100%; min-height:50px; padding:0 16px; border-radius:var(--radius);
  border:1px solid var(--hairline-2); background:var(--panel); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-sm) }
.textarea{ padding:14px 16px; min-height:120px; resize:vertical }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--ink) }

/* ---- Varios conservados ---- */
.price{ font-weight:500 }
.breadcrumb{ display:flex; gap:10px; font-size:var(--fs-xs); color:var(--mist);
  letter-spacing:.06em; text-transform:uppercase }
.consent{ position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:80;
  display:flex; gap:var(--space-4); align-items:center; flex-wrap:wrap; max-width:min(92vw,680px);
  padding:var(--space-4) var(--space-6) }
.pdp-bar{ position:fixed; inset-inline:0; bottom:0; z-index:50; background:var(--panel);
  border-top:1px solid var(--hairline); padding:12px 16px; display:none;
  align-items:center; justify-content:space-between; gap:12px }
@media (max-width:768px){ .pdp-bar{ display:flex } }
.phone{ width:min(300px,72vw); aspect-ratio:9/19; border-radius:42px; background:#101010;
  padding:12px; box-shadow:var(--shadow-float); margin-inline:auto }
.phone--tilt{ transform:rotate(-4deg) }
.phone__screen{ position:relative; width:100%; height:100%; border-radius:32px; overflow:hidden;
  background:#17151F; color:#fff; display:grid }
.scroll-cue{ width:26px; height:44px; border:1.5px solid var(--hairline-2); border-radius:999px;
  margin:var(--space-8) auto 0; position:relative }
.scroll-cue::after{ content:""; position:absolute; top:8px; left:50%; width:4px; height:9px;
  border-radius:4px; background:var(--mist); transform:translateX(-50%); animation:cue 1.8s infinite }
@keyframes cue{ 50%{ transform:translate(-50%, 12px); opacity:.4 } }
.wave{ stroke:var(--acc-violet) }

/* ---- Barra de administración ---- */
.adminbar{ position:sticky; top:0; z-index:70; display:flex; align-items:center; gap:var(--space-6);
  padding:12px 24px; background:var(--panel); border-bottom:1px solid var(--hairline); flex-wrap:wrap }
.adminbar__brand{ display:flex; flex-direction:column; line-height:1.05; margin-right:var(--space-4) }
.adminbar__brand b{ font-weight:600; font-size:1.05rem; letter-spacing:-.02em }
.adminbar__brand small{ font-size:.54rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--mist) }
.adminbar__nav{ display:flex; gap:2px; flex-wrap:wrap; margin-right:auto }
.adminbar__nav a{ padding:8px 12px; border-radius:8px; font-size:var(--fs-sm); color:var(--ink-2) }
.adminbar__nav a:hover{ background:var(--paper-2); color:var(--ink) }
.adminbar__nav a.on{ background:var(--tint); color:var(--ink); font-weight:500 }
.adminbar__end{ display:flex; align-items:center; gap:var(--space-4); font-size:var(--fs-sm); color:var(--mist) }

/* ================= PASE MÓVIL ================= */
.nav__burger,.nav__menu,.nav__cart{ display:none }
.hero-ed{ min-height:96svh; align-content:center }

@media (max-width:900px){
  /* --- Nav móvil --- */
  .nav__inner{ min-height:60px; gap:var(--space-3) }
  .nav__logo b{ font-size:1.12rem } .nav__logo small{ font-size:.5rem; letter-spacing:.18em }
  .nav__links,.nav__cta{ display:none }
  .nav__cart{ display:inline-flex; margin-left:auto; font-size:var(--fs-xs); color:var(--ink-2);
    letter-spacing:.06em; text-transform:uppercase; align-items:center }
  .nav__burger{ display:grid; place-items:center; width:44px; height:44px;
    border:1px solid var(--hairline-2); border-radius:10px; background:var(--panel); cursor:pointer }
  .nav__burger span,.nav__burger span::before,.nav__burger span::after{
    content:""; display:block; width:18px; height:2px; background:var(--ink);
    border-radius:2px; transition:transform .2s ease, opacity .2s ease; position:relative }
  .nav__burger span::before{ position:absolute; top:-6px } .nav__burger span::after{ position:absolute; top:6px }
  .nav__toggle:checked ~ .nav .nav__burger span{ transform:rotate(45deg) }
  .nav__toggle:checked ~ .nav .nav__burger span::before{ transform:rotate(-90deg); top:0 }
  .nav__toggle:checked ~ .nav .nav__burger span::after{ opacity:0 }
  .nav__menu{ position:fixed; top:61px; inset-inline:0; bottom:0; z-index:59;
    background:var(--paper); padding:var(--space-6) var(--space-6) var(--space-12);
    overflow:auto; flex-direction:column }
  .nav__toggle:checked ~ .nav__menu{ display:flex }
  .nav__menu > a{ padding:16px 2px; font-size:1.3rem; font-weight:450; letter-spacing:-.01em;
    border-bottom:1px solid var(--hairline) }
  .nav__menu > a.btn{ font-size:var(--fs-md); border-bottom:none }

  /* --- Secciones bleed --- */
  .bleed{ min-height:72svh }
  .bleed__content{ padding-top:calc(61px + var(--space-10, 2.5rem)); padding-bottom:var(--space-12) }
  .hero-ed{ min-height:auto }
  .hero-ed .bleed__content{ gap:var(--space-6) }
  .hero-ed .lead{ max-width:none }
  .hero-ed .split{ gap:var(--space-6) }
  .hero-ed img{ width:min(360px,84%) }
  .kickers{ flex-wrap:nowrap; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;
    font-size:.64rem; letter-spacing:.12em; padding-bottom:2px }
  .kickers::-webkit-scrollbar{ display:none }
  .kickers span{ white-space:nowrap }
  .kickers span+span::before{ margin:0 10px }
  .feat-row{ grid-template-columns:repeat(2,1fr); gap:var(--space-4); padding-top:var(--space-6) }
  .feat-row .ic{ width:34px; height:34px; font-size:.85rem }
  .feat-row b{ font-size:var(--fs-xs) } .feat-row p{ font-size:.72rem }

  /* Overlays: en vertical el degradado protege desde arriba */
  .bleed__overlay{ background:linear-gradient(180deg, rgba(242,240,234,.95) 0%,
    rgba(242,240,234,.78) 42%, rgba(242,240,234,.2) 72%, transparent 100%) }
  .bleed--dark .bleed__overlay{ background:linear-gradient(180deg, rgba(35,33,28,.92) 0%,
    rgba(35,33,28,.6) 45%, rgba(35,33,28,.1) 75%, transparent 100%) }

  /* --- Ritmo y tipografía --- */
  .section{ padding-block:var(--space-16) } .section--tight{ padding-block:var(--space-12) }
  .split{ gap:var(--space-8) }
  .display{ font-size:clamp(2.1rem,9vw,2.9rem) }
  .h1{ font-size:clamp(1.7rem,7vw,2.2rem) }
  .lead--big{ font-size:1.1rem }
  .ring-wrap{ width:190px; height:190px } .ring-wrap__num{ font-size:2.7rem }
  .card{ padding:var(--space-6) }
  .stat{ padding:var(--space-4) var(--space-6) }
  .consent{ bottom:10px; max-width:94vw; padding:var(--space-4) }
  .consent form{ flex:1 } .consent .btn{ width:100% }
}
@media (max-width:640px){
  .grid--4{ grid-template-columns:repeat(2,1fr) }   /* stats 2×2, no en columna infinita */
  .bleed .btn--lg{ flex:1 1 100%; }                  /* CTAs a ancho completo */
  .btn{ padding:0 20px }
  .container{ width:min(100% - 2rem, var(--container)) }
  .adminbar{ padding:10px 14px; gap:var(--space-3) }
  .adminbar__nav a{ padding:7px 9px; font-size:var(--fs-xs) }
}

/* ---- CMS v3: picker, tarjetas de sección y biblioteca ---- */
.picker summary{ display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none;
  padding:10px 14px; border:1px solid var(--hairline-2); border-radius:var(--radius); background:var(--panel) }
.picker summary::-webkit-details-marker{ display:none }
.picker summary img{ width:64px; height:44px; object-fit:cover; border-radius:8px; border:1px solid var(--hairline) }
.picker summary span{ display:grid } .picker summary b{ font-size:var(--fs-xs); font-weight:600 }
.picker summary small{ font-size:.68rem; color:var(--mist) }
.picker summary em{ margin-left:auto; font-style:normal; font-size:var(--fs-xs); color:var(--ink-2);
  border-bottom:1px solid var(--hairline-2) }
.picker__none{ color:var(--mist); font-size:var(--fs-xs) }
.picker__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px;
  padding:14px; border:1px solid var(--hairline); border-top:none; border-radius:0 0 var(--radius) var(--radius);
  max-height:340px; overflow:auto; background:var(--paper-2) }
.picker__cell{ position:relative; display:grid; gap:6px; cursor:pointer }
.picker__cell input{ position:absolute; opacity:0 }
.picker__cell img,.picker__blank{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px;
  border:2px solid transparent; background:var(--panel); display:grid; place-items:center;
  color:var(--mist); font-size:.7rem }
.picker__cell input:checked + img,.picker__cell input:checked + .picker__blank{ border-color:var(--ink) }
.picker__cell small{ font-size:.66rem; color:var(--ink-2); line-height:1.25; max-height:2.5em; overflow:hidden }
.hintline{ display:block; margin-top:6px; font-size:.7rem; color:var(--acc-blue) }

.seccard{ display:flex; align-items:center; gap:var(--space-4); padding:var(--space-3) var(--space-4) }
.seccard--off{ opacity:.55 }
.seccard__pos{ width:34px; height:34px; border:1px solid var(--hairline-2); border-radius:50%;
  display:grid; place-items:center; font-size:.8rem; color:var(--mist); flex:none }
.seccard__thumb{ width:92px; height:58px; border-radius:10px; overflow:hidden; background:var(--paper-2);
  border:1px solid var(--hairline); display:grid; place-items:center; color:var(--mist); flex:none }
.seccard__thumb img{ width:100%; height:100%; object-fit:cover }
.seccard__body{ display:grid; gap:4px; flex:1; min-width:0 }
.seccard__body strong{ font-size:var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.seccard__body small{ color:var(--mist); font-size:.7rem }
.seccard__actions{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end }
@media (max-width:760px){ .seccard{ flex-wrap:wrap } .seccard__actions{ width:100% } }

.mediagrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--space-4) }
.mediacard{ background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius-lg);
  padding:var(--space-3); display:grid; gap:10px }
.mediacard__thumb{ position:relative; aspect-ratio:16/10; border-radius:10px; overflow:hidden;
  background:var(--paper-2); border:1px solid var(--hairline) }
.mediacard__thumb img,.mediacard__thumb video{ width:100%; height:100%; object-fit:cover }
.mediacard__kind{ position:absolute; top:8px; left:8px; background:rgba(255,255,255,.92) }

/* ---- CRM v4: kpis, gráfica, funnel, timeline ---- */
.kpi{ background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-6); display:grid; gap:6px; align-content:start }
.kpi small{ font-size:.68rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--mist) }
.kpi b{ font-size:clamp(1.5rem,2.4vw,2rem); font-weight:500; letter-spacing:-.02em }
.trend{ font-size:.74rem; color:var(--mist) } .trend em{ font-style:normal; color:var(--mist) }
.trend--up{ color:var(--acc-green) } .trend--down{ color:var(--acc-red) }

.chart{ display:flex; align-items:flex-end; gap:6px; height:150px }
.chart__col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100% ; justify-content:flex-end }
.chart__col i{ width:100%; max-width:34px; border-radius:6px 6px 2px 2px; min-height:3px;
  background:linear-gradient(180deg, var(--acc-violet), #8F7BE0) }
.chart__col small{ font-size:.62rem; color:var(--mist) }

.frow{ display:grid; grid-template-columns:110px 1fr 44px; gap:10px; align-items:center; font-size:var(--fs-xs) }
.frow__bar{ height:10px; border-radius:999px; background:var(--paper-2); border:1px solid var(--hairline); overflow:hidden }
.frow__bar i{ display:block; height:100% ; border-radius:999px }
.frow__fill--blue{ background:var(--acc-blue) } .frow__fill--orange{ background:var(--acc-orange) }
.frow__fill--violet{ background:var(--acc-violet) }

.alertline{ font-size:var(--fs-xs); padding:8px 12px; border-radius:10px }
.alertline--orange{ background:#FCEFE0; color:#8F5417 }
.alertline--red{ background:#FBE9E7; color:#A03A30 }

.timeline{ display:grid; gap:14px; border-left:1px solid var(--hairline-2); padding-left:18px }
.timeline__item{ position:relative; display:grid; gap:2px; font-size:var(--fs-sm) }
.timeline__item small{ color:var(--mist); font-size:.7rem }
.dot{ position:absolute; left:-23px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--mist) }
.dot--violet{ background:var(--acc-violet) } .dot--green{ background:var(--acc-green) }
.dot--blue{ background:var(--acc-blue) } .dot--orange{ background:var(--acc-orange) } .dot--ink{ background:var(--ink) }

.avatar{ width:42px; height:42px; border-radius:50%; background:var(--tint); color:var(--ink);
  display:grid; place-items:center; font-weight:600; flex:none }
.avatar--ghost{ background:var(--paper-2); border:1px dashed var(--hairline-2); color:var(--mist) }
@media (max-width:900px){ .split[style*="grid-template-columns:1.4fr"],.split[style*="grid-template-columns:1.25fr"],.split[style*="grid-template-columns:1.3fr"]{ grid-template-columns:1fr } }

/* ---- Tabla de rendimiento por producto ---- */
.ptable{ display:grid; gap:2px }
.ptable__head,.ptable__row{ display:grid; grid-template-columns:2.2fr 1.5fr .6fr .8fr 1.1fr .7fr;
  gap:12px; align-items:center; padding:10px 12px; border-radius:10px }
.ptable__head{ font-size:.66rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--mist) }
.ptable__row{ background:var(--paper-2); border:1px solid var(--hairline); font-size:var(--fs-sm) }
.ptable__row:hover{ border-color:var(--hairline-2); background:var(--panel) }
.ptable__name{ display:flex; align-items:center; gap:10px; min-width:0 }
.ptable__name img,.ptable__ph{ width:38px; height:38px; border-radius:8px; object-fit:cover;
  background:var(--tint); border:1px solid var(--hairline); flex:none }
.ptable__name b{ font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ptable__rev{ display:grid; gap:4px }
.ptable__rev i{ display:block; height:5px; border-radius:999px; background:var(--acc-violet); min-width:2px }
@media (max-width:900px){ .ptable__head{ display:none }
  .ptable__row{ grid-template-columns:1fr 1fr; gap:6px } }

/* ================= TIENDA · pase estético ================= */
.shophead{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-12); align-items:end;
  border-bottom:1px solid var(--hairline); padding-bottom:var(--space-8) }
@media (max-width:860px){ .shophead{ grid-template-columns:1fr; gap:var(--space-5) } }

.filterbar{ display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center }
.filterbar__search{ display:flex; align-items:center; gap:8px; padding:0 14px; min-height:46px;
  border:1px solid var(--hairline-2); border-radius:var(--radius); background:var(--panel);
  color:var(--mist); flex:1; max-width:300px }
.filterbar__search input{ border:0; background:none; outline:none; font:inherit; font-size:var(--fs-sm);
  color:var(--ink); width:100% }
.filterbar select{ min-height:46px; padding:0 34px 0 14px; border:1px solid var(--hairline-2);
  border-radius:var(--radius); background:var(--panel); font:inherit; font-size:var(--fs-sm);
  color:var(--ink-2); appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--mist) 50%), linear-gradient(135deg, var(--mist) 50%, transparent 50%);
  background-position:calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size:5px 5px; background-repeat:no-repeat }
.filterbar select:hover,.filterbar__search:focus-within{ border-color:var(--ink) }
.filterbar__clear{ font-size:var(--fs-xs); color:var(--mist); border-bottom:1px solid var(--hairline-2); margin-left:4px }

.pcard{ display:grid; gap:var(--space-5); grid-template-rows:auto 1fr }
.pcard__media{ position:relative; display:grid; place-items:center; aspect-ratio:1/1;
  background:linear-gradient(170deg, var(--paper-2) 0%, #EFECE4 100%);
  border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden;
  transition:border-color .25s ease, transform .35s cubic-bezier(.2,.7,.3,1) }
.pcard__media img{ width:86%; height:auto; object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(29,27,23,.14)); transition:transform .45s cubic-bezier(.2,.7,.3,1) }
.pcard:hover .pcard__media{ border-color:var(--hairline-2) }
.pcard:hover .pcard__media img{ transform:translateY(-6px) scale(1.02) }
.pcard__badge{ position:absolute; top:14px; left:14px; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.9); border:1px solid var(--hairline);
  font-size:.64rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2) }
.pcard__body{ display:grid; gap:10px; align-content:start }
.pcard__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.pcard__name{ font-family:var(--font-display); font-weight:400; font-size:1.35rem; letter-spacing:-.022em }
.pcard__price{ font-size:1.05rem; font-weight:500; white-space:nowrap }
.pcard__sub{ color:var(--mist); font-size:var(--fs-sm); line-height:1.5 }
.pcard__meta{ display:flex; gap:14px; flex-wrap:wrap; padding-top:4px; border-top:1px solid var(--hairline);
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--taupe) }
.pcard__cta{ display:inline-flex; align-items:center; gap:8px; margin-top:2px; font-size:var(--fs-sm);
  font-weight:500; color:var(--ink); width:fit-content; padding-bottom:3px;
  border-bottom:1px solid var(--hairline-2); transition:border-color .2s ease, gap .2s ease }
.pcard__cta i{ font-style:normal; transition:transform .25s ease }
.pcard__cta:hover{ border-color:var(--ink) } .pcard__cta:hover i{ transform:translateX(3px) }
@media (max-width:640px){ .pcard__media img{ width:78% } }

/* ================= PASE ESTÉTICO GLOBAL ================= */
/* Números: tabulares y con tracking propio (precio, métricas) */
.data,.price,.stat__num,.kpi b{ font-feature-settings:'tnum' 1,'ss01' 1; letter-spacing:-.02em }

/* Botones: microinteracción sobria */
.btn{ transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease }
.btn:active{ transform:translateY(1px) }
.btn--primary{ box-shadow:0 1px 2px rgba(29,27,23,.14) }
.btn--primary:hover{ box-shadow:0 6px 18px rgba(29,27,23,.18) }
.btn::after{ transition:transform .22s ease }
.btn:hover::after{ transform:translateX(3px) }

/* Tarjetas: elevación contenida */
.card--hover:hover{ transform:translateY(-3px) }

/* Ritmo vertical: secciones con más respiración en escritorio */
@media (min-width:1100px){
  .section{ padding-block:8rem } .section--tight{ padding-block:5rem }
}
/* Enlaces de texto: subrayado fino que se activa */
.link{ transition:border-color .2s ease }

/* Cabeceras de sección centradas: limitar ancho para no romper la línea */
.center .display,.center .h1,.center .h2{ max-width:20ch; margin-inline:auto }
.center .lead{ margin-inline:auto }

/* Marca en el nav: sup de registro más discreto */
.nav__logo sup{ opacity:.55 }

/* Imágenes de producto en PDP: mismo tratamiento que la tarjeta */
.pdp-media{ background:linear-gradient(170deg, var(--paper-2) 0%, #EFECE4 100%);
  border:1px solid var(--hairline); border-radius:var(--radius-lg); display:grid; place-items:center; overflow:hidden }
.pdp-media img{ width:84%; filter:drop-shadow(0 30px 40px rgba(29,27,23,.15)) }

/* Hero: la columna de texto manda la medida */
.hero-ed .lead{ max-width:46ch }
/* PDP: jerarquía de la ficha */
.pdp-title{ font-family:var(--font-display); font-weight:300; letter-spacing:-.03em;
  font-size:clamp(2rem,3.4vw,2.8rem); line-height:1.06 }

/* ================= Especificaciones (dl editorial) ================= */
.specs{ display:grid; border-top:1px solid var(--hairline) }
.specs__row{ display:grid; grid-template-columns:minmax(140px, 32%) 1fr; gap:var(--space-6);
  padding:16px 0; border-bottom:1px solid var(--hairline); align-items:baseline }
.specs__k{ font-size:.7rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--mist) }
.specs__v{ font-size:var(--fs-md); color:var(--ink); letter-spacing:-.008em }
@media (max-width:640px){ .specs__row{ grid-template-columns:1fr; gap:4px; padding:14px 0 } }

/* ================= Acordeón (FAQ) ================= */
.accordion{ display:grid; border-top:1px solid var(--hairline); max-width:760px }
.accordion__item{ border-bottom:1px solid var(--hairline) }
.accordion__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-6);
  padding:20px 2px; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:400; font-size:1.12rem; letter-spacing:-.018em;
  color:var(--ink); transition:color .18s ease }
.accordion__head::-webkit-details-marker{ display:none }
.accordion__head::after{ content:""; width:13px; height:13px; flex:none;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) center/13px 1px no-repeat,
    linear-gradient(var(--ink-2), var(--ink-2)) center/1px 13px no-repeat;
  transition:transform .25s cubic-bezier(.2,.7,.3,1) }
.accordion__item[open] .accordion__head::after{ transform:rotate(45deg) }
.accordion__item[open] .accordion__head{ color:var(--ink) }
.accordion__head:hover{ color:var(--ink-2) }
.accordion__body{ padding:0 2px 22px; color:var(--ink-2); font-size:var(--fs-sm); line-height:1.7; max-width:62ch }

/* Buscador grande */
.searchbig{ display:flex; align-items:center; gap:12px; padding:0 18px; min-height:62px;
  background:var(--panel); border:1px solid var(--hairline-2); border-radius:var(--radius-lg); color:var(--mist) }
.searchbig:focus-within{ border-color:var(--ink) }
.searchbig input{ flex:1; border:0; background:none; outline:none; font:inherit; font-size:1.1rem; color:var(--ink) }
.searchbig .btn{ min-height:44px }
@media (max-width:640px){ .searchbig{ flex-wrap:wrap; padding:12px } .searchbig input{ min-width:60% } }

/* Reseñas */
.review{ display:grid; gap:8px; padding:var(--space-5) 0; border-bottom:1px solid var(--hairline) }
.review__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.review__stars{ letter-spacing:2px; color:var(--ink) }
.review__reply{ margin-top:10px; padding:12px 14px; background:var(--paper-2); border-left:2px solid var(--hairline-2);
  border-radius:0 10px 10px 0; font-size:var(--fs-sm); color:var(--ink-2) }

/* Estrellas de entrada (radio invertido) */
.stars-input{ display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px }
.stars-input input{ position:absolute; opacity:0; width:0 }
.stars-input label{ font-size:1.6rem; line-height:1; color:var(--hairline-2); cursor:pointer;
  transition:color .15s ease; text-transform:none; letter-spacing:0 }
.stars-input label:hover, .stars-input label:hover ~ label,
.stars-input input:checked ~ label{ color:var(--ink) }
.stars-input input:focus-visible + label{ outline:2px solid var(--ink); outline-offset:2px }

/* ================= ÁREA DE CLIENTE ================= */
.acct{ padding-top:132px; display:grid; grid-template-columns:200px 1fr;
  gap:var(--space-12); align-items:start }
.acct__body{ display:grid; gap:var(--space-6); min-width:0 }

.acct__nav{ display:grid; gap:2px; align-content:start;
  position:sticky; top:112px }
.acct__link{ display:flex; align-items:center; min-height:44px; padding:0 14px;
  border-radius:10px; font-size:var(--fs-sm); color:var(--ink-2);
  border:1px solid transparent; transition:background .18s ease, color .18s ease, border-color .18s ease }
.acct__link:hover{ background:var(--paper-2); color:var(--ink) }
.acct__link.is-active{ background:var(--panel); border-color:var(--hairline); color:var(--ink); font-weight:500 }
.acct__link--out{ margin-top:var(--space-3); color:var(--mist);
  border-top:1px solid var(--hairline); border-radius:0; padding-top:var(--space-2) }

/* Móvil: la lateral pasa a barra horizontal deslizable, y todo a una columna */
@media (max-width:860px){
  .acct{ grid-template-columns:1fr; gap:var(--space-6); padding-top:104px }
  .acct__nav{ position:static; display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
    scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .acct__nav::-webkit-scrollbar{ display:none }
  .acct__link{ flex:none; min-height:42px; padding:0 16px; border:1px solid var(--hairline);
    background:var(--panel); border-radius:999px; white-space:nowrap }
  .acct__link.is-active{ background:var(--ink); color:var(--paper-2); border-color:var(--ink) }
  .acct__link--out{ margin-top:0; border-top:1px solid var(--hairline); border-radius:999px; padding-top:0 }
}

/* Formularios de la cuenta: una columna en móvil y controles cómodos */
@media (max-width:640px){
  .acct [style*="grid-template-columns"]{ grid-template-columns:1fr !important }
  .acct .grid, .acct .grid--2, .acct .grid--3, .acct .grid--4{ grid-template-columns:1fr !important }
  .acct .input, .acct .select, .acct .textarea{ min-height:48px; font-size:16px } /* 16px evita el zoom de iOS */
  .acct .btn{ min-height:48px; width:100%; justify-content:center }
  .acct .chip{ min-height:38px; display:inline-flex; align-items:center }
}

/* Casillas: área táctil real */
.acct input[type=checkbox]{ width:24px; height:24px; accent-color:var(--ink); flex:none; cursor:pointer }
/* el área táctil real es la etiqueta entera: 44px de alto y clicable */
.acct label:has(input[type=checkbox]){ display:flex; align-items:center; gap:12px;
  min-height:48px; padding:4px 0; cursor:pointer; font-size:var(--fs-sm); line-height:1.5 }

/* Tarjetas de pedido/garantía: no desbordan y respiran */
.acct .card{ min-width:0 }
.acct .data{ word-break:break-word }

/* Retículas de formulario que colapsan solas (sin media query) */
.formgrid{ display:grid; gap:var(--space-3) }
.formgrid--2{ grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)) }
.formgrid--3{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) }

/* Descargas del artículo */
.dl{ display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4);
  background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius);
  transition:border-color .18s ease, transform .18s ease }
.dl:hover{ border-color:var(--ink); transform:translateY(-1px) }
.dl__icon{ width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:10px; background:var(--tint); color:var(--ink-2) }
.dl__body{ display:grid; gap:2px; min-width:0; flex:1 }
.dl__body strong{ font-weight:500 }
.dl__body small{ color:var(--mist); font-size:var(--fs-xs) }
.dl__meta{ font-size:var(--fs-xs); color:var(--mist); white-space:nowrap }
@media (max-width:560px){ .dl{ flex-wrap:wrap } .dl__meta{ width:100% } }

/* Formulario de newsletter y consentimiento */
.nlform{ display:grid; gap:var(--space-4); justify-items:center; text-align:center; max-width:640px; margin-inline:auto }
.nlform__sub{ color:var(--ink-2); font-size:var(--fs-sm); max-width:46ch }
.nlform__row{ display:flex; gap:var(--space-3); flex-wrap:wrap; justify-content:center; width:100% }
.nlform__row .input{ max-width:300px; background:#fff; min-height:48px }
.nlform__row .btn{ min-height:48px }
.nlform__consent{ display:flex; gap:12px; align-items:flex-start; text-align:left; max-width:52ch;
  font-size:var(--fs-sm); color:var(--ink-2); line-height:1.5; cursor:pointer; min-height:44px; padding:4px 0 }
.nlform__consent input[type=checkbox]{ width:22px; height:22px; flex:none; margin-top:1px; accent-color:var(--ink); cursor:pointer }
.nlform__err{ font-size:var(--fs-sm); color:#B4453A }
.privacy-note{ display:block; max-width:56ch; text-align:left; font-size:.75rem; line-height:1.6; color:var(--mist) }
.privacy-note b{ font-weight:500; color:var(--ink-2) }
@media (max-width:560px){ .nlform__row{ flex-direction:column } .nlform__row .input, .nlform__row .btn{ max-width:none; width:100% } }

/* Barra de acciones de recurso */
.resbar{ display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  padding-top:var(--space-3); border-top:1px solid var(--hairline) }
.resbar form{ display:inline-flex }
.cbx{ display:flex; align-items:center; gap:10px; min-height:44px; font-size:var(--fs-sm); cursor:pointer }
.cbx input[type=checkbox]{ width:22px; height:22px; accent-color:var(--ink); flex:none; cursor:pointer }

/* =========================================================
   ADMIN · armazón con menú lateral en cascada
   ========================================================= */
.adm-drawer, .adm-scrim{ display:none }
.ico{ width:19px; height:19px; flex:none }

.adm-side{
  position:fixed; inset:0 auto 0 0; width:248px; z-index:40;
  display:flex; flex-direction:column; gap:var(--space-2);
  padding:22px 14px; background:var(--panel); border-right:1px solid var(--hairline);
  overflow-y:auto; scrollbar-width:thin }
.adm-top{ display:none }

.adm-brand{ display:flex; align-items:baseline; gap:8px; padding:4px 10px 18px }
.adm-brand b{ font-family:var(--font-display); font-size:1.12rem; font-weight:600; letter-spacing:-.03em }
.adm-brand small{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mist) }

.adm-nav{ display:grid; gap:2px; flex:1 }
.adm-item{ display:flex; align-items:center; gap:11px; min-height:42px; padding:0 11px;
  border-radius:9px; font-size:var(--fs-sm); color:var(--ink-2); cursor:pointer;
  transition:background .16s ease, color .16s ease; list-style:none; user-select:none }
.adm-item::-webkit-details-marker{ display:none }
.adm-item .ico{ color:var(--taupe); transition:color .16s ease }
.adm-item:hover{ background:var(--paper-2); color:var(--ink) }
.adm-item:hover .ico{ color:var(--ink-2) }
.adm-item.is-active{ background:var(--ink); color:var(--paper-2); font-weight:500 }
.adm-item.is-active .ico{ color:var(--paper-2) }
.adm-item--parent{ justify-content:flex-start }
.adm-item--parent.is-open{ color:var(--ink); font-weight:500 }
.adm-item--parent.is-open .ico{ color:var(--ink) }
.adm-caret{ width:14px; height:14px; margin-left:auto; color:var(--taupe);
  transition:transform .2s cubic-bezier(.2,.7,.3,1) }
.adm-group[open] > .adm-item--parent .adm-caret{ transform:rotate(90deg) }

.adm-sub{ display:grid; gap:1px; margin:2px 0 6px 20px; padding-left:12px;
  border-left:1px solid var(--hairline) }
.adm-subitem{ display:flex; align-items:center; min-height:36px; padding:0 10px; border-radius:8px;
  font-size:.85rem; color:var(--mist); transition:background .16s ease, color .16s ease }
.adm-subitem:hover{ background:var(--paper-2); color:var(--ink) }
.adm-subitem.is-active{ background:var(--tint); color:var(--ink); font-weight:500 }

.adm-foot{ display:grid; gap:2px; padding-top:var(--space-3); border-top:1px solid var(--hairline) }
.adm-item--ghost{ color:var(--mist); font-size:var(--fs-xs) }

/* El contenido se desplaza a la derecha de la lateral */
.adm-side ~ main{ margin-left:248px; padding-left:var(--space-8); padding-right:var(--space-8);
  max-width:1180px }
.adminmain{ display:grid; gap:var(--space-5); padding:var(--space-10) var(--space-8);
  margin-left:248px; max-width:1180px }

/* Cabecera de página del admin */
.pagehead{ display:flex; align-items:flex-start; gap:var(--space-4); flex-wrap:wrap;
  padding-bottom:var(--space-5); border-bottom:1px solid var(--hairline) }
.pagehead__sub{ color:var(--mist); font-size:var(--fs-sm); max-width:60ch; margin-top:6px; line-height:1.6 }

/* ---- Móvil / tableta: cajón deslizante ---- */
@media (max-width:1000px){
  .adm-top{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
    padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--hairline) }
  .adm-burger{ display:grid; gap:4px; padding:8px; cursor:pointer; border-radius:8px }
  .adm-burger span{ display:block; width:20px; height:1.6px; background:var(--ink); border-radius:2px }
  .adm-burger:hover{ background:var(--paper-2) }
  .adm-brand--side{ display:none }
  .adm-side{ transform:translateX(-100%); transition:transform .28s cubic-bezier(.2,.7,.3,1);
    box-shadow:0 0 40px rgba(29,27,23,.18); width:270px }
  .adm-drawer:checked ~ .adm-side{ transform:none }
  .adm-scrim{ display:block; position:fixed; inset:0; z-index:35; background:rgba(29,27,23,.34);
    opacity:0; pointer-events:none; transition:opacity .24s ease }
  .adm-drawer:checked ~ .adm-scrim{ opacity:1; pointer-events:auto }
  .adm-side ~ main, .adminmain{ margin-left:0; padding-left:var(--gutter); padding-right:var(--gutter) }
}