/* La Mercedes · lenguaje visual del inicio: "el corte".
   Una diagonal de velocidad (como la etiqueta de un lote de subasta o una franja de carreras)
   reemplaza las esquinas redondas: barra de catálogo en paralelogramo, tarjetas con una esquina
   cortada, botones con cortes en dos esquinas. Se aplica al inicio y a las fichas del catálogo completo. */

/* ---------- Barra de catálogo: mitad y mitad, de margen a margen ---------- */
.cat-rail{--dwell:12s;--cut:34px;position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;width:100%;min-height:96px;margin:6px 0 34px;background:#f2f4f2}
.rail-thumb{position:absolute;z-index:0;top:0;bottom:0;left:0;width:50%;background:#12add6;overflow:hidden;
  clip-path:polygon(0 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);
  transition:transform .65s cubic-bezier(.7,0,.25,1),clip-path .65s cubic-bezier(.7,0,.25,1)}
.cat-rail[data-side=entrega] .rail-thumb{transform:translateX(100%);clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%)}
.rail-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffffd9;transform:scaleX(0);transform-origin:left}
.cat-rail.run .rail-progress{animation:railfill var(--dwell) linear forwards}
.cat-rail.paused .rail-progress{animation-play-state:paused}
.cat-rail.calm .rail-progress{display:none}
@keyframes railfill{to{transform:scaleX(1)}}

.cat-rail button{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;border:0;background:transparent;padding:18px clamp(20px,3.2vw,44px);text-align:left;cursor:pointer;color:#59635d;transition:color .4s}
.cat-rail button[data-pick=entrega]{align-items:flex-end;text-align:right}
.cat-rail button b{font:400 clamp(13px,1.35vw,19px)/1.25 Michroma,sans-serif;letter-spacing:-.02em;color:inherit}
.cat-rail button small{font:400 12px Poppins,Arial,sans-serif;color:#7a807b;transition:color .4s}
.cat-rail button:hover{color:#1c1c1c}
.cat-rail button[aria-selected=true],.cat-rail button[aria-selected=true]:hover{color:#fff;transition-delay:.28s}
.cat-rail button[aria-selected=true] small{transition-delay:.28s}
.cat-rail button[aria-selected=true] small{color:#ffffffd1}
.cat-rail button:focus-visible{outline:2px solid #1c1c1c;outline-offset:-8px}
.cat-rail .sm{display:none}

/* ---------- Catálogo que se desliza debajo ---------- */
.cat-slider{overflow:hidden;margin:0 -12px;padding:0 12px;transition:height .55s cubic-bezier(.7,0,.25,1)}
.cat-track{display:flex;align-items:flex-start;width:200%;transition:transform .65s cubic-bezier(.7,0,.25,1)}
.cat-slider[data-side=entrega] .cat-track{transform:translateX(-50%)}
.cat-pane{width:50%;flex:none;margin:0;padding:6px 0 12px;transition:opacity .5s}
.cat-pane[inert]{opacity:0}
.cat-pane .preview-head h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Tarjetas con una esquina cortada (borde de 1px incluido) ---------- */
.cat-slider .catalog-item,.cat-slider .stock-card,.cat-slider .preview-empty,#vista-catalogo .catalog-item,#vista-catalogo .stock-card,.mistake-grid article,.contact-card{
  --edge:#e3e8e5;--fill:#fff;--cut:20px;position:relative;isolation:isolate;border:0!important;border-radius:0!important;background:var(--edge)!important;box-shadow:none!important;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);transition:transform .2s}
.cat-slider .catalog-item:before,.cat-slider .stock-card:before,.cat-slider .preview-empty:before,#vista-catalogo .catalog-item:before,#vista-catalogo .stock-card:before,.mistake-grid article:before,.contact-card:before{
  content:'';position:absolute;inset:1px;z-index:-1;background:var(--fill);
  clip-path:polygon(0 0,calc(100% - var(--cut) + .4px) 0,100% calc(var(--cut) - .4px),100% 100%,0 100%)}
:is(.cat-slider,#vista-catalogo) :is(.catalog-item,.stock-card):is(:hover,:focus-within){--edge:#12add6}
.cat-slider .preview-empty{--fill:#f4f7f5}
.contact-card{--fill:#f2f4f2;--edge:#e3e8e3}
.mistake-grid article{--edge:#d8e4e9;--cut:24px}

/* Dentro de las tarjetas del inicio: foto recta, etiquetas en paralelogramo */
:is(.cat-slider,#vista-catalogo) :is(.card-media,.stock-photo){border-radius:0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
:is(.cat-slider,#vista-catalogo) :is(.media-tag,.media-status){border-radius:0;padding:0 15px;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
:is(.cat-slider,#vista-catalogo) .save-btn{border-radius:0;box-shadow:none;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}
:is(.cat-slider,#vista-catalogo) .pill{border-radius:0;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px))}

/* ---------- Encabezado del catálogo: título a la izquierda, acción "por encargo" a la derecha ----------
   La acción usa la misma forma que la barra de abajo (pieza en diagonal + punta azul),
   alineada con la última línea del título y con el borde derecho de la barra. */
#opciones .section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:30px}
.encargo-cta{--s:22px;display:flex;align-items:stretch;height:66px;flex:none;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}
.encargo-cta .t{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 calc(var(--s) + 16px) 0 calc(var(--s) + 20px);background:#f2f4f2;
  clip-path:polygon(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);transition:background-color .25s}
.encargo-cta small{font:400 11px Poppins,Arial,sans-serif;color:#7a807b}
.encargo-cta b{font:400 14px/1.2 Michroma,sans-serif;letter-spacing:-.02em;color:#1c1c1c}
.encargo-cta .go{width:calc(58px + var(--s));margin-left:calc(6px - var(--s));display:grid;place-items:center;padding-left:var(--s);background:#12add6;color:#fff;font-style:normal;font-size:20px;
  clip-path:polygon(var(--s) 0,100% 0,100% 100%,0 100%);transition:background-color .25s}
.encargo-cta:hover .t{background:#e6eef1}
.encargo-cta:hover .go{background:#0997be}
.encargo-cta:focus-visible{outline:2px solid #12add6;outline-offset:4px}

/* ---------- Botones principales con dos esquinas cortadas ---------- */
.button.primary,.hdr-primary{border-radius:0;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.button.primary:focus-visible,.hdr-primary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #092d3b}

/* ---------- Detalles del mismo lenguaje ---------- */
.hero .eyebrow>span{width:16px;height:3px;border-radius:0;transform:skewX(-35deg)}
@media(min-width:741px){.hero-image{clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}}
.contact-ico{border-radius:0;width:64px;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}

/* ---------- Celular ---------- */
@media(max-width:740px){
  .cat-rail{--cut:20px;min-height:78px;margin-bottom:26px}
  .cat-rail button{padding:12px 16px;gap:5px}
  .cat-rail button b{font-size:12px}
  .cat-rail button small{font-size:11px}
  .cat-rail .lg{display:none}.cat-rail .sm{display:inline}
  .hdr-login{border-radius:0}
  .contact-ico{width:56px}
  #opciones .section-heading{flex-direction:column;align-items:stretch;gap:24px}
  .encargo-cta{--s:16px;height:60px}
  .encargo-cta .t{flex:1}
  .encargo-cta b{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.rail-thumb,.cat-track,.cat-slider,.cat-pane{transition:none}}

/* ---------- Menú que sigue al visitante ---------- */
/* Encabezado: barra azul que se desliza bajo la sección actual (reemplaza el puntito) */
@media(min-width:741px){.header nav{position:relative}}
.header nav .current:after{display:none}
.nav-bar{position:absolute;left:0;bottom:2px;width:0;height:2px;background:#12add6;opacity:0;pointer-events:none;
  clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%);transition:transform .45s cubic-bezier(.7,0,.25,1),width .45s cubic-bezier(.7,0,.25,1),opacity .3s}
@media(max-width:740px){.nav-bar{display:none}}

/* Encabezado que se encoge mientras bajas.
   nav-scroll.js pone --p entre 0 (arriba del todo) y 1 (ya compacto) según el desplazamiento;
   alto, logo, botones, fondo, sombra y línea azul se calculan a partir de ese valor. */
:root{--h0:108px;--h1:68px;--w0:250px;--w1:168px;--hdr-rgb:255,255,255}
html[data-theme=dark]{--hdr-rgb:19,22,25}
.header-spacer{height:var(--h0)}
.header{--p:0;position:fixed;top:0;left:0;right:0;z-index:60;isolation:isolate;
  height:calc(var(--h0) - (var(--h0) - var(--h1)) * var(--p));
  background:transparent!important;border-bottom-color:rgba(0,0,0,calc(.08 * (1 - var(--p))))}
.header:before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(var(--hdr-rgb),calc(1 - .12 * var(--p)));
  box-shadow:0 10px 30px rgba(0,0,0,calc(.08 * var(--p)));backdrop-filter:saturate(1.4) blur(calc(14px * var(--p)));-webkit-backdrop-filter:saturate(1.4) blur(calc(14px * var(--p)))}
.header:after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,#12add6,#12add600 70%);
  transform-origin:left;transform:scaleX(var(--p));pointer-events:none}
.header .brand{width:calc(var(--w0) - (var(--w0) - var(--w1)) * var(--p))}
.header .hdr-btn{height:calc(36px - 4px * var(--p))}
.header .theme-toggle{width:calc(36px - 4px * var(--p));height:calc(36px - 4px * var(--p));flex-basis:auto}
html[data-theme=dark] .header{border-bottom-color:rgba(255,255,255,calc(.08 * (1 - var(--p))))}
html[data-theme=dark] .header:before{box-shadow:0 10px 30px rgba(0,0,0,calc(.45 * var(--p)))}
@media(max-width:1100px){:root{--h0:90px;--h1:62px;--w0:220px;--w1:160px}}
@media(max-width:740px){:root{--h0:83px;--h1:60px;--w0:218px;--w1:150px}html{scroll-padding-top:74px}.header{flex-wrap:nowrap}.header nav{top:100%}
  .header .theme-toggle{width:calc(34px - 2px * var(--p));height:calc(34px - 2px * var(--p))}.hdr-login{width:calc(34px - 2px * var(--p));height:calc(34px - 2px * var(--p))}}
@media(min-width:741px){html{scroll-padding-top:84px}}


/* Guías (contenido para buscadores) */
.guias-home{display:grid;gap:14px}.guias-home h2{margin:0}.gh-lead{max-width:760px;color:var(--mute,#6b7280);font-size:16px;line-height:1.7;margin:0}
.gh-list{list-style:none;padding:0;margin:6px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.gh-list a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px;border:1px solid rgba(0,0,0,.08);background:#fff;color:inherit;text-decoration:none;font-weight:500;transition:border-color .15s}
.gh-list a:hover{border-color:#12add6}.gh-list a span{color:#12add6}
html[data-theme=dark] .gh-list a{background:#1b1f22;border-color:#2b3237}
.foot-seo{font-size:12.5px;opacity:.75;max-width:520px}.foot-links{display:flex;flex-wrap:wrap;gap:14px;font-size:13px}.foot-links a{color:inherit;opacity:.8}