/* ============================================================
   Marcam — site.css
   CSS del diseño nuevo, para TODO el sitio.
   Regla: "se mueve la estructura, no el diseño". Cada elemento
   lleva su clase del demo y esto lo pinta (en Elementor: Avanzado
   → Clases CSS).

   La home ahora es una PÁGINA de Elementor (no hay wrapper
   .marcam-home). Por eso los estilos van por CLASE propia (únicas,
   seguras a nivel global) y los pocos selectores de elemento se
   acotan a los contenedores de cada bloque (.search, .rubros,
   .pedido, .editorial, .novedad, .accesos, .slider, header, footer)
   para NO afectar tienda/ficha/carrito.
   ============================================================ */

:root{
  --bg-0:#2A0E17; --bg-1:#F4EDE3; --bg-2:#FBF6EF; --bg-3:#FFFFFF;
  --tx-1:#38222A; --tx-2:#6B4C54; --tx-3:#9A7F86;
  --accent:#6E2333; --accent-2:#8E3A48; --accent-3:#C6A2AB;
  --header:#5d0d18;        /* bordó del header */
  --band:#E3D8CE;          /* banda para diferenciar (rubros) */
  --wsp:#1FA855;
  --line:rgba(110,35,51,.14); --line-2:rgba(110,35,51,.28);
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px;
  --sh-1:0 1px 2px rgba(42,14,23,.06), 0 6px 18px rgba(42,14,23,.06);
  --sh-2:0 18px 50px rgba(42,14,23,.16);
  --f-display:"Fraunces",Georgia,serif; --f-body:"Instrument Sans",system-ui,sans-serif;
  --max:1200px;
}

/* Reset acotado a nuestros bloques (no toca el resto del sitio) */
.slider *, .search *, .rubros *, .pedido *, .editorial *, .novedad *, .accesos *,
header.site *, .marcam-footer *{box-sizing:border-box}
.search :where(h1,h2,h3,h4,p,ul,li,figure),
.rubros :where(h1,h2,h3,h4,p,ul,li,figure),
.pedido :where(h1,h2,h3,h4,p,ul,li,figure),
.editorial :where(h1,h2,h3,h4,p,ul,li,figure),
.novedad :where(h1,h2,h3,h4,p,ul,li,figure),
.accesos :where(h1,h2,h3,h4,p,ul,li,figure){margin:0}

/* Tipografía de encabezados en nuestros bloques (Fraunces) */
.search h2, .rubros h2, .pedido h2, .editorial h2, .novedad h2, .accesos h2,
.rubros h3, .accesos h3, .slide h2, .scale .n{font-family:var(--f-display);font-weight:600;line-height:1.08;letter-spacing:-.01em}

/* Links e imágenes dentro de los bloques */
.search a, .rubros a, .pedido a, .editorial a, .novedad a, .accesos a{text-decoration:none;color:inherit}
.search img, .rubros img, .pedido img, .editorial img, .novedad img, .accesos img{max-width:100%;display:block}

/* Contenedor común (clase propia: seguro global) */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* Botones y eyebrow (clases propias) */
.eyebrow{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);font-weight:600}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-body);font-weight:600;font-size:.95rem;padding:.85em 1.5em;border-radius:999px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.btn-solid{background:var(--accent);color:#fff}
.btn-solid:hover{background:var(--accent-2);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line-2);color:var(--accent)}
.btn-ghost:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-wsp{background:var(--wsp);color:#fff}
.btn-wsp:hover{filter:brightness(1.06);transform:translateY(-2px)}

/* ============================================================
   TOP BAR + HEADER (chrome del sitio — Elementor Theme Builder)
   ============================================================ */
.topbar{background:var(--bg-0);color:#F4EDE3}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:2.2rem;min-height:38px;font-size:.8rem;letter-spacing:.03em;flex-wrap:wrap}
.topbar span{display:inline-flex;align-items:center;gap:.5em;color:#E7D6CF}
.topbar svg{width:15px;height:15px;stroke:var(--accent-3)}

header.site{position:sticky;top:0;z-index:60;background:var(--header);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.16)}
header.site .wrap{display:flex;align-items:center;gap:1.5rem;min-height:76px}
header.site .logo{display:inline-flex;align-items:center;line-height:1}
header.site .logo img{height:42px;width:auto;display:block}
header.site nav.main{margin-left:auto;display:flex;gap:1.6rem;align-items:center}
header.site nav.main a{font-weight:500;font-size:.95rem;color:#fff;position:relative;padding:.3em 0;text-decoration:none}
header.site nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:#fff;transition:width .2s ease}
header.site nav.main a:hover::after{width:100%}
header.site .head-tools{display:flex;align-items:center;gap:1rem;padding-left:.9rem;border-left:1px solid rgba(255,255,255,.25)}
header.site .icon-btn{display:inline-flex;align-items:center;gap:.4em;color:#fff;font-weight:600;font-size:.9rem}
header.site .icon-btn svg{width:20px;height:20px;stroke:#fff;fill:none}
header.site .cart-count{background:#fff;color:var(--header);font-size:.7rem;min-width:18px;height:18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;font-weight:700}
header.site .burger{display:none;background:none;border:0;cursor:pointer}
header.site .burger svg{width:26px;height:26px;stroke:#fff}

/* ============================================================
   SLIDER (shortcode [marcam_slider]) — 3 formatos
   ============================================================ */
.slider{position:relative;overflow:hidden;background:var(--bg-0)}
.slides{position:relative;height:clamp(360px,52vh,470px)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;display:flex;align-items:center}
.slide.active{opacity:1}
.slide::before{content:"";position:absolute;inset:0;background-image:var(--img);background-size:cover;background-position:var(--imgpos,center);transform:scale(1.04)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(17,14,15,.82) 0%,rgba(17,14,15,.55) 45%,rgba(17,14,15,.12) 100%)}
.slide .inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 24px;width:100%;color:#F7EEE7}
.slide .eyebrow{color:var(--accent-3)}
.slide h2{font-size:clamp(1.9rem,4.6vw,3.2rem);color:#fff;margin:.5rem 0 .7rem;max-width:15ch}
.slide h2 em{font-style:italic;color:var(--accent-3)}
.slide p{max-width:44ch;color:#EAD9D2;font-size:1.03rem;margin-bottom:1.5rem}
.slide .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.slide .btn-ghost:hover{background:#fff;color:var(--accent);border-color:#fff}
.slide.fmt-centrado{text-align:center}
.slide.fmt-centrado::after{background:linear-gradient(rgba(17,14,15,.55),rgba(17,14,15,.62))}
.slide.fmt-centrado .inner{max-width:840px}
.slide.fmt-centrado h2,.slide.fmt-centrado p{margin-left:auto;margin-right:auto}
.slide.fmt-split::before{left:auto;right:0;width:56%}
.slide.fmt-split::after{background:linear-gradient(90deg,var(--header) 0%,var(--header) 42%,rgba(93,13,24,.86) 50%,rgba(93,13,24,0) 66%)}
@media(max-width:720px){
  .slide.fmt-split::before{width:100%}
  .slide.fmt-split::after{background:linear-gradient(rgba(93,13,24,.9),rgba(93,13,24,.7))}
}
.sl-dots{position:absolute;z-index:3;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:9px}
.sl-dots button{width:9px;height:9px;border-radius:999px;border:0;background:rgba(255,255,255,.4);cursor:pointer;transition:width .25s,background .25s;padding:0}
.sl-dots button.active{width:26px;background:var(--accent-3)}
.sl-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(42,14,23,.25);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.sl-arrow:hover{background:var(--accent)}
.sl-arrow.prev{left:18px}.sl-arrow.next{right:18px}
.sl-arrow svg{width:20px;height:20px;stroke:currentColor;fill:none}

/* ============================================================
   Encabezado de sección
   ============================================================ */
.sec-head{max-width:60ch}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:.4rem 0 .6rem}
.sec-head p{color:var(--tx-2);font-size:1.05rem}

/* Buscador */
.search{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(40px,5vw,60px) 0}
.search .sec-head{text-align:center;margin:0 auto 1.6rem}
.search-box{display:flex;gap:.6rem;max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:.55rem;box-shadow:var(--sh-1);flex-wrap:wrap}
.search-box select{border:0;background:transparent;font-family:var(--f-body);font-size:.95rem;color:var(--tx-2);padding:.6em 1em;border-right:1px solid var(--line);outline:none;cursor:pointer;max-width:210px}
.search-box input{border:0;flex:1;min-width:160px;font-family:var(--f-body);font-size:1rem;padding:.6em .4em;outline:none;color:var(--tx-1);background:transparent}
.search-box .btn-solid{padding:.75em 1.6em}
.search-hint{text-align:center;color:var(--tx-3);font-size:.85rem;margin-top:1rem}

/* Rubros */
.rubros{background:var(--band);padding:clamp(56px,7vw,92px) 0}
.rubros-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:2.4rem}
.rubro{display:flex;flex-direction:column;border-radius:var(--r-md);overflow:hidden;background:#fff;box-shadow:var(--sh-1);border:1px solid rgba(110,35,51,.08);transition:transform .2s ease,box-shadow .2s ease}
.rubro:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.rubro-img{aspect-ratio:16/11;overflow:hidden;background:#241016}
.rubro-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.rubro:hover .rubro-img img{transform:scale(1.06)}
.rubro-box{padding:18px 20px 16px;display:flex;flex-direction:column;flex:1}
.rubro-box h3{font-size:1.3rem;color:var(--tx-1);line-height:1.12;margin-bottom:14px}
.rubro-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.rubro-foot span{font-size:.82rem;color:var(--tx-3);font-weight:500}
.rubro-arrow{flex:none;width:38px;height:38px;border-radius:999px;border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.rubro-arrow svg{width:16px;height:16px;stroke:var(--accent);fill:none;transition:stroke .2s,transform .2s}
.rubro:hover .rubro-arrow{background:var(--accent);border-color:var(--accent)}
.rubro:hover .rubro-arrow svg{stroke:#fff;transform:translate(1px,-1px)}
.rubros-more{text-align:center;margin-top:2.4rem}

/* Pedido WhatsApp */
.pedido{background:var(--bg-2);padding:clamp(56px,7vw,92px) 0}
.pedido .grid{display:grid;grid-template-columns:1.05fr 1.3fr;gap:clamp(32px,5vw,64px);align-items:center}
.steps{display:grid;gap:14px;margin-top:1.6rem}
.step{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px}
.step .num{flex:none;width:40px;height:40px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--f-display);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.step h4{font-family:var(--f-body);font-size:1.02rem;margin-bottom:2px}
.step p{color:var(--tx-2);font-size:.92rem}
.pedido-cta{margin-top:1.8rem;display:flex;gap:.8rem;flex-wrap:wrap}
.pedido-visual{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:5/4;background:#000}
.pedido-visual img{width:100%;height:100%;object-fit:cover}
.pedido-chip{position:absolute;left:20px;bottom:20px;z-index:2;background:rgba(255,255,255,.96);border-radius:var(--r-md);padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh-1)}
.pedido-chip .wa{width:38px;height:38px;border-radius:10px;background:var(--wsp);display:flex;align-items:center;justify-content:center}
.pedido-chip .wa svg{width:22px;height:22px;fill:#fff}
.pedido-chip small{display:block;color:var(--tx-3);font-size:.72rem}
.pedido-chip strong{font-size:.95rem;color:var(--tx-1)}

/* Editorial depósitos (firma) */
.editorial{background:var(--bg-0);color:#F4EDE3;padding:clamp(56px,7vw,92px) 0}
.editorial .grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,5vw,70px);align-items:center}
.editorial .eyebrow{color:var(--accent-3)}
.editorial h2{font-size:clamp(1.9rem,4vw,2.9rem);color:#fff;margin:.5rem 0 1rem}
.editorial h2 em{font-style:italic;color:var(--accent-3)}
.editorial p{color:#E4D2CB;max-width:52ch;margin-bottom:1rem}
.scale{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:2rem;border-top:1px solid rgba(198,162,171,.28);padding-top:1.8rem}
.scale .n{font-weight:600;font-size:clamp(1.7rem,3.2vw,2.5rem);color:#fff;line-height:1}
.scale .n em{font-style:normal;color:var(--accent-3);font-size:.7em}
.scale .l{font-size:.78rem;color:#CDB4AE;margin-top:6px;letter-spacing:.02em}
.editorial-media{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:100%}
.editorial-media img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-md)}
.editorial-media img:first-child{grid-row:1/3;height:100%}

/* Novedad */
.novedad{padding:clamp(56px,7vw,92px) 0}
.novedad .card{position:relative;border-radius:var(--r-xl);overflow:hidden;background:#000;min-height:420px;display:flex;align-items:flex-end}
.novedad .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.novedad .card::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(42,14,23,.9),rgba(42,14,23,.45) 60%,rgba(42,14,23,.15))}
.novedad .card .inner{position:relative;z-index:2;padding:clamp(30px,5vw,56px);max-width:640px;color:#fff}
.novedad .tag{display:inline-block;background:var(--accent-3);color:var(--bg-0);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:.4em .9em;border-radius:999px;margin-bottom:1rem}
.novedad h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:.7rem}
.novedad p{color:#EAD9D2;max-width:46ch;margin-bottom:1.5rem}

/* Accesos trío */
.accesos{background:var(--bg-2);border-top:1px solid var(--line);padding:clamp(56px,7vw,92px) 0}
.accesos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:2.4rem}
.acceso{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.acceso:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.acceso .ic{width:52px;height:52px;border-radius:14px;background:rgba(110,35,51,.08);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem}
.acceso .ic svg{width:26px;height:26px;stroke:var(--accent);fill:none}
.acceso h3{font-size:1.3rem;margin-bottom:.5rem}
.acceso p{color:var(--tx-2);font-size:.94rem;margin-bottom:1.1rem}
.acceso .lnk{color:var(--accent);font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:.4em}
.acceso .lnk svg{width:16px;height:16px;stroke:currentColor;transition:transform .2s}
.acceso:hover .lnk svg{transform:translateX(4px)}

/* ============================================================
   FOOTER (codificado en el theme)
   ============================================================ */
footer.marcam-footer{background:var(--bg-0);color:#E4D2CB;padding:64px 0 28px}
.marcam-footer .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.marcam-footer .logo img{height:44px;width:auto;display:block}
.marcam-footer .foot-brand p{margin-top:1rem;font-size:.9rem;max-width:34ch;color:#CDB4AE}
.marcam-footer .foot-campos{margin-top:1.2rem;font-size:.8rem;color:#B79aa1;border-top:1px solid rgba(198,162,171,.2);padding-top:1rem}
.marcam-footer h4{font-family:var(--f-body);font-weight:600;color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
.marcam-footer ul{list-style:none;display:grid;gap:.6rem;padding:0;margin:0}
.marcam-footer ul a{color:#D9C5BE;font-size:.92rem;text-decoration:none}
.marcam-footer ul a:hover{color:#fff}
.marcam-footer .foot-contact p{font-size:.92rem;margin-bottom:.5rem;color:#D9C5BE}
.marcam-footer .foot-contact strong{color:#fff;font-weight:600}
.marcam-footer .foot-social{display:flex;gap:.7rem;margin-top:1rem}
.marcam-footer .foot-social a{width:38px;height:38px;border-radius:999px;border:1px solid rgba(198,162,171,.3);display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.marcam-footer .foot-social a:hover{background:var(--accent);border-color:var(--accent)}
.marcam-footer .foot-social svg{width:18px;height:18px;fill:#E4D2CB}
.marcam-footer .foot-social a:hover svg{fill:#fff}
.marcam-footer .foot-bottom{margin-top:44px;border-top:1px solid rgba(198,162,171,.2);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:#B79aa1}

/* WhatsApp float (global) */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;width:56px;height:56px;border-radius:999px;background:var(--wsp);box-shadow:0 10px 30px rgba(31,168,85,.4);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:960px){
  .rubros-grid{grid-template-columns:repeat(2,1fr)}
  .pedido .grid,.editorial .grid{grid-template-columns:1fr}
  .editorial-media{height:340px;margin-top:1rem}
  .accesos-grid{grid-template-columns:1fr}
  .marcam-footer .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  header.site nav.main,header.site .head-tools .icon-btn span{display:none}
  header.site .burger{display:inline-flex}
  header.site .head-tools{border-left:0}
  .topbar .wrap{gap:1.2rem;font-size:.72rem}
  .scale{grid-template-columns:1fr 1fr;gap:18px}
  .marcam-footer .foot-grid{grid-template-columns:1fr}
  .sl-arrow{display:none}
}

/* ============================================================
   HARDENING para bloques reconstruidos con widgets NATIVOS de Elementor.
   Los containers de Elementor traen display:flex, gap y padding por
   defecto con la misma especificidad (0,1,0) que nuestras clases, así
   que competen por orden de carga. Duplicamos la clase (0,2,0) para
   ganar siempre, sin !important. Solo afecta si el bloque se arma nativo.
   ============================================================ */
.rubros.rubros,.pedido.pedido,.editorial.editorial,.novedad.novedad,.accesos.accesos{
  padding-top:clamp(56px,7vw,92px);padding-bottom:clamp(56px,7vw,92px)}
.wrap.wrap{max-width:var(--max);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}

/* pedido / editorial: la grilla de 2 columnas */
.pedido .grid.grid,.editorial .grid.grid{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
.pedido .grid.grid{grid-template-columns:1.05fr 1.3fr}
.editorial .grid.grid{grid-template-columns:1.15fr 1fr}

/* editorial: columna de texto y mosaico como containers nativos */
.editorial .scale.scale{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.editorial-media.editorial-media{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px}

/* pedido: pasos y visual */
.pedido .steps.steps{display:grid;gap:14px}
.pedido .step.step{display:flex;gap:16px;align-items:flex-start}
.pedido .pedido-cta.pedido-cta{display:flex;gap:.8rem;flex-wrap:wrap}

/* novedad: card + inner como containers nativos */
.novedad .card.card{display:flex;flex-direction:row;align-items:flex-end;gap:0;padding:0;min-height:420px}
.novedad .card .inner.inner{display:block;padding:clamp(30px,5vw,56px);max-width:640px}

/* accesos: grilla y tarjetas */
.accesos-grid.accesos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.acceso.acceso{display:block;padding:32px 28px}

/* Widgets nativos dentro de los bloques: sin márgenes/anchos raros */
.pedido .elementor-widget,.editorial .elementor-widget,.novedad .elementor-widget,.accesos .elementor-widget{width:auto}
.pedido .elementor-widget-text-editor,.editorial .elementor-widget-text-editor,.novedad .elementor-widget-text-editor,.accesos .elementor-widget-text-editor{color:inherit}

@media(max-width:960px){
  .pedido .grid.grid,.editorial .grid.grid{grid-template-columns:1fr}
  .accesos-grid.accesos-grid{grid-template-columns:1fr}
  .editorial-media.editorial-media{grid-template-rows:auto}
}