/* Carne Zungo — hoja de estilo del sitio.
   Generada por _src/build.py: base del mockup + capa multipágina. No editar aquí. */

  :root{
    --bg:#F6F5F1;
    --line:rgba(14,16,42,.14);
    --line-strong:rgba(14,16,42,.34);
    --paper:#14152B; --dim:#6B6B78;
    --red:#A72325; --red2:#8A1C1E;
    --ink-on-dark:#F4F4F1;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg); color:var(--paper); font-family:'Work Sans',sans-serif; -webkit-font-smoothing:antialiased; line-height:1.5;}
  h1,h2,h3{font-family:'Archivo',sans-serif; font-weight:800; letter-spacing:-.01em;}
  a{color:inherit; text-decoration:none;}
  .maxw{max-width:1240px; margin:0 auto; padding:0 40px;}
  .eyebrow{font-family:'Work Sans',sans-serif; font-weight:700; font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--red); margin-bottom:14px; display:block;}
  section{padding:100px 0;}

  /* cleaver cursor on anything clickable */
  a, button, .btn, .panel, .bcard, .ccard, .catcard, .sil-zone, .zone, .chip, .jstep, .pstep, .torungo-float{
    cursor: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22><path d=%22M3 3 L21 3 L26 13 L21 15 L3 15 Z%22 fill=%22%2314152B%22 stroke=%22%23F4F4F1%22 stroke-width=%221%22/><rect x=%224%22 y=%2215%22 width=%227%22 height=%2215%22 rx=%222.5%22 fill=%22%23A72325%22 stroke=%22%23F4F4F1%22 stroke-width=%221%22/></svg>') 4 4, pointer;
  }

  .btn{
    display:inline-flex; align-items:center; gap:8px; font-weight:600;
    font-size:14px; letter-spacing:.02em; padding:14px 26px; border-radius:2px;
    transition:transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--red); color:#fff;}
  .btn-primary:hover{background:var(--red2);}
  .btn-ghost{border:1.5px solid var(--line-strong); color:var(--paper);}
  .btn-ghost:hover{border-color:var(--paper);}

  /* reveal-on-scroll */
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:none;}
  @media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

  /* ---------- nav ---------- */
  nav{position:sticky; top:0; z-index:50; background:rgba(246,245,241,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
  nav .maxw{display:flex; align-items:center; justify-content:space-between; padding:18px 40px;}
  .logo{font-family:'Baloo 2',sans-serif; font-weight:700; font-size:20px; letter-spacing:.04em;}
  .logo span{color:var(--red);}
  .navlinks{display:flex; gap:30px; font-size:13.5px; font-weight:500;}
  .navlinks a{color:var(--dim); transition:color .15s;}
  .navlinks a:hover{color:var(--paper);}
  .navlinks a.active{color:var(--paper); position:relative;}
  .navlinks a.active::after{content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--red);}
  .navcta{display:flex; align-items:center; gap:14px;}
  .navcta .btn{padding:10px 20px; font-size:13px;}
  .torungo-navbtn{width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:14px; color:var(--paper); transition:border-color .15s;}
  .torungo-navbtn:hover{border-color:var(--red);}

  /* ---------- photo placeholder ---------- */
  .pwrap{position:relative; overflow:hidden; border:1px solid var(--line);}

  /* corner-bracket motif, lifted from the client's own catalog frame */
  .bracket{position:relative;}
  .bracket::before, .bracket::after{content:''; position:absolute; width:18px; height:18px; pointer-events:none; border-color:var(--red); z-index:2;}
  .bracket::before{top:-1px; left:-1px; border-top:2px solid; border-left:2px solid;}
  .bracket::after{bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid;}
  .shot{position:absolute; top:-14%; bottom:-14%; left:0; right:0; background:#131315 center/cover no-repeat; display:flex; align-items:center; justify-content:center; will-change:transform;}
  .shot::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,13,.15), rgba(11,11,13,.55));}
  .shot.placeholder{background-color:#131315;}
  .shot.placeholder::before{background:repeating-linear-gradient(45deg, rgba(244,244,245,.035) 0 2px, transparent 2px 14px);}
  .shot-note{position:relative; text-align:center; padding:24px; font-family:'Work Sans',sans-serif; font-weight:600; color:var(--dim); font-size:11.5px; letter-spacing:.04em; line-height:1.6; text-transform:uppercase;}
  .shot-note .cam{font-size:22px; display:block; margin-bottom:10px; opacity:.6;}

  /* ---------- hero ---------- */
  #inicio{padding:0; position:relative; min-height:88vh; display:flex; align-items:flex-end; overflow:hidden;}
  #inicio .shot{top:-16%; bottom:-16%;}
  #inicio .shot-note{position:absolute; top:32px; right:40px; text-align:right; max-width:260px; padding:0; z-index:1;}
  #inicio::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,11,13,1) 8%, rgba(11,11,13,.4) 55%, rgba(11,11,13,.55) 100%);}
  .hero-content{position:relative; z-index:2; padding:0 40px 80px; max-width:1240px; margin:0 auto; width:100%;}
  .hero-tag{font-family:'Work Sans',sans-serif; font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:18px;}
  .hero-tag b{color:var(--red); font-weight:700;}
  h1.hero-h{font-size:clamp(32px,5.2vw,68px); line-height:1.06; max-width:820px; margin-bottom:22px;}
  h1.hero-h .accent{color:var(--red);}
  .hero-sub{font-size:17px; color:var(--dim); max-width:520px; margin-bottom:36px; line-height:1.55;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

  /* the hero stays a deliberate dark exception inside the light page — force light text/controls here regardless of global paper/dim */
  #inicio, #inicio .hero-tag, #inicio .hero-sub, #inicio h1.hero-h{color:var(--ink-on-dark);}
  #inicio .hero-tag{color:rgba(244,244,241,.78);}
  #inicio .hero-sub{color:rgba(244,244,241,.72);}
  #inicio .btn-ghost{border-color:rgba(244,244,241,.45); color:var(--ink-on-dark);}
  #inicio .btn-ghost:hover{border-color:var(--ink-on-dark);}

  /* ---------- nosotros ---------- */
  #nosotros{border-top:1px solid var(--line);}
  .split{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
  #nosotros h2{font-size:38px; margin-bottom:20px; max-width:480px;}
  #nosotros p.lead{color:var(--dim); font-size:15.5px; max-width:460px; margin-bottom:16px;}
  .process{margin-top:90px;}
  .process-label{font-family:'Work Sans',sans-serif; font-weight:700; font-size:11.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.1em; margin-bottom:26px;}
  .process-row{display:grid; grid-template-columns:repeat(8,1fr); border-top:1px solid var(--line);}
  .pstep{padding:24px 14px 4px; border-right:1px solid var(--line); border-bottom:1px solid transparent; transition:border-color .2s;}
  .pstep:nth-child(8n){border-right:none;}
  .pstep:hover{border-bottom-color:var(--red);}
  .picon{width:26px; height:26px; fill:none; stroke:var(--dim); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:14px; transition:stroke .2s;}
  .pstep:hover .picon{stroke:var(--red);}
  .pnum{font-family:'Work Sans',sans-serif; color:var(--dim); font-size:11px; font-weight:600; letter-spacing:.05em;}
  .pname{font-family:'Archivo',sans-serif; font-weight:700; font-size:13.5px; text-transform:uppercase; letter-spacing:.01em; margin-top:4px;}

  /* ---------- marcas ---------- */
  #marcas{border-top:1px solid var(--line);}
  .brandgrid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px;}
  .bcard{background:var(--bg); padding:34px 30px; display:flex; flex-direction:column; justify-content:flex-end; min-height:300px; position:relative; transition:background .2s;}
  .bcard:hover{background:#131315;}
  .bcard.feat{border-top:2px solid var(--red); background:linear-gradient(0deg, rgba(11,11,13,.95), rgba(11,11,13,.55) 55%, rgba(11,11,13,.25)), url('https://images.unsplash.com/photo-1615937691194-97dbd3f3dc29?fm=jpg&q=80&w=1200&auto=format&fit=crop') center/cover;}
  .bmark{font-family:'Archivo',sans-serif; font-weight:800; font-size:26px; margin-bottom:10px; letter-spacing:-.01em;}
  .bcard.feat .bmark{font-size:32px; color:var(--red);}
  .bdesc{font-size:13px; color:var(--dim); line-height:1.5;}
  .btag{position:absolute; top:24px; left:30px; font-family:'Work Sans',sans-serif; font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--red);}

  /* ---------- productos ---------- */
  #productos{border-top:1px solid var(--line);}
  .silhouettes{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:60px;}
  .sil-card{background:var(--bg); padding:34px;}
  .sil-title{font-family:'Archivo',sans-serif; font-weight:800; font-size:19px; text-transform:uppercase; letter-spacing:.02em; margin-bottom:6px;}
  .sil-hint{font-family:'Work Sans',sans-serif; font-weight:600; font-size:10.5px; color:var(--dim); margin-bottom:22px; text-transform:uppercase; letter-spacing:.05em;}

  /* ---- cut maps: the client's own catalog artwork + hoverable zones ---- */
  .cut-card{background:var(--bg); padding:30px 30px 26px;}
  .cut-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:10px;}
  .cut-head .sil-hint{margin-bottom:0;}
  .cut-info{text-align:right; min-width:220px; max-width:300px;}
  .cut-info .ci-name{display:block; font-family:'Archivo',sans-serif; font-weight:800; font-size:17px; color:var(--red); letter-spacing:-.01em; transition:color .15s;}
  .cut-info .ci-cuts{display:block; font-size:12.5px; color:var(--dim); line-height:1.45; margin-top:3px;}
  .cut-wrap{padding:6px 0 4px;}
  svg.cutmap{width:100%; height:auto; display:block; overflow:visible;}
  .zone{fill:rgba(167,35,37,0); stroke:none; transition:fill .18s ease;}
  .zone:hover, .zone.on{fill:rgba(167,35,37,.62);}
  .chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;}
  .chip{font:600 11px 'Work Sans',sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); background:transparent; border:1px solid var(--line); padding:6px 10px; border-radius:2px; transition:all .15s;}
  .chip:hover, .chip.on{color:#fff; background:var(--red); border-color:var(--red);}
  svg.sil{width:100%; height:auto; overflow:visible;}
  .prod-note{margin-top:28px; font-size:12.5px; color:var(--dim); font-style:italic;}
  .catgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:1px;}
  .catcard{background:var(--bg); padding:24px; font-size:13px; color:var(--dim); transition:background .2s;}
  .catcard:hover{background:#131315;}
  .catcard b{display:block; font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; color:var(--paper); text-transform:uppercase; margin-bottom:10px; letter-spacing:.02em;}
  .gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:20px;}
  .gitem{aspect-ratio:3/4; background-size:cover; background-position:center; border:1px solid var(--line); filter:grayscale(15%); transition:transform .35s ease, filter .35s ease;}
  .gitem:hover{transform:scale(1.03); filter:grayscale(0%);}

  /* ---------- soluciones ---------- */
  #soluciones{border-top:1px solid var(--line);}
  .sol-split{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; margin-top:50px;}
  .sol-img{aspect-ratio:4/5; background:url('https://images.unsplash.com/photo-1663530761401-15eefb544889?fm=jpg&q=80&w=1000&auto=format&fit=crop') center/cover; border:1px solid var(--line);}
  .quote-block{max-width:780px; margin:50px 0 70px;}
  .quote-block .big{font-family:'Archivo',sans-serif; font-weight:700; font-size:clamp(24px,3.4vw,40px); line-height:1.25; color:var(--dim);}
  .quote-block .big b{color:var(--paper); font-weight:600;}
  .sectorgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .sector{background:var(--bg); padding:24px 22px; font-size:13.5px; display:flex; align-items:center; gap:12px; transition:background .2s;}
  .sector:hover{background:#131315;}
  .sector .dot{width:6px; height:6px; background:var(--dim); flex:0 0 auto;}
  .sector:hover .dot{background:var(--red);}

  /* ---------- cobertura ---------- */
  #cobertura{border-top:1px solid var(--line);}
  .covwrap{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-top:50px;}
  .cov-stats{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:30px;}
  .stat b{display:block; font-family:'Archivo',sans-serif; font-weight:800; font-size:30px; color:var(--red);}
  .stat span{font-size:12px; color:var(--dim);}

  /* ---------- contacto ---------- */
  #contacto{border-top:1px solid var(--line);}
  .contact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:50px 0 1px;}
  .ccard{background:var(--bg); padding:26px 20px; text-align:left; transition:background .2s;}
  .ccard:hover{background:#131315;}
  .ccard b{display:block; font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; margin-bottom:8px; text-transform:uppercase;}
  .ccard span{font-size:12px; color:var(--dim);}
  .formwrap{background:var(--bg); border:1px solid var(--line); border-top:none; padding:36px; max-width:640px;}
  .formgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
  .fld{display:flex; flex-direction:column; gap:6px;}
  .fld label{font-size:11px; color:var(--dim); font-weight:600; text-transform:uppercase; letter-spacing:.05em;}
  .fld .box{border:1px solid var(--line); background:#fff; height:38px; border-radius:2px; transition:border-color .15s; font:14px 'Work Sans',sans-serif; color:var(--paper); padding:0 12px; width:100%;}
  .fld .box:hover{border-color:var(--line-strong);}
  .fld .box:focus{outline:none; border-color:var(--red);}
  .fld .box.tall{height:80px; padding:10px 12px; resize:vertical;}
  .fld select.box{appearance:none; -webkit-appearance:none; cursor:pointer;}
  .form-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
  .form-note{font-size:12px; color:var(--dim); max-width:320px; line-height:1.4;}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line); padding:50px 0 30px;}
  .footwrap{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px;}
  .footwrap .fnote{font-size:12px; color:var(--dim); max-width:340px; line-height:1.5;}
  .footlinks{display:flex; gap:40px; font-size:12.5px; color:var(--dim); flex-wrap:wrap;}
  .footlinks div b{display:block; color:var(--paper); font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px;}
  .footlinks div a{display:block; margin-bottom:6px; color:var(--dim); transition:color .15s;}
  .footlinks div a:hover{color:var(--paper);}

  /* ---------- torungo floating ---------- */
  .torungo-float{position:fixed; bottom:26px; right:26px; z-index:60; display:flex; align-items:center; gap:10px; background:#14152B; border:1.5px solid var(--red); color:var(--ink-on-dark); padding:12px 18px 12px 12px; border-radius:40px; box-shadow:0 10px 26px rgba(20,21,43,.35); transition:background .15s;}
  .torungo-float:hover{background:var(--red);}
  .torungo-float .bull{width:34px; height:34px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif; font-weight:700;}
  .torungo-float b{font-size:13px; font-weight:700; color:var(--ink-on-dark);}
  .torungo-float span{font-size:10.5px; opacity:.75; display:block; color:var(--ink-on-dark);}

  /* ---------- responsive ---------- */
  @media(max-width:900px){
    .split, .silhouettes, .covwrap, .sol-split{grid-template-columns:1fr;}
    .gallery{grid-template-columns:repeat(2,1fr);}
    .brandgrid{grid-template-columns:1fr 1fr;}
    .catgrid, .sectorgrid, .contact-grid{grid-template-columns:1fr 1fr;}
    .process-row{grid-template-columns:repeat(4,1fr);}
    .pstep:nth-child(4n){border-right:none;} .pstep:nth-child(8n){border-right:1px solid var(--line);}
    .pstep:nth-child(n+5){border-top:1px solid var(--line);}
    .navlinks{display:none;}
    section{padding:64px 0;}
    .maxw{padding:0 24px;}
  }
  @media(max-width:640px){
    .brandgrid, .catgrid, .sectorgrid, .contact-grid, .formgrid{grid-template-columns:1fr;}
    .process-row{grid-template-columns:repeat(2,1fr);}
    .pstep:nth-child(4n){border-right:1px solid var(--line);} .pstep:nth-child(2n){border-right:none;}
    .pstep:nth-child(n+3){border-top:1px solid var(--line);}
    .cov-stats{grid-template-columns:1fr 1fr;}
    .navcta .btn{padding:9px 14px; font-size:12px;}
    .hero-ctas{flex-direction:column; align-items:stretch;}
    nav .maxw{padding:14px 20px;}
    .footwrap{flex-direction:column;}
  }

  /* ---- motion layer (GSAP + Lenis) ---- */
  body.gsap .reveal{opacity:1; transform:none; transition:none;}
  .w{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em;}
  .wi{display:inline-block; will-change:transform;}
  .process-row{position:relative;}
  .pline{position:absolute; top:-1px; left:0; height:2px; width:0; background:var(--red); z-index:1;}
  #cur{position:fixed; top:0; left:0; width:28px; height:28px; border:1.5px solid var(--red); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); opacity:0; transition:width .2s, height .2s, opacity .3s, background .2s; mix-blend-mode:multiply;}
  #cur.big{width:56px; height:56px; background:rgba(167,35,37,.12);}
  body.has-cur #cur{opacity:1;}
  nav.scrolled{box-shadow:0 6px 24px rgba(20,21,43,.08);}
  @media (pointer:coarse){ #cur{display:none;} }

  /* ===================================================================
     CAPA MULTIPÁGINA — todo lo que el mockup de una sola página no traía
     =================================================================== */

  /* ---------- nav multipágina + menú móvil ---------- */
  .navlinks a.current{color:var(--paper); position:relative;}
  .navlinks a.current::after{content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--red);}
  .torungo-navbtn{background:transparent;}
  .navtoggle{display:none; width:38px; height:38px; border:1.5px solid var(--line-strong); background:transparent; border-radius:2px; position:relative;}
  .navtoggle span{position:absolute; left:9px; right:9px; height:1.5px; background:var(--paper); transition:transform .25s ease, opacity .2s ease;}
  .navtoggle span:nth-child(1){top:12px;} .navtoggle span:nth-child(2){top:18px;} .navtoggle span:nth-child(3){top:24px;}
  body.menu-open .navtoggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  body.menu-open .navtoggle span:nth-child(2){opacity:0;}
  body.menu-open .navtoggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  .mobilemenu{position:fixed; inset:0; z-index:70; background:#14152B; color:var(--ink-on-dark); display:flex; flex-direction:column; justify-content:center; padding:0 32px; gap:6px; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;}
  body.menu-open .mobilemenu{opacity:1; visibility:visible;}
  .mobilemenu a{font-family:'Archivo',sans-serif; font-weight:800; font-size:30px; letter-spacing:-.01em; padding:9px 0; border-bottom:1px solid rgba(244,244,241,.1); color:var(--ink-on-dark);}
  .mobilemenu a:last-of-type{border-bottom:none;}
  .mobilemenu a.current{color:var(--red);}
  .mobilemenu .mm-cta{margin-top:26px; align-self:flex-start;}
  .mobilemenu .mm-close{position:absolute; top:20px; right:24px; background:none; border:none; color:var(--ink-on-dark); font-size:30px; line-height:1;}

  /* ---------- hero con video (portada) ---------- */
  .hero-media{position:absolute; inset:0; overflow:hidden; z-index:0;}
  .hero-media video{position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; transform:translate(-50%,-50%); object-fit:cover;}
  .hero-media .poster{position:absolute; inset:0; background:#131315 center/cover no-repeat;}
  .hero-media.playing .poster{opacity:0; transition:opacity .8s ease;}
  .hero-scroll{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:3; font:600 10px 'Work Sans',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,244,241,.6); display:flex; flex-direction:column; align-items:center; gap:8px;}
  .hero-scroll::after{content:''; width:1px; height:26px; background:linear-gradient(180deg, rgba(244,244,241,.6), transparent); animation:scrollpulse 2.2s ease-in-out infinite;}
  @keyframes scrollpulse{0%,100%{opacity:.25; transform:scaleY(.5); transform-origin:top;} 50%{opacity:1; transform:scaleY(1); transform-origin:top;}}
  .video-toggle{position:absolute; bottom:26px; right:32px; z-index:3; background:rgba(20,21,43,.55); border:1px solid rgba(244,244,241,.35); color:var(--ink-on-dark); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; transition:background .15s;}
  .video-toggle:hover{background:var(--red); border-color:var(--red);}
  @media(max-width:1100px){ .hero-scroll{display:none;} }
  @media(max-width:640px){ .video-toggle{display:none;} }

  /* ---------- page hero (páginas internas) ---------- */
  .page-hero{position:relative; padding:0; min-height:46vh; display:flex; align-items:flex-end; overflow:hidden; background:#131315;}
  .page-hero .shot{top:-10%; bottom:-10%;}
  .page-hero::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,11,13,.96) 6%, rgba(11,11,13,.45) 70%, rgba(11,11,13,.5) 100%);}
  .ph-content{position:relative; z-index:2; max-width:1240px; margin:0 auto; width:100%; padding:0 40px 56px;}
  .crumb{font:600 11px 'Work Sans',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,244,241,.6); margin-bottom:16px; display:flex; gap:8px; flex-wrap:wrap;}
  .crumb a{color:rgba(244,244,241,.6);} .crumb a:hover{color:var(--ink-on-dark);}
  .crumb .sep{color:var(--red);}
  .page-hero h1{font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(30px,4.4vw,54px); line-height:1.05; color:var(--ink-on-dark); max-width:760px; letter-spacing:-.01em;}
  .page-hero .ph-sub{margin-top:16px; font-size:16px; color:rgba(244,244,241,.72); max-width:540px; line-height:1.55;}
  @media(max-width:900px){ .ph-content{padding:0 24px 40px;} .page-hero{min-height:38vh;} }

  /* ---------- bloques de contenido reutilizables ---------- */
  .prose{max-width:660px;}
  .prose p{color:var(--dim); font-size:15.5px; line-height:1.7; margin-bottom:16px;}
  .prose p b{color:var(--paper); font-weight:600;}
  .section-head{max-width:620px; margin-bottom:12px;}
  .section-head h2{font-size:34px; margin-bottom:14px;}
  .section-head p{color:var(--dim); font-size:15px; line-height:1.6;}

  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:50px;}
  .grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:50px;}
  .cell{background:var(--bg); padding:32px 28px; transition:background .25s, color .25s;}
  .cell:hover{background:#131315;}
  .cell:hover .cell-t, .cell:hover .cell-n{color:var(--ink-on-dark);}
  .cell-n{font:700 11px 'Work Sans',sans-serif; letter-spacing:.12em; color:var(--red); margin-bottom:14px; display:block;}
  .cell-t{font-family:'Archivo',sans-serif; font-weight:800; font-size:17px; text-transform:uppercase; letter-spacing:.01em; margin-bottom:10px; transition:color .25s;}
  .cell p{font-size:13.5px; color:var(--dim); line-height:1.6;}
  .cell .cicon{width:28px; height:28px; fill:none; stroke:var(--dim); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:18px; transition:stroke .25s;}
  .cell:hover .cicon{stroke:var(--red);}

  /* ---------- valores / pilares ---------- */
  .values{display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-top:60px;}
  .value{border-top:2px solid var(--red); padding-top:20px;}
  .value b{display:block; font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; text-transform:uppercase; margin-bottom:10px;}
  .value span{font-size:13.5px; color:var(--dim); line-height:1.6;}

  /* ---------- timeline de procesos (página procesos) ---------- */
  .steps{margin-top:56px; border-top:1px solid var(--line);}
  .step{display:grid; grid-template-columns:110px 1fr 1fr; gap:40px; padding:38px 0; border-bottom:1px solid var(--line); align-items:start; transition:background .25s;}
  .step:hover{background:rgba(167,35,37,.03);}
  .step .snum{font-family:'Archivo',sans-serif; font-weight:800; font-size:44px; color:var(--line-strong); line-height:1; transition:color .25s;}
  .step:hover .snum{color:var(--red);}
  .step h3{font-size:20px; margin-bottom:10px;}
  .step p{font-size:14px; color:var(--dim); line-height:1.65;}
  .step .sdetail{font-size:13px; color:var(--dim); line-height:1.7;}
  .step .sdetail li{list-style:none; padding-left:16px; position:relative; margin-bottom:7px;}
  .step .sdetail li::before{content:''; position:absolute; left:0; top:8px; width:5px; height:5px; background:var(--red);}
  @media(max-width:900px){ .step{grid-template-columns:60px 1fr; gap:20px;} .step .sdetail{grid-column:2;} .step .snum{font-size:30px;} }

  /* ---------- calidad: certificaciones ---------- */
  .certs{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:50px;}
  .cert{background:var(--bg); padding:30px 24px; text-align:center; transition:background .25s;}
  .cert:hover{background:#131315;}
  .cert .cmark{font-family:'Archivo',sans-serif; font-weight:900; font-size:26px; color:var(--red); letter-spacing:.02em; margin-bottom:10px;}
  .cert b{display:block; font-size:12.5px; font-weight:700; margin-bottom:6px; transition:color .25s;}
  .cert:hover b{color:var(--ink-on-dark);}
  .cert span{font-size:11.5px; color:var(--dim); line-height:1.5;}

  .checklist{display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; margin-top:36px;}
  .checklist li{list-style:none; font-size:14px; color:var(--dim); line-height:1.55; padding-left:28px; position:relative;}
  .checklist li::before{content:''; position:absolute; left:0; top:3px; width:16px; height:16px; border:1.5px solid var(--red);}
  .checklist li::after{content:''; position:absolute; left:5px; top:8px; width:6px; height:3px; border-left:1.5px solid var(--red); border-bottom:1.5px solid var(--red); transform:rotate(-45deg);}
  @media(max-width:640px){ .checklist{grid-template-columns:1fr;} }

  /* ---------- catálogo de productos por categoría ---------- */
  .catnav{display:flex; gap:8px; flex-wrap:wrap; margin-top:36px;}
  .catnav .chip{padding:9px 16px; font-size:11.5px;}
  .prodgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:1px;}
  .prod{background:var(--bg); padding:26px 24px; transition:background .25s;}
  .prod:hover{background:#131315;}
  .prod:hover .pt{color:var(--ink-on-dark);}
  .prod .pt{font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; text-transform:uppercase; margin-bottom:12px; transition:color .25s;}
  .prod ul{list-style:none;}
  .prod li{font-size:13px; color:var(--dim); line-height:1.7; padding-left:14px; position:relative;}
  .prod li::before{content:''; position:absolute; left:0; top:9px; width:5px; height:1.5px; background:var(--red);}
  .prod[hidden]{display:none;}

  /* ---------- banda CTA ---------- */
  .cta-band{background:#14152B; color:var(--ink-on-dark); padding:76px 0; border-top:1px solid var(--line);}
  .cta-band .maxw{display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;}
  .cta-band h2{font-size:clamp(24px,3vw,36px); color:var(--ink-on-dark); max-width:560px; line-height:1.15;}
  .cta-band p{font-size:14px; color:rgba(244,244,241,.65); margin-top:12px; max-width:460px; line-height:1.6;}
  .cta-band .btn-ghost{border-color:rgba(244,244,241,.4); color:var(--ink-on-dark);}
  .cta-band .btn-ghost:hover{border-color:var(--ink-on-dark);}
  .cta-actions{display:flex; gap:12px; flex-wrap:wrap;}

  /* ---------- Torungo: mascota + chat ---------- */
  .tor-bubble{background:#14152B; border:1.5px solid var(--red); color:var(--ink-on-dark); padding:10px 16px; border-radius:20px 20px 4px 20px; font-size:12px; line-height:1.4; max-width:190px; margin-bottom:8px; opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease; pointer-events:none;}
  .tor-bubble.show{opacity:1; transform:none;}
  .tor-btn{width:64px; height:64px; border-radius:50%; background:#14152B; border:1.5px solid var(--red); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(20,21,43,.32); transition:transform .2s ease, background .2s ease;}
  .tor-btn:hover{transform:translateY(-3px); background:var(--red);}
  .tor-btn svg{width:40px; height:40px;}
  .tor-btn .tor-anim{display:flex; align-items:center; justify-content:center;}
  .tor-wrap{position:fixed; bottom:26px; right:26px; z-index:60; display:flex; flex-direction:column; align-items:flex-end;}
  .tor-anim{animation:torbob 3.4s ease-in-out infinite; transform-origin:50% 90%;}
  @keyframes torbob{0%,100%{transform:translateY(0) rotate(0);} 25%{transform:translateY(-3px) rotate(-2.5deg);} 75%{transform:translateY(-2px) rotate(2.5deg);}}
  @media (prefers-reduced-motion: reduce){ .tor-anim{animation:none;} }

  .tor-panel{position:fixed; bottom:104px; right:26px; z-index:61; width:330px; max-width:calc(100vw - 40px); background:var(--bg); border:1px solid var(--line-strong); border-radius:4px; box-shadow:0 20px 50px rgba(20,21,43,.24); overflow:hidden; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease, visibility .25s;}
  .tor-panel.open{opacity:1; visibility:visible; transform:none;}
  .tor-head{background:#14152B; color:var(--ink-on-dark); padding:16px 18px; display:flex; align-items:center; gap:12px;}
  .tor-head svg{width:34px; height:34px; flex:0 0 auto;}
  .tor-head b{font-size:13.5px; display:block;}
  .tor-head span{font-size:11px; opacity:.7;}
  .tor-head .tor-close{margin-left:auto; background:none; border:none; color:var(--ink-on-dark); font-size:20px; line-height:1; opacity:.7;}
  .tor-head .tor-close:hover{opacity:1;}
  .tor-body{padding:18px; max-height:320px; overflow-y:auto;}
  .tor-msg{font-size:13px; line-height:1.55; color:var(--paper); background:#fff; border:1px solid var(--line); padding:12px 14px; border-radius:4px 12px 12px 12px; margin-bottom:12px;}
  .tor-msg.me{background:var(--red); color:#fff; border-color:var(--red); border-radius:12px 4px 12px 12px; margin-left:40px;}
  .tor-opts{display:flex; flex-direction:column; gap:6px; padding:0 18px 18px;}
  .tor-opt{text-align:left; font:600 12px 'Work Sans',sans-serif; color:var(--paper); background:transparent; border:1px solid var(--line); padding:10px 12px; border-radius:2px; transition:all .15s;}
  .tor-opt:hover{border-color:var(--red); color:var(--red);}
  @media(max-width:640px){ .tor-panel{bottom:96px; right:16px;} .tor-wrap{bottom:16px; right:16px;} .tor-bubble{display:none;} }


  /* ---------- mapa de cobertura ---------- */
  .mapwrap{position:relative; border:1px solid var(--line); background:var(--bg); padding:20px;}
  .mapwrap svg{width:100%; height:auto; display:block;}
  .mzone{fill:rgba(20,21,43,.08); stroke:var(--bg); stroke-width:2; transition:fill .2s ease;}
  .mzone:hover, .mzone.on{fill:var(--red);}
  .maplabel{position:absolute; left:20px; bottom:20px; font-size:12.5px; color:var(--dim);}
  .maplabel b{display:block; font-family:'Archivo',sans-serif; font-weight:800; font-size:16px; color:var(--red); text-transform:uppercase;}

  /* ---------- misc ---------- */
  .footlinks div a.current{color:var(--paper);}
  .figcap{font-size:11.5px; color:var(--dim); margin-top:10px; letter-spacing:.03em;}
  .note-box{border-left:2px solid var(--red); padding:4px 0 4px 20px; margin-top:30px; font-size:13.5px; color:var(--dim); line-height:1.65; max-width:560px;}
  .anchor-offset{scroll-margin-top:90px;}

  @media(max-width:900px){
    .navtoggle{display:block;}
    .navcta .btn{display:none;}
    .grid3, .values, .certs, .prodgrid{grid-template-columns:1fr 1fr;}
    .cta-band .maxw{flex-direction:column; align-items:flex-start;}
  }
  @media(max-width:640px){
    .grid3, .grid2, .values, .certs, .prodgrid{grid-template-columns:1fr;}
    .catnav{gap:6px;}
  }

  /* ---------- contraste en hover ----------
     Varias tarjetas heredadas del mockup se oscurecen al pasar el cursor (#131315)
     pero conservaban el texto oscuro: quedaba ilegible. El texto sube a claro. */
  .bcard:hover .bmark, .bcard:hover .bdesc,
  .catcard:hover, .catcard:hover b,
  .sector:hover,
  .ccard:hover b, .ccard:hover span,
  .cell:hover p,
  .cert:hover span,
  .prod:hover li{
    color:var(--ink-on-dark);
  }
  .bcard:hover .bdesc, .catcard:hover, .ccard:hover span, .cell:hover p, .cert:hover span, .prod:hover li{
    color:rgba(244,244,241,.74);
  }
  .bcard.feat:hover .bmark{color:var(--red);}   /* la marca principal conserva su rojo sobre foto */
  .sector:hover .dot{background:var(--red);}
  .prod:hover li::before, .catcard:hover b::after{background:var(--red);}

  /* ===================================================================
     TORUNGO — seis emplazamientos
     Cada slot muestra el render 3D (assets/img/torungo/<pose>.png) y cae al
     vectorial si el archivo no existe. Movimiento contenido a propósito: la
     mascota entra una vez, hace su gesto y se queda quieta.
     =================================================================== */
  .tor-spot{position:absolute; z-index:3; pointer-events:none; line-height:0;}
  .tor-spot img.tor-render, .tor-spot .tor-fallback{display:block; width:100%; height:auto;}
  .tor-spot .tor-fallback svg{width:100%; height:auto; display:block;}

  /* Una sola capa por slot: cuál se emite lo decide el build según lo que haya
     en assets/img/torungo, así que aquí no hay nada que ocultar ni sondear.

     hoja de sprites: tira horizontal de --frames cuadros del mismo tamaño.
     El fotograma se elige moviendo el fondo, no recortando: es el método más
     barato que hay (una sola imagen, una sola propiedad animada, cero reflow). */
  .tor-spot .tor-sprite{
    display:block; width:100%; aspect-ratio:var(--ar, 3 / 4);
    background-repeat:no-repeat;
    background-size:calc(var(--frames, 1) * 100%) 100%;
    background-position:0 0;
  }

  /* entrada: se asoma una sola vez cuando su sección aparece */
  .tor-spot{opacity:0; transform:translateY(18px) scale(.96); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1.2);}
  .tor-spot.in{opacity:1; transform:none;}
  @media (prefers-reduced-motion: reduce){ .tor-spot{opacity:1; transform:none; transition:none;} }

  /* 1 · portada: asomado en el borde inferior, sin tapar el titular.
     Se aparta del botón flotante del chat, que ocupa esa misma esquina. */
  .tor-spot--saludo{right:190px; bottom:0; width:150px;}
  .tor-spot--saludo.in{transform:translateY(6%);}
  @media(max-width:1250px){ .tor-spot--saludo{display:none;} }   /* con menos aire se monta sobre los CTA */

  /* 2 · productos: parado sobre el marco del mapa de cortes, señalando la silueta.
     Va en el flujo y no en posición absoluta: a la izquierda del contenedor no hay
     margen libre en pantallas normales y quedaba pegado al borde de la ventana. */
  .tor-spot--senala{position:relative; width:96px; margin:34px 0 -16px 6px; z-index:4;}
  .tor-spot--senala.in{transform:translateY(0);}
  @media(max-width:900px){ .tor-spot--senala{width:72px; margin:26px 0 -12px 4px;} }
  @media(max-width:640px){ .tor-spot--senala{width:58px;} }

  /* 3 · procesos: sobrevuela la línea roja conforme avanza el scroll */
  .tor-spot--sobrevuela{left:0; top:-64px; width:104px; will-change:transform;}
  .tor-spot--sobrevuela.in{opacity:1;}
  @media(max-width:900px){ .tor-spot--sobrevuela{display:none;} }

  /* (4 · la caja en la banda de cotización se retiró: se pisaba con los botones
     del CTA y con el vuelo sobre el mapa ya eran demasiadas apariciones seguidas) */

  /* 5 · formulario: de pie al costado del formulario, tomando nota. Va en el hueco
     libre a la derecha del bloque para no cubrir las tarjetas ni los campos. */
  .tor-spot--tablilla{left:100%; margin-left:34px; bottom:34px; width:120px;}
  @media(max-width:1180px){ .tor-spot--tablilla{width:92px; margin-left:22px;} }
  @media(max-width:1000px){ .tor-spot--tablilla{display:none;} }

  /* contenedores que hospedan un slot necesitan referencia de posición */
  .tor-host{position:relative;}

  /* ---------- mapa de cortes en móvil ----------
     .cut-head es flex con .cut-info de min-width 220px: en pantallas angostas la
     suma con el título superaba el ancho del contenedor y empujaba la página. */
  @media(max-width:760px){
    .cut-card{padding:22px 20px 20px;}
    .cut-head{flex-direction:column; gap:12px;}
    .cut-info{text-align:left; min-width:0; max-width:none;}
  }

  /* ===================================================================
     ESCENA "ENTRA Y PASA"
     El mismo mecanismo del carro de Gelato La Boca: una pista de scroll alta
     con el contenido pegado (sticky) encima, de forma que el usuario conduce
     el paso del personaje con la rueda del ratón. La diferencia es el peso:
     ellos cargan 112 archivos sueltos (~4.9 MB); aquí el movimiento lo hace un
     transform y los fotogramas, cuando existan, salen de una sola hoja.
     =================================================================== */
  .tor-escena{--suelo:16%; padding:0; background:#14152B; color:var(--ink-on-dark); border-top:1px solid var(--line);}
  .tor-escena-pista{height:var(--pista, 240vh); position:relative;}
  .tor-escena-sticky{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center;}

  /* horizonte: da suelo al personaje para que no flote en el vacío */
  .tor-escena-piso{position:absolute; left:0; right:0; bottom:var(--suelo); height:1px; background:linear-gradient(90deg, transparent, rgba(244,244,241,.18) 15%, rgba(244,244,241,.18) 85%, transparent);}
  .tor-escena-sticky::after{content:''; position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 60%, rgba(167,35,37,.16), transparent 60%); pointer-events:none;}

  .tor-escena-texto{position:relative; z-index:2; max-width:1240px;}
  .tor-escena-texto h2{font-size:clamp(28px,4vw,52px); line-height:1.1; color:var(--ink-on-dark); max-width:560px;}
  .tor-escena-texto p{margin:18px 0 28px; font-size:15px; line-height:1.6; color:rgba(244,244,241,.7); max-width:440px;}

  /* el personaje: cruza el encuadre de izquierda a derecha con el scroll */
  .tor-escena-figura{position:absolute; bottom:var(--suelo); left:0; width:clamp(150px, 20vw, 280px); z-index:3; will-change:transform; transform:translateX(-40vw);}
  .tor-escena-figura img.tor-render, .tor-escena-figura .tor-fallback{display:block; width:100%; height:auto;}
  .tor-escena-figura .tor-fallback svg{width:100%; height:auto; display:block;}
  .tor-escena-figura .tor-sprite{
    display:block; width:100%; aspect-ratio:var(--ar, 2 / 3);
    background-repeat:no-repeat; background-size:calc(var(--frames, 1) * 100%) 100%;
  }

  /* sin JS, sin scroll o con movimiento reducido: escena quieta y legible */
  .tor-escena.quieta .tor-escena-pista{height:auto;}
  .tor-escena.quieta .tor-escena-sticky{position:static; height:auto; padding:90px 0; align-items:flex-end;}
  .tor-escena.quieta .tor-escena-figura{position:relative; bottom:auto; transform:none; margin:30px 0 0 auto; width:200px;}
  .tor-escena.quieta .tor-escena-piso{display:none;}

  @media(max-width:900px){
    .tor-escena{--suelo:12%;}
    .tor-escena-pista{height:180vh;}
    .tor-escena-figura{width:130px;}
    .tor-escena-texto p{font-size:14px;}
  }
  @media (prefers-reduced-motion: reduce){
    .tor-escena-pista{height:auto;}
    .tor-escena-sticky{position:static; height:auto; padding:80px 0; flex-direction:column; align-items:flex-start; gap:30px;}
    .tor-escena-figura{position:relative; bottom:auto; transform:none; width:180px;}
    .tor-escena-piso{display:none;}
  }

  /* ---------- Torungo sobrevolando la cobertura ----------
     Cruza la sección de izquierda a derecha con el scroll y va encendiendo las
     regiones del mapa a su paso: el mapa entra por su vuelo, no por un temporizador. */
  .tor-spot--vuela{top:14%; left:0;   /* provisional: el JS lo alinea con el centro del mapa */ width:clamp(120px, 15vw, 210px); z-index:4; opacity:1; transform:translateX(-40vw);}
  .tor-spot--vuela.in{transform:translateX(-40vw);}   /* aquí manda el JS, no la entrada genérica */
  @media(max-width:900px){ .tor-spot--vuela{width:110px;} }
  @media(max-width:640px){ .tor-spot--vuela{display:none;} }

  /* las regiones esperan apagadas y aterrizan cuando Torungo pasa por encima */
  .mapwrap[data-mapa-vuelo] .mzone{
    opacity:0; transform:scale(.8); transform-box:fill-box; transform-origin:center;
    transition:opacity .3s ease, transform .42s cubic-bezier(.2,.9,.3,1.4), fill .2s ease;
  }
  .mapwrap[data-mapa-vuelo] .mzone.llego{opacity:1; transform:none;}
  /* el contorno se ve siempre: es el mapa vacío que se va llenando */
  @media (prefers-reduced-motion: reduce){
    .mapwrap[data-mapa-vuelo] .mzone{opacity:1; transform:none; transition:fill .2s ease;}
  }

  /* ===================================================================
     PRODUCTOS — capa fotográfica interactiva
     Dos piezas: una tira que arranca sola al entrar en la sección, y un visor
     que cambia la foto grande según la familia que el cursor toca. Inspirado en
     savor.it, pero sin su peso: allí son imágenes sueltas a pantalla completa;
     aquí una tira que reutiliza las mismas fotos en dos filas.
     =================================================================== */

  /* ---------- tira de arranque ---------- */
  .tira{position:relative; overflow:hidden; margin-top:44px; padding:0; --vel:46s;}
  .tira + .tira{margin-top:12px;}
  .tira::before, .tira::after{content:''; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;}
  .tira::before{left:0; background:linear-gradient(90deg, var(--bg), transparent);}
  .tira::after{right:0; background:linear-gradient(270deg, var(--bg), transparent);}
  .tira-pista{display:flex; gap:12px; width:max-content; animation:desfile var(--vel) linear infinite; will-change:transform;}
  .tira.rev .tira-pista{animation-direction:reverse;}
  .tira:hover .tira-pista{animation-play-state:paused;}
  @keyframes desfile{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion: reduce){ .tira-pista{animation:none;} .tira{overflow-x:auto;} }

  .foto{position:relative; flex:0 0 auto; width:270px; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); background:#131315;}

  /* entrada: las fotos llegan flotando, escalonadas, y sólo entonces la tira
     empieza a desfilar. El retardo lo pone el JS por índice. */

  @media (prefers-reduced-motion: reduce){
    .tira-pista .foto{opacity:1; transform:none;}
  }
  .tira .foto{cursor:pointer;}
  .foto img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(28%) brightness(.82); transition:filter .45s ease;}
  .foto:hover img{filter:grayscale(0%) brightness(1.06);}

  /* Reacción al cursor: cada foto se levanta y crece según lo cerca que pase el
     ratón, y las vecinas la acompañan un poco. El JS escribe --p (0 a 1) por
     foto; aquí sólo se traduce a movimiento. Sin cursor —móvil— --p se queda en
     0 y la tira es una fila normal que desfila. */
  .tira-pista .foto{
    --p:0;                                   /* cercanía del cursor, 0 a 1 */
    --dy:44px; --dx:0px; --rot:-2deg; --esc:.9;   /* estado de llegada; el JS los varía por foto */
    opacity:0;
    z-index:calc(1 + var(--p) * 10);
    transform:
      translate(var(--dx), calc(var(--dy) + var(--p) * -18px))
      scale(calc(var(--esc) + var(--p) * .13))
      rotate(var(--rot));
    box-shadow:0 calc(var(--p) * 26px) calc(var(--p) * 46px) rgba(11,11,13,calc(var(--p) * .45));
    transition:opacity .8s ease, transform .38s cubic-bezier(.2,.8,.3,1), box-shadow .38s ease;
  }
  /* al aterrizar, la foto se coloca y a partir de ahí sólo manda el cursor */
  .tira.entrando .foto{opacity:1; --dy:0px; --dx:0px; --rot:0deg; --esc:1;}
  .tira.entrando .foto{transition:opacity .8s ease, transform 1.05s cubic-bezier(.16,.9,.28,1.08), box-shadow .38s ease;}
  .tira.posada .foto{transition:opacity .8s ease, transform .38s cubic-bezier(.2,.8,.3,1), box-shadow .38s ease;}
  .tira-pista .foto img{transform:scale(calc(1 + var(--p) * .06)); transition:transform .38s cubic-bezier(.2,.8,.3,1), filter .45s ease;}
  .foto figcaption{position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px; font:700 10.5px 'Work Sans',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-on-dark); background:linear-gradient(0deg, rgba(11,11,13,.85), transparent); opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease;}
  .foto:hover figcaption{opacity:1; transform:none;}
  @media(max-width:640px){ .foto{width:200px;} .tira::before,.tira::after{width:40px;} }

  /* ---------- visor: la familia manda la foto ---------- */
  .visor{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px;}
  .visor-lista{background:var(--bg); padding:0; display:flex; flex-direction:column;}
  .visor-item{background:transparent; border:none; border-bottom:1px solid var(--line); text-align:left; padding:22px 26px; display:flex; align-items:baseline; gap:16px; transition:background .25s ease, padding .25s ease; width:100%;}
  .visor-item:last-child{border-bottom:none;}
  .visor-item .vi-n{font:700 10.5px 'Work Sans',sans-serif; color:var(--line-strong); letter-spacing:.1em; transition:color .25s;}
  .visor-item .vi-t{font-family:'Archivo',sans-serif; font-weight:800; font-size:17px; text-transform:uppercase; letter-spacing:.01em; color:var(--paper); transition:color .25s;}
  .visor-item .vi-d{display:block; font:400 12.5px 'Work Sans',sans-serif; color:var(--dim); text-transform:none; letter-spacing:0; margin-top:5px; line-height:1.5;}
  .visor-item:hover, .visor-item.on{background:#131315; padding-left:34px;}
  .visor-item:hover .vi-t, .visor-item.on .vi-t{color:var(--ink-on-dark);}
  .visor-item:hover .vi-n, .visor-item.on .vi-n{color:var(--red);}
  .visor-item:hover .vi-d, .visor-item.on .vi-d{color:rgba(244,244,241,.7);}

  .visor-foto{position:relative; background:#131315; overflow:hidden; min-height:420px;}
  .visor-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity .55s ease, transform 1.1s cubic-bezier(.2,.8,.3,1);}
  .visor-foto img.on{opacity:1; transform:none;}
  .visor-pie{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:40px 28px 22px; background:linear-gradient(0deg, rgba(11,11,13,.9), transparent); color:var(--ink-on-dark);}
  .visor-pie b{display:block; font-family:'Archivo',sans-serif; font-weight:800; font-size:19px; text-transform:uppercase; letter-spacing:.01em;}
  .visor-pie span{display:block; font-size:12.5px; color:rgba(244,244,241,.72); margin-top:5px; line-height:1.5;}
  @media(max-width:900px){
    .visor{grid-template-columns:1fr;}
    .visor-foto{min-height:300px; order:-1;}
    .visor-item{padding:18px 20px;}
    .visor-item:hover, .visor-item.on{padding-left:26px;}
  }

  /* ---------- logotipos de marca ----------
     El logotipo va como en el original: símbolo CZ rojo y CARNE ZUNGO en dos
     líneas, ambas en el azul de la marca. Antes ZUNGO salía en rojo, que era el
     estilo del mockup y no el del logo. */
  .logo{display:inline-flex; align-items:center;}
  .logo .logo-cz{margin-bottom:0;}
  /* .logo span del mockup pintaba ZUNGO en rojo y ganaba por especificidad:
     hace falta la doble clase para que mande el azul del logotipo real */
  .logo .logo-cz-txt, .logo-cz .logo-cz-txt{color:var(--paper);}
  footer .logo{display:flex;}
  .mobilemenu .logo .logo-cz-txt{color:var(--ink-on-dark);}

  .bmark-logo{display:block; width:auto; max-width:78%; margin-bottom:12px; filter:drop-shadow(0 1px 0 rgba(255,255,255,.5));}
  .bcard:hover .bmark-logo{filter:brightness(0) invert(1);}      /* el fondo se oscurece: el logo pasa a blanco */
  .marca-logo{display:block; height:70px; width:auto; max-width:100%; margin-bottom:18px;}
  .visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  @media(max-width:640px){ .marca-logo{height:54px;} }

  /* ---------- mapa de cobertura: geografía real ----------
     Los 32 estados salen de un GeoJSON público proyectado a SVG en el build.
     El país entero se dibuja apagado como contexto y sólo los seis estados con
     ruta directa responden al cursor: así se ve de un vistazo dónde llega el
     reparto propio y dónde hace falta pedir alto mayoreo. */
  .mapa-base path{fill:rgba(20,21,43,.07); stroke:var(--bg); stroke-width:1.2; vector-effect:non-scaling-stroke;}
  .mapa-ruta .mzone{fill:rgba(167,35,37,.30); stroke:var(--bg); stroke-width:1.4; vector-effect:non-scaling-stroke; cursor:pointer;}
  .mapwrap[data-mapa-vuelo] .mapa-ruta .mzone{opacity:0; transform:scale(.9);}
  .mapwrap[data-mapa-vuelo] .mapa-ruta .mzone.llego{opacity:1; transform:none;}
  .mapa-ruta .mzone:hover, .mapa-ruta .mzone.on{fill:var(--red);}

  /* ---------- logotipo compuesto de Carne Zungo ---------- */
  .logo-cz{display:flex; align-items:center; gap:calc(var(--h) * .22); margin-bottom:14px;}
  .logo-cz img{height:var(--h); width:auto; display:block; flex:0 0 auto;}
  .logo-cz-txt{font-family:'Archivo',sans-serif; font-weight:900; font-size:calc(var(--h) * .44);
               line-height:.92; letter-spacing:-.02em; color:var(--paper); white-space:nowrap;}
  .bcard.feat .logo-cz-txt{color:var(--ink-on-dark);}
  .bcard:hover .logo-cz-txt{color:var(--ink-on-dark);}
  @media(max-width:640px){ .logo-cz{gap:calc(var(--h) * .16);} }

  /* ---------- iconos del proceso ----------
     Redibujados y con trazo algo más grueso: a 26 px el 1.6 original se veía
     deslavado y los detalles finos se perdían. */
  .picon{width:30px; height:30px; stroke-width:1.7;}
  .pstep:hover .picon{stroke:var(--red);}
  @media(max-width:640px){ .picon{width:26px; height:26px;} }

  /* ---------- tarjetas de marca: foto de fondo, logo y texto delante ----------
     Las tres iguales. Antes sólo la principal llevaba foto y las otras dos eran
     cajas vacías con el logo estirado en una caja de proporción equivocada. */
  .brandgrid .bcard{
    position:relative; overflow:hidden; min-height:330px;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:34px 30px; background:#131315;
  }
  .brandgrid .bcard::before{
    content:''; position:absolute; inset:0; z-index:0;
    background-image:var(--foto); background-size:cover; background-position:center;
    transform:scale(1.02); transition:transform 1.1s cubic-bezier(.2,.8,.3,1); 
  }
  .brandgrid .bcard::after{
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(0deg, rgba(11,11,13,.94) 12%, rgba(11,11,13,.55) 58%, rgba(11,11,13,.35));
    transition:background .3s ease;
  }
  .brandgrid .bcard:hover::before{transform:scale(1.07);}
  .brandgrid .bcard:hover::after{background:linear-gradient(0deg, rgba(11,11,13,.96) 14%, rgba(167,35,37,.42) 70%, rgba(11,11,13,.4));}
  .brandgrid .bcard.feat{border-top:2px solid var(--red);}
  .brandgrid .btag, .brandgrid .bcard-logo, .brandgrid .bdesc{position:relative; z-index:2;}
  .brandgrid .btag{top:auto; left:auto; position:absolute; top:24px; left:30px; color:var(--red);}
  .brandgrid .bdesc{color:rgba(244,244,241,.78);}

  /* el logo conserva SIEMPRE su proporción: se fija el alto y el ancho es libre */
  .bcard-logo{display:block; margin-bottom:16px;}
  .bcard-logo img{height:52px; width:auto; max-width:100%; display:block;}
  .bcard-logo--cz .logo-cz{margin-bottom:0;}
  /* Los logos van a su color de marca y sobre transparente, sin placa ni caja.
     Para que Meat Royale —granate y negro— se lea sobre foto oscura, el peso lo
     hace una sombra proyectada y un oscurecido extra bajo el logo, no un recuadro. */
  .brandgrid .bcard-logo{
    align-self:flex-start; position:relative; overflow:visible;
    transition:transform 1.2s cubic-bezier(.2,.8,.3,1), filter .5s ease;
    filter:drop-shadow(0 2px 10px rgba(11,11,13,.9)) drop-shadow(0 0 26px rgba(11,11,13,.75));
  }
  .brandgrid .bcard-logo img{filter:none;}
  .brandgrid .bcard::after{
    background:linear-gradient(0deg, rgba(11,11,13,.95) 10%, rgba(11,11,13,.72) 42%, rgba(11,11,13,.34));
  }

  /* al acercar el cursor: zoom lento y un realce del brillo */
  .brandgrid .bcard:hover .bcard-logo{
    transform:scale(1.07);
    filter:drop-shadow(0 3px 14px rgba(11,11,13,.95)) drop-shadow(0 0 30px rgba(167,35,37,.5)) brightness(1.12);
  }
  @media (prefers-reduced-motion: reduce){
    .brandgrid .bcard:hover .bcard-logo{transform:none;}
  }

  @media(max-width:900px){ .brandgrid .bcard{min-height:250px;} .bcard-logo img{height:42px;} }

  /* ---------- resaltado de zonas recortado a la silueta ----------
     Los polígonos están trazados a mano y nunca van a casar al píxel con el
     dibujo. Recortarlos a la silueta del animal quita el error que se veía —el
     rojo saliéndose por fuera del contorno— y el desenfoque del borde de la
     máscara remata el filo. Por dentro puede sobrar un pelo y no se aprecia. */
  svg.cutmap .zonas{pointer-events:auto;}
  .zone{fill:rgba(167,35,37,0); stroke:none; transition:fill .18s ease;}
  .zone:hover, .zone.on{fill:rgba(167,35,37,.72);}

  /* ---------- pie: aviso legal y crédito ---------- */
  .footbase{margin-top:36px; padding-top:20px; border-top:1px solid var(--line);
            display:flex; justify-content:space-between; align-items:center; gap:16px;
            flex-wrap:wrap; font-size:11.5px; color:var(--dim);}
  .footbase .credito a{color:var(--dim); border-bottom:1px solid transparent; transition:color .15s, border-color .15s;}
  .footbase .credito a:hover{color:var(--red); border-bottom-color:var(--red);}
  @media(max-width:640px){ .footbase{flex-direction:column; align-items:flex-start; gap:8px;} }