/* P2 · base clara común (portada, catálogo y ficha). 12 nov 2026, 3.ª idea: «Deportivo diagonal»
   (Barlow Condensed en cursiva, gris frío, botones inclinados). La versión A+B está en copias/p2-AmasB-2026-11-12/.
   Se carga DESPUÉS de p1.css: misma estructura y UX que la P1; cambia la identidad visual.
   Diferencias con la P1: blanco puro y grises neutros (no crema), Saira ancha en mayúsculas, esquinas rectas,
   botones naranjas con texto negro (6,4:1 de contraste), negro solo en el pie. */
:root{
  --fondo:#FFFFFF; --sup:#F1F2F3; --sup2:#E2E5E8; --tinta:#0F1113; --tenue:#535A61; --linea:#DDE0E3;
  --ac:#F56A17; --ac-txt:#B8470A; --ok:#1E7A46;
  --f-cuerpo:"Barlow",system-ui,sans-serif; --sk:-12deg; --f-tit:"Barlow Condensed","Barlow",system-ui,sans-serif;
  --r-xl:6px; --r:4px; --r-s:4px;
}
html,body{background:#fff}
body{font-family:var(--f-cuerpo);color:var(--tinta)}

/* tipografía: títulos anchos en mayúsculas */
h1,h2,.hero3__h,.dr__tit{font-family:var(--f-tit);font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:-.005em}
.hero3 h1,.hero3 .hero3__h{line-height:.95;letter-spacing:-.01em}
h2{line-height:1}
h3{font-weight:700}
h1 em,h2 em,.hero3 h1 em,.hero3 .hero3__h em{font-style:normal;color:var(--ac)}
.eti{display:inline-flex;align-items:center;gap:10px;font:italic 700 15px/1 var(--f-tit);letter-spacing:.16em;text-transform:uppercase;color:var(--ac-txt)}
.eti::before{content:"";width:24px;height:2px;background:var(--ac)}

/* botones: rectos, mayúsculas, naranja con texto negro */
.hero3__bt,.cz__env,.mmenu.mm--dr .dr__wa{border-radius:0;background:var(--ac);color:var(--tinta);box-shadow:none;font-family:var(--f-tit);font-style:italic;letter-spacing:.06em;text-transform:uppercase;font-size:19px;font-weight:800}
.hero3__bt:hover,.cz__env:hover,.mmenu.mm--dr .dr__wa:hover{background:#FF8533}
.btn{border-radius:0;text-transform:uppercase;letter-spacing:.06em;font-family:var(--f-tit);font-style:italic;font-weight:700}
.cotz,.ib,.cab nav,.cab nav .nv,.cab nav a,button.bus,.bus,.cab .der,.cab .logo{border-radius:4px}
.cab nav .nv,.cab nav a{text-transform:uppercase;letter-spacing:.08em;font-size:17px;font-family:var(--f-tit);font-style:italic;font-weight:700}

/* esquinas rectas en tarjetas, paneles y fotos (los círculos de íconos se mantienen) */
.cat-c,.cat-c img,.pc__ft,.cta-b,.cta-b img,.tc,.tnd2__c,.tnd2__vis,.tnd2__info,.tnd2__tg,.tnd2__tg button,.tnd2__waze,
.pf__l details,.cie,.mega__in,.mg-cp .ft,.mg-c .th,.bm__f,.bm__cats .th,.bus-sug,.cz__box,.cz__lista .ft,.cz .cant,
.dr__th,.dr__x,.cz__x,.galeria .grande,.galeria .min button,.prod--ayuda,.pildora-filtros,.toast,.cie__bt,.pie2__libro,.marca{border-radius:4px}
.cz__box{border-radius:6px}

/* fotos de producto con fondo blanco: fichas en gris muy claro */
.pc__ft,.galeria .grande{background:var(--sup)}

/* contraste medido (12 nov): textos chicos naranjas → naranja oscuro; botones de color con texto negro */
.hero3 h1 em,.hero3 .hero3__h em{color:#D9520A}
.tnd2 dt,.pf__l .n,.tab-num.n{color:var(--ac-txt)}
.tnd2__tg button[aria-pressed="true"],.tnd2__tg .on{color:var(--tinta)}
.cie__bt,.pie2__wa{color:var(--tinta)}
@media (max-width:900px){
  .cab--sobre,.cab--sobre.baja,.cab.baja{background:#fff}
  .hero3{background:#fff}
}

/* ===================== Cabecera P2 (12 nov, tarde): de tienda, en tres niveles =====================
   franja negra de datos · logo + buscador ancho + cotización · menú con subrayado naranja. Pegajosa, sin cápsulas flotantes. */
body[data-p="p2"] main,.cab--p2+main{padding-top:0}
.cab.cab--p2,.cab.cab--p2.baja{position:sticky;top:0;padding:0;background:#fff;box-shadow:0 1px 0 var(--linea)}
.cab--p2 .x-top{background:var(--sup);color:var(--tinta);font:italic 700 14px/1 var(--f-tit);letter-spacing:.1em;text-transform:uppercase}
.cab--p2 .x-top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:34px;width:min(100% - 96px,var(--ancho))}
.cab--p2 .x-top a{color:var(--ac-txt)}
.cab--p2>.wrap{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"logo der" "nav nav";column-gap:40px;align-items:center;padding-top:14px}
.cab--p2 .logo{grid-area:logo;height:auto;padding:0;background:none;border-radius:0}
.cab--p2 .logo img{height:46px;width:auto}
.cab--p2 .der{grid-area:der;justify-content:flex-end;gap:12px;padding:0;background:none;color:var(--tinta)}
.cab--p2 button.bus{flex:1;max-width:640px;width:auto;height:50px;padding:0 10px 0 18px;border-radius:0;background:var(--sup);border:1px solid var(--linea);border-left:4px solid var(--ac);box-shadow:none;color:var(--tenue)}
.cab--p2 button.bus:hover{border-color:var(--tinta)}
.cab--p2 .cotz{height:50px;border-radius:0;background:var(--tinta);color:#fff;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);padding-left:26px;padding-right:26px}
.cab--p2 .cotz:hover{background:#2B2826}
.cab--p2 nav{grid-area:nav;justify-content:flex-start;gap:32px;margin-top:14px;padding:0;border-top:1px solid var(--linea);border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.cab--p2 nav .nv,.cab--p2 nav a{height:48px;padding:0;border-radius:0;background:none;color:var(--tinta);border-bottom:3px solid transparent;margin-bottom:-1px}
.cab--p2 nav .nv:hover,.cab--p2 nav .nv[aria-expanded="true"],.cab--p2 nav a:hover{background:none;color:var(--tinta);border-bottom-color:var(--ac)}
.cab--p2 .mega{padding-top:0}
@media (max-width:900px){
  .cab--p2 .x-top .wrap{justify-content:center;width:auto;height:30px;font-size:11px}
  .cab--p2 .x-top span{display:none}
  .cab--p2>.wrap{grid-template-columns:auto 1fr;padding:10px 0;width:min(100% - 32px,var(--ancho))}
  .cab--p2 .logo img{height:40px}
  .cab--p2 .der,.cab--p2 .der{gap:4px;background:none}
  .cab--p2 .ib,.cab--p2 .cotz{width:44px;height:44px;background:transparent;color:var(--tinta)}
  .cab--p2 .cotz .n{box-shadow:none}
}
.cab--p2 nav a{display:inline-flex;align-items:center}

/* 3.ª idea (deportivo): en el celular la cotización vuelve a ser ícono sin forma */
@media (max-width:900px){.cab--p2 .cotz{clip-path:none;padding:0}}

/* ===================== Ronda 2 del deportivo (12 nov): todo inclinado y coherente ===================== */
/* sin franja de datos arriba; cabecera de dos niveles */
.cab--p2>.wrap{padding-top:16px}
/* buscador inclinado (paralelogramo) con el contenido derecho */
.cab--p2 button.bus{transform:skewX(var(--sk));border-left-width:5px}
.cab--p2 button.bus>*{transform:skewX(calc(var(--sk) * -1))}
/* cotización: fondo inclinado en un seudoelemento para que la insignia no se corte */
.cab--p2 .cotz,.cab--p2 .cotz:hover{clip-path:none;background:none;isolation:isolate;padding-left:24px;padding-right:24px;font:italic 700 18px/1 var(--f-tit);letter-spacing:.04em;text-transform:uppercase}
.cab--p2 .cotz::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tinta);transform:skewX(var(--sk));transition:background-color .2s}
.cab--p2 .cotz:hover::before{background:#2A2E33}
.cab--p2 .cotz .n{top:-8px;right:-10px;border-radius:0;transform:skewX(var(--sk));font-style:normal}
/* menús desplegables: esquinas rectas, títulos en cursiva, flechas inclinadas */
.cab--p2 .mega__in{border-radius:0;border:0;border-top:4px solid var(--ac);box-shadow:0 24px 60px rgba(15,17,19,.18)}
.cab--p2 .mega .fl{border-radius:0;border:0;background:var(--tinta);color:#fff;transform:skewX(var(--sk))}
.cab--p2 .mg-m__cab{border-radius:0;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.cab--p2 .mg-m__cab:hover{background:var(--sup2)}
.cab--p2 .mg-m__cab:hover .fl{background:var(--ac);color:var(--tinta)}
.cab--p2 .mg-m__cab .lg{border-radius:0}
.cab--p2 .mg-m__cab b,.cab--p2 .mg-cp h3{font:italic 800 22px/1.05 var(--f-tit);text-transform:uppercase;letter-spacing:.01em}
.cab--p2 .mg-cp h3{font-size:34px}
.cab--p2 .mg-m__cab small{font:italic 700 13px/1 var(--f-tit);letter-spacing:.1em;text-transform:uppercase;color:var(--ac-txt)}
.cab--p2 .mg-mod a:hover,.cab--p2 .mg-sub a:hover{color:var(--ac-txt)}
.cab--p2 .mg-c{border-radius:0;font:italic 700 18px/1 var(--f-tit);text-transform:uppercase;letter-spacing:.03em}
.cab--p2 .mg-c .th{border-radius:0}
.cab--p2 .mg-c.on{background:var(--sup);box-shadow:inset 4px 0 0 var(--ac)}
.cab--p2 .mg-cp .ft{border-radius:0;clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%)}
.cab--p2 .mg-ver{font:italic 800 17px/1 var(--f-tit);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:900px){
  .cab--p2 button.bus{transform:none}
  .cab--p2 button.bus>*{transform:none}
  .cab--p2 .cotz::before{display:none}
  .cab--p2 .cotz,.cab--p2 .cotz:hover{padding:0}
  .cab--p2 .cotz .n{top:4px;right:2px}
}
.cab--p2 .cotz .n{color:var(--tinta)} /* contraste: texto negro sobre naranja (6,4:1) */

/* ===================== Ronda 3 (12 nov): contornos RECTOS con esquinas de 4 px; la cursiva se queda ===================== */
.cab--p2 button.bus,.cab--p2 button.bus>*{transform:none}
.cab--p2 button.bus{border-radius:4px}
.cab--p2 .cotz::before{transform:none;border-radius:4px}
.cab--p2 .cotz .n{transform:none;border-radius:4px}
.cab--p2 .mega__in{border-radius:0 0 6px 6px}
.cab--p2 .mega .fl{transform:none;border-radius:4px}
.cab--p2 .mg-m__cab .lg,.cab--p2 .mg-c,.cab--p2 .mg-c .th{border-radius:4px}
/* «Enviar por WhatsApp» del panel de cotización y del menú del celular: texto blanco sobre naranja más intenso (3,5:1, texto grande) */
.cz__env,.mmenu.mm--dr .dr__wa{background:#E85D0C;color:#fff;border-radius:4px}
.cz__env:hover,.mmenu.mm--dr .dr__wa:hover{background:#D4520A;color:#fff}
.cz__box,.cz .cant,.cz__x,.cz__lista .ft{border-radius:4px}

/* ===================== Ronda 4 (12 nov): botones naranjas con TEXTO BLANCO (pedido de Cristian) =====================
   Blanco sobre el naranja de marca (#F56A17) da 2,9:1 y no alcanza; los botones usan #E85D0C (3,5:1, texto grande ≥19 px negrita)
   y lo chico (insignias, «Agregar», selector) #C94F08 (4,6:1). El naranja de marca sigue en fondos, líneas y detalles. */
:root{--ac-bt:#E85D0C;--ac-bt2:#C94F08}
.hero3__bt,.cz__env,.mmenu.mm--dr .dr__wa,.btn--ac,.buscar .sel .btn--ac,.bm__ir,.mmenu .btn,.cie__bt,.pie2__wa{background:var(--ac-bt);color:#fff}
.hero3__bt:hover,.cz__env:hover,.mmenu.mm--dr .dr__wa:hover,.btn--ac:hover,.bm__ir:hover,.mmenu .btn:hover,.cie__bt:hover,.pie2__wa:hover{background:var(--ac-bt2);color:#fff}
.cab--p2 .mg-m__cab:hover .fl,.mg-ver:hover .fl,.pc__add:hover,.pv:hover .fl,.lnk:hover .fl,.bm__wa:hover .fl,.ver-g:hover .fl{background:var(--ac-bt);color:#fff}
.cab--p2 .cotz .n,.pc__add .b{background:var(--ac-bt2);color:#fff}
.cab--p2 .cotz{position:relative} /* el fondo negro (::before) se ancla al botón también en catálogo y ficha */