/* The wide tier. Nothing here applies below 1600px.

   Why it exists: the site caps its columns at 1120px and the menu at 1180px,
   and it was only ever walked at 375, 768, 1024 and 1440. Mafer's main monitor
   reports 2560 logical points, so at full screen the content filled 44% of the
   width and read as a stamp in the middle of an empty page. Decided 2026-08-26.

   Why it is written with attribute selectors: the widths and the type sizes
   live in inline style="" attributes across 19 pages — 47 copies of
   max-width:1120px alone. Rewriting all of them into classes is the clean fix
   and it is also a diff through every page of the site on launch week. This
   file matches the inline values instead, so the change is one file, reversible
   by deleting one <link>, and invisible under 1600px. If a future session moves
   those widths into real classes, delete this file and do it properly.

   The !important is not decoration: an inline style beats any stylesheet
   without it. Do not remove it while the values are still inline.

   Loaded by every page, right after the inline styles, as
   <link rel="stylesheet" href="/dfp-ancho.css"> */

@media (min-width: 1600px) {

  /* --- 1. The columns -------------------------------------------------- */
  /* The wide ones carry cards and grids and grow the most. The narrow ones
     carry prose: they grow less on purpose, because a line of text past about
     90 characters gets hard to follow no matter how much room there is. */

  .dfp-nav-in { max-width: 1440px !important; }

  [style*="max-width:1120px"] { max-width: 1440px !important; }
  [style*="max-width:1000px"] { max-width: 1240px !important; }
  [style*="max-width:860px"]  { max-width: 1020px !important; }
  [style*="max-width:820px"]  { max-width: 960px !important; }
  [style*="max-width:760px"]  { max-width: 900px !important; }
  [style*="max-width:700px"]  { max-width: 830px !important; }
  [style*="max-width:640px"]  { max-width: 760px !important; }
  [style*="max-width:560px"]  { max-width: 660px !important; }
  [style*="max-width:520px"]  { max-width: 600px !important; }

  .env  { max-width: 900px !important; }   /* Redes, the embed column */
  .dfpc { max-width: 960px; }   /* Mi espacio */
  .dfpf { max-width: 600px; }   /* the capture form card */
  .dfpg-screen-in { max-width: 600px; }

  /* The hero text block sits bottom-left over the video and has its own cap. */
  .hero-stack { max-width: 46rem !important; }
  .hero-body  { padding-left: 120px !important; padding-right: 120px !important; }
  .hero-logo  { width: 130px !important; }

  /* --- 2. The type ------------------------------------------------------ */
  /* Every size goes up about a tenth. Paddings and gaps are left alone: at
     this size the difference is not visible, and touching them would mean
     rewriting the same 19 pages this file exists to avoid. */

  body { font-size: 17.5px; }

  [style*="font-size:12px"]   { font-size: 13px !important; }
  [style*="font-size:12.5px"] { font-size: 13.5px !important; }
  [style*="font-size:13px"]   { font-size: 14px !important; }
  [style*="font-size:13.5px"] { font-size: 14.5px !important; }
  [style*="font-size:14px"]   { font-size: 15px !important; }
  [style*="font-size:14.5px"] { font-size: 16px !important; }
  [style*="font-size:15px"]   { font-size: 16.5px !important; }
  [style*="font-size:15.5px"] { font-size: 17px !important; }
  [style*="font-size:16px"]   { font-size: 17.5px !important; }
  [style*="font-size:16.5px"] { font-size: 18px !important; }
  [style*="font-size:17px"]   { font-size: 18.5px !important; }
  [style*="font-size:17.5px"] { font-size: 19px !important; }
  [style*="font-size:18px"]   { font-size: 19.5px !important; }
  [style*="font-size:18.5px"] { font-size: 20px !important; }
  [style*="font-size:19px"]   { font-size: 21px !important; }
  [style*="font-size:21px"]   { font-size: 23px !important; }
  [style*="font-size:22px"]   { font-size: 24px !important; }
  [style*="font-size:23px"]   { font-size: 25px !important; }
  [style*="font-size:24px"]   { font-size: 26px !important; }
  [style*="font-size:27px"]   { font-size: 30px !important; }
  [style*="font-size:30px"]   { font-size: 33px !important; }
  [style*="font-size:32px"]   { font-size: 35px !important; }

  /* Headings are written as clamp(min, vw, max). Past 1600px the vw term has
     long since overtaken the max, so every one of them is pinned to its max and
     a flat value here is exactly what the browser was already using, raised. */

  [style*="clamp(20px,2.6vw,26px)"] { font-size: 29px !important; }
  [style*="clamp(21px,3vw,29px)"]   { font-size: 32px !important; }
  [style*="clamp(22px,3.2vw,32px)"] { font-size: 36px !important; }
  [style*="clamp(24px,3.4vw,34px)"],
  [style*="clamp(23px,3.4vw,34px)"] { font-size: 38px !important; }
  [style*="clamp(26px,3.6vw,38px)"],
  [style*="clamp(25px,3.6vw,38px)"] { font-size: 42px !important; }
  [style*="clamp(26px,3.8vw,40px)"] { font-size: 45px !important; }
  [style*="clamp(28px,4vw,42px)"]   { font-size: 47px !important; }
  [style*="clamp(28px,4.2vw,44px)"] { font-size: 49px !important; }
  [style*="clamp(32px,5.4vw,48px)"] { font-size: 54px !important; }
  [style*="clamp(32px,5.4vw,52px)"] { font-size: 58px !important; }
  [style*="clamp(34px,5.6vw,58px)"],
  [style*="clamp(34px,5.8vw,58px)"],
  [style*="clamp(34px,6vw,58px)"],
  [style*="clamp(42px,6vw,58px)"]   { font-size: 65px !important; }
  [style*="clamp(36px,6vw,60px)"]   { font-size: 67px !important; }
  [style*="clamp(38px,7vw,64px)"]   { font-size: 72px !important; }

  /* The few that live in a <style> block instead of an attribute. The hero and
     Redes rules carry !important too: their <style> block sits in the body, so
     it comes after this file no matter where the <link> goes. */
  .dfp-links a   { font-size: 16.5px; }
  .hero-tagline  { font-size: 30px !important; }
  .dfpf h2       { font-size: 35px; }
  .dfpf p.dfpf-lead,
  .dfpf input,
  .dfpf .dfpf-code { font-size: 18px; }
  .dfpf label    { font-size: 16px; }
}
