/* ====================================================================
   CANBER — Hoja de estilos del theme
   Consolidada desde las maquetas fieles al Figma (Oswald + Inter,
   paleta navy/azul/verde). Reglas únicas, sin duplicar. No editar
   a mano salvo ajustes puntuales.
   ==================================================================== */

/* ====================================================================
   CANBER — Catálogo completo (maqueta fiel al Figma)
   WordPress: página con loop de términos de product_cat (WooCommerce). Cada tarjeta = una categoría con su conteo de productos. El conteo sale solo de Woo.
   ==================================================================== */
:root{
  --navy:#1e2c4f; --navy-2:#243a63; --slate:#3a4c70;
  --blue:#2b5cb8; --blue-dark:#21498f; --blue-link:#2f63c4; --steel:#34507f;
  --green:#3fa45e; --green-dark:#2f8c4c;
  --bg:#eef2f8; --bg-2:#f6f9fc;
  --ink:#1e2c4f; --body:#5a6577; --on-dark:#c5cfe2;
  --line:#e3e9f2; --card:#fff;
  --maxw:1200px; --radius:6px;
  --shadow-sm:0 1px 3px rgba(30,44,79,.06),0 1px 2px rgba(30,44,79,.04);
  --shadow-md:0 12px 30px rgba(30,44,79,.10);
  --ff-display:"Oswald","Arial Narrow",sans-serif;
  --ff-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{ margin:0; font-family:var(--ff-body); color:var(--body); background:#fff; line-height:1.6; -webkit-font-smoothing:antialiased; }

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

h1,h2,h3,h4{ font-family:var(--ff-display); color:var(--ink); margin:0; line-height:1.1; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--ff-display); font-weight:500; text-transform:uppercase; letter-spacing:.06em; font-size:14px; padding:13px 24px; border-radius:var(--radius); border:2px solid transparent; cursor:pointer; transition:transform .15s, background .2s, border-color .2s, color .2s; white-space:nowrap; }

.btn svg{ width:16px; height:16px; flex:none; }

.btn:hover{ transform:translateY(-2px); }

.btn--primary{ background:var(--blue); color:#fff; }

.btn--primary:hover{ background:var(--blue-dark); }

.btn--outline{ background:#fff; color:var(--blue); border-color:var(--blue); }

.btn--outline:hover{ background:var(--blue); color:#fff; }

.btn--ghost{ background:transparent; color:var(--body); border-color:var(--line); }

.btn--ghost:hover{ background:#f1f4f9; color:var(--ink); border-color:#cdd6e6; }

.btn--white{ background:#fff; color:var(--blue); }

.btn--white:hover{ background:#eef2f8; }

.btn--navy{ background:var(--navy-2); color:#fff; }

.btn--navy:hover{ background:var(--navy); }

.btn--green{ background:var(--green); color:#fff; }

.btn--green:hover{ background:var(--green-dark); }

/* TOP BAR */
.topbar{ background:var(--navy); color:#aeb9d2; font-size:13px; }

.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; height:38px; }

.topbar a{ color:#aeb9d2; transition:color .2s; }

.topbar a:hover{ color:#fff; }

.topbar__left{ display:flex; gap:22px; align-items:center; }

.topbar__left span{ display:inline-flex; align-items:center; gap:7px; }

.topbar__left svg{ width:14px; height:14px; opacity:.8; }

.topbar__right{ display:flex; gap:16px; align-items:center; }

/* HEADER */
.header{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:60; }

.header .wrap{ display:flex; align-items:center; gap:28px; height:74px; }

.brand{ display:flex; flex-direction:column; line-height:1; flex:none; }

.brand__name{ font-family:var(--ff-display); font-weight:700; font-size:30px; letter-spacing:.04em; color:var(--navy); }

.brand__name b{ color:var(--blue); }

.brand__sub{ font-size:9.5px; letter-spacing:.34em; color:var(--body); text-transform:uppercase; margin-top:3px; }

.nav{ display:flex; gap:30px; margin-left:auto; }

.nav a{ font-family:var(--ff-display); font-weight:500; text-transform:uppercase; letter-spacing:.05em; font-size:15px; color:var(--ink); display:inline-flex; align-items:center; gap:6px; padding:8px 0; white-space:nowrap; border-bottom:2px solid transparent; transition:color .2s, border-color .2s; }

.nav a:hover,.nav a.active{ color:var(--blue); border-color:var(--blue); }

.nav a svg{ width:11px; height:11px; opacity:.7; }

.header__cta{ display:flex; gap:12px; flex:none; }

.header__cta .btn{ padding:11px 18px; font-size:13px; }

.burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto; }

.burger span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; }

.mobile-nav{ display:none; background:#fff; border-bottom:1px solid var(--line); }

.mobile-nav.open{ display:block; }

.mobile-nav a{ display:block; padding:14px 24px; border-top:1px solid var(--line); font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.05em; color:var(--ink); }

.mobile-nav .btn{ margin:14px 24px; }

/* PAGE HERO (azul) */
.cathero{ background:radial-gradient(120% 140% at 90% 0%, rgba(120,160,220,.22) 0%, rgba(120,160,220,0) 55%), linear-gradient(118deg,#1f3056 0%,#2c4470 70%,#365084 100%); color:#fff; position:relative; overflow:hidden; }

.cathero::after{ content:""; position:absolute; inset:0; opacity:.06; background:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 26px); }

.cathero .wrap{ position:relative; z-index:2; padding:34px 24px 40px; }

.breadcrumb{ display:flex; gap:9px; align-items:center; font-size:13px; color:#a8b6d4; margin-bottom:16px; flex-wrap:wrap; }

.breadcrumb a:hover{ color:#fff; }

.breadcrumb svg{ width:14px; height:14px; opacity:.6; }

.breadcrumb b{ color:#fff; font-weight:500; }

.cathero .eyebrow{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:#9be3b3; margin:0 0 8px; }

.cathero h1{ color:#fff; font-weight:700; text-transform:uppercase; font-size:clamp(30px,4vw,46px); letter-spacing:.01em; }

.cathero p{ color:#cdd6ea; max-width:620px; margin:12px 0 0; font-size:15.5px; }

/* SECTION TITLE */
.sechead{ text-align:center; max-width:680px; margin:0 auto 38px; }

.sechead .eyebrow{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:var(--green); margin:0 0 10px; }

.sechead h2{ text-transform:uppercase; font-weight:700; font-size:clamp(24px,2.8vw,34px); letter-spacing:.01em; }

.sechead p{ margin:12px 0 0; font-size:15.5px; }

/* CTA BAND */
.cta-band{ background:linear-gradient(100deg,var(--blue-dark),var(--blue)); color:#fff; }

.cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:36px 24px; flex-wrap:wrap; }

.cta-band h2{ color:#fff; font-weight:700; text-transform:uppercase; font-size:clamp(20px,2.4vw,28px); }

.cta-band p{ margin:6px 0 0; color:#d6e1f6; font-size:14.5px; }

.cta-band__btns{ display:flex; gap:12px; flex-wrap:wrap; }

/* FOOTER */
.footer{ background:var(--navy); color:#9fabc6; }

.footer__main{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding:64px 0 48px; }

.footer .brand__name{ color:#fff; }

.footer .brand__sub{ color:#7e8cab; }

.footer__desc{ margin:18px 0 20px; font-size:14px; line-height:1.7; max-width:300px; }

.footer__social{ display:flex; gap:10px; }

.footer__social a{ width:36px; height:36px; border-radius:6px; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; transition:background .2s; }

.footer__social a:hover{ background:var(--blue); color:#fff; }

.footer__social svg{ width:17px; height:17px; }

.footer h4{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:#fff; font-size:15px; margin:0 0 18px; }

.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:14px; }

.footer ul a:hover{ color:#fff; }

.footer__contact li{ display:flex; gap:11px; align-items:flex-start; }

.footer__contact svg{ width:16px; height:16px; margin-top:3px; flex:none; opacity:.8; }

.footer__bottom{ border-top:1px solid rgba(255,255,255,.10); padding:20px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:13px; flex-wrap:wrap; }

.footer__bottom-links{ display:flex; gap:20px; }

/* WhatsApp */
.wa{ position:fixed; right:22px; bottom:22px; z-index:80; width:56px; height:56px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(37,211,102,.45); transition:transform .2s; }

.wa:hover{ transform:scale(1.08); }

.wa svg{ width:30px; height:30px; color:#fff; }

a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid #7fb0ff; outline-offset:2px; border-radius:4px; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .5s, transform .5s; }

.reveal.in{ opacity:1; transform:none; }

@media (max-width:980px){
  .nav,.header__cta{ display:none; } .burger{ display:block; }
  .footer__main{ grid-template-columns:1fr 1fr; gap:32px; }
}

@media (max-width:620px){
  .topbar__left span:nth-child(n+3){ display:none; } .topbar__left{ gap:14px; flex-wrap:wrap; } .topbar{ font-size:12.5px; }
  .footer__main{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){ *{ transition:none!important; scroll-behavior:auto!important; } .reveal{ opacity:1; transform:none; } }

.catpage{ background:var(--bg); padding:48px 0 60px; }

.catgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }

.catcard{ display:flex; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }

.catcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

.catcard__media{ position:relative; width:172px; flex:none; background:linear-gradient(135deg,#eef1f6,#fbfcfe); display:flex; align-items:center; justify-content:center; }

.catcard__media svg{ width:52%; height:52%; color:#5a6880; transition:transform .35s; }

.catcard:hover .catcard__media svg{ transform:scale(1.06); }

.catcard__count{ position:absolute; top:11px; left:11px; background:var(--green); color:#fff; font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:10.5px; padding:4px 9px; border-radius:3px; }

.catcard__body{ padding:22px 24px; display:flex; flex-direction:column; }

.catcard__title{ text-transform:uppercase; font-weight:600; font-size:20px; letter-spacing:.02em; margin-bottom:8px; }

.catcard__desc{ font-size:13.8px; margin:0 0 16px; flex:1; }

.catcard__link{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:13px; color:var(--blue-link); display:inline-flex; align-items:center; gap:6px; }

.catcard__link svg{ width:14px; height:14px; transition:transform .2s; }

.catcard:hover .catcard__link svg{ transform:translateX(3px); }

@media(max-width:760px){ .catgrid{ grid-template-columns:1fr; } }

@media(max-width:460px){ .catcard{ flex-direction:column; } .catcard__media{ width:100%; aspect-ratio:16/7; } }

/* ====================================================================
   CANBER — Listado de categoría (maqueta fiel al Figma)
   En WordPress esto es archive-product.php / taxonomy-product_cat.php.
   El sidebar = términos de product_cat (subcategorías) + layered nav (atributos).
   La grilla = loop de WooCommerce de la categoría actual.
   ==================================================================== */
:root{
  --navy:#1e2c4f; --navy-2:#243a63; --slate:#3a4c70;
  --blue:#2b5cb8; --blue-dark:#21498f; --blue-link:#2f63c4; --steel:#34507f;
  --green:#3fa45e; --green-dark:#2f8c4c;
  --bg:#eef2f8; --bg-2:#f6f9fc;
  --ink:#1e2c4f; --body:#5a6577; --on-dark:#c5cfe2;
  --line:#e3e9f2; --card:#fff;
  --maxw:1200px; --radius:6px;
  --shadow-sm:0 1px 3px rgba(30,44,79,.06),0 1px 2px rgba(30,44,79,.04);
  --shadow-md:0 12px 30px rgba(30,44,79,.10);
  --ff-display:"Oswald","Arial Narrow",sans-serif;
  --ff-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--ff-display); font-weight:500; text-transform:uppercase; letter-spacing:.06em; font-size:14px; padding:13px 24px; border-radius:var(--radius); border:2px solid transparent; cursor:pointer; transition:transform .15s ease, background .2s, border-color .2s, color .2s; white-space:nowrap; }

/* ===== TOP BAR ===== */
.topbar{ background:var(--navy); color:#aeb9d2; font-size:13px; }

/* ===== HEADER ===== */
.header{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:60; }

.burger span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.25s; }

/* ===== CATEGORY HERO ===== */
.cathero{ background:radial-gradient(120% 140% at 90% 0%, rgba(120,160,220,.22) 0%, rgba(120,160,220,0) 55%), linear-gradient(118deg,#1f3056 0%,#2c4470 70%,#365084 100%); color:#fff; position:relative; overflow:hidden; }

.breadcrumb{ display:flex; gap:9px; align-items:center; font-size:13px; color:#a8b6d4; margin-bottom:16px; }

.cathero p{ color:#cdd6ea; max-width:560px; margin:12px 0 0; font-size:15.5px; }

/* ===== CATALOG LAYOUT ===== */
.catalog{ background:var(--bg); padding:40px 0 72px; }

.catalog__grid{ display:grid; grid-template-columns:280px 1fr; gap:34px; align-items:start; }

/* Sidebar */
.aside{ position:sticky; top:90px; display:grid; gap:22px; }

.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }

.panel__head{ background:var(--blue); color:#fff; font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:15px; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; }

.panel__head svg{ width:16px; height:16px; }

.catlist{ list-style:none; margin:0; padding:6px 0; }

.catlist a{ display:flex; align-items:center; justify-content:space-between; padding:11px 18px; font-size:14.5px; color:#44506a; border-left:3px solid transparent; transition:background .15s, color .15s, border-color .15s; }

.catlist a:hover{ background:#f4f7fc; color:var(--blue); }

.catlist a.active{ color:var(--blue); font-weight:600; background:#eef4fd; border-left-color:var(--blue); }

.catlist svg{ width:14px; height:14px; opacity:.5; }

.catlist span.count{ font-size:12px; color:#9aa6bd; }

.filter{ padding:16px 18px; }

.filter h4{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin:0 0 12px; }

.filter + .filter{ border-top:1px solid var(--line); }

.check{ display:flex; align-items:center; gap:10px; font-size:14px; color:#54607a; padding:6px 0; cursor:pointer; }

.check input{ width:16px; height:16px; accent-color:var(--blue); }

.promo{ background:linear-gradient(150deg,var(--blue),var(--blue-dark)); color:#fff; border-radius:var(--radius); padding:24px 22px; box-shadow:var(--shadow-sm); }

.promo__icon{ width:42px; height:42px; border-radius:8px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }

.promo__icon svg{ width:22px; height:22px; }

.promo h4{ color:#fff; text-transform:uppercase; letter-spacing:.04em; font-size:17px; margin-bottom:8px; }

.promo p{ margin:0 0 16px; font-size:13.5px; color:#dbe5f7; }

.promo .btn{ width:100%; justify-content:center; }

/* Main */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px 18px; margin-bottom:22px; box-shadow:var(--shadow-sm); }

.toolbar__count{ font-size:14px; }

.toolbar__count b{ color:var(--ink); }

.toolbar__right{ display:flex; align-items:center; gap:14px; }

.select{ font-family:var(--ff-body); font-size:14px; color:var(--ink); border:1px solid var(--line); border-radius:5px; padding:8px 12px; background:#fff; cursor:pointer; }

.view-toggle{ display:flex; gap:4px; }

.view-toggle button{ width:36px; height:36px; border:1px solid var(--line); background:#fff; border-radius:5px; display:flex; align-items:center; justify-content:center; color:#94a0b8; cursor:pointer; }

.view-toggle button.active{ background:var(--blue); border-color:var(--blue); color:#fff; }

.view-toggle svg{ width:16px; height:16px; }

.products{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

.prod{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }

.prod:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

.prod__media{ position:relative; aspect-ratio:4/3; background:linear-gradient(135deg,#eef1f6,#fbfcfe); display:flex; align-items:center; justify-content:center; }

.prod__media svg{ width:58%; height:58%; color:#5a6880; transition:transform .35s; }

.prod:hover .prod__media svg{ transform:scale(1.06); }

.tag{ position:absolute; top:11px; left:11px; font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.07em; font-size:10.5px; padding:4px 9px; border-radius:3px; color:#fff; }

.tag--green{ background:var(--green); }

.tag--blue{ background:var(--blue); }

.prod__body{ padding:16px 17px 18px; display:flex; flex-direction:column; flex:1; }

.prod__meta{ display:flex; align-items:center; gap:6px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#94a0b8; margin-bottom:7px; }

.prod__meta svg{ width:12px; height:12px; }

.prod__title{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.02em; font-size:16px; color:var(--ink); margin:0 0 8px; line-height:1.2; }

.prod__title a:hover{ color:var(--blue); }

.prod__desc{ font-size:13.5px; margin:0 0 16px; flex:1; }

.prod__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

.prod__ficha{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:12.5px; color:var(--blue-link); display:inline-flex; align-items:center; gap:5px; }

.prod__ficha svg{ width:13px; height:13px; transition:transform .2s; }

.prod:hover .prod__ficha svg{ transform:translateX(3px); }

.prod__quote{ font-family:var(--ff-display); font-weight:500; text-transform:uppercase; letter-spacing:.04em; font-size:12px; padding:8px 12px; border-radius:5px; background:#eef4fd; color:var(--blue); display:inline-flex; align-items:center; gap:6px; border:1px solid #d7e4f8; cursor:pointer; transition:background .2s, color .2s; }

.prod__quote:hover{ background:var(--blue); color:#fff; }

.prod__quote svg{ width:13px; height:13px; }

/* Pagination */
.pager{ display:flex; justify-content:center; gap:8px; margin-top:40px; }

.pager a{ min-width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:#fff; border-radius:6px; font-family:var(--ff-display); font-weight:500; color:var(--ink); transition:background .2s, color .2s, border-color .2s; }

.pager a:hover{ border-color:var(--blue); color:var(--blue); }

.pager a.active{ background:var(--blue); border-color:var(--blue); color:#fff; }

.pager a.next{ padding:0 16px; }

.pager svg{ width:16px; height:16px; }

/* ===== FOOTER ===== */
.footer{ background:var(--navy); color:#9fabc6; }

/* Mobile filter toggle */
.filter-toggle{ display:none; }

/* Responsive */
@media (max-width:980px){
  .nav,.header__cta{ display:none; }
  .burger{ display:block; }
  .catalog__grid{ grid-template-columns:1fr; }
  .aside{ position:static; }
  .aside.is-collapsed{ display:none; }
  .filter-toggle{ display:inline-flex; }
  .products{ grid-template-columns:repeat(2,1fr); }
  .footer__main{ grid-template-columns:1fr 1fr; gap:32px; }
}

@media (max-width:620px){
  .products{ grid-template-columns:1fr; }
  .toolbar{ flex-direction:column; align-items:stretch; }
  .toolbar__right{ justify-content:space-between; }
  .topbar__left span:nth-child(n+3){ display:none; } .topbar__left{ gap:14px; flex-wrap:wrap; } .topbar{ font-size:12.5px; }
  .footer__main{ grid-template-columns:1fr; }
}

a:focus-visible,.btn:focus-visible,button:focus-visible{ outline:3px solid #7fb0ff; outline-offset:2px; border-radius:4px; }

/* La declaracion de .reveal que estaba aca era un duplicado de la linea 207 y,
   por venir despues en el archivo, pisaba la guarda de prefers-reduced-motion
   de la linea 221. Con eso, las tarjetas de producto quedaban invisibles en
   cualquier maquina con "reducir movimiento" activado. Se elimino a proposito:
   la unica definicion valida de .reveal es la de arriba. */

/* ====================================================================
   CANBER — Ficha de producto (maqueta fiel al Figma)
   En WordPress: single-product.php de WooCommerce.
   - Galería = imágenes del producto
   - Acabado / Medida = atributos (variaciones) de Woo
   - "Agregar a la cotización" = plugin request-a-quote (sin pago)
   - Características técnicas = atributos + descripción; ficha PDF = adjunto
   ==================================================================== */
:root{
  --navy:#1e2c4f; --navy-2:#243a63; --slate:#3a4c70;
  --blue:#2b5cb8; --blue-dark:#21498f; --blue-link:#2f63c4; --steel:#34507f;
  --green:#3fa45e; --green-dark:#2f8c4c;
  --bg:#eef2f8; --bg-2:#f6f9fc;
  --ink:#1e2c4f; --body:#5a6577; --on-dark:#c5cfe2;
  --line:#e3e9f2; --card:#fff;
  --maxw:1200px; --radius:6px;
  --shadow-sm:0 1px 3px rgba(30,44,79,.06),0 1px 2px rgba(30,44,79,.04);
  --shadow-md:0 12px 30px rgba(30,44,79,.10);
  --ff-display:"Oswald","Arial Narrow",sans-serif;
  --ff-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* BREADCRUMB STRIP */
.crumbstrip{ background:#fff; border-bottom:1px solid var(--line); }

.breadcrumb{ display:flex; gap:9px; align-items:center; font-size:13px; color:#8b95ab; padding:16px 0; flex-wrap:wrap; }

.breadcrumb a:hover{ color:var(--blue); }

.breadcrumb svg{ width:14px; height:14px; opacity:.5; }

.breadcrumb b{ color:var(--ink); font-weight:500; }

/* PRODUCT MAIN */
.pmain{ background:var(--bg); padding:40px 0 60px; }

.pmain__grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }

/* Gallery */
.gallery__main{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); overflow:hidden; }

.gallery__main svg{ width:62%; height:62%; color:#5a6880; }

.gallery__badge{ position:absolute; top:14px; left:14px; background:var(--green); color:#fff; font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:11px; padding:6px 12px; border-radius:4px; }

.gallery__trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }

.trustbox{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 10px; text-align:center; box-shadow:var(--shadow-sm); }

.trustbox svg{ width:20px; height:20px; color:var(--blue); margin:0 auto 7px; }

.trustbox span{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink); font-family:var(--ff-display); font-weight:500; display:block; line-height:1.3; }

/* Info */
.pinfo__eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--green); font-family:var(--ff-display); font-weight:600; margin-bottom:10px; }

.pinfo__eyebrow svg{ width:14px; height:14px; }

.pinfo h1{ font-weight:700; text-transform:uppercase; font-size:clamp(26px,3.2vw,38px); letter-spacing:.01em; line-height:1.08; }

.pinfo__ref{ font-size:13px; color:#9aa6bd; margin:8px 0 0; letter-spacing:.04em; }

.pinfo__desc{ margin:18px 0 24px; font-size:15.5px; }

.field{ margin-bottom:22px; }

.field__label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); font-family:var(--ff-display); font-weight:600; margin-bottom:10px; }

.field__label small{ color:#9aa6bd; font-family:var(--ff-body); font-weight:400; letter-spacing:0; text-transform:none; }

.pills{ display:flex; flex-wrap:wrap; gap:8px; }

.pill{ font-family:var(--ff-display); font-weight:500; text-transform:uppercase; letter-spacing:.04em; font-size:13px; padding:9px 18px; border-radius:5px; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; transition:.18s; }

.pill:hover{ border-color:var(--blue); }

.pill.active{ background:var(--blue); border-color:var(--blue); color:#fff; }

.sizes{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }

.size{ font-family:var(--ff-display); font-weight:500; font-size:13.5px; padding:11px 6px; border-radius:5px; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; text-align:center; transition:.18s; }

.size:hover:not(:disabled){ border-color:var(--blue); }

.size.active{ background:var(--blue); border-color:var(--blue); color:#fff; }

.size:disabled{ color:#bcc4d3; background:#f4f6fa; cursor:not-allowed; text-decoration:line-through; }

.stockbox{ display:flex; align-items:center; gap:11px; background:#eef4fd; border:1px solid #d7e4f8; border-radius:var(--radius); padding:13px 16px; margin-bottom:22px; font-size:14px; color:#33507f; }

.stockbox svg{ width:20px; height:20px; color:var(--green); flex:none; }

.stockbox b{ color:var(--ink); }

.pactions .btn{ width:100%; padding:15px; font-size:15px; }

.pactions__row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }

.pactions__row .btn{ font-size:12.5px; padding:12px; }

/* SPECS */
.specs{ padding:56px 0; background:#fff; }

.specs__panel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }

.tabs{ display:flex; border-bottom:1px solid var(--line); }

.tab{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:14px; color:var(--body); padding:18px 26px; cursor:pointer; border:0; background:none; border-bottom:3px solid transparent; transition:.2s; }

.tab.active{ color:var(--blue); border-bottom-color:var(--blue); }

.tabpane{ display:none; padding:30px 32px 36px; }

.tabpane.active{ display:block; }

.tabpane h3{ text-transform:uppercase; letter-spacing:.03em; font-size:18px; margin:0 0 16px; }

.tabpane p{ margin:0 0 14px; font-size:15px; max-width:780px; }

.spectable{ width:100%; border-collapse:collapse; }

.spectable tr{ border-bottom:1px solid var(--line); }

.spectable tr:last-child{ border-bottom:0; }

.spectable th{ text-align:left; font-family:var(--ff-body); font-weight:600; color:var(--ink); font-size:14px; padding:13px 0; width:42%; }

.spectable td{ padding:13px 0; font-size:14px; color:var(--body); }

.doclist{ display:flex; flex-direction:column; gap:10px; }

.docitem{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); transition:.2s; }

.docitem:hover{ border-color:var(--blue); background:#f8fafe; }

.docitem svg{ width:22px; height:22px; color:var(--blue); flex:none; }

.docitem .doc__t{ font-weight:600; color:var(--ink); font-size:14px; }

.docitem .doc__s{ font-size:12.5px; color:#9aa6bd; }

.docitem .doc__dl{ margin-left:auto; color:var(--blue); }

/* Responsive */
@media (max-width:980px){
  .nav,.header__cta{ display:none; } .burger{ display:block; }
  .pmain__grid{ grid-template-columns:1fr; gap:32px; }
  .footer__main{ grid-template-columns:1fr 1fr; gap:32px; }
}

@media (max-width:620px){
  .sizes{ grid-template-columns:repeat(3,1fr); }
  .pactions__row{ grid-template-columns:1fr; }
  .tabs{ overflow-x:auto; }
  .topbar__left span:nth-child(n+3){ display:none; } .topbar__left{ gap:14px; flex-wrap:wrap; } .topbar{ font-size:12.5px; }
  .footer__main{ grid-template-columns:1fr; }
}

/* ====================================================================
   CANBER — Quiénes somos (maqueta fiel al Figma)
   WordPress: página estática + campos ACF (misión, visión, valores, repeater de hitos de historia, repeater de pilares y de certificaciones).
   ==================================================================== */
:root{
  --navy:#1e2c4f; --navy-2:#243a63; --slate:#3a4c70;
  --blue:#2b5cb8; --blue-dark:#21498f; --blue-link:#2f63c4; --steel:#34507f;
  --green:#3fa45e; --green-dark:#2f8c4c;
  --bg:#eef2f8; --bg-2:#f6f9fc;
  --ink:#1e2c4f; --body:#5a6577; --on-dark:#c5cfe2;
  --line:#e3e9f2; --card:#fff;
  --maxw:1200px; --radius:6px;
  --shadow-sm:0 1px 3px rgba(30,44,79,.06),0 1px 2px rgba(30,44,79,.04);
  --shadow-md:0 12px 30px rgba(30,44,79,.10);
  --ff-display:"Oswald","Arial Narrow",sans-serif;
  --ff-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

.stats{ background:var(--navy); }

.stats .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:34px 24px; }

.stat{ text-align:center; }

.stat b{ font-family:var(--ff-display); font-weight:700; font-size:clamp(28px,3.4vw,40px); display:block; color:#fff; line-height:1; }

.stat span{ font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:#9fabc6; display:block; margin-top:8px; }

@media(max-width:620px){ .stats .wrap{ grid-template-columns:1fr 1fr; gap:22px; } }

.block{ padding:62px 0; }

.block--bg{ background:var(--bg); }

.vcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

.vcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; box-shadow:var(--shadow-sm); }

.vcard__icon{ width:54px; height:54px; border-radius:10px; background:#eef4fd; color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }

.vcard__icon svg{ width:26px; height:26px; }

.vcard h3{ text-transform:uppercase; font-size:18px; letter-spacing:.02em; margin-bottom:10px; }

.vcard p{ font-size:14.5px; margin:0; }

@media(max-width:860px){ .vcards{ grid-template-columns:1fr; } }

.two{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; }

@media(max-width:860px){ .two{ grid-template-columns:1fr; gap:40px; } }

.blocktitle{ text-transform:uppercase; font-weight:700; font-size:clamp(22px,2.6vw,30px); margin-bottom:8px; }

.lead{ margin:0 0 26px; font-size:15px; }

.timeline{ list-style:none; margin:0; padding:0; position:relative; }

.timeline::before{ content:""; position:absolute; left:7px; top:6px; bottom:10px; width:2px; background:var(--line); }

.tl{ position:relative; padding:0 0 24px 34px; }

.tl:last-child{ padding-bottom:0; }

.tl::before{ content:""; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%; background:var(--blue); border:3px solid #dbe6f8; }

.tl b{ font-family:var(--ff-display); color:var(--blue); font-size:16px; letter-spacing:.02em; }

.tl p{ margin:4px 0 0; font-size:14px; }

.pilar{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }

.pilar:first-child{ padding-top:0; }

.pilar:last-child{ border-bottom:0; padding-bottom:0; }

.pilar__ic{ width:44px; height:44px; flex:none; border-radius:8px; background:#eaf6ee; color:var(--green); display:flex; align-items:center; justify-content:center; }

.pilar__ic svg{ width:22px; height:22px; }

.pilar h4{ text-transform:uppercase; font-size:15px; letter-spacing:.03em; margin-bottom:4px; }

.pilar p{ margin:0; font-size:14px; }

.certs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

.cert{ text-align:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 26px; box-shadow:var(--shadow-sm); }

.cert__ic{ width:58px; height:58px; border-radius:50%; background:#eef4fd; color:var(--blue); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }

.cert__ic svg{ width:28px; height:28px; }

.cert h3{ text-transform:uppercase; font-size:17px; margin-bottom:8px; }

.cert p{ font-size:14px; margin:0; }

@media(max-width:860px){ .certs-grid{ grid-template-columns:1fr; } }

/* ====================================================================
   CANBER — Contacto (maqueta fiel al Figma)
   WordPress: el formulario NO va hardcodeado — se inserta con Gravity Forms (o WPForms) por shortcode. Validación, almacenamiento de entradas, notificación a ventas@, auto-respuesta y anti-spam (honeypot + reCAPTCHA) viven en el plugin.
   ==================================================================== */
:root{
  --navy:#1e2c4f; --navy-2:#243a63; --slate:#3a4c70;
  --blue:#2b5cb8; --blue-dark:#21498f; --blue-link:#2f63c4; --steel:#34507f;
  --green:#3fa45e; --green-dark:#2f8c4c;
  --bg:#eef2f8; --bg-2:#f6f9fc;
  --ink:#1e2c4f; --body:#5a6577; --on-dark:#c5cfe2;
  --line:#e3e9f2; --card:#fff;
  --maxw:1200px; --radius:6px;
  --shadow-sm:0 1px 3px rgba(30,44,79,.06),0 1px 2px rgba(30,44,79,.04);
  --shadow-md:0 12px 30px rgba(30,44,79,.10);
  --ff-display:"Oswald","Arial Narrow",sans-serif;
  --ff-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

.formwrap{ background:var(--bg); padding:48px 0 64px; }

.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:34px; align-items:start; }

@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.infopanel{ background:radial-gradient(120% 130% at 90% 0%, rgba(120,160,220,.20) 0%, rgba(120,160,220,0) 55%), linear-gradient(150deg,var(--blue),var(--blue-dark)); color:#fff; border-radius:var(--radius); padding:34px 30px; box-shadow:var(--shadow-sm); }

.infopanel h2{ color:#fff; text-transform:uppercase; font-size:20px; margin-bottom:6px; }

.infopanel__sub{ color:#d6e1f6; font-size:14px; margin:0 0 24px; }

.infolist{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }

.infolist li{ display:flex; gap:14px; align-items:flex-start; }

.infolist__ic{ width:42px; height:42px; flex:none; border-radius:8px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; }

.infolist__ic svg{ width:20px; height:20px; color:#fff; }

.infolist b{ color:#fff; font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.04em; font-size:13px; display:block; margin-bottom:3px; }

.infolist span{ color:#cdd9f0; font-size:14px; line-height:1.5; }

.infopanel__social{ display:flex; gap:10px; margin-top:26px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); }

.infopanel__social a{ width:38px; height:38px; border-radius:8px; background:rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s; }

.infopanel__social a:hover{ background:rgba(255,255,255,.22); }

.infopanel__social svg{ width:18px; height:18px; }

.mapbox{ margin-top:22px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/8; background:linear-gradient(135deg,#e7edf6,#f6f9fc); display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; color:#8b95ab; font-size:13px; }

.mapbox svg{ width:30px; height:30px; }

.formcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:34px 32px; }

.formcard__title{ text-transform:uppercase; font-size:20px; letter-spacing:.02em; margin-bottom:6px; }

.formcard__sub{ font-size:14px; margin:0 0 24px; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.formfield{ display:flex; flex-direction:column; gap:7px; }

.formfield.full{ grid-column:1 / -1; }

.formfield label{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:11.5px; color:var(--ink); }

.formfield label .req{ color:var(--green); margin-left:2px; }

.input{ width:100%; font-family:var(--ff-body); font-size:14.5px; color:var(--ink); background:var(--bg-2); border:1.5px solid var(--line); border-radius:var(--radius); padding:12px 14px; transition:border-color .2s, box-shadow .2s, background .2s; }

.input::placeholder{ color:#9aa6bd; }

.input:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(43,92,184,.12); }

textarea.input{ resize:vertical; min-height:130px; }

select.input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6577' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer; }

.consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:#54607a; margin-top:6px; }

.consent input{ width:17px; height:17px; margin-top:2px; accent-color:var(--blue); flex:none; }

.consent a{ color:var(--blue-link); text-decoration:underline; }

.form-actions{ margin-top:14px; }

.form-actions .btn{ width:100%; padding:15px; font-size:15px; }

.upload{ display:block; border:1.5px dashed #c4d2e8; border-radius:var(--radius); background:var(--bg-2); padding:22px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s; }

.upload:hover{ border-color:var(--blue); background:#fff; }

.upload svg{ width:26px; height:26px; color:var(--blue); margin:0 auto 8px; }

.upload b{ color:var(--ink); font-size:14px; display:block; }

.upload small{ font-size:12.5px; color:#9aa6bd; }

.upload input{ display:none; }

.upload__name{ margin-top:10px; font-size:13px; color:var(--green-dark); font-weight:600; }

.formnote{ display:flex; gap:9px; align-items:center; font-size:13px; color:#33507f; background:#eef4fd; border:1px solid #d7e4f8; border-radius:var(--radius); padding:11px 14px; margin-top:18px; }

.formnote svg{ width:18px; height:18px; color:var(--green); flex:none; }

.form-success{ display:none; gap:10px; align-items:center; background:#eaf6ee; border:1px solid #bfe3cb; color:var(--green-dark); border-radius:var(--radius); padding:14px 16px; font-size:14px; font-weight:500; margin-bottom:18px; }

.form-success.show{ display:flex; }

.form-success svg{ width:20px; height:20px; flex:none; }

@media(max-width:520px){ .form-grid{ grid-template-columns:1fr; } }

/* ====================================================================
   CANBER — Trabajá con nosotros (maqueta fiel al Figma)
   WordPress: formulario con Gravity Forms — campo de subida de archivo para el CV restringido a PDF/DOC y peso máximo. Postulaciones guardadas como entradas + notificación a RRHH. Anti-spam y consentimiento incluidos.
   ==================================================================== */
:root{
  --navy:#1e2c4f; --navy-2:#243a63; --slate:#3a4c70;
  --blue:#2b5cb8; --blue-dark:#21498f; --blue-link:#2f63c4; --steel:#34507f;
  --green:#3fa45e; --green-dark:#2f8c4c;
  --bg:#eef2f8; --bg-2:#f6f9fc;
  --ink:#1e2c4f; --body:#5a6577; --on-dark:#c5cfe2;
  --line:#e3e9f2; --card:#fff;
  --maxw:1200px; --radius:6px;
  --shadow-sm:0 1px 3px rgba(30,44,79,.06),0 1px 2px rgba(30,44,79,.04);
  --shadow-md:0 12px 30px rgba(30,44,79,.10);
  --ff-display:"Oswald","Arial Narrow",sans-serif;
  --ff-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* --- Miniaturas de galería de ficha (añadido del theme) --- */
.gallery__thumbs{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.gallery__thumbs .gthumb{ width:72px; height:72px; padding:0; border:2px solid var(--line); border-radius:var(--radius); background:#fff; cursor:pointer; overflow:hidden; transition:border-color .2s; }
.gallery__thumbs .gthumb img{ width:100%; height:100%; object-fit:contain; }
.gallery__thumbs .gthumb.active,.gallery__thumbs .gthumb:hover{ border-color:var(--blue); }
.filter__title{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--ink); margin:0 0 10px; }

/* ====================================================================
   HOME (front-page) — reconstruido fiel al diseño del Figma
   ==================================================================== */
.hero{ position:relative; background:linear-gradient(120deg,#3c5party 0%,#2b4576 100%); background:linear-gradient(120deg,#3f5f97 0%,#284071 100%); color:#fff; overflow:hidden; }
.hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 80% 20%, rgba(255,255,255,.08), transparent 60%); pointer-events:none; }
.hero .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:64px 24px 88px; position:relative; z-index:1; }
.hero__badge{ display:inline-flex; align-items:center; gap:8px; background:var(--navy); color:#cfe0ff; font-family:var(--ff-display); font-weight:500; text-transform:uppercase; letter-spacing:.12em; font-size:12px; padding:8px 16px; border-radius:40px; }
.hero__badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); }
.hero h1{ font-size:clamp(34px,5vw,60px); line-height:1.02; text-transform:uppercase; margin:18px 0 0; color:#fff; }
.hero h1 .muted{ color:#9db6e0; display:block; }
.hero__text{ font-size:16px; color:#dbe6fb; max-width:560px; margin:20px 0 0; }
.hero__text b{ color:#fff; }
.hero__cta{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.hero__media{ display:flex; justify-content:center; }
.hero__media img{ max-width:100%; height:auto; filter:drop-shadow(0 24px 40px rgba(0,0,0,.35)); border-radius:10px; }
.hero__media .ph{ width:100%; aspect-ratio:4/3; border-radius:12px; background:linear-gradient(135deg,#1b2740,#0f1828); display:flex; align-items:center; justify-content:center; }
.hero__media .ph svg{ width:84px; height:84px; color:#3f74d6; }

/* STATS BAND */
.statband{ background:#3f68a8; color:#fff; }
.statband .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.statband .s{ text-align:center; padding:26px 16px; border-right:1px solid rgba(255,255,255,.15); }
.statband .s:last-child{ border-right:0; }
.statband .s b{ display:block; font-family:var(--ff-display); font-weight:700; font-size:30px; letter-spacing:.02em; }
.statband .s span{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:#cdddf4; margin-top:4px; }

/* SECTION HEAD genérico con subrayado verde */
.shead{ text-align:center; max-width:680px; margin:0 auto 40px; }
.shead .eyebrow{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.2em; font-size:12px; color:var(--green); }
.shead h2{ text-transform:uppercase; font-weight:700; font-size:clamp(26px,3vw,38px); margin:10px 0 0; }
.shead h2::after{ content:""; display:block; width:54px; height:4px; background:var(--green); border-radius:3px; margin:16px auto 0; }
.section{ padding:72px 0; }
.section--light{ background:var(--bg-2); }
.section--soft{ background:var(--bg); }

/* LÍNEAS DE PRODUCTO (home) — proporciones del Figma: media apaisada, card compacta */
.lgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.lcard{ background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .22s ease, box-shadow .25s ease, border-color .22s ease; display:flex; flex-direction:column; }
.lcard:hover{ transform:translateY(-6px); box-shadow:0 14px 32px rgba(20,35,70,.16); border-color:var(--blue-link,#2f6fd0); }
.lcard__media{ position:relative; aspect-ratio:12/5; background:#e9eef6 center/cover no-repeat; display:flex; align-items:flex-end; overflow:hidden; transition:filter .25s ease; }
.lcard:hover .lcard__media{ filter:brightness(1.07); }
.lcard__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(20,30,55,.66)); transition:opacity .25s ease; }
.lcard:hover .lcard__media::after{ opacity:.85; }
.lcard__badge{ position:absolute; top:10px; right:10px; z-index:2; background:var(--blue); color:#fff; font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:10px; padding:4px 9px; border-radius:3px; }
.lcard__name{ position:relative; z-index:2; color:#fff; font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:13px; padding:10px 14px; }
.lcard__body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.lcard__desc{ font-size:13.5px; line-height:1.55; color:var(--body); margin:0; }
.lcard__link{ margin-top:auto; font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.07em; font-size:12px; color:var(--blue-link); display:inline-flex; align-items:center; gap:6px; }
.lcard__link svg{ width:13px; height:13px; transition:transform .22s ease; }
.lcard:hover .lcard__link svg{ transform:translateX(4px); }
.lcard:hover .lcard__link{ text-decoration:underline; text-underline-offset:3px; }
.center-btn{ text-align:center; margin-top:40px; }

/* EMPRESA (navy + timeline) */
.empresa{ background:var(--navy); color:#c5cfe2; }
.empresa .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:76px 24px; }
.empresa .eyebrow{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.2em; font-size:12px; color:var(--green); }
.empresa h2{ color:#fff; text-transform:uppercase; font-weight:700; font-size:clamp(24px,3vw,34px); margin:12px 0 18px; }
.empresa p{ font-size:15px; line-height:1.7; }
.empresa b{ color:#fff; }
.empresa__btns{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.timeline2{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.timeline2 li{ display:flex; gap:16px; align-items:flex-start; }
.timeline2 .yr{ flex:none; width:54px; height:54px; border-radius:6px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-family:var(--ff-display); font-weight:600; font-size:14px; color:#9db6e0; }
.timeline2 p{ margin:0; font-size:14px; color:#c5cfe2; padding-top:6px; }

/* VENTAJAS COMPETITIVAS */
.vgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.vc{ border:1px solid var(--line); border-radius:8px; padding:26px; background:#fff; }
.vc__ic{ width:44px; height:44px; border-radius:8px; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--blue); margin-bottom:16px; }
.vc__ic svg{ width:22px; height:22px; }
.vc h4{ font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:15px; margin:0 0 8px; }
.vc p{ font-size:14px; color:var(--body); margin:0; }

/* TESTIMONIOS */
.tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tcard{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:24px; position:relative; box-shadow:var(--shadow-sm); }
.tcard__stars{ color:#2f9bb8; letter-spacing:2px; font-size:14px; }
.tcard__q{ font-style:italic; color:var(--ink); font-size:14.5px; line-height:1.6; margin:12px 0 18px; }
.tcard__who b{ display:block; font-family:var(--ff-display); font-weight:600; font-size:14px; color:var(--ink); }
.tcard__who span{ font-size:12px; color:var(--body); }
.tcard__mark{ position:absolute; top:16px; right:18px; font-family:Georgia,serif; font-size:40px; color:var(--line); line-height:1; }

/* CTA VOLUMEN */
.cta2{ background:linear-gradient(100deg,#3f68a8,#2f4f86); color:#fff; }
.cta2 .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px 24px; flex-wrap:wrap; }
.cta2 h2{ color:#fff; text-transform:uppercase; font-weight:700; font-size:clamp(20px,2.4vw,26px); }
.cta2 p{ margin:6px 0 0; color:#d6e4fa; font-size:14px; }
.cta2__btns{ display:flex; gap:12px; flex-wrap:wrap; }

/* TRUST STRIP */
.trust{ background:#fff; }
.trust .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:34px 24px; }
.trust .t{ text-align:center; }
.trust .t .ic{ width:44px; height:44px; border-radius:8px; background:var(--bg); display:inline-flex; align-items:center; justify-content:center; color:var(--blue); }
.trust .t .ic svg{ width:22px; height:22px; }
.trust .t b{ display:block; font-family:var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:13px; margin-top:10px; }
.trust .t span{ font-size:12px; color:var(--body); }

@media(max-width:980px){
  .hero .wrap{ grid-template-columns:1fr; padding:48px 24px 64px; }
  .hero__media{ order:-1; }
  .statband .wrap{ grid-template-columns:repeat(2,1fr); }
  .statband .s:nth-child(2){ border-right:0; }
  .lgrid,.vgrid,.tgrid{ grid-template-columns:1fr 1fr; }
  .empresa .wrap{ grid-template-columns:1fr; gap:36px; padding:56px 24px; }
  .trust .wrap{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px){
  .lgrid,.vgrid,.tgrid,.statband .wrap,.trust .wrap{ grid-template-columns:1fr; }
  .statband .s{ border-right:0; border-bottom:1px solid rgba(255,255,255,.15); }
}

/* ====================================================================
   AJUSTES MOBILE — sin scroll horizontal, todo centrado
   ==================================================================== */
/* Garantía dura: ningún elemento genera scroll lateral */
html, body{ overflow-x:hidden; }
/* Los hijos de grid/flex pueden encogerse (evita que un texto largo ensanche la página) */
.hero .wrap > *, .statband .wrap > *, .empresa .wrap > *{ min-width:0; }

@media (max-width:760px){
  /* Topbar centrada; los links utilitarios quedan en el menú y el footer */
  .topbar .wrap{ justify-content:center; height:auto; min-height:36px; padding:7px 16px; }
  .topbar__left{ gap:14px; justify-content:center; }
  .topbar__right{ display:none; }
}

@media (max-width:620px){
  /* Hero centrado y compacto */
  .hero .wrap{ padding:36px 20px 44px; gap:26px; text-align:center; }
  .hero__badge{ margin:0 auto; }
  .hero h1{ font-size:clamp(28px,8.5vw,40px); margin-top:14px; }
  .hero__text{ margin:16px auto 0; font-size:15px; }
  .hero__cta{ flex-direction:column; gap:12px; margin-top:24px; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
  /* La caja del placeholder no ocupa media pantalla cuando está vacía */
  .hero__media .ph{ aspect-ratio:16/10; max-height:200px; }
}

/* ====================================================================
   TIENDA WOO MOBILE — barra de orden/filtros que entra y se acomoda
   ==================================================================== */
/* El desplegable de orden de WooCommerce hereda el estilo del tema */
.toolbar__right form.woocommerce-ordering{ margin:0; }
.toolbar__right select.orderby,
.toolbar__right .woocommerce-ordering select{
  font-family:var(--ff-body); font-size:14px; color:var(--ink);
  border:1px solid var(--line); border-radius:5px; padding:8px 12px;
  background:#fff; cursor:pointer; max-width:100%;
}
/* Los títulos largos nunca se cortan */
.prod__title, .prod__title a{ overflow-wrap:anywhere; }

@media (max-width:620px){
  /* La fila de orden/filtros/vista se acomoda en vez de desbordar */
  .toolbar__right{ flex-wrap:wrap; gap:10px; }
  .toolbar__right > *{ min-width:0; }
  /* El desplegable de orden ocupa todo el ancho disponible */
  .toolbar__right form.woocommerce-ordering{ flex:1 1 100%; }
  .toolbar__right select.orderby,
  .toolbar__right .woocommerce-ordering select{ width:100%; }
  .filter-toggle{ flex:0 0 auto; }
  .view-toggle{ margin-left:auto; flex:0 0 auto; }
}

/* ====================================================================
   CANBER — Buscador de productos
   Dos variantes: 'inline' (dentro de una sección) y 'overlay' (la lupa
   del header). Usa las variables del theme, sin colores nuevos.
   ==================================================================== */
.cbsearch{ position:relative; width:100%; }

.cbsearch__box{
  display:flex; align-items:center; gap:10px;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:0 14px;
  box-shadow:var(--shadow-sm);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.cbsearch__box:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(43,92,184,.13);
}
.cbsearch__ic{ width:19px; height:19px; flex:none; color:var(--blue-link); }
.cbsearch__input{
  flex:1; min-width:0;
  border:0; outline:0; background:none;
  padding:15px 0;
  font-family:var(--ff-body); font-size:15px; color:var(--ink);
}
.cbsearch__input::placeholder{ color:#9aa6b8; }
.cbsearch__input::-webkit-search-cancel-button{ display:none; }
.cbsearch__clear{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; padding:0;
  border:0; border-radius:50%; background:#eef2f8; color:var(--body);
  cursor:pointer; transition:background .15s;
}
.cbsearch__clear:hover{ background:#e935351a; color:#c0392b; }
.cbsearch__clear svg{ width:14px; height:14px; }

/* --- Panel de resultados --- */
.cbsearch__panel{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:300;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  overflow:hidden;
  max-height:min(70vh,520px); overflow-y:auto;
}
.cbsearch__lista{ margin:0; padding:6px; list-style:none; }
.cbsearch__item{
  display:flex; align-items:center; gap:14px;
  padding:10px 12px; border-radius:var(--radius);
  text-decoration:none; transition:background .12s;
}
.cbsearch__item:hover,
.cbsearch__item.is-sel{ background:#f2f6fb; }
.cbsearch__thumb{
  flex:0 0 48px; width:48px; height:48px;
  border:1px solid var(--line); border-radius:5px;
  background:#f6f9fc center/cover no-repeat; overflow:hidden;
}
.cbsearch__thumb img{ width:100%; height:100%; object-fit:contain; }
.cbsearch__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cbsearch__txt b{
  font-family:var(--ff-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.02em;
  font-size:13.5px; line-height:1.25; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cbsearch__txt mark{ background:#fff2b8; color:inherit; padding:0 1px; border-radius:2px; }
.cbsearch__txt small{ font-size:12px; color:#8a97a8; }
.cbsearch__item > svg{ width:15px; height:15px; flex:none; color:var(--blue-link); opacity:0; transition:opacity .15s, transform .15s; }
.cbsearch__item:hover > svg,
.cbsearch__item.is-sel > svg{ opacity:1; transform:translateX(3px); }

.cbsearch__cargando,
.cbsearch__vacio{ padding:18px 20px; font-size:14px; color:var(--body); }
.cbsearch__todos{
  display:block; width:100%;
  padding:13px; border:0; border-top:1px solid var(--line);
  background:#f6f9fc; cursor:pointer;
  font-family:var(--ff-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; font-size:12px;
  color:var(--blue-link); transition:background .15s;
}
.cbsearch__todos:hover{ background:#eaf1f9; }

/* --- Lupa del header --- */
.cblupa{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:none;
  border:1.5px solid var(--line); border-radius:var(--radius);
  background:#fff; color:var(--blue-link);
  cursor:pointer; transition:border-color .16s, background .16s, color .16s;
}
.cblupa:hover{ border-color:var(--blue); background:#f4f8fd; }
.cblupa svg{ width:19px; height:19px; }

/* --- Overlay del buscador --- */
.cboverlay{
  position:fixed; inset:0; z-index:500;
  display:none; align-items:flex-start; justify-content:center;
  padding:12vh 24px 24px;
  background:rgba(20,32,60,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.cboverlay.is-open{ display:flex; animation:cbFade .18s ease; }
@keyframes cbFade{ from{ opacity:0 } to{ opacity:1 } }
.cboverlay__card{
  width:100%; max-width:660px;
  animation:cbUp .22s ease;
}
@keyframes cbUp{ from{ transform:translateY(-12px); opacity:0 } to{ transform:translateY(0); opacity:1 } }
.cboverlay__head{
  display:flex; align-items:center; justify-content:space-between;
  margin:0 0 12px; color:#fff;
}
.cboverlay__head b{
  font-family:var(--ff-display); font-weight:500;
  text-transform:uppercase; letter-spacing:.08em; font-size:12.5px;
}
.cboverlay__x{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff; cursor:pointer;
}
.cboverlay__x:hover{ background:rgba(255,255,255,.28); }
.cboverlay__x svg{ width:16px; height:16px; }
.cboverlay__tip{ margin:12px 0 0; font-size:12.5px; color:#c5cfe2; text-align:center; }
.cboverlay .cbsearch__input{ padding:18px 0; font-size:16px; }

/* --- Buscador dentro del hero del catálogo ---
   El .cathero tiene overflow:hidden para contener la trama decorativa, y eso
   recortaba el panel de resultados. En los heros que llevan buscador se usa el
   modificador .cathero--search, que libera el overflow SIN tocar el resto.
   El z-index alto es para pasar por encima de .aside (sticky) y de las tarjetas. */
.cathero--search{ overflow:visible; }
.cathero__search{
  position:relative; z-index:20;
  max-width:620px; margin:22px 0 0;
}
.cathero__search .cbsearch__panel{ z-index:400; }
/* El panel siempre sobre fondo claro, aunque el hero sea oscuro. */
.cathero__search .cbsearch__vacio,
.cathero__search .cbsearch__cargando{ color:#5a6577; }

/* --- Sin resultados --- */
.cbnores{
  max-width:560px; margin:40px auto 60px; text-align:center;
}
.cbnores > svg{ width:52px; height:52px; margin:0 auto 18px; color:#c3cede; }
.cbnores h2{ font-size:22px; margin:0 0 12px; }
.cbnores p{ margin:0 0 24px; font-size:15px; line-height:1.65; }
.cbnores__btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

@media (max-width:1024px){
  .cblupa{ width:38px; height:38px; }
}
@media (max-width:767px){
  .cboverlay{ padding:8vh 16px 16px; }
  .cbsearch__input{ font-size:16px; } /* 16px evita el zoom automático en iOS */
  .cbsearch__thumb{ flex-basis:40px; width:40px; height:40px; }
  .cathero__search{ max-width:100%; }
}