/* ============================================================
   CEMENTOS CUAUHTÉMOC — Sistema de diseño compartido
   Base concreto claro · navy de marca para titulares · rojo de acción
   Tipografía: Archivo + IBM Plex Mono
   Cargado por todas las páginas. Contrato visual: index.html (aprobado).
   ============================================================ */

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

:root{
  --bg:      #EBEDF1;   /* concreto claro, base de página (frío, no beige) */
  --bg-2:    #F4F5F7;   /* sección alterna clara */
  --surface: #FFFFFF;   /* cards */

  --navy:    #16243F;   /* marca / titulares (del logo) */
  --navy-2:  #1E3157;   /* navy elevado para bandas */
  --ink:     #16243F;
  --body:    #45506A;   /* texto cuerpo, >=6:1 sobre --bg */
  --muted:   #66708A;   /* texto terciario, >=4.5:1 */

  --line:    rgba(22,36,63,.12);
  --line-2:  rgba(22,36,63,.20);

  /* Sobre bandas navy */
  --on-navy:      #EBEFF7;
  --on-navy-dim:  #A7B2C8;
  --line-navy:    rgba(255,255,255,.12);
  --line-navy-2:  rgba(255,255,255,.22);

  --accent:    #C4392B;   /* rojo de acción */
  --accent-2:  #A72E22;   /* rojo hover */
  --accent-br: #D9482F;   /* rojo micro-acento */

  --r: 10px;              /* radio cards/paneles */
  --r-sm: 6px;            /* radio botones/inputs */
  --r-pill: 999px;

  --shadow:    0 1px 2px rgba(22,36,63,.05), 0 10px 26px -16px rgba(22,36,63,.20);
  --shadow-lg: 0 4px 10px rgba(22,36,63,.06), 0 26px 52px -20px rgba(22,36,63,.30);

  --maxw: 1240px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);

  --fs-hero: clamp(2.6rem, 5.6vw, 4.75rem);
  --fs-h2:   clamp(1.9rem, 3.6vw, 3.1rem);
  --fs-h3:   clamp(1.15rem, 1.5vw, 1.35rem);

  --ease: cubic-bezier(.16,1,.3,1);

  /* Escala z-index semántica */
  --z-dropdown: 30;
  --z-fab: 40;
  --z-header: 50;
  --z-mnav: 70;
  --z-skip: 80;
}

html{ scroll-behavior:smooth; }
/* Lenis smooth scroll */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis.lenis-smooth iframe{ pointer-events:none; }
body{
  font-family:'Archivo', system-ui, sans-serif;
  background:var(--bg); color:var(--body);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
main section[id]{ scroll-margin-top:90px; }

/* Foco de teclado coherente */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:none; }

/* Skip link */
.skip{ position:absolute; left:1rem; top:-4rem; z-index:var(--z-skip); background:var(--accent); color:#fff; padding:.7rem 1.1rem; border-radius:var(--r-sm); font-weight:700; text-decoration:none; transition:top .2s var(--ease); }
.skip:focus{ top:1rem; }

/* Tipografía */
.mono{ font-family:'IBM Plex Mono', monospace; }
h1,h2,h3,h4{ line-height:1.04; font-weight:800; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
p{ text-wrap:pretty; }
.kicker{
  font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--accent-2); font-weight:500;
  display:inline-flex; align-items:center; gap:.6rem;
}
.kicker::before{ content:""; width:26px; height:2px; background:var(--accent); }

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:'Archivo', sans-serif; font-weight:700; font-size:.95rem; white-space:nowrap;
  padding:.95rem 1.55rem; border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; text-decoration:none;
  transition:transform .18s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.btn i{ font-size:1.15em; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--accent{ background:var(--accent); color:#fff; box-shadow:0 8px 20px -10px rgba(196,57,43,.6); }
.btn--accent:hover{ background:var(--accent-2); transform:translateY(-2px); }
.btn--navy{ background:var(--navy); color:#fff; }
.btn--navy:hover{ background:var(--navy-2); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--navy); background:rgba(22,36,63,.04); transform:translateY(-2px); }
/* variantes sobre navy oscuro */
.btn--light{ background:#fff; color:var(--navy); }
.btn--light:hover{ background:#eef1f6; transform:translateY(-2px); }
.btn--ghost-d{ background:transparent; color:#fff; border-color:var(--line-navy-2); }
.btn--ghost-d:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px); }
.btn--sm{ padding:.68rem 1.1rem; font-size:.85rem; }
.btn--block{ width:100%; }

/* Icono WhatsApp (SVG oficial, hereda color) */
.ico-wa{ width:1.15em; height:1.15em; fill:currentColor; display:inline-block; vertical-align:-.16em; flex-shrink:0; }

/* Reveal (sólo con JS) */
.js .reveal{ opacity:0; transform:translate3d(0,18px,0); transition:opacity .55s var(--ease), transform .55s var(--ease); will-change:opacity, transform; }
.js .reveal.in{ opacity:1; transform:none; will-change:auto; }
.js [data-delay="1"]{ transition-delay:.07s; }
.js [data-delay="2"]{ transition-delay:.14s; }
.js [data-delay="3"]{ transition-delay:.21s; }

/* ── UTILITY BAR ─────────────────────────────────────────── */
.utility{ background:var(--bg-2); border-bottom:1px solid var(--line); font-family:'IBM Plex Mono', monospace; font-size:.74rem; color:var(--muted); }
.utility .wrap{ display:flex; gap:1.8rem; align-items:center; height:40px; justify-content:flex-end; flex-wrap:wrap; }
.utility span{ display:inline-flex; align-items:center; gap:.5rem; }
.utility i{ color:var(--accent); font-size:1rem; }
.utility .u-loc{ margin-right:auto; }

/* ── HEADER (fijo, translúcido arriba → sólido en scroll) ─── */
.header{ position:fixed; top:0; left:0; right:0; z-index:var(--z-header); transition:background .35s, box-shadow .35s; }
.header.scrolled{ background:rgba(238,240,244,.82); backdrop-filter:blur(16px) saturate(140%); box-shadow:0 1px 0 var(--line); }
.header .wrap{ display:flex; align-items:center; gap:1.5rem; height:84px; transition:height .35s var(--ease); }
.header.scrolled .wrap{ height:66px; }
/* Logo: blanco grande arriba, azul más chico al hacer scroll (cross-fade + scale) */
.brand{ position:relative; flex-shrink:0; text-decoration:none; display:block; line-height:0; }
.brand img{ display:block; width:auto; transition:height .35s var(--ease), opacity .35s; }
.brand .logo-white{ height:66px; }
.brand .logo-blue{ height:66px; position:absolute; top:0; left:0; opacity:0; }
.header.scrolled .brand .logo-white{ opacity:0; height:48px; }
.header.scrolled .brand .logo-blue{ opacity:1; height:48px; }
/* En páginas de fondo claro (no-hero) el header arranca ya sólido */
.header.solid .brand .logo-white{ opacity:0; }
.header.solid .brand .logo-blue{ opacity:1; }
.nav{ display:flex; gap:.2rem; align-items:center; margin-inline:auto; }
.nav a{ color:rgba(255,255,255,.9); font-size:.92rem; font-weight:600; text-decoration:none; padding:.5rem .85rem; border-radius:var(--r-sm); transition:color .25s, background .25s; }
.nav a:hover{ color:#fff; background:rgba(255,255,255,.14); }
.nav a[aria-current="page"]{ color:#fff; }
.nav a[aria-current="page"]::after{ content:""; }
.header.scrolled .nav a, .header.solid .nav a{ color:var(--body); }
.header.scrolled .nav a:hover, .header.solid .nav a:hover{ color:var(--navy); background:rgba(22,36,63,.05); }
.header.scrolled .nav a[aria-current="page"], .header.solid .nav a[aria-current="page"]{ color:var(--navy); background:rgba(22,36,63,.06); }
.header-cta{ display:flex; align-items:center; gap:.9rem; flex-shrink:0; }
.tel{ color:#fff; font-family:'IBM Plex Mono',monospace; font-size:.85rem; font-weight:500; text-decoration:none; display:flex; align-items:center; gap:.4rem; transition:color .25s; }
.tel i{ color:#fff; transition:color .25s; }
.header.scrolled .tel, .header.solid .tel{ color:var(--navy); }
.header.scrolled .tel i, .header.solid .tel i{ color:var(--accent); }
.burger{ display:none; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.4); color:#fff; width:44px; height:44px; border-radius:var(--r-sm); font-size:1.4rem; cursor:pointer; transition:.25s; }
.header.scrolled .burger, .header.solid .burger{ background:none; border-color:var(--line-2); color:var(--navy); }

/* Mobile nav */
.mnav{ position:fixed; inset:0; z-index:var(--z-mnav); background:var(--bg); transform:translateX(100%); transition:transform .4s var(--ease); display:flex; flex-direction:column; padding:1.6rem var(--pad); }
.mnav.open{ transform:none; }
.mnav-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; }
.mnav-top img{ height:44px; }
.mnav a{ color:var(--navy); text-decoration:none; font-size:1.5rem; font-weight:800; letter-spacing:-.02em; padding:1rem 0; border-bottom:1px solid var(--line); }
.mnav .btn{ margin-top:auto; }
.mnav-close{ background:none; border:none; color:var(--navy); font-size:2rem; cursor:pointer; }

/* ── SECTION SHELL ───────────────────────────────────────── */
.section{ padding-block:clamp(4.5rem,8vw,7.5rem); }
.section--white{ background:var(--surface); }
.section--alt{ background:var(--bg-2); }
/* Fondo fotográfico sutil detrás de una sección clara */
.section--bg{ position:relative; isolation:isolate; }
.section--bg::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(180deg, rgba(235,237,241,.9), rgba(235,237,241,.97)), var(--bg-img);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.section--bg > .wrap{ position:relative; z-index:1; }
.section-head{ max-width:60ch; margin-bottom:clamp(2.4rem,4.5vw,3.6rem); }
.section-head .kicker{ margin-bottom:1.1rem; }
.section-head h2{ font-size:var(--fs-h2); }
.section-head p{ color:var(--body); font-size:1.1rem; margin-top:1.1rem; max-width:56ch; }

/* ── FORMULARIOS ─────────────────────────────────────────── */
.form-card{ background:var(--surface); border-radius:var(--r); padding:clamp(1.7rem,3vw,2.3rem); box-shadow:var(--shadow-lg); }
.form-card h3{ font-size:1.45rem; font-weight:800; }
.form-card .f-sub{ color:var(--muted); font-size:.92rem; margin:.4rem 0 1.5rem; }
.field{ margin-bottom:.95rem; }
.field label{ display:block; font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--body); font-weight:500; margin-bottom:.4rem; }
.field input, .field select, .field textarea{ width:100%; min-height:46px; border:1px solid var(--line-2); background:#fff; border-radius:var(--r-sm); padding:.7rem .85rem; font-family:'Archivo',sans-serif; font-size:.95rem; color:var(--ink); transition:border-color .2s, box-shadow .2s; }
.field textarea{ resize:vertical; line-height:1.5; }
.field input::placeholder, .field textarea::placeholder{ color:#69738c; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(196,57,43,.14); }
.f-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.f-note{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--muted); text-align:center; margin-top:.9rem; display:flex; align-items:center; justify-content:center; gap:.4rem; }

/* ── FOOTER (banda navy) ─────────────────────────────────── */
.footer{ background:var(--navy); color:var(--on-navy-dim); padding-top:clamp(3.5rem,6vw,5rem); }
.footer .cols{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid var(--line-navy); }
.footer .f-logo{ height:54px; margin-bottom:1.3rem; }
.footer .f-desc{ font-size:.95rem; margin-bottom:1.2rem; max-width:34ch; }
.f-contact{ display:flex; flex-direction:column; gap:.55rem; }
.f-contact a, .f-contact span{ color:var(--on-navy-dim); font-size:.9rem; text-decoration:none; display:flex; align-items:center; gap:.6rem; transition:color .2s; }
.f-contact a:hover{ color:#fff; }
.f-contact i{ color:#F0A79C; }
.footer h4{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-navy-dim); margin-bottom:1.1rem; font-weight:500; opacity:.75; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:.65rem; }
.footer ul a{ color:var(--on-navy-dim); text-decoration:none; font-size:.92rem; transition:color .2s; }
.footer ul a:hover{ color:#fff; }
.socials{ display:flex; gap:.6rem; margin-top:1.3rem; }
.socials a{ width:44px; height:44px; border:1px solid var(--line-navy-2); border-radius:var(--r-sm); display:grid; place-items:center; color:var(--on-navy-dim); text-decoration:none; transition:.2s; }
.socials a:hover{ color:#fff; background:var(--accent); border-color:var(--accent); }
.f-bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:1.5rem; font-size:.8rem; color:var(--on-navy-dim); opacity:.7; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace; }
.f-bottom a{ color:inherit; text-decoration:underline; }

/* ── WHATSAPP FAB ────────────────────────────────────────── */
.fab{ position:fixed; bottom:1.5rem; right:1.5rem; z-index:var(--z-fab); width:58px; height:58px; border-radius:var(--r-pill); background:#25D366; color:#fff; display:grid; place-items:center; font-size:1.8rem; box-shadow:0 12px 30px -8px rgba(37,211,102,.6); text-decoration:none; transition:transform .2s var(--ease); }
.fab:hover{ transform:scale(1.08); }

/* Iconos de fuente (Flaticon) centrados en chips: line-height:1 evita que el
   glifo quede pegado a la línea base; el translateY compensa la asimetría de
   métricas de uicons-regular-straight (el glifo se dibuja ~0.1em alto) */
.socials a i, .fab i, .s-ico i, .ct-ico i, .b-ico i, .r-ico i{ line-height:1; }
.s-ico i, .ct-ico i, .b-ico i, .r-ico i{ transform:translateY(.1em); }

/* ══════════════════════════════════════════════════════════
   COMPONENTES DE SUBPÁGINA (fichas, nosotros, contacto, calc)
   ══════════════════════════════════════════════════════════ */

/* ── SUBHERO (encabezado de página interior sobre navy) ──── */
.subhero{ position:relative; overflow:hidden; background:var(--navy); color:var(--on-navy); padding-top:clamp(7rem,11vw,9.5rem); padding-bottom:clamp(2.6rem,5vw,4rem); isolation:isolate; }
.subhero::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(120% 140% at 85% -10%, rgba(196,57,43,.28), transparent 55%), linear-gradient(180deg, #12203a, #16243F); }
.subhero.has-img::before{ background-image:linear-gradient(90deg, rgba(15,24,44,.94) 0%, rgba(15,24,44,.72) 55%, rgba(15,24,44,.42) 100%), var(--bg-img); background-size:cover; background-position:center; }
.subhero .kicker{ color:#F0A79C; }
.subhero .kicker::before{ background:var(--accent-br); }
.subhero h1{ color:#fff; font-size:clamp(2.1rem,4.4vw,3.4rem); font-weight:900; letter-spacing:-.03em; max-width:20ch; margin-top:1rem; }
.subhero .sub{ color:var(--on-navy-dim); font-size:clamp(1.02rem,1.4vw,1.2rem); margin-top:1.1rem; max-width:56ch; }
/* Entrada del contenido intro del subhero (fade-up escalonado, gated tras .js) */
@keyframes subUp{ from{ opacity:0; transform:translate3d(0,12px,0); } to{ opacity:1; transform:none; } }
.js .subhero .kicker, .js .subhero h1, .js .subhero .sub{ opacity:0; animation:subUp .5s var(--ease) both; }
.js .subhero .kicker{ animation-delay:.1s; }
.js .subhero h1{ animation-delay:.18s; }
.js .subhero .sub{ animation-delay:.28s; }

/* Breadcrumb */
.crumbs{ font-family:'IBM Plex Mono',monospace; font-size:.74rem; letter-spacing:.04em; color:var(--on-navy-dim); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.crumbs a{ color:var(--on-navy-dim); text-decoration:none; transition:color .2s; }
.crumbs a:hover{ color:#fff; }
.crumbs i{ font-size:.9rem; opacity:.6; }
.crumbs [aria-current]{ color:#fff; }
/* Variante clara del breadcrumb (sobre fondo claro) */
.crumbs--light{ color:var(--muted); }
.crumbs--light a{ color:var(--muted); }
.crumbs--light a:hover{ color:var(--navy); }
.crumbs--light [aria-current]{ color:var(--navy); }

/* ── PROSE (texto largo legible) ─────────────────────────── */
.prose{ max-width:68ch; }
.prose p{ color:var(--body); font-size:1.05rem; margin-bottom:1.1rem; }
.prose h3{ font-size:clamp(1.3rem,2vw,1.7rem); margin:2rem 0 .8rem; }
.prose ul{ list-style:none; display:grid; gap:.7rem; margin:1.1rem 0; }
.prose ul li{ display:flex; gap:.7rem; color:var(--body); }
.prose ul li i{ color:var(--accent); font-size:1.15rem; flex-shrink:0; margin-top:.1rem; }

/* ── PLACEHOLDER DE IMAGEN (recurso pendiente) ───────────── */
.ph-img{ position:relative; display:grid; place-items:center; text-align:center; background:repeating-linear-gradient(135deg, #e2e5ea, #e2e5ea 14px, #dcdfe6 14px, #dcdfe6 28px); color:var(--muted); border-radius:var(--r); border:1px dashed var(--line-2); padding:1.5rem; overflow:hidden; }
.ph-img .ph-in{ max-width:34ch; }
.ph-img i{ font-size:2rem; color:var(--navy); opacity:.55; }
.ph-img .ph-t{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); margin:.7rem 0 .3rem; font-weight:600; }
.ph-img .ph-d{ font-size:.82rem; line-height:1.4; }
.ph-img.on-navy{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.05) 14px, rgba(255,255,255,.09) 14px, rgba(255,255,255,.09) 28px); border-color:var(--line-navy-2); color:var(--on-navy-dim); }
.ph-img.on-navy i, .ph-img.on-navy .ph-t{ color:#fff; opacity:.8; }

/* ── CTA FINAL (reutilizado del index) ───────────────────── */
.cta-final{ position:relative; overflow:hidden; background:var(--accent); text-align:center; padding-block:clamp(3.5rem,7vw,5.5rem); }
.cta-final::before{ content:""; position:absolute; inset:-16% 0; background:url(bg-cta.jpg) center/cover; opacity:.38; mix-blend-mode:multiply; transform:translateY(var(--py,0px)); will-change:transform; }
.cta-final .wrap{ position:relative; z-index:1; }
.cta-final h2{ color:#fff; font-size:var(--fs-h2); max-width:20ch; margin:0 auto; }
.cta-final p{ color:rgba(255,255,255,.92); font-size:1.1rem; margin:1.1rem auto 2rem; max-width:48ch; }
.cta-final .btns{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* ══════════════════════════════════════════════════════════
   FICHA DE PRODUCTO
   ══════════════════════════════════════════════════════════ */
.pd-top{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.pd-visual{ position:relative; border-radius:var(--r); overflow:hidden; background:linear-gradient(155deg,#FFFFFF 0%, #DFE3E9 100%); aspect-ratio:4/3.4; display:grid; place-items:center; box-shadow:var(--shadow); }
.pd-visual img{ width:100%; height:100%; object-fit:contain; padding:clamp(1.6rem,4vw,3rem); filter:drop-shadow(0 26px 34px rgba(22,36,63,.26)); }
.pd-visual .pd-badge{ position:absolute; top:1rem; left:1rem; font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; background:var(--accent); color:#fff; padding:.4rem .8rem; border-radius:var(--r-pill); font-weight:600; }
.pd-info .p-tag{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2); }
.pd-info h1{ font-size:clamp(2rem,4vw,3rem); font-weight:900; letter-spacing:-.03em; margin:.5rem 0 .9rem; }
.pd-info .pd-lead{ color:var(--body); font-size:1.1rem; max-width:48ch; }
.pd-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.4rem 0; }
.chip{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--navy); background:rgba(22,36,63,.06); border-radius:var(--r-pill); padding:.4rem .85rem; }
.chip i{ color:var(--accent); margin-right:.35rem; }
.pd-ctas{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.4rem; }

/* Barra de datos rápidos bajo el encabezado del producto */
.pd-quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); margin-top:clamp(2rem,4vw,3rem); }
.pd-quick div{ padding:1.1rem 1.3rem; }
.pd-quick div + div{ border-left:1px solid var(--line); }
.pd-quick .q-n{ font-family:'IBM Plex Mono',monospace; font-size:1.35rem; font-weight:600; color:var(--navy); }
.pd-quick .q-l{ font-size:.82rem; color:var(--muted); margin-top:.2rem; }

/* Usos: tiles con icono */
.use-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:clamp(.9rem,2vw,1.2rem); }
.use{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.use:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.use i{ font-size:1.7rem; color:var(--accent); }
.use h3{ font-size:1.05rem; font-weight:800; margin:.7rem 0 .3rem; }
.use p{ color:var(--muted); font-size:.9rem; }

/* Ventajas: filas con check */
.adv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.2rem 2.5rem; }
.adv{ display:flex; gap:.9rem; padding:1.15rem 0; border-top:1px solid var(--line); }
.adv i{ color:var(--accent); font-size:1.35rem; flex-shrink:0; }
.adv h3{ font-size:1.02rem; font-weight:800; }
.adv p{ color:var(--body); font-size:.92rem; margin-top:.2rem; }

/* Recomendaciones: checklist + almacenamiento */
.rec-layout{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(1.4rem,3vw,2.5rem); align-items:start; }
.rec-list{ display:grid; gap:.2rem; }
.rec-list li{ list-style:none; display:flex; gap:.85rem; padding:1rem 0; border-top:1px solid var(--line); color:var(--body); }
.rec-list li:first-child{ border-top:0; }
.rec-list i{ color:var(--accent); font-size:1.25rem; flex-shrink:0; }
.store-card{ background:var(--navy); color:var(--on-navy); border-radius:var(--r); padding:clamp(1.5rem,3vw,2rem); }
.store-card .s-ico{ width:52px; height:52px; border-radius:var(--r-sm); background:rgba(255,255,255,.08); border:1px solid var(--line-navy); display:grid; place-items:center; color:#F0A79C; font-size:1.5rem; margin-bottom:1rem; }
.store-card h3{ color:#fff; font-size:1.2rem; }
.store-card ul{ list-style:none; display:grid; gap:.7rem; margin-top:1rem; }
.store-card li{ display:flex; gap:.6rem; color:var(--on-navy-dim); font-size:.92rem; }
.store-card li i{ color:#F0A79C; flex-shrink:0; margin-top:.15rem; }

/* Ficha técnica: tabla mono */
.spec-table{ width:100%; border-collapse:collapse; background:var(--surface); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.spec-table th, .spec-table td{ text-align:left; padding:1rem 1.3rem; border-bottom:1px solid var(--line); font-size:.95rem; }
.spec-table tr:last-child th, .spec-table tr:last-child td{ border-bottom:0; }
.spec-table th{ font-weight:600; color:var(--body); width:44%; }
.spec-table td{ font-family:'IBM Plex Mono',monospace; color:var(--navy); font-weight:500; }
.spec-note{ font-size:.8rem; color:var(--muted); margin-top:1rem; max-width:62ch; }

/* Producto relacionado (cross-sell) */
.rel-card{ display:flex; gap:1.5rem; align-items:center; background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); padding:clamp(1.2rem,2.5vw,1.8rem); flex-wrap:wrap; }
.rel-media{ width:130px; aspect-ratio:1; border-radius:var(--r-sm); background:linear-gradient(155deg,#fff,#E4E7EC); display:grid; place-items:center; flex-shrink:0; }
.rel-media img{ width:100%; height:100%; object-fit:contain; padding:.9rem; filter:drop-shadow(0 12px 16px rgba(22,36,63,.2)); }
.rel-body{ flex:1; min-width:220px; }
.rel-body .p-tag{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2); }
.rel-body h3{ font-size:1.3rem; font-weight:800; margin:.3rem 0 .4rem; }
.rel-body p{ color:var(--muted); font-size:.92rem; margin-bottom:.9rem; }

/* ══════════════════════════════════════════════════════════
   CONTACTO / DISTRIBUIDORES
   ══════════════════════════════════════════════════════════ */
.ct-layout{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(1.6rem,4vw,3rem); align-items:stretch; }
.ct-col{ display:flex; flex-direction:column; }
.ct-info{ display:grid; gap:1rem; }
.ct-layout .form-card{ display:flex; flex-direction:column; }
.ct-layout .form-card form{ display:flex; flex-direction:column; flex:1; }
.ct-layout .form-card form .btn{ margin-top:auto; }
.ct-item{ display:flex; gap:1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.3rem 1.4rem; transition:box-shadow .3s, transform .3s var(--ease); text-decoration:none; }
a.ct-item:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.ct-item .ct-ico{ width:46px; height:46px; border-radius:var(--r-sm); background:rgba(196,57,43,.1); display:grid; place-items:center; color:var(--accent); font-size:1.35rem; flex-shrink:0; }
.ct-item h3{ font-size:1rem; font-weight:800; color:var(--ink); }
.ct-item p{ color:var(--body); font-size:.92rem; margin-top:.2rem; }
.ct-item .ct-sub{ color:var(--muted); font-size:.82rem; }
.ct-hours{ font-family:'IBM Plex Mono',monospace; font-size:.85rem; color:var(--navy); }

/* Beneficios de la red */
.ben-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(1rem,2.5vw,1.5rem); }
.ben{ padding:1.6rem; border-radius:var(--r); background:rgba(255,255,255,.04); border:1px solid var(--line-navy); }
.ben .b-ico{ width:50px; height:50px; border-radius:var(--r-sm); background:rgba(255,255,255,.07); border:1px solid var(--line-navy); display:grid; place-items:center; color:#F0A79C; font-size:1.5rem; margin-bottom:1rem; }
.ben h3{ color:#fff; font-size:1.1rem; font-weight:800; }
.ben p{ color:var(--on-navy-dim); font-size:.92rem; margin-top:.5rem; }
.ben-band{ background:var(--navy); color:var(--on-navy); }

/* Pasos para unirse */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.2rem; counter-reset:step; }
.step{ position:relative; padding-top:.5rem; }
.step .s-num{ font-family:'IBM Plex Mono',monospace; font-size:.9rem; color:var(--accent-2); font-weight:600; }
.step h3{ font-size:1.08rem; font-weight:800; margin:.5rem 0 .3rem; }
.step p{ color:var(--body); font-size:.92rem; }
.step::before{ content:""; display:block; width:36px; height:3px; background:var(--accent); border-radius:2px; margin-bottom:.9rem; }

/* ══════════════════════════════════════════════════════════
   CALCULADORA DE MATERIAL
   ══════════════════════════════════════════════════════════ */
.calc{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.2rem); align-items:stretch; }
.calc-form{ background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:clamp(1.6rem,3vw,2.3rem); }
.calc-step-h{ display:flex; align-items:center; gap:.6rem; font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2); margin-bottom:1rem; }
.calc-step-h span{ width:22px; height:22px; border-radius:var(--r-pill); background:var(--accent); color:#fff; display:grid; place-items:center; font-size:.72rem; }
/* Selector de tipo de obra */
.type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1.6rem; }
.type-opt{ position:relative; }
.type-opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.type-opt label{ display:flex; flex-direction:column; gap:.35rem; padding:1rem; border:1px solid var(--line-2); border-radius:var(--r-sm); cursor:pointer; transition:border-color .2s, background .2s, box-shadow .2s; height:100%; }
.type-opt i{ font-size:1.5rem; color:var(--navy); }
.type-opt .t-t{ font-weight:700; font-size:.95rem; color:var(--ink); }
.type-opt .t-d{ font-size:.78rem; color:var(--muted); }
.type-opt input:checked + label{ border-color:var(--accent); background:rgba(196,57,43,.05); box-shadow:0 0 0 2px rgba(196,57,43,.18); }
.type-opt input:checked + label i{ color:var(--accent); }
.type-opt input:focus-visible + label{ outline:2px solid var(--accent); outline-offset:2px; }
/* Grupos de campos dinámicos */
.calc-fields{ display:none; }
.calc-fields.active{ display:block; animation:calcIn .35s var(--ease) both; }
@keyframes calcIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.field .f-hint{ font-family:'Archivo',sans-serif; font-size:.78rem; color:var(--muted); text-transform:none; letter-spacing:0; margin-top:.35rem; display:block; font-weight:400; }
.input-unit{ position:relative; }
.input-unit .u{ position:absolute; right:.85rem; top:50%; transform:translateY(-50%); font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--muted); pointer-events:none; }
.input-unit input{ padding-right:2.6rem; }

/* Panel de resultados */
.calc-results{ background:var(--navy); color:var(--on-navy); border-radius:var(--r); padding:clamp(1.6rem,3vw,2.3rem); display:flex; flex-direction:column; }
.calc-results h2{ color:#fff; font-size:1.4rem; }
.calc-results .r-sub{ color:var(--on-navy-dim); font-size:.9rem; margin:.4rem 0 1.4rem; }
.res-empty{ color:var(--on-navy-dim); font-size:.95rem; text-align:center; padding:2.5rem 1rem; }
.res-empty i{ font-size:2.2rem; color:#F0A79C; opacity:.6; display:block; margin-bottom:.8rem; }
.res-list{ display:grid; gap:.7rem; }
.res-row{ display:flex; align-items:center; gap:1rem; background:rgba(255,255,255,.05); border:1px solid var(--line-navy); border-radius:var(--r-sm); padding:1rem 1.15rem; }
.res-row .r-ico{ width:44px; height:44px; border-radius:var(--r-sm); background:rgba(255,255,255,.07); display:grid; place-items:center; color:#F0A79C; font-size:1.4rem; flex-shrink:0; }
.res-row .r-mat{ flex:1; }
.res-row .r-mat .m-n{ color:#fff; font-weight:700; }
.res-row .r-mat .m-s{ color:var(--on-navy-dim); font-size:.8rem; }
.res-row .r-qty{ font-family:'IBM Plex Mono',monospace; font-size:1.5rem; font-weight:600; color:#fff; text-align:right; line-height:1; }
.res-row .r-qty small{ display:block; font-size:.7rem; color:var(--on-navy-dim); margin-top:.25rem; font-weight:400; }
.res-vol{ font-family:'IBM Plex Mono',monospace; font-size:.85rem; color:var(--on-navy-dim); margin:1.2rem 0; display:flex; justify-content:space-between; gap:1rem; padding-bottom:1.2rem; border-bottom:1px solid var(--line-navy); }
.res-vol b{ color:#fff; }
.res-cta{ margin-top:1.4rem; }
.res-disc{ font-size:.76rem; color:var(--on-navy-dim); margin-top:1rem; line-height:1.5; }

/* ── PUNTOS DE VENTA (reciclado del index) ───────────────── */
.dist-layout{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(1.2rem,2.5vw,2rem); align-items:stretch; }
.dist-map{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); min-height:440px; background:var(--bg-2); }
.dist-map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.35) contrast(1.02); }
.dist-right{ display:flex; flex-direction:column; gap:1rem; }
.dist-list{ background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.dist-item{ padding:1.05rem 1.3rem; transition:background .2s, box-shadow .2s; cursor:pointer; outline:none; position:relative; }
.dist-item + .dist-item{ border-top:1px solid var(--line); }
.dist-item:hover, .dist-item:focus-visible, .dist-item.is-active{ background:var(--bg-2); }
.dist-item.is-active{ box-shadow:inset 3px 0 0 var(--accent); }
.dist-item h4{ font-size:1rem; font-weight:700; display:flex; align-items:center; gap:.55rem; }
.dist-item h4::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--accent); flex-shrink:0; }
.dist-item p{ color:var(--muted); font-size:.85rem; margin-top:.35rem; padding-left:1.25rem; }
.dist-item .d-tel{ font-family:'IBM Plex Mono',monospace; color:var(--accent-2); font-size:.85rem; margin-top:.4rem; padding-left:1.25rem; }
.dist-help{ background:var(--navy); color:var(--on-navy); border-radius:var(--r); padding:1.5rem; margin-top:auto; }
.dist-help h4{ color:#fff; font-size:1.1rem; font-weight:800; }
.dist-help p{ color:var(--on-navy-dim); font-size:.9rem; margin:.5rem 0 1.1rem; }

/* ── BANDA CON FOTO DE FONDO (reutiliza el tratamiento del index B2B) ── */
.photoband{ position:relative; overflow:hidden; background:var(--navy); color:var(--on-navy); }
.photoband::before{ content:""; position:absolute; inset:-14% 0; background:url(b2b-bg.jpg) center right/cover; transform:translateY(var(--py,0px)); will-change:transform; }
.photoband::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(22,36,63,.96) 0%, rgba(22,36,63,.9) 42%, rgba(22,36,63,.66) 100%); }
.photoband > .wrap{ position:relative; z-index:1; }
.photoband .kicker{ color:#F0A79C; }
.photoband .kicker::before{ background:var(--accent-br); }
.join-grid{ display:grid; grid-template-columns:1fr 460px; gap:clamp(2.2rem,5vw,4rem); align-items:start; }
.join-grid .steps{ grid-template-columns:1fr; margin-top:1.4rem; }

/* ── RESPONSIVE (base compartida) ────────────────────────── */
@media (max-width:900px){
  .join-grid{ grid-template-columns:1fr; }
  .dist-layout{ grid-template-columns:1fr; }
  .dist-map{ min-height:320px; }
  .pd-quick{ grid-template-columns:1fr 1fr; }
  .pd-quick div:nth-child(3), .pd-quick div:nth-child(4){ border-top:1px solid var(--line); }
  .pd-quick div:nth-child(odd){ border-left:0; }
  .adv-grid{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .pd-top{ grid-template-columns:1fr; }
  .pd-visual{ aspect-ratio:4/3; }
  .rec-layout{ grid-template-columns:1fr; }
  .ct-layout{ grid-template-columns:1fr; }
  .calc{ grid-template-columns:1fr; }
  .calc-results{ position:static; }
  .type-grid{ grid-template-columns:1fr; }
}
@media (max-width:1024px){
  .nav{ display:none; }
  .burger{ display:grid; place-items:center; }
  .header-cta{ margin-left:auto; }
  .header-cta .btn{ display:none; }
  .footer .cols{ grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width:768px){
  .utility{ display:none; }
  .f-grid{ grid-template-columns:1fr; }
  .footer .cols{ grid-template-columns:1fr; }
  .tel span{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; }
  .js .subhero .kicker, .js .subhero h1, .js .subhero .sub{ opacity:1; animation:none; }
}
/* Honeypot anti-spam: debe permanecer fuera de pantalla, no usar display:none. */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}

/* FAQ */
.faq-list{ max-width:72ch; display:grid; gap:1.5rem; }
.faq-item h3{ font-size:clamp(1.02rem,1.8vw,1.18rem); margin-bottom:.4rem; }
.faq-item p{ max-width:65ch; }

/* Burbuja flotante de WhatsApp */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:block; width:56px; height:56px; border-radius:50%;
  box-shadow:0 6px 18px rgba(10,25,60,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.wa-float img{ display:block; width:100%; height:100%; }
.wa-float:hover{ transform:scale(1.08); box-shadow:0 10px 24px rgba(10,25,60,.36); }
.wa-float:focus-visible{ outline:3px solid #0F2E5C; outline-offset:3px; }
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,.55); animation:wa-pulse 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes wa-pulse{
  0%{ transform:scale(1); opacity:.9; }
  70%{ transform:scale(1.45); opacity:0; }
  100%{ transform:scale(1.45); opacity:0; }
}
@media (max-width:640px){
  .wa-float{ width:50px; height:50px; right:14px; bottom:14px; }
}
@media (prefers-reduced-motion:reduce){
  .wa-float::before{ animation:none; opacity:0; }
  .wa-float:hover{ transform:none; }
}