:root{
    --ink:#000;--graphite:#000;--ink-soft:#3a3c42;--muted:#7a7d84;
    --line:#e6e7ea;--line-strong:#d3d5d9;--bg:#ffffff;--bg-soft:#f5f5f6;
    --radius:16px;
    --shadow-sm:0 1px 2px rgba(13,13,15,.06),0 4px 16px rgba(13,13,15,.05);
    --shadow-md:0 8px 30px rgba(13,13,15,.12);
    --shadow-lg:0 24px 60px rgba(13,13,15,.20);
    --max:1200px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'Manrope',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3,h4{font-family:'Archivo',sans-serif;line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
  .eyebrow{font-family:'Manrope';font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:.95rem;padding:.85rem 1.5rem;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.25s ease;white-space:nowrap}
  .btn-primary{background:var(--ink);color:#fff}
  .btn-primary:hover{background:#000;transform:translateY(-2px);box-shadow:0 12px 26px rgba(13,13,15,.28)}
  .btn-white{background:#fff;color:var(--ink)}
  .btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
  .btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
  .btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}

  /* ============ TOP BANNER ============ */
  .topbar{background:#000;color:#fff}
  .topbar-inner{display:flex;align-items:center;justify-content:space-between;height:128px;gap:1rem}
  /* LOGO: logo real incrustado (base64) en .rex-logo */
  .rex-logo{display:flex;align-items:center}
  .rex-logo-img{height:96px;width:auto;display:block}
  .rex-logo .rw{font-family:'Baloo 2','Manrope',sans-serif;font-weight:800;font-size:2.7rem;line-height:.9;color:#fff;letter-spacing:-.04em;text-transform:lowercase}
  .rex-logo .reg{align-self:flex-start;margin-top:.5rem;font-size:.58rem;font-weight:700;color:#fff}
  .rex-logo .chev{margin-left:.35rem;display:block}
  .social{display:flex;gap:.5rem}
  .social a{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.09);transition:.2s}
  .social a:hover{background:#fff;color:#000;transform:translateY(-2px)}
  /* línea de paleta — mosaico de cuadritos con separación negra, solo muestra */
  .palette-line{display:flex;gap:1.5px;background:#000;height:10px;width:100%;overflow:hidden;padding:1px 0}
  .palette-line i{flex:0 0 7px;height:100%;display:block}
  /* ===== MENÚ (bajo el banner) ===== */
  .mainmenu{background:#000;border-top:1px solid rgba(255,255,255,.06)}
  .menu-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
  .menu-left{display:flex;align-items:center;gap:1rem;color:#fff}
  .burger{display:inline-flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:2px}
  .burger span{width:26px;height:3px;background:#fff;border-radius:3px;transition:.25s}
  .menu-left .plabel{font-family:'Manrope';font-weight:700;font-size:1.05rem;color:#fff}
  .menu-right{display:flex;align-items:center;gap:2rem}
  .menu-right a{color:rgba(255,255,255,.88);font-weight:600;font-size:1rem;transition:.2s;display:inline-flex;align-items:center;gap:.3rem;position:relative}
  .menu-right a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:#fff;transition:.25s}
  .menu-right a:hover{color:#fff}
  .menu-right a:hover::after{width:100%}
  .menu-right a.active{color:rgba(255,255,255,.5)}

  /* ============ HERO ============ */
  .hero{position:relative;background:var(--ink);color:#fff;padding:84px 0 92px;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1100px 480px at 82% -5%,rgba(255,255,255,.10),transparent 60%),radial-gradient(700px 500px at 0% 110%,rgba(255,255,255,.05),transparent 55%);pointer-events:none}
  .hero .wrap{position:relative}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  /* El título, la bajada y las cifras ocupan todo el ancho de la columna,
     hasta la foto: así parten y terminan en la misma línea. */
  .hero-copy{min-width:0}
  .hero h1{font-size:clamp(2.6rem,5.2vw,4.4rem);font-weight:900;color:#fff}
  .hero h1 .hl{position:relative;white-space:nowrap}
  .hero p.lead{font-size:1.22rem;color:rgba(255,255,255,.72);margin:1.4rem 0 2rem;text-wrap:pretty}
  /* Tamaño elegido en el panel (Contenido y cada imagen de inicio) */
  .hero h1[data-tam="pequeno"]{font-size:clamp(2.1rem,4.2vw,3.4rem)}
  /* El mínimo crece poco: en el celular una palabra larga no debe salirse */
  .hero h1[data-tam="grande"]{font-size:clamp(2.8rem,6.2vw,5.3rem)}
  .hero h1[data-tam="muy-grande"]{font-size:clamp(3rem,7.4vw,6.4rem)}
  .hero p.lead[data-tam="pequeno"]{font-size:1.05rem}
  .hero p.lead[data-tam="grande"]{font-size:1.45rem}
  .hero p.lead[data-tam="muy-grande"]{font-size:1.7rem}
  /* Fuente elegida en el panel (Contenido > Portada) */
  [data-fuente="archivo"],[data-fuente="archivo"] h4{font-family:'Archivo',sans-serif}
  [data-fuente="manrope"],[data-fuente="manrope"] h4{font-family:'Manrope',sans-serif}
  [data-fuente="montserrat"],[data-fuente="montserrat"] h4{font-family:'Montserrat',sans-serif}
  [data-fuente="poppins"],[data-fuente="poppins"] h4{font-family:'Poppins',sans-serif}
  [data-fuente="oswald"],[data-fuente="oswald"] h4{font-family:'Oswald',sans-serif;letter-spacing:0}
  [data-fuente="bebas"],[data-fuente="bebas"] h4{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.01em}
  [data-fuente="playfair"],[data-fuente="playfair"] h4{font-family:'Playfair Display',serif;letter-spacing:-.01em}
  [data-fuente="roboto-slab"],[data-fuente="roboto-slab"] h4{font-family:'Roboto Slab',serif}
  .hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
  .hero-trust{display:flex;justify-content:space-between;gap:1.6rem;margin-top:2.8rem;flex-wrap:wrap;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14)}
  .hero-trust b{font-family:'Archivo';font-weight:900;font-size:1.8rem;display:block;color:#fff}
  .hero-trust small{color:rgba(255,255,255,.55);font-size:.86rem;font-weight:600}
  .hero-visual{position:relative;height:470px}
  .can-main{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#2a2c31,#0a0a0c);border:1px solid rgba(255,255,255,.10);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;justify-content:space-between;padding:34px;color:#fff}
  .can-main .tag{display:inline-flex;align-self:flex-start;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);padding:.35rem .8rem;border-radius:999px;font-weight:700;font-size:.78rem;letter-spacing:.08em}
  .can-main h3{color:#fff;font-size:2rem;margin-top:auto}
  .can-main p{color:rgba(255,255,255,.7);font-size:.98rem;margin-top:.4rem}
  .float-card{position:absolute;background:#fff;color:var(--ink);border-radius:16px;box-shadow:var(--shadow-lg);padding:1rem 1.2rem;display:flex;align-items:center;gap:.75rem;font-weight:700}
  .float-card .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--ink);flex-shrink:0}
  .fc1{bottom:-22px;left:-26px;animation:float 5s ease-in-out infinite}
  .fc2{top:-20px;right:-18px;animation:float 6s ease-in-out infinite .5s}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  .float-card small{display:block;font-weight:600;color:var(--muted);font-size:.72rem}

  /* CANALES */
  /* Muestra de un color metálico (Color.metalico): brillo encima del tono.
     Las muestras traen el color como background-color, así esto no lo pisa. */
  i.metalico{
    background-image:linear-gradient(135deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.25) 60%,rgba(255,255,255,.35) 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
  }
  .channels{border-bottom:1px solid var(--line);background:#fff}
  .channels .wrap{display:flex;align-items:center;gap:2rem;padding:22px 24px;flex-wrap:wrap;justify-content:space-between}
  .channels p{font-weight:700;color:var(--muted);font-size:.9rem}
  /* Texto corrido separado por puntos, sin fondo ni borde: con forma de
     píldora parecían botones y la gente intentaba apretarlos. */
  .channel-pills{display:flex;align-items:center;flex-wrap:wrap;row-gap:.4rem}
  .channel-pills span{font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);cursor:default}
  .channel-pills span + span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--line-strong);margin:0 .9rem;vertical-align:middle}
  /* En el celular la lista pasa a dos líneas y un punto quedaría al inicio
     de la segunda: ahí se separan solo con espacio. */
  @media(max-width:560px){
    .channel-pills{column-gap:1.3rem}
    .channel-pills span + span::before{display:none}
  }

  section.block{padding:92px 0}
  .sec-head{max-width:640px;margin-bottom:52px}
  .sec-head.center{margin:0 auto 52px;text-align:center}
  .sec-head h2{font-size:clamp(2rem,3.8vw,2.9rem);font-weight:900;margin-top:.8rem}
  .sec-head p{color:var(--muted);font-size:1.1rem;margin-top:1rem}

  /* Grilla de categorías (página Productos) */
  .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  /* Categorías de la portada: cinta de una fila que avanza despacio. Cada
     tarjeta mide lo mismo, así la mitad de la pista es exactamente una tanda
     y el salto de vuelta al inicio no se ve. La mueve cinta-categorias.js
     (con flechas); esta animación es el respaldo sin JavaScript. */
  .cat-cinta{
    --ancho:270px;--sep:20px;
    overflow:hidden;
    /* Se desvanece en los bordes en vez de cortarse en seco */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  }
  .cat-pista{
    display:flex;gap:var(--sep);width:max-content;padding:10px 0 14px;
    animation:cat-avanza calc(var(--n) * 9s) linear infinite;
  }
  .cat-pista .cat{flex:0 0 var(--ancho)}
  /* Se detiene con el mouse encima o al llegar con el teclado, para poder elegir */
  .cat-cinta:hover .cat-pista,.cat-cinta:focus-within .cat-pista{animation-play-state:paused}
  @keyframes cat-avanza{
    to{transform:translateX(calc(-1 * var(--n) * (var(--ancho) + var(--sep))))}
  }
  .cat-cinta.con-js .cat-pista{animation:none;will-change:transform}
  /* Flechas a los lados, sobre los bordes desvanecidos */
  .cat-carrusel{position:relative}
  .cat-flecha{
    position:absolute;top:50%;z-index:2;transform:translateY(-50%);
    width:44px;height:44px;display:grid;place-items:center;
    border:1px solid var(--line);border-radius:50%;cursor:pointer;
    background:#fff;color:var(--ink);box-shadow:var(--shadow-sm);
    transition:background .2s ease,color .2s ease;
  }
  .cat-flecha:hover{background:#000;color:#fff;border-color:#000}
  .cat-flecha:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .cat-flecha.izq{left:-6px}
  .cat-flecha.der{right:-6px}
  .cat-flecha[hidden]{display:none}
  /* Pocas categorías, o quien pidió menos movimiento: fila quieta que se desliza a mano */
  .cat-cinta.quieta{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .cat-cinta.quieta .cat-pista{animation:none;margin:0 auto}
  @media (prefers-reduced-motion:reduce){
    .cat-cinta{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
    .cat-pista{animation:none}
    .cat-copia{display:none}
  }
  .cat{position:relative;background:#000;border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);padding:26px;transition:.28s;overflow:hidden}
  .cat::before{content:"";position:absolute;left:0;top:0;height:100%;width:4px;background:#fff;transform:scaleY(0);transform-origin:bottom;transition:.28s}
  .cat:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(255,255,255,.22)}
  .cat:hover::before{transform:scaleY(1)}
  /* Foto de la categoría (sitio/_foto_categoria.html): de borde a borde arriba
     de la tarjeta, difuminada y oscura; al pasar el mouse se enfoca y se
     ilumina. El «Ver línea →» va sobre la foto para que la tarjeta no crezca. */
  .cat .cat-foto{position:relative;height:118px;margin:-26px -26px 16px;overflow:hidden;background:#111;display:grid;place-items:center}
  /* La foto se ve entera (contain), aunque quede más chica: con cover se
     cortaba casi siempre. Lo que sobra a los lados queda del fondo oscuro. */
  .cat .cat-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:blur(3px) brightness(.5) saturate(.85);transition:filter .4s ease}
  /* La foto de producto viene con fondo blanco: el cuadro toma ese blanco ya
     oscurecido, para que el borde difuminado no deje un marco claro. */
  .cat .cat-foto-producto{background:#808080;transition:background .4s ease}
  .cat:hover .cat-foto-producto,.cat:focus-visible .cat-foto-producto{background:#fff}
  .cat .cat-foto-producto img{padding:8px 12px}
  .cat:hover .cat-foto img,.cat:focus-visible .cat-foto img{filter:blur(0) brightness(1.06) saturate(1.05)}
  .cat .cat-foto-ic{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:.28s}
  .cat:hover .cat-foto-ic{background:#fff;color:var(--ink)}
  .cat h4{font-size:1.12rem;color:#fff}
  .cat p{color:rgba(255,255,255,.6);font-size:.9rem;margin-top:.35rem}
  .cat .go{position:absolute;top:78px;right:12px;padding:.3rem .75rem;border-radius:999px;background:rgba(0,0,0,.72);font-weight:700;font-size:.8rem;color:#fff;display:inline-flex;align-items:center;gap:.35rem;opacity:0;transform:translateX(-6px);transition:.28s}
  .cat:hover .go{opacity:1;transform:translateX(0)}

  .feature{background:var(--graphite);color:#fff;border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .feature-txt{padding:60px}
  .feature-txt h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.6rem)}
  .feature-txt .eyebrow{color:rgba(255,255,255,.55)}
  .feature-txt p{color:rgba(255,255,255,.68);margin:1.2rem 0 1.8rem;font-size:1.06rem}
  .feature-list{display:flex;flex-direction:column;gap:.9rem;margin-bottom:2rem}
  .feature-list li{list-style:none;display:flex;align-items:center;gap:.7rem;color:rgba(255,255,255,.9);font-weight:600}
  .feature-list .chk{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;flex-shrink:0}
  .feature-vis{position:relative;height:100%;min-height:420px;background:radial-gradient(600px 420px at 68% 30%,rgba(255,255,255,.12),transparent 62%),linear-gradient(160deg,#232428,#0b0b0d);display:grid;place-items:center}
  .feature-badge{background:linear-gradient(160deg,#2c2e33,#0d0d0f);border:1px solid rgba(255,255,255,.12);width:220px;height:300px;border-radius:20px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;justify-content:space-between;padding:26px;color:#fff;transform:rotate(-4deg)}
  /* Foto de «Por qué REX»: llena toda la columna, recortando los bordes si hace falta */
  .feature-vis.con-foto{background:#000;overflow:hidden}
  .feature-vis .porque-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .feature-badge .n{font-family:'Archivo';font-weight:900;font-size:3.4rem;line-height:1}
  .feature-badge span{font-weight:700;opacity:.7}

  .cat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .catalog{position:relative;border-radius:20px;overflow:hidden;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;color:#fff;box-shadow:var(--shadow-md);transition:.28s}
  .catalog:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
  .catalog::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.6));z-index:1}
  .catalog>*{position:relative;z-index:2}
  .c1{background:linear-gradient(150deg,#3a3c42,#0d0d0f)}
  .c2{background:linear-gradient(150deg,#26272b,#0a0a0c)}
  .c3{background:linear-gradient(150deg,#4a4d53,#141518)}
  .catalog .kicker{font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
  .catalog h4{color:#fff;font-size:1.5rem;margin:.3rem 0 1rem}
  .catalog .dl{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:.55rem 1.1rem;border-radius:999px;align-self:flex-start;transition:.2s}
  .catalog:hover .dl{background:#fff;color:var(--ink)}

  .about{background:rgba(245,245,246,.72)}
  .mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}
  .mv{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px}
  .mv .ic{width:48px;height:48px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;margin-bottom:16px}
  .mv h4{font-size:1.3rem;margin-bottom:.6rem}
  .mv p{color:var(--ink-soft)}
  /* Los cuatro valores bajo Misión y Visión (sitio/_valores.html). */
  .valores-titulo{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:900;margin-top:56px}
  .valores-titulo + .valores-grid{margin-top:20px}
  .valores-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
  .valor{background:#fafafa;border:1px solid var(--line);border-radius:12px;padding:18px 20px 22px}
  .valor-ic{display:block;color:var(--ink);margin-bottom:12px}
  .valor h4{font-size:1.15rem;margin-bottom:.6rem}
  .valor p{color:var(--ink-soft);font-size:.98rem}
  /* Tamaños de letra de «Quiénes somos», elegidos en Contenido. Con letra
     grande el bloque de arriba se ensancha para no quedar en una columna flaca. */
  #nosotros h2[data-tam="pequeno"]{font-size:clamp(1.7rem,3vw,2.3rem)}
  #nosotros h2[data-tam="grande"]{font-size:clamp(2.4rem,4.8vw,3.7rem)}
  #nosotros h2[data-tam="muy-grande"]{font-size:clamp(2.7rem,5.8vw,4.5rem)}
  #nosotros .sec-head p[data-tam="pequeno"]{font-size:1rem}
  #nosotros .sec-head p[data-tam="grande"]{font-size:1.3rem}
  #nosotros .sec-head p[data-tam="muy-grande"]{font-size:1.5rem}
  /* El texto institucional ocupa todo el ancho y va justificado. */
  #nosotros .sec-head{max-width:none}
  #nosotros .sec-head p{text-align:justify;hyphens:auto}
  .mv[data-tam="pequeno"] h4{font-size:1.15rem}
  .mv[data-tam="pequeno"] p{font-size:.95rem}
  .mv[data-tam="grande"] h4{font-size:1.55rem}
  .mv[data-tam="grande"] p{font-size:1.15rem}
  .mv[data-tam="muy-grande"] h4{font-size:1.8rem}
  .mv[data-tam="muy-grande"] p{font-size:1.3rem}

  .cta-strip{background:var(--ink);border-radius:28px;padding:56px;text-align:center;color:#fff;position:relative;overflow:hidden}
  /* El brillo es solo adorno: en el celular cae encima del botón y se comía
     el toque («Quiero ser distribuidor» no respondía). No recibe clics y el
     contenido va por encima. */
  .cta-strip::before{content:"";position:absolute;top:-40%;right:-8%;width:420px;height:420px;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%);pointer-events:none}
  .cta-strip .btn{position:relative}
  .cta-strip .band{position:absolute;left:0;right:0;bottom:0;height:6px;display:flex}
  .cta-strip .band i{flex:1}
  .cta-strip h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);position:relative}
  .cta-strip p{color:rgba(255,255,255,.75);margin:1rem auto 2rem;max-width:52ch;position:relative}

  .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
  .contact-info h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
  .contact-info p{color:var(--muted);margin:1rem 0 2rem;font-size:1.06rem}
  .cinfo-item{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.4rem}
  .cinfo-item .ic{width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;flex-shrink:0}
  .cinfo-item b{display:block;font-family:'Archivo';font-size:1rem}
  .cinfo-item span{color:var(--muted);font-size:.94rem}
  form.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow-sm)}
  .field{margin-bottom:16px}
  .field label{display:block;font-weight:700;font-size:.85rem;margin-bottom:.4rem;color:var(--ink-soft)}
  .field input,.field select,.field textarea{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line-strong);border-radius:12px;font-family:inherit;font-size:.96rem;transition:.2s;background:#fff}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(13,13,15,.08)}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  /* Recuadro «no soy un robot»: no ocupa lugar hasta que se dibuja */
  .captcha:not(:empty){margin:4px 0 16px;min-height:65px}
  .captcha-esperando::before{content:'Verificando que no es un robot… el mensaje se envía solo.';display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px}

  footer{background:#000;color:rgba(255,255,255,.65);padding:64px 0 30px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
  footer .rex-logo{margin-bottom:1rem}
  footer .rex-logo-img{height:40px}
  footer h5{color:#fff;font-family:'Archivo';font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:1.1rem}
  footer ul{list-style:none}
  footer ul li{margin-bottom:.7rem}
  footer ul a{color:rgba(255,255,255,.6);font-size:.94rem;transition:.2s}
  footer ul a:hover{color:#fff}
  footer .fdesc{max-width:30ch;font-size:.94rem;color:rgba(255,255,255,.6)}
  .socials{display:flex;gap:.6rem;margin-top:1.2rem}
  .socials a{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:.25s}
  .socials a:hover{background:#fff;color:var(--ink);transform:translateY(-3px)}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:.85rem;flex-wrap:wrap;gap:10px 24px;color:rgba(255,255,255,.5)}
  .foot-hecho{display:inline-flex;align-items:center;gap:.65rem;color:rgba(255,255,255,.7);font-weight:600;letter-spacing:.02em}
  /* los mismos colores de la franja de arriba, en chico */
  .foot-cuadros{display:inline-flex;gap:3px}
  .foot-cuadros i{display:block;width:8px;height:8px;border-radius:2px}
  .foot-cuadros i:nth-child(1){background:#e6332a}
  .foot-cuadros i:nth-child(2){background:#f47b20}
  .foot-cuadros i:nth-child(3){background:#f7c50e}
  .foot-cuadros i:nth-child(4){background:#00a651}
  .foot-cuadros i:nth-child(5){background:#27aae1}
  .foot-cuadros i:nth-child(6){background:#92278f}

  .reveal{opacity:0;transform:translateY(28px);transition:.7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  @media(max-width:940px){
    .hero-grid{grid-template-columns:1fr;gap:60px}
    .hero-visual{height:400px;max-width:440px}
    .feature{grid-template-columns:1fr}
    .feature-txt{padding:40px}
    .cat-cards{grid-template-columns:1fr}
    .cat-grid{grid-template-columns:repeat(2,1fr)}
    .mv-grid,.valores-grid,.contact-grid,.field-row{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:560px){
    .wrap{padding:0 18px}
    .cat-grid{grid-template-columns:1fr}
    .cat-cinta{--ancho:230px;--sep:14px}
    .foot-grid{grid-template-columns:1fr}
    .feature-txt,.cta-strip,.mv{padding:32px 24px}
    section.block{padding:64px 0}
    .hero{padding:56px 0 64px}
    .topbar-inner{height:78px}
    .rex-logo-img{height:50px}
    .social a{width:32px;height:32px}
    .menu-right{display:none}
    .menu-inner{height:52px}
  }

/* ------------------------------------------- formulario de contacto */
/* Campo trampa: invisible para las personas, presente en el HTML para
   que los robots de spam lo completen y se delaten. */
.trampa{
  position:absolute!important;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}
.aviso-form{
  padding:.85rem 1rem;border-radius:10px;margin-bottom:1rem;
  font-size:.9rem;border-left:4px solid;
}
.aviso-form--ok{background:#e6f7ee;border-color:#00a651;color:#00713a}
.aviso-form--error{background:#fdeceb;border-color:#e6332a;color:#8c1f19}
.field .err{
  display:block;margin-top:.3rem;font-size:.8rem;
  font-weight:700;color:#e6332a;
}

/* ------------------------------------------ carrusel del inicio */
.hero-carrusel{
  position:relative;width:100%;
  aspect-ratio:4/3;
  border-radius:22px;overflow:hidden;
  background:rgba(255,255,255,.05);
  box-shadow:0 30px 70px rgba(0,0,0,.42);
}
.hero-lamina{
  position:absolute;inset:0;margin:0;
  opacity:0;transition:opacity .55s ease;
  pointer-events:none;
}
.hero-lamina.on{opacity:1;pointer-events:auto}
.hero-lamina img{width:100%;height:100%;object-fit:cover;display:block}

.hero-etiqueta{
  position:absolute;top:16px;left:16px;
  background:#fff;color:#0d0d0f;
  font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.35rem .8rem;border-radius:999px;
}

.hero-flecha{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;display:grid;place-items:center;
  border:none;border-radius:50%;cursor:pointer;
  background:rgba(13,13,15,.55);color:#fff;
  transition:.2s ease;opacity:0;
}
.hero-carrusel:hover .hero-flecha{opacity:1}
.hero-flecha:hover{background:#000}
.hero-flecha:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:2px}
.hero-flecha.izq{left:12px}
.hero-flecha.der{right:12px}

.hero-puntos{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:.4rem;
}
.hero-punto{
  width:9px;height:9px;padding:0;border:none;border-radius:50%;
  background:rgba(255,255,255,.45);cursor:pointer;transition:.2s ease;
}
.hero-punto:hover{background:rgba(255,255,255,.8)}
.hero-punto.on{background:#fff;width:24px;border-radius:999px}
.hero-punto:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* En el celular queda fija una sola imagen (carrusel.js): sin flechas ni puntos. */
@media (max-width:940px){
  .hero-carrusel .hero-flecha,.hero-carrusel .hero-puntos{display:none}
}

/* Quien pidio menos movimiento no ve transiciones ni rotacion automatica. */
@media (prefers-reduced-motion:reduce){
  .hero-lamina{transition:none}
}

/* El cuadro es 4:3 en todas las pantallas: lo que se ve en el computador es
   lo mismo que se ve en el celular, solo más chico. */
@media (max-width:900px){
  .hero-flecha{opacity:1;width:34px;height:34px}
}

/* ------------------------------------------- buscador del menu */
.menu-buscar{
  display:flex;align-items:center;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:.2rem .2rem .2rem .85rem;
  margin-left:.4rem;
  transition:border-color .2s, background .2s;
}
.menu-buscar:focus-within{
  border-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.14);
}
.menu-buscar input{
  width:118px;
  background:none;border:none;outline:none;
  color:#fff;font-family:inherit;font-size:.9rem;
  padding:.4rem 0;
  transition:width .25s ease;
}
.menu-buscar input::placeholder{color:rgba(255,255,255,.45)}
.menu-buscar input:focus{width:170px}
.menu-buscar input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.menu-buscar button{
  flex:0 0 30px;height:30px;
  display:grid;place-items:center;
  border:none;border-radius:50%;
  background:transparent;color:rgba(255,255,255,.7);
  cursor:pointer;transition:.18s ease;
}
.menu-buscar button:hover{background:#fff;color:#0d0d0f}

/* Texto que solo leen los lectores de pantalla. */
.visualmente-oculto{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (max-width:980px){
  .menu-buscar{margin-left:0}
  .menu-buscar input{width:100px}
  .menu-buscar input:focus{width:130px}
}

/* ============ INSTAGRAM ============ */
/* Grilla cuadrada como la del perfil. La foto se recorta al centro. */
.insta-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
}
.insta-post{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:12px;background:var(--bg-soft);color:#fff;
}
.insta-post img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.insta-marca{position:absolute;top:10px;right:10px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.insta-velo{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.42);opacity:0;transition:opacity .25s ease;
}
.insta-post:hover img{transform:scale(1.04)}
.insta-post:hover .insta-velo,.insta-post:focus-visible .insta-velo{opacity:1}
.insta-post:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.insta .sec-head p a{color:var(--ink);font-weight:700}
.insta-pie{text-align:center;margin-top:2rem}
@media(max-width:940px){.insta-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.insta-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}