/* drenova · sistema de botones (fuente única, no página por página) */
.dbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--gr-sans,system-ui,sans-serif);font-size:15px;font-weight:600;line-height:1;
  border-radius:8px;padding:13px 26px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;
  transition:box-shadow 200ms var(--gr-ease,cubic-bezier(.2,.6,.2,1)),
             transform 200ms var(--gr-ease,cubic-bezier(.2,.6,.2,1)),
             background 200ms var(--gr-ease,cubic-bezier(.2,.6,.2,1)),
             border-color 200ms var(--gr-ease,cubic-bezier(.2,.6,.2,1)),
             color 200ms var(--gr-ease,cubic-bezier(.2,.6,.2,1));
}
.dbtn-primary{background:#F3F0EB;color:#0B192C}
.dbtn-primary:hover{transform:translateY(-1px);box-shadow:0 0 0 8px rgba(16,185,129,0.12),0 6px 20px rgba(16,185,129,0.10)}
.dbtn-ghost{background:transparent;color:#F3F0EB;border-color:#2C4159}
.dbtn-ghost:hover{transform:translateY(-1px);border-color:#10B981;color:#3DD9A0;box-shadow:0 0 0 8px rgba(16,185,129,0.10)}
.dbtn-onphoto{background:transparent;color:#FFFFFF;border-color:rgba(243,240,235,0.4)}
.dbtn-onphoto:hover{transform:translateY(-1px);border-color:#10B981;color:#3DD9A0;box-shadow:0 0 0 8px rgba(16,185,129,0.10)}
.dbtn-sm{font-size:14px;padding:9px 18px}
@media (prefers-reduced-motion: reduce){
  .dbtn{transition:border-color 150ms,color 150ms,background 150ms}
  .dbtn:hover{transform:none;box-shadow:none}
}

/* ── TIPOGRAFÍA DRENOVA (LOCKED 2026-07-13) ────────────────────────────────
   El bundle heredado es el de Granatum (Hanken Grotesk + IBM Plex Mono).
   drenova usa Space Grotesk (display) + Inter (cuerpo/UI) + JetBrains Mono
   (SOLO datos reales: cifras, precios, fechas, CAS, SKUs, teléfonos).
   Este archivo carga después del bundle, así que gana.                     */
:root{
  --gr-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --gr-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --gr-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}
html,body{font-family:var(--gr-sans)}
h1,h2,h3,h4,
[class*="Heading"],[class*="Hero"],[class*="Display"],
.gr-h1,.gr-h2,.gr-h3,.gr-h4,.gr-display,.gr-hero{
  font-family:var(--gr-display);
  letter-spacing:-0.02em;
}
.dbtn{font-family:var(--gr-sans)}


/* ═══════════════════════════════════════════════════════════════════════
   MÓVIL
   El export no traía UNA SOLA media query: todo son estilos en línea con
   grids fijos, así que en un teléfono no colapsaba nada. Los estilos en
   línea ganan por especificidad, y la única forma de anularlos desde una
   hoja es !important. Es feo, y es la solución correcta aquí.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px){

  /* 1 · Todos los grids a una columna.
        Arregla "elige el problema", los dípticos, las comparativas de
        3 y 4 columnas, y la fila de marcas. */
  [style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* 2 · Aire lateral. 40px es demasiado en un teléfono. */
  section > div{
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* 3 · Titulares: los tamaños de escritorio desbordan */
  h1{ font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.1 !important; max-width: none !important; }
  h2{ font-size: clamp(23px, 6.4vw, 29px) !important; line-height: 1.16 !important; max-width: none !important; }
  h3{ font-size: 17px !important; }
  p{ max-width: none !important; }

  /* 4 · Ori-zima: los tres verbos se rompían. Bajan de escala. */
  [style*="Space Grotesk"]{ font-size: clamp(24px, 7vw, 32px) !important; gap: 10px !important; }

  /* 5 · El sachet a 120px se comía el ancho de la tarjeta */
  [style*="width:120px"]{ width: 82px !important; }

  /* 6 · Cifras grandes */
  [style*="font-size:58px"]{ font-size: 42px !important; }
  [style*="font-size:56px"]{ font-size: 34px !important; }
  [style*="font-size:48px"]{ font-size: 30px !important; }
  [style*="font-size:40px"]{ font-size: 27px !important; }
  [style*="font-size:36px"]{ font-size: 29px !important; }
  [style*="font-size:34px"]{ font-size: 26px !important; }
  [style*="font-size:32px"]{ font-size: 25px !important; }

  /* 7 · Video a sangre. El degradado lateral tapaba el sujeto en pantalla
        angosta: en móvil va vertical, y el titular queda abajo. */
  [style*="min-height:600px"]{ min-height: 480px !important; }
  [style*="min-height:560px"]{ min-height: 440px !important; }
  [style*="linear-gradient(90deg"]{
    background: linear-gradient(180deg, rgba(11,25,44,0.30) 0%, rgba(11,25,44,0.86) 58%, #0B192C 100%) !important;
  }

  /* 8 · Fotos con alto fijo */
  [style*="height:420px"]{ height: 240px !important; }

  /* 9 · Botones a ancho completo. El pulgar agradece. */
  .dbtn{ width: 100% !important; justify-content: center !important; }

  /* 10 · Filas que en escritorio van a los extremos, apiladas */
  [style*="justify-content:space-between"][style*="flex-wrap:wrap"]{
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 480px){
  h1{ font-size: 27px !important; }
  [style*="Space Grotesk"]{ font-size: 23px !important; }
  section > div{ padding-left: 18px !important; padding-right: 18px !important; }
}