/* La Brújula: the shared visual system of digitalfirstpro.com (2026-10 redesign).
   One ground (cream), one recurring device (the compass, /brujula.svg), Impulso's buttons.
   Colors: only the five brand colors, the lighter card cream, and their alpha variants.
   No white text on aguamarina, anywhere. DESIGN.md records the shipped result. */

:root{
  --b-crema:#F2EDE4; --b-crema-2:#FAF8F3; --b-agua:#0ABCC6; --b-purpura:#7354A0;
  --b-negro:#0D0D0D; --b-gris:#2E2E2E; --b-linea:rgba(46,46,46,.12);
  --b-r1:12px; --b-r2:24px;
  --b-h1:clamp(40px,6vw,64px); --b-h2:clamp(30px,4vw,44px); --b-h3:clamp(21px,2.2vw,26px);
  --b-body:clamp(17px,1.2vw,18px);
  --b-display:"Caprasimo",Georgia,serif; --b-sans:"Figtree",system-ui,sans-serif;
  --b-ease:cubic-bezier(.16,1,.3,1);
  --b-sombra:0 1px 2px rgba(46,46,46,.05),0 18px 40px -24px rgba(46,46,46,.28);
}

/* hidden wins over every display above (.b-card, .b-btn): dfp-impulso.js and the list rely on it */
[hidden]{display:none !important}

/* The parts of the browser nobody draws */
::selection{background:rgba(10,188,198,.32);color:var(--b-negro)}
html{accent-color:var(--b-purpura);caret-color:var(--b-purpura);scrollbar-color:rgba(115,84,160,.45) var(--b-crema)}

/* Layout: two containers, one left edge, one vertical rhythm */
.b-wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:clamp(20px,4vw,32px);box-sizing:border-box}
.b-read{max-width:760px}  /* sits inside .b-wrap, on the same left edge */
.b-section{padding-block:clamp(56px,8vw,104px)}
.b-section + .b-section{padding-top:0}

/* Type: Caprasimo for headings only, Figtree for every passage */
.b-h1,.b-h2,.b-h3{font-family:var(--b-display);font-weight:400;color:var(--b-negro);
  letter-spacing:-.01em;text-wrap:balance;margin:0}
.b-h1{font-size:var(--b-h1);line-height:1.04}
.b-h2{font-size:var(--b-h2);line-height:1.1}
.b-h3{font-size:var(--b-h3);line-height:1.2}
.b-text{font-family:var(--b-sans);font-size:var(--b-body);line-height:1.65;color:var(--b-gris);
  max-width:68ch;margin:0;text-wrap:pretty}
.b-text + .b-text{margin-top:1em}
/* Heading-to-text spacing; declared after .b-text so it wins over its margin:0 */
.b-h1 + *,.b-h2 + *{margin-top:clamp(16px,2vw,22px)}
.b-h3 + *{margin-top:10px}

/* The eyebrow: the compass before a púrpura label. The only label style on the site. */
.b-eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;
  font:700 clamp(21px,2vw,24px)/1.3 var(--b-sans);letter-spacing:.005em;color:var(--b-purpura)}
.b-eyebrow::before{content:"";flex:none;width:1.4em;height:1.4em;background:url(brujula.svg) center/contain no-repeat}

/* The rule: a hairline with the compass at its centre. Sections part with this, never with bands. */
.b-rule{display:block;height:30px;border:0;margin:0 auto;max-width:1120px;
  background:linear-gradient(var(--b-linea),var(--b-linea)) left center/calc(50% - 34px) 1px no-repeat,
    linear-gradient(var(--b-linea),var(--b-linea)) right center/calc(50% - 34px) 1px no-repeat,
    url(brujula.svg) center/30px no-repeat}

/* Card: one style, never nested */
.b-card{display:flex;flex-direction:column;gap:0;background:var(--b-crema-2);color:var(--b-gris);
  border:1px solid var(--b-linea);border-radius:var(--b-r2);padding:clamp(24px,3.2vw,40px);box-shadow:var(--b-sombra)}
.b-card > .b-text{margin-bottom:28px}
.b-card > :is(.b-acciones,.b-btn,.b-link){margin-top:auto;align-self:flex-start}
.b-duo{display:grid;gap:clamp(16px,2.4vw,28px);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}

/* Buttons: Impulso's pill. Aguamarina with near-black text; secondary is a near-black outline. */
.b-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;
  min-height:48px;padding:12px 28px;border:0;border-radius:999px;cursor:pointer;
  background:var(--b-agua);color:var(--b-negro);font:700 17px/1.2 var(--b-sans);text-decoration:none;
  text-align:center;transition:box-shadow .25s var(--b-ease),transform .25s var(--b-ease)}
/* color here beats a page's own a:hover, which turned the text purple at 3.5:1 */
.b-btn:hover{color:var(--b-negro);box-shadow:inset 0 0 0 99px rgba(13,13,13,.10),0 10px 22px -12px rgba(13,13,13,.45);transform:translateY(-1px)}
.b-btn:active{transform:translateY(0);box-shadow:inset 0 0 0 99px rgba(13,13,13,.16)}
.b-btn:focus-visible,.b-link:focus-visible,.b-video-play:focus-visible{outline:3px solid var(--b-purpura);outline-offset:3px}
.b-btn--line{background:transparent;color:var(--b-negro);box-shadow:inset 0 0 0 1.5px var(--b-negro)}
.b-btn--line:hover{background:rgba(13,13,13,.06);box-shadow:inset 0 0 0 1.5px var(--b-negro)}
.b-btn[aria-disabled="true"],.b-btn:disabled{opacity:.45;pointer-events:none}
.b-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}

/* Text link: púrpura, drawn arrow (no glyph) */
.b-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--b-purpura);
  font:600 17px/1.3 var(--b-sans);text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:.25em;text-decoration-color:rgba(115,84,160,.35);
  transition:text-decoration-color .2s var(--b-ease)}
.b-link::after{content:"";flex:none;width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--b-ease)}
.b-link:hover{text-decoration-color:currentColor}
.b-link:hover::after{transform:translateX(3px)}

/* Video: Mafer's own poster and one play button; YouTube loads only on play */
.b-video{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--b-r2);overflow:hidden;
  background:var(--b-gris);box-shadow:var(--b-sombra)}
.b-video > img,.b-video > iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block}
.b-video-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:clamp(64px,8vw,84px);aspect-ratio:1;
  border:0;border-radius:50%;padding:0;cursor:pointer;background:var(--b-agua);
  box-shadow:0 0 0 8px rgba(242,237,228,.35),0 14px 30px -10px rgba(13,13,13,.55);transition:scale .3s var(--b-ease)}
.b-video-play::before{content:"";position:absolute;inset:0;margin:auto;width:30%;height:34%;translate:8% 0;
  background:var(--b-negro);clip-path:polygon(0 0,100% 50%,0 100%)}
.b-video:hover .b-video-play{scale:1.06}

/* Behold frame: a cream tile placeholder until the feed paints over it. The feed is a collage
   whose height follows its width (1120 x 795, measured 2026-10-12), so the frame takes that ratio
   to hold the space. No overflow:hidden: with it, aspect-ratio would cut a taller feed; without it
   the frame grows to fit. Once the widget is defined the tiles go, or they show through its gaps. */
.b-feed{position:relative;aspect-ratio:1120/795;border-radius:var(--b-r2);
  border:1px solid var(--b-linea);background-color:var(--b-crema-2);
  background-image:linear-gradient(90deg,transparent calc(100% - 8px),var(--b-crema-2) 0),
    linear-gradient(transparent calc(100% - 8px),var(--b-crema-2) 0),linear-gradient(var(--b-crema),var(--b-crema));
  background-size:50% 33.333%,50% 33.333%,100% 100%;background-position:4px 4px,4px 4px,0 0}
.b-feed > *{position:relative;display:block}
.b-feed:has(> behold-widget:defined){background:none}
@media (min-width:720px){.b-feed{background-size:25% 50%,25% 50%,100% 100%}}

/* The four points: the compass as a diagram. Reading order runs Norte, Oeste, Este, Sur. */
.b-rosa{display:grid;gap:28px;margin:0;padding:0;list-style:none}
.b-rosa-mark{display:none}
.b-punto{--giro:0deg;display:grid;grid-template-columns:auto 1fr;column-gap:16px}
.b-punto::before{content:"";grid-row:span 3;width:34px;height:34px;rotate:var(--giro);
  background:url(brujula.svg) center/contain no-repeat}
.b-punto[data-punto="este"]{--giro:90deg}
.b-punto[data-punto="sur"]{--giro:180deg}
.b-punto[data-punto="oeste"]{--giro:270deg}
.b-punto-nombre{font:700 clamp(21px,2vw,24px)/1.3 var(--b-sans);letter-spacing:.005em;color:var(--b-purpura)}
.b-punto .b-h3{margin-top:2px}
.b-punto .b-text{margin-top:8px;font-size:17px}
@media (min-width:900px){
  .b-rosa{grid-template-columns:1fr 240px 1fr;grid-template-areas:". n ." "o c e" ". s .";gap:24px 40px;align-items:center}
  .b-rosa-mark{display:block;grid-area:c;width:200px;height:200px;margin:auto}
  .b-punto{grid-template-columns:1fr;justify-items:center;text-align:center;max-width:380px;justify-self:center}
  .b-punto::before{grid-row:auto;margin-bottom:12px}
  .b-punto[data-punto="norte"]{grid-area:n}
  .b-punto[data-punto="sur"]{grid-area:s}
  .b-punto[data-punto="oeste"]{grid-area:o;justify-items:end;text-align:right;justify-self:end}
  .b-punto[data-punto="este"]{grid-area:e;justify-items:start;text-align:left;justify-self:start}
}
/* The four points in a row, left-aligned on the page's edge: one stacked column each on wide
   screens, one under another on a phone. Declared after .b-rosa so it wins at every width. */
.b-puntos{display:grid;gap:clamp(28px,3vw,40px);margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.b-puntos .b-punto{grid-template-columns:1fr;grid-area:auto;justify-items:start;justify-self:stretch;
  text-align:left;max-width:none;align-content:start}
.b-puntos .b-punto::before{grid-row:auto;margin-bottom:12px}

/* Closing band: the page's one field of aguamarina. Near-black text and button on it. */
.b-band{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--b-r2);
  background:var(--b-agua);color:var(--b-negro);padding:clamp(40px,7vw,88px) clamp(24px,6vw,72px)}
.b-band::after{content:"";position:absolute;z-index:-1;width:clamp(260px,38vw,460px);aspect-ratio:1;
  right:clamp(-160px,-8vw,-60px);top:50%;translate:0 -50%;background:var(--b-negro);opacity:.09;
  -webkit-mask:url(brujula.svg) center/contain no-repeat;mask:url(brujula.svg) center/contain no-repeat}
.b-band .b-h2{color:var(--b-negro);max-width:16ch}
.b-band .b-text{color:var(--b-negro);max-width:46ch}
.b-band .b-btn{background:var(--b-negro);color:var(--b-crema);margin-top:28px}
.b-band .b-btn:hover{color:var(--b-crema);box-shadow:inset 0 0 0 99px rgba(242,237,228,.12),0 12px 24px -12px rgba(13,13,13,.6)}
.b-band .b-btn:focus-visible{outline-color:var(--b-negro)}

/* Text over dark footage (the hero video) */
.b-oscuro,.b-oscuro .b-h1,.b-oscuro .b-h2,.b-oscuro .b-text{color:var(--b-crema)}
.b-oscuro .b-eyebrow{color:var(--b-crema)}
.b-oscuro .b-link{color:var(--b-crema);text-decoration-color:rgba(242,237,228,.5)}
.b-oscuro .b-btn:focus-visible{outline-color:var(--b-crema)}

/* Motion: one soft fade, only for people who have not asked for less */
@media (prefers-reduced-motion:no-preference){
  .b-fade{animation:b-entra .7s var(--b-ease) both}
  .b-fade + .b-fade{animation-delay:.08s}
  @keyframes b-entra{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
}
@media (prefers-reduced-motion:reduce){.b-btn,.b-link,.b-link::after,.b-video-play{transition:none}}