/* ============================================================
   Madrid Spanish Institute — core
   Spectral + Plus Jakarta Sans · paper FEFCF4 · wine 800020
   ============================================================ */

@font-face{font-family:"Spectral";src:url("../fonts/Spectral-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("../fonts/Spectral-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("../fonts/Spectral-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/PlusJakartaSans-Variable.woff2") format("woff2-variations");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  /* Botanica palette — opt-in through .theme-botanica so legal, privacy and 404
     retain the approved legacy presentation. */
  --verde:#132A22;
  --verde-h:#132A22;
  --crema:#FEFBF1;
  --papel:#FEFCF4;
  --rojo:#C8352A;
  --rojo-o:#9A241C;
  --ocre:#E0AC42;
  --negro:#1F120E;
  --tablero-a:#FEFBF1;
  --tablero-b:#062017;
  --tallo:#5B7B42;
  --corazon-b:#93A03B;
  --linea-cr:rgba(10,58,42,.2);
  --linea-c:rgba(241,232,210,.22);
  --ocre-o:#8A6318;
  --loma:#5A7F46;
  --loma-o:#44693A;
  --oro:#9A6712;
  --marca-hueco:#0A3A2A;
  /* paper */
  --paper:#FEFCF4;
  --paper-alt:#FDFAEE;          /* same hue + saturation, lower lightness */
  --paper-deep:#FCF7E3;         /* third step. solid, never a tint of wine. */
  /* wine */
  --wine:#800020;
  --wine-deep:#3B070B;
  /* warm grey system — one grey, four voices */
  --text:#32302F;               /* 12:1 on paper */
  --body:#3A3837;
  --muted:#4C4947;
  --faint:#5A5652;
  /* rules */
  --rule:rgba(50,48,47,.16);
  --rule-soft:rgba(50,48,47,.09);
  --hair-thin:rgba(255,255,255,.18);
  /* type */
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --serif-italic:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  /* eight steps. every size on the site is one of these. */
  --t-display:clamp(2.7rem,9.8vw,6.6rem);   /* the statement */
  --t-xl:clamp(2.35rem,6vw,4.1rem);        /* one line per page, no more */
  --t-l:clamp(1.9rem,3.3vw,2.7rem);         /* section titles, door titles */
  --t-m:clamp(1.3rem,2.2vw,1.7rem);       /* sub-heads, lead */
  --t-base:1.25rem;                           /* body */
  --t-s:1.125rem;                             /* ui, secondary body */
  --t-xs:.875rem;                             /* fine print */
  --t-label:.75rem;                           /* uppercase labels */
  /* motion */
  --e:cubic-bezier(.22,.61,.36,1);
  /* measure */
  --pad:clamp(1.25rem,5vw,4.5rem);
  --max:78rem;
  --gut:clamp(3rem,6vw,5.5rem);   /* the margin where numbers live */
  --t-mark:clamp(1.4rem,2.7vw,2rem);      /* bar numbers */
  --t-movement:clamp(2.2rem,4.6vw,3.4rem);  /* section numbers, one rank above */
}

/* The new direction is deliberately scoped. The statutory pages and both 404s
   do not receive this class, so their approved burgundy design is unchanged. */
.theme-botanica{
  --paper:var(--papel);
  --paper-alt:#FBF7EA;
  --paper-deep:#F5ECD7;
  --wine:var(--verde);
  --wine-deep:var(--verde-h);
  --text:var(--negro);
  --body:#29382F;
  --muted:#40534A;
  --faint:#57665E;
  --rule:rgba(10,58,42,.19);
  --rule-soft:rgba(10,58,42,.1);
}
.theme-botanica .mark svg .petals{transition:transform .7s var(--e);transform-origin:100px 100px}
.theme-botanica .mark:hover svg .petals{transform:translate(100px,100px) rotate(14deg)}
.theme-botanica .mark svg{width:1.8rem;height:2rem}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:target,section[id]{scroll-margin-top:calc(var(--head-h,5rem) + 1.5rem)}
body{
  margin:0;background:var(--paper);color:var(--text);
  overflow-x:hidden;overflow-wrap:break-word;
  font-family:var(--sans);font-size:1.125rem;line-height:1.65;
  font-weight:420;letter-spacing:-.002em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}

/* ---------- type ---------- */
/* ------------------------------------------------------------
   TYPOGRAPHY LAW
   Spectral  → h1, h2, h3, numbers, pull-quotes, Spanish phrases.
               Anything that is the brand speaking.
   Jakarta   → body, labels, navigation, buttons, forms, tables.
               Anything that is the site working.
   One size per level. No .big, no exceptions.
   ------------------------------------------------------------ */
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;
  overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:balance;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures}
h1{font-size:var(--t-display);line-height:1.02;letter-spacing:-.028em}
h2{font-size:var(--t-l);line-height:1.08;letter-spacing:-.02em}
h3{font-size:var(--t-m);line-height:1.2;letter-spacing:-.012em}
h4{font-size:var(--t-base);line-height:1.3;letter-spacing:-.006em}
p{margin:0 0 1.15rem;max-width:66ch}
p:last-child{margin-bottom:0}
a{color:inherit}
strong,b{font-weight:600}

.eyebrow{font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin:0 0 1.5rem}
.lead{font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,1.5rem);
  line-height:1.46;color:var(--text);max-width:44ch}
.quiet{color:var(--body)}
.es{font-family:var(--serif-italic);font-style:italic;color:var(--wine)}

h1 em,h2 em,h3 em,h4 em,
.brandline em,.lead em{
  font-family:var(--serif-italic);
}

/* the visually-dominant brand line under the SEO h1 */
.brandline{font-family:var(--serif);font-size:clamp(2.1rem,5.4vw,3.9rem);
  line-height:1.06;letter-spacing:-.012em;margin:0;max-width:19ch}

/* screen-reader only — used for the keyword h1 where the design needs the brand line to lead */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(3.5rem,7.5vw,6.5rem)}
.section--alt{background:var(--paper-alt)}
.section--tight{padding-block:clamp(2.75rem,5vw,4rem)}
.rule-top{border-top:1px solid var(--rule)}

/* ---------- links & actions ---------- */
.tlink{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;
  font-family:var(--sans);font-size:var(--t-s);font-weight:500;color:var(--wine);
  text-decoration:none;padding-block:.35rem;
  border-bottom:1px solid rgba(128,0,32,.28);
  transition:border-color .35s var(--e),gap .35s var(--e)}
.tlink:hover{border-color:var(--wine);gap:.75rem}
.tlink::after{content:"→";font-size:.9em;line-height:1}

.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:2.875rem;padding:.75rem 1.5rem;
  font-family:var(--sans);font-size:var(--t-s);font-weight:500;letter-spacing:.005em;
  text-decoration:none;border:1px solid var(--wine);border-radius:0;
  background:var(--wine);color:var(--paper);
  transition:background .35s var(--e),color .35s var(--e)}
.btn:hover{background:var(--wine-deep);border-color:var(--wine-deep)}
.btn--ghost{background:transparent;color:var(--wine)}
.btn--ghost:hover{background:var(--wine);color:var(--paper)}
.btn--onwine{background:var(--paper);border-color:var(--paper);color:var(--wine-deep)}
.btn--onwine:hover{background:transparent;color:var(--paper);border-color:var(--paper)}

.actions{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;margin-top:1.75rem}
.lead.lead--spaced{margin-top:clamp(1.75rem,3.5vw,2.5rem)!important}
.movement__head.movement__head--flush{margin-bottom:0!important}

/* ---------- focus, always visible ---------- */
:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.onwine :focus-visible{outline-color:var(--paper)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--paper);color:var(--wine);padding:.75rem 1.25rem;font-weight:500}
.skip:focus{left:1rem;top:1rem}

/* ============================================================
   header
   ============================================================ */
.masthead{position:sticky;top:0;z-index:50;background:var(--wine);color:var(--paper)}
.masthead__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  max-width:90rem;min-height:7rem;padding-block:1.2rem;
  border-bottom:1px solid rgba(254,252,244,.28)}
.mark{display:inline-flex;align-items:center;gap:1.05rem;min-height:3rem;
  color:inherit;text-decoration:none;flex:none}
.mark svg{width:2.05rem;height:2.35rem;flex:none;overflow:visible;color:var(--paper)}
.mark svg .gate{transition:transform .5s var(--e);transform-origin:15px 33px}
.mark:hover svg .gate{transform:scaleY(.82)}
.mark__name{font-family:var(--sans);font-size:1.35rem;font-weight:400;
  line-height:1.15;letter-spacing:-.025em;white-space:nowrap}
.site-head{position:relative;z-index:20}
.site-head__in{display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-block:1.15rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.brand svg{width:1.0625rem;height:1.1875rem;overflow:visible}
.brand svg .gate{transition:transform .5s var(--e);transform-origin:15px 33px}
.brand:hover svg .gate{transform:scaleY(.82)}
.brand span{font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:.015em}

.nav{display:flex;align-items:center;gap:clamp(1.25rem,2vw,2rem)}
.nav a{position:relative;font-family:var(--sans);font-size:1.0625rem;font-weight:500;
  text-decoration:none;color:inherit;opacity:1;letter-spacing:-.008em;
  display:inline-flex;align-items:center;min-height:2.75rem;
  transition:opacity .3s var(--e)}
.nav>a:not(.nav__lang)::after{content:"";position:absolute;left:0;right:0;bottom:.1rem;
  height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--e)}
.nav>a:hover::after,.nav>a[aria-current="page"]::after,
.nav>a[data-section-current="true"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{font-weight:600}
.nav__sep{width:1px;height:2.6rem;background:currentColor;opacity:.28}
.nav__lang{font-size:.875rem;letter-spacing:.1em;text-transform:uppercase}

/* Compact programmes disclosure: two destinations, one place in the main nav. */
.nav-programmes{position:relative;display:flex;align-items:center}
.nav-programmes__trigger{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  min-height:2.75rem;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;
  font-family:var(--sans);font-size:1.0625rem;font-weight:500;letter-spacing:-.008em}
.nav-programmes__trigger::after{content:"";position:absolute;left:0;right:0;bottom:.1rem;
  height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--e)}
.nav-programmes__chevron{width:.7rem;height:.7rem;flex:none;transition:transform .3s var(--e)}
.nav-programmes[data-open="true"] .nav-programmes__chevron{transform:rotate(180deg)}
.nav-programmes__trigger:hover::after,
.nav-programmes__trigger[aria-expanded="true"]::after,
.nav-programmes[data-current="page"] .nav-programmes__trigger::after,
.nav-programmes[data-section-current="true"] .nav-programmes__trigger::after{transform:scaleX(1)}
.nav-programmes[data-current="page"] .nav-programmes__trigger{font-weight:600}
.nav-programmes__menu{position:absolute;top:calc(100% + .85rem);left:-1.1rem;
  width:min(24rem,calc(100vw - 2rem));padding:.55rem;
  border:1px solid var(--rule);background:var(--paper);color:var(--text);
  box-shadow:0 1.25rem 3rem rgba(59,7,11,.18);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-.4rem);
  transition:opacity .22s var(--e),transform .22s var(--e),visibility .22s}
.nav-programmes__menu::before{content:"";position:absolute;left:0;right:0;top:-.9rem;height:.9rem}
.nav-programmes[data-open="true"] .nav-programmes__menu{opacity:1;visibility:visible;
  pointer-events:auto;transform:translateY(0)}
.nav .nav-programmes__menu a{display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:.15rem 1rem;min-height:0;padding:.9rem 1rem;color:var(--text);opacity:1;
  border-bottom:1px solid var(--rule-soft);font-size:1rem;line-height:1.3}
.nav .nav-programmes__menu a:last-child{border-bottom:0}
.nav .nav-programmes__menu a::after{content:"\2192";position:static;grid-column:2;grid-row:1 / span 2;
  width:auto;height:auto;background:none;transform:none;color:var(--wine);font-size:.95rem}
.nav .nav-programmes__menu a:hover,
.nav .nav-programmes__menu a[aria-current="page"]{background:var(--paper-deep);color:var(--wine)}
.nav-programmes__menu small{grid-column:1;font-size:.75rem;line-height:1.45;
  font-weight:450;color:var(--muted);letter-spacing:0}

.navtoggle{display:none;background:none;border:0;padding:.5rem;margin:-.5rem;
  color:inherit;cursor:pointer;min-width:2.75rem;min-height:2.75rem}
.navtoggle svg{width:1.25rem;height:1.25rem;display:block;margin-inline:auto}

/* header sitting on the wine hero */
.onwine{color:var(--paper)}
.onwine .site-head__in{border-bottom:1px solid var(--hair-thin)}

@media (max-width:68rem){
  .navtoggle{display:block}
  .nav{position:fixed;inset:0;z-index:60;flex-direction:column;align-items:flex-start;
    justify-content:center;gap:.35rem;padding:var(--pad);
    background:var(--wine-deep);color:var(--paper);
    width:100vw;height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;
    transform:translateY(-100%);transition:transform .5s var(--e);
    visibility:hidden;overflow-y:auto}
  .nav[data-open="true"]{transform:translateY(0);visibility:visible}
  .nav a{font-family:var(--serif);font-size:1.75rem;opacity:1;padding-block:.55rem;min-height:2.75rem;display:flex;align-items:center}
  .nav__sep{display:none}
  .nav__lang{font-family:var(--sans);font-size:.9375rem;margin-top:1.25rem}
  .navclose{position:absolute;top:1.15rem;right:var(--pad);background:none;border:0;
    color:var(--paper);cursor:pointer;min-width:2.75rem;min-height:2.75rem}
  .masthead__in{min-height:5.5rem;padding-block:1rem}
  .mark svg{width:1.55rem;height:1.78rem}.mark__name{font-size:1rem;letter-spacing:-.015em}
  .nav-programmes{display:block;width:100%;max-width:34rem}
  .nav-programmes__trigger{width:100%;font-family:var(--serif);font-size:1.75rem;
    justify-content:flex-start;padding-block:.55rem;cursor:default}
  .nav-programmes__chevron{display:none}
  .nav-programmes__menu{position:static;width:100%;padding:.1rem 0 .65rem 1.25rem;
    border:0;border-left:1px solid rgba(254,252,244,.3);background:transparent;
    color:var(--paper);box-shadow:none;opacity:1;visibility:visible;pointer-events:auto;
    transform:none;transition:none}
  .nav .nav-programmes__menu a{display:grid;grid-template-columns:1fr auto;
    padding:.6rem 0 .6rem 1rem;border-bottom:1px solid rgba(254,252,244,.13);
    background:transparent;color:var(--paper);font-family:var(--sans);font-size:1.0625rem}
  .nav .nav-programmes__menu a:hover,
  .nav .nav-programmes__menu a[aria-current="page"]{background:transparent;color:var(--paper)}
  .nav-programmes__menu small{color:var(--paper)!important;opacity:1!important;font-size:.72rem;font-weight:500}
  .nav .nav-programmes__menu a::after{color:var(--paper)}
}

/* ============================================================
   footer — broad, useful and architectural
   ============================================================ */
.site-foot{background:var(--wine);color:var(--paper);padding:0;margin-top:0}
.site-foot__inner{max-width:90rem;margin-inline:auto;
  padding:clamp(2.25rem,3.5vw,3.25rem) var(--pad) 2rem}
.site-foot a{color:inherit;text-decoration:none}
.site-foot a:not(.foot-cta){border-bottom:1px solid transparent;
  transition:border-color .3s var(--e)}
.site-foot a:not(.foot-cta):hover{border-bottom-color:rgba(254,252,244,.52)}
.foot-main{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(20rem,.78fr);
  gap:clamp(3rem,8vw,8rem);align-items:center;padding-block:clamp(2.75rem,5vw,4.5rem);
  border-top:1px solid rgba(254,252,244,.28);border-bottom:1px solid rgba(254,252,244,.28)}
.foot-kicker{font-size:1rem;line-height:1.4;color:rgba(254,252,244,.82);
  letter-spacing:.025em;margin:0 0 .8rem}
.foot-statement{font-family:var(--sans);font-size:clamp(1.65rem,2.15vw,2.05rem);
  font-weight:400;line-height:1.25;letter-spacing:-.018em;color:var(--paper);
  max-width:31ch;margin:0}
.site-foot .foot-cta{display:inline-flex;align-items:center;gap:.85rem;margin-top:1.5rem;
  min-height:3rem;padding:.72rem 1.25rem;background:var(--paper);color:var(--wine-deep);
  font-size:1rem;font-weight:600;border:1px solid var(--paper);
  transition:background .3s var(--e),color .3s var(--e)}
.site-foot .foot-cta:hover{background:transparent;color:var(--paper)}
.foot-cta span{font-size:1.15rem;font-weight:400;color:var(--wine)}
.foot-cta:hover span{color:var(--paper)}
.foot-contact{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.foot-contact__heading{font-family:var(--sans);font-size:1rem;line-height:1.45;
  color:rgba(254,252,244,.82);letter-spacing:.025em;margin:0 0 1rem}
.foot-contact li{display:grid;grid-template-columns:1.35rem minmax(0,1fr);gap:.85rem;
  align-items:center;font-size:1.125rem;line-height:1.45;color:var(--paper)}
.foot-contact a{justify-self:start;width:max-content;max-width:100%;overflow-wrap:anywhere}
.foot-icon{width:1rem;height:1rem;display:block;color:rgba(254,252,244,.82)}
.foot-places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,6vw,5rem);padding-block:clamp(2.5rem,4vw,3.75rem);
  border-bottom:1px solid rgba(254,252,244,.28)}
.foot-place{display:grid;grid-template-columns:1.35rem minmax(0,1fr);gap:.85rem;align-items:start}
.foot-place h4,.foot-place .foot-place__title{font-family:var(--sans);font-size:1.0625rem;font-weight:500;
  line-height:1.35;letter-spacing:0;text-transform:none;color:var(--paper);margin:0 0 .8rem}
.foot-place p{font-size:1.0625rem;line-height:1.55;color:rgba(254,252,244,.86);margin:0;max-width:24ch}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem clamp(1.25rem,2.8vw,2.5rem);
  padding-block:1.4rem;border-bottom:1px solid rgba(254,252,244,.28);
  font-size:1rem;color:rgba(254,252,244,.9)}
.foot-links a{min-height:2.75rem;display:inline-flex;align-items:center}
.foot-bottom{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;justify-content:space-between;
  padding-top:1.5rem;font-size:.9375rem;color:rgba(254,252,244,.8)}
.foot-bottom>p{margin:0}
.foot-bottom ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1.25rem}
@media (max-width:52rem){
  .foot-main{grid-template-columns:1fr;gap:2.75rem}
  .foot-places{grid-template-columns:1fr;gap:0}
  .foot-place{padding-block:1.5rem;border-bottom:1px solid rgba(254,252,244,.16)}
  .foot-place:first-child{padding-top:0}.foot-place:last-child{border-bottom:0;padding-bottom:0}
}

/* ============================================================
   shared blocks
   ============================================================ */

/* faq — details/summary, no javascript */
.faq{border-top:1px solid rgba(128,0,32,.3);margin-top:clamp(2rem,4vw,3rem);
}
.faq details{border-bottom:1px solid rgba(128,0,32,.3)}
.faq summary{list-style:none;cursor:pointer;padding-block:clamp(1.15rem,2.2vw,1.5rem);
  display:grid;grid-template-columns:var(--gut) minmax(0,1fr) auto;
  gap:0 clamp(.5rem,1.5vw,1rem);align-items:baseline;
  font-family:var(--serif);font-size:var(--t-m);line-height:1.3;min-height:2.75rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:1.25rem;font-weight:300;
  color:var(--wine);flex:none;line-height:1;transition:transform .4s var(--e)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq__a{padding:0 0 1.6rem;max-width:62ch;color:var(--body);
  margin-left:calc(var(--gut) + clamp(.5rem,1.5vw,1rem))}
@media (max-width:44rem){
  .faq summary{grid-template-columns:minmax(0,1fr) auto}
  .faq .faq__a{margin-left:calc(2.5rem + clamp(.5rem,1.5vw,1rem))}
}

/* forms */
.field{display:grid;gap:.45rem;margin-bottom:1.15rem}
.field label{font-family:var(--sans);font-size:.8125rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--text);
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:.7rem 0;min-height:2.75rem;border-radius:0;
  transition:border-color .3s var(--e)}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-bottom-color:var(--wine);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--wine);outline-offset:3px}
.field .hint{font-size:.8125rem;color:var(--faint)}

/* utilities */
.stack-sm > * + *{margin-top:.75rem}
.maxread{max-width:62ch}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   IMAGERY — one treatment for every photograph on the site
   duotone: wine in the shadows, ivory in the highlights, fine grain
   ============================================================ */
.duo{position:relative;overflow:hidden;background:var(--wine-deep);isolation:isolate}
.duo > img{display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.14) brightness(1.02);
  mix-blend-mode:screen;opacity:.88}
.duo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--paper);mix-blend-mode:multiply;opacity:.13}
.duo--deep > img{opacity:.62}
.duo--soft > img{opacity:.95}

.grain::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

.bleed{position:relative;width:100%}
.figcap{font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:.9rem 0 0}

/* third typographic voice: Spectral medium */
.serif-med{font-family:var(--serif);font-weight:500}


/* ============================================================
   THE GATE — the logo, at any size. a true semicircular arch
   on two legs, with the centre line. used in the hero, in the
   elevation and in the footer. never an ellipse.
   ============================================================ */
.gate{position:relative;display:flex;flex-direction:column}
.gate__crown{aspect-ratio:2/1;border:1px solid currentColor;border-bottom:0;
  border-radius:50% 50% 0 0 / 100% 100% 0 0}
.gate__legs{flex:1;border-left:1px solid currentColor;border-right:1px solid currentColor}
.gate__pier{position:absolute;left:50%;width:1px;background:currentColor;
  top:50%;bottom:0}

/* down-arrow variant of the text link, for same-page jumps */


/* ============================================================
   THE SCORE — the brand's structural device
   Every measured thing on this site sits on a ruled line with a
   number in the margin. Hero, deliverables, catalogue: same bar,
   different content. The gutter is constant down the whole page.
   ============================================================ */
.bar{display:grid;grid-template-columns:var(--gut) minmax(0,1fr);
  align-items:baseline;border-bottom:1px solid rgba(128,0,32,.3)}
.bar__no{font-family:var(--serif);font-size:var(--t-mark);font-weight:400;
  letter-spacing:-.01em;color:var(--wine);line-height:1;
  margin:0;padding-top:clamp(1rem,2.2vw,1.6rem);
  font-variant-numeric:tabular-nums}
.bar__in{min-width:0;padding-block:clamp(1rem,2.2vw,1.6rem) clamp(.9rem,1.9vw,1.3rem)}

/* rules draw themselves as they arrive */
@media (prefers-reduced-motion:no-preference){
  .bar{position:relative;border-bottom-color:transparent}
  .bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:rgba(128,0,32,.3);transform:scaleX(0);transform-origin:left;
    transition:transform 1s var(--e)}
  .bar[data-in="true"]::after{transform:scaleX(1)}
  .js-rise .rise{opacity:0;transform:translateY(10px);
    transition:opacity .8s var(--e),transform .8s var(--e)}
  .js-rise .rise[data-in="true"]{opacity:1;transform:none}
}

/* the section spine: numbers always land in the same column */
.spine{display:grid;grid-template-columns:var(--gut) minmax(0,1fr);
  gap:0 clamp(.75rem,2vw,1.5rem);align-items:baseline}
.spine__no{font-family:var(--serif);font-size:var(--t-movement);font-weight:400;
  letter-spacing:-.015em;color:var(--wine);margin:0;padding-top:0;line-height:.9;
  font-variant-numeric:tabular-nums}
.spine__in{min-width:0}
@media (max-width:44rem){
  .spine{grid-template-columns:1fr;gap:.8rem}
  .spine__no{padding-top:0}
}

/* ============================================================
   INTERIOR PAGES — three devices, so a page is not a list
   ============================================================ */

/* 1 · the correction. one per page, on the word the page revises. */
.corr{display:inline-block;position:relative;white-space:nowrap}
.corr::after{content:"";position:absolute;left:-.06em;right:-.06em;top:.47em;height:.085em;
  background:var(--wine);transform:scaleX(0);transform-origin:left;
  animation:corr .8s var(--e) .5s forwards}
@keyframes corr{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.corr::after{animation:none;transform:scaleX(1)}}
.onwine .corr::after{background:var(--paper)}

/* the opening statement of an interior page: display scale, short measure */
.thesis{font-family:var(--serif);font-size:clamp(2.6rem,7.6vw,5.4rem);line-height:1.02;
  letter-spacing:-.028em;margin:0;max-width:12ch;color:var(--text)}
.thesis .b{display:block;color:var(--wine);font-style:italic;max-width:14ch}
.counter{font-size:var(--t-base);line-height:1.6;color:var(--body);margin:0;max-width:36ch}
.phead{padding-block:clamp(2.5rem,6vw,5rem) clamp(1.75rem,3.5vw,2.75rem)}
.phead__grid{display:grid;gap:clamp(1.75rem,4vw,3rem)}
@media (min-width:60rem){
  .phead__grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.65fr);
    gap:clamp(2rem,5vw,4.5rem);align-items:end}
}

/* 2 · the track. one full-bleed object per page — a ruler, not a table. */
.bleed{width:100vw;margin-inline:calc(50% - 50vw)}
.track{border-block:1px solid rgba(128,0,32,.3);padding-block:clamp(2rem,4.5vw,3.25rem);
  overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.track__in{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(15rem,1fr);
  gap:0;min-width:min-content;padding-inline:var(--pad)}
.stop{position:relative;padding:0 clamp(1.25rem,2.5vw,2rem) 0 0}
.stop+.stop{padding-left:clamp(1.25rem,2.5vw,2rem);border-left:1px solid var(--rule-soft)}
.stop__tick{display:block;height:clamp(1.5rem,3vw,2.25rem);width:1px;background:var(--wine);
  margin-bottom:.9rem}
.stop:first-child .stop__tick{width:3px}
.stop__when{font-family:var(--sans);font-size:var(--t-label);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--wine);margin:0 0 .5rem}
.stop__what{font-family:var(--serif);font-size:var(--t-m);line-height:1.15;margin:0 0 .55rem;
  color:var(--text)}
.stop__note{font-size:var(--t-s);line-height:1.55;color:var(--body);margin:0;max-width:26ch}
.onwine .track{border-color:rgba(254,252,244,.28)}
.onwine .stop+.stop{border-left-color:rgba(254,252,244,.18)}
.onwine .stop__tick{background:var(--paper)}
.onwine .stop__when{color:rgba(254,252,244,.7)}
.onwine .stop__what{color:var(--paper)}
.onwine .stop__note{color:rgba(254,252,244,.86)}

/* 3 · the aside column. narrow argument beside wide evidence. */
.split{display:grid;gap:clamp(1.75rem,4vw,2.75rem)}
@media (min-width:64rem){
  .split{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
    gap:clamp(2.5rem,6vw,5rem);align-items:start}
  .split--wide{grid-template-columns:minmax(0,1.38fr) minmax(0,.62fr)}
}
.arg{font-family:var(--serif);font-size:var(--t-m);line-height:1.32;letter-spacing:-.01em;
  color:var(--text);margin:0;max-width:22ch}
.arg+.arg{margin-top:1.1rem;font-family:var(--sans);font-size:var(--t-s);line-height:1.6;
  color:var(--body);max-width:34ch;letter-spacing:0}

/* the audience strip: who a page is for, stated once, not as cards */
.who{display:flex;flex-wrap:wrap;gap:.6rem 0;margin:clamp(1.5rem,3vw,2.25rem) 0 0;
  padding:0;list-style:none}
.who li{font-family:var(--sans);font-size:var(--t-s);color:var(--body);
  padding-right:1.1rem;margin-right:1.1rem;border-right:1px solid var(--rule)}
.who li:last-child{border-right:0;margin-right:0;padding-right:0}

/* ============================================================
   BOTANICA THEME — the site-wide continuation of the new cover
   Ocher is used as punctuation and action, not as decorative noise.
   ============================================================ */
.theme-botanica .btn{
  border-color:var(--ocre);
  background:var(--ocre);
  color:var(--negro);
}
.theme-botanica .btn:hover{
  border-color:var(--verde);
  background:var(--verde);
  color:var(--crema);
}
.theme-botanica .btn--ghost:not(.btn--onwine){
  border-color:var(--verde);
  background:transparent;
  color:var(--verde);
}
.theme-botanica .btn--ghost:not(.btn--onwine):hover{background:var(--verde);color:var(--crema)}
.theme-botanica .onwine .btn{border-color:var(--ocre);background:var(--ocre);color:var(--negro)}
.theme-botanica .onwine .btn:hover{background:transparent;color:var(--ocre);border-color:var(--ocre)}
.theme-botanica .tlink{color:var(--oro);border-bottom-color:rgba(154,103,18,.36)}
.theme-botanica .tlink:hover{color:var(--verde);border-bottom-color:var(--verde)}
.theme-botanica .kicker,
.theme-botanica .eyebrow,
.theme-botanica .stop__when{color:var(--oro)}
.theme-botanica .door__no,
.theme-botanica .bar__no,
.theme-botanica .spine__no,
.theme-botanica .reg li::before,
.theme-botanica .figure__n{color:var(--oro)}
.theme-botanica .mv--wine{
  background:var(--verde);
  background-image:linear-gradient(168deg,var(--verde),var(--verde-h));
}
.theme-botanica .mv--wine .kicker,
.theme-botanica .onwine .kicker,
.theme-botanica .onwine .eyebrow{color:var(--ocre)}
.theme-botanica .mv--wine .spine__no,
.theme-botanica .onwine .spine__no{color:var(--ocre)}
.theme-botanica .mv--wine .tlink,
.theme-botanica .onwine .tlink{color:var(--ocre);border-bottom-color:rgba(224,172,66,.55)}
.theme-botanica .mv--wine .tlink:hover,
.theme-botanica .onwine .tlink:hover{color:var(--crema);border-bottom-color:var(--crema)}
.theme-botanica .site-foot{background:var(--verde)}
.theme-botanica .site-foot .foot-cta{background:var(--ocre);border-color:var(--ocre);color:var(--negro)}
.theme-botanica .site-foot .foot-cta:hover{background:transparent;color:var(--ocre);border-color:var(--ocre)}
.theme-botanica .site-foot .foot-kicker,
.theme-botanica .site-foot .foot-place .foot-place__title{color:var(--ocre)}
.theme-botanica :focus-visible{outline-color:var(--ocre)}

.theme-botanica .title-accent{color:var(--oro)}
.theme-botanica .onwine .title-accent{color:var(--ocre)}

/* “Venga” is a deliberate editorial pause, not another content band. */
.theme-botanica .aside{background:var(--verde);color:var(--crema);border:0}
.theme-botanica .aside .aside__q{color:var(--ocre)}
.theme-botanica .aside .aside__g{color:rgba(254,251,241,.9)}
.theme-botanica .aside .spine__no{color:var(--ocre)}


/* the figure: one number at display scale, mid-page */
.figure{display:grid;gap:.75rem;align-content:start}
.figure__n{font-family:var(--serif);font-size:clamp(3.4rem,9vw,6.4rem);line-height:.88;
  letter-spacing:-.03em;color:var(--wine);margin:0;font-variant-numeric:tabular-nums}
.figure__c{font-size:var(--t-s);line-height:1.55;color:var(--body);margin:0;max-width:28ch}

/* Project bindings for the requested clean editorial components. */
body.institutions-clean .i-record {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
body.institutions-clean .i-record__top {
  padding-top: 0;
}
/* Keep the contact form select in the same minimal visual language. */
.formulario-contacto select {
  border: none;
  border-bottom: 1px solid rgba(10,58,42,.3);
  background: transparent;
  border-radius: 0;
  padding-left: 0;
  box-shadow: none;
}
.formulario-contacto select:focus {
  border-bottom-color: var(--ocre);
  outline: none;
}

/* ============================================================
   AJUSTES FINALES OBLIGATORIOS · ART DIRECTION
   ============================================================ */

/* 1.1 Iconos del Footer forzados a Ocre */
.site-foot svg, 
.site-foot img {
  fill: var(--ocre) !important;
  color: var(--ocre) !important;
  stroke: var(--ocre) !important;
}

/* 1.2 Botones de Aula Virtual y Catálogo en Ocre sólido */
.sec--aula-virtual .btn, 
.btn-catalogo {
  background: var(--ocre) !important;
  color: var(--negro) !important;
  border-color: var(--ocre) !important;
  font-weight: 700 !important;
}
.sec--aula-virtual .btn:hover, 
.btn-catalogo:hover {
  background: transparent !important;
  color: var(--ocre) !important;
}

/* 1.3 Bloques de Instituciones limpios (sin cajas toscas) */
.tarjeta, .card, .bloque-institutions {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 1.4 Formularios minimalistas con línea inferior */
input, textarea, .formulario-contacto input {
  border: none !important;
  border-bottom: 1px solid rgba(10, 58, 42, 0.3) !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  box-shadow: none !important;
}
input:focus, textarea:focus {
  border-bottom-color: var(--ocre) !important;
  outline: none !important;
}

/* ============================================================
   ESCALERA EDITORIAL DE NIVELES · LA CASA
   ============================================================ */
/* ============================================================
   LA CASA — ESCALERA EDITORIAL
   Nivel | planta/metáfora | aplicación real
   Sin tarjetas: jerarquía, ritmo y desplazamiento progresivo.
   ============================================================ */
.casa-editorial {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  overflow: hidden;
}
.nivel-row {
  display: grid;
  grid-template-columns: 76px minmax(11rem, .8fr) minmax(18rem, 1.45fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  padding: clamp(1.75rem, 3vw, 2.35rem) 0;
  border-bottom: 1px solid rgba(10,58,42,.18);
  align-items: baseline;
  transition: transform .35s var(--e), border-color .35s var(--e);
}
.nivel-row:first-child {
  border-top: 1px solid rgba(10,58,42,.18);
}
.nivel-row:hover {
  border-color: rgba(224,172,66,.62);
}
.nivel-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .16em;
  color: var(--ocre-o, var(--ocre));
}
.nivel-badge::before {
  content: "";
  width: 1.35rem;
  height: 1px;
  background: var(--ocre);
  flex: none;
}
.nivel-meta h3,
.nivel-meta h4 {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.25vw, 2rem);
  font-weight: 400;
  color: var(--verde);
  margin: 0;
  line-height: 1.05;
  letter-spacing: -.018em;
}
.nivel-meta span {
  display: block;
  margin-top: .5rem;
  font-family: var(--sans);
  font-size: .73rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--muted);
}
.nivel-desc p {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  color: var(--body);
  margin: 0;
  line-height: 1.62;
  max-width: 47ch;
}
@media (min-width: 68rem) {
  .nivel-row:nth-child(1) { margin-left: 0; }
  .nivel-row:nth-child(2) { margin-left: 5%; }
  .nivel-row:nth-child(3) { margin-left: 10%; }
  .nivel-row:nth-child(4) { margin-left: 15%; }
  .nivel-row:nth-child(5) { margin-left: 20%; }
}
@media (max-width: 68rem) {
  .nivel-row {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: .55rem 1.25rem;
    padding: 1.5rem 0;
    margin-left: 0 !important;
  }
  .nivel-badge { grid-row: 1 / span 2; align-self: start; padding-top: .35rem; }
  .nivel-meta { grid-column: 2; }
  .nivel-desc { grid-column: 2; }
}
@media (max-width: 38rem) {
  .nivel-row { grid-template-columns: 1fr; gap: .55rem; }
  .nivel-badge,.nivel-meta,.nivel-desc { grid-column: 1; grid-row: auto; }
  .nivel-badge { padding-top: 0; }
  .nivel-desc p { max-width: none; }
}


/* ============================================================
   BOTANICA MASTHEAD · TACTILE CONTINUITY
   Same material language as the hero, quieter so navigation stays crisp.
   ============================================================ */
.theme-botanica .masthead{
  isolation:isolate;
  overflow:visible;
}
.theme-botanica .masthead::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg,rgba(254,251,241,.05) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(31,18,14,.045) 0 1px,transparent 1px 6px);
  background-size:420px 420px,100% 100%,100% 100%;
  mix-blend-mode:soft-light;
  opacity:.34;
}
.theme-botanica .masthead__in{
  position:relative;
  z-index:1;
}


/* About/Us: institutional facts instead of a sales panel. */
.u-about-facts{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid rgba(10,58,42,.3);
}
.u-about-facts li{
  display:grid;
  grid-template-columns:minmax(8rem,.8fr) minmax(0,1.2fr);
  gap:1rem;
  align-items:baseline;
  padding:.9rem 0;
  border-bottom:1px solid rgba(10,58,42,.3);
}
.u-about-facts small{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.u-about-facts strong{
  font-family:var(--serif);
  font-size:clamp(1.25rem,2vw,1.7rem);
  font-weight:400;
  line-height:1.15;
  color:var(--verde);
}
@media(max-width:44rem){
  .u-about-facts li{grid-template-columns:1fr;gap:.25rem}
}

/* Aula Virtual: primary entry CTA spacing after converting the text link to a button. */
.sec--aula-virtual .aula-entry .btn{
  margin-top:1.25rem;
}


/* ============================================================
   V55 · AULA MODES + PLACEMENT TEST
   ============================================================ */
.sec--aula-virtual .course__modes li{
  background:var(--ocre) !important;
  color:var(--negro) !important;
  border-color:var(--ocre) !important;
  font-weight:700 !important;
}
.sec--aula-virtual .course__modes li:hover{
  background:transparent !important;
  color:var(--oro) !important;
}

.placement-spot{
  padding-block:clamp(3rem,6vw,5rem);
  border-top:1px solid rgba(10,58,42,.22);
  border-bottom:1px solid rgba(10,58,42,.22);
  background:var(--paper);
}
.placement-spot__grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(20rem,1.1fr);
  gap:clamp(2rem,7vw,7rem);
  align-items:end;
}
.placement-spot .kicker{margin-bottom:1rem;}
.placement-spot h2{
  margin:0;
  max-width:15ch;
  font-size:clamp(2.15rem,4.3vw,3.8rem);
  line-height:1.02;
}
.placement-spot__copy p{
  margin:0;
  max-width:52ch;
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--body);
}
.placement-spot .btn{margin-top:1.35rem;}
@media(max-width:52rem){
  .placement-spot__grid{grid-template-columns:1fr;gap:1.25rem;}
  .placement-spot h2{max-width:20ch;}
}

/* ============================================================
   V61 · LEY DEL ROJO
   El rojo queda reservado al logotipo y al capullo de la escena.
   Toda la puntuación estructural —numerales, barras, puertas,
   listas y badges— se resuelve en oro viejo (#9A6712, 4,7:1 sobre
   papel crema) o en ocre (#E0AC42) cuando el fondo es oscuro.
   ============================================================ */
.spine__no,
.door__no,
.bar__no,
.nivel-badge,
.reg li::before,
.time-lines span,
.facts span,
.figure__n,
.brief-list span,
.next-steps__no,
.editorial-lines__no,
.seminar-lines span,
.platform-list span{
  color:var(--oro) !important;
}
.nivel-badge::before{
  background:var(--oro) !important;
}

/* Sobre fondo oscuro el oro no mide: ahí manda el ocre. */
.aside .spine__no,
.aside .door__no,
.aside .bar__no,
.aside .figure__n,
.aside .nivel-badge,
.mv--wine .spine__no,
.mv--wine .bar__no,
.mv--wine .figure__n,
.onwine .spine__no,
.onwine .door__no,
.onwine .bar__no,
.onwine .nivel-badge,
.onwine .reg li::before,
.onwine .time-lines span,
.onwine .facts span,
.onwine .figure__n,
.onwine .brief-list span,
.onwine .next-steps__no,
.onwine .editorial-lines__no,
.onwine .seminar-lines span,
.onwine .platform-list span,
.site-foot .spine__no,
.site-foot .bar__no,
.site-foot .facts span{
  color:var(--ocre) !important;
}
.onwine .nivel-badge::before,
.site-foot .nivel-badge::before{
  background:var(--ocre) !important;
}

/* ============================================================
   V64 · CTA EN OCRE · TEXTO EN VERDE NOCHE
   Todo botón de fondo ocre lleva el mismo texto: verde noche,
   700, versal espaciada. Sin excepciones.
   ============================================================ */
.theme-botanica .btn:not(.btn--ghost),
.theme-botanica .onwine .btn:not(.btn--ghost),
.theme-botanica .site-foot .foot-cta,
.sec--aula-virtual .btn,
.btn-catalogo,
.hero-botanica__cta,
.formulario-contacto button,
.formulario-contacto [type="submit"],
button[type="submit"],
[type="submit"].btn{
  color:var(--verde-h) !important;
  font-family:var(--sans) !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
/* El hover invierte el bloque: el ocre se retira y el texto vuelve a
   leerse sobre el fondo que queda. */
.theme-botanica .btn:hover{color:var(--crema) !important}
.theme-botanica .onwine .btn:hover,
.theme-botanica .site-foot .foot-cta:hover,
.sec--aula-virtual .btn:hover,
.btn-catalogo:hover,
.hero-botanica__cta:hover{color:var(--ocre) !important}
.theme-botanica .btn--ghost:not(.btn--onwine){color:var(--verde) !important}
.theme-botanica .foot-cta span,
.theme-botanica .btn span{color:var(--verde-h) !important}
.theme-botanica .foot-cta:hover span{color:var(--ocre) !important}
.theme-botanica .btn--ghost:not(.btn--onwine):hover{color:var(--crema) !important}

/* Iconos del pie en ocre. */
.site-foot svg,
.site-foot img{
  fill:var(--ocre) !important;
  color:var(--ocre) !important;
  stroke:var(--ocre) !important;
}

/* El tracking en versalita de los CTA amplía su ancho intrínseco y, dentro
   de un grid de una columna, arrastraba la columna entera fuera del viewport
   en los artículos. La columna se blinda con minmax(0,1fr). */
@media(max-width:64rem){
  .article-shell{grid-template-columns:minmax(0,1fr) !important}
  .article-shell > *{min-width:0}
}

/* El CTA del bloque de practica lleva nowrap y, en castellano, su texto en
   versalita mide 778px: dentro de un grid de una columna arrastraba el
   bloque entero fuera del viewport y cortaba el parrafo y el boton. */
@media(max-width:64rem){
  .practice{grid-template-columns:minmax(0,1fr) !important}
  .practice > *{min-width:0}
  /* !important: el <style> de la propia pagina carga despues de core.css */
  .practice .btn{white-space:normal !important;text-align:center;
    letter-spacing:.06em !important;text-wrap:balance}
}

/* ============================================================
   VOLVER ARRIBA
   La regla vivia en el <style> de cada pagina y faltaba en cuatro
   (contact, blog y sus equivalentes en castellano), donde el boton
   salia con el gris por defecto del navegador, a 16x21px y visible
   en mitad del contenido. Pasa a core.css, que es su sitio.
   ============================================================ */
#totop{position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:45;
  width:2.75rem;height:2.75rem;display:grid;place-items:center;
  background:var(--wine);color:var(--paper);border:0;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(.5rem);
  transition:opacity .4s var(--e),transform .4s var(--e),visibility .4s,background .3s var(--e)}
#totop[data-show="true"]{opacity:1;visibility:visible;transform:none}
#totop:hover{background:var(--wine-deep)}
#totop svg{width:.85rem;height:1rem}

/* El CTA del bloque de credito Fundae vive en una columna estrecha. Sin
   ajuste se estira a todo el ancho; con width:max-content arrastraba la
   columna fuera del viewport en movil, porque el texto en castellano mide
   501px en versalita. Se acota el track y el boton envuelve cuando toca. */
.credit-note{min-width:0}
.credit-note .btn{
  justify-self:start;
  align-self:start;
  width:fit-content;
  max-width:100%;
  margin-top:1.25rem;
  white-space:normal;
  text-wrap:balance;
}
@media(max-width:64rem){
  .fund-hero__grid,
  .fund-hero .wrap > *{min-width:0}
}

/* En movil, la fila de archivo del blog es una rejilla de 40px + resto.
   El enlace de lectura lleva nowrap y en castellano, donde los titulos
   son mas largos, se salia del viewport. Se le permite envolver. */
@media(max-width:44rem){
  .archive__row{min-width:0}
  .archive__row > *{min-width:0}
  /* !important: la regla con nowrap esta en el <style> de la propia
     pagina del blog, que carga despues de core.css */
  .archive__row .tlink{white-space:normal !important}
}

/* v20.12 — Símbolos de la casa. Una sola fuente: se dibujan con las
   medidas exactas de Contacto (3.9rem) y, donde hacen falta más pequeños,
   se escalan enteros con transform, así conservan sus proporciones.
   Significado fijo: azul = email, rojo = WhatsApp/mensaje, grano dorado =
   videollamada, hoja con líneas = formulario, reloj = tiempo de respuesta,
   marca = Madrid, globo = en todo el mundo, pantalla = Campus. */
.s-sim{position:relative;display:block;flex:none;width:3.9rem;height:3.9rem}
.s-sim::before,.s-sim::after{content:"";position:absolute;border-radius:50%}
.s-sim--email::before{inset:.35rem;background:radial-gradient(circle at 38% 32%,#E8F1F2 0 9%,#76A5C4 12% 39%,#315F68 42% 67%,transparent 70%);box-shadow:0 0 0 1px rgba(118,165,196,.45)}
.s-sim--email::after{inset:0;border:1px solid rgba(118,165,196,.48)}
.s-sim--whatsapp::before{inset:.6rem;background:radial-gradient(circle at 38% 32%,#F7B1A9 0 8%,#C8352A 12% 58%,#7A211C 100%)}
.s-sim--whatsapp::after{inset:.12rem;border:1px solid rgba(239,101,92,.55);box-shadow:0 0 0 .4rem rgba(239,101,92,.08)}
.s-sim--video::before{inset:.25rem .7rem;background:radial-gradient(ellipse at 38% 30%,#F7E4A8 0 9%,#CBA24E 13% 58%,#8A6318 100%);transform:rotate(24deg)}
.s-sim--video::after{width:.42rem;height:.42rem;right:.35rem;top:.45rem;background:#CBA24E}
.s-sim--form::before{inset:.28rem;border:1px solid rgba(254,252,244,.68);border-radius:.15rem;background:transparent}
.s-sim--form::after{left:1.03rem;right:1.03rem;top:1.12rem;height:1px;border-radius:0;background:#CBA24E;box-shadow:0 .62rem 0 #CBA24E,0 1.24rem 0 #CBA24E}
.s-sim--respuesta::before{inset:.6rem;background:
  linear-gradient(#132A22,#132A22) 50% 28.6%/2px 30% no-repeat,
  linear-gradient(#132A22,#132A22) 65.8% 50%/24% 2px no-repeat,
  radial-gradient(circle at 38% 32%,#F7E4A8 0 8%,#CBA24E 12% 58%,#8A6318 100%)}
.s-sim--respuesta::after{inset:.12rem;border:1px solid rgba(203,162,78,.55);box-shadow:0 0 0 .4rem rgba(203,162,78,.08)}
.s-sim--madrid::before{inset:.6rem;background:radial-gradient(circle at 56% 44%,#F2D48A 0 5%,#CBA24E 6% 13%,#132A22 14% 36%,#C8352A 37% 72%,#7A211C 100%)}
.s-sim--madrid::after{inset:.12rem;border:1px solid rgba(239,101,92,.55);box-shadow:0 0 0 .4rem rgba(239,101,92,.08)}
.s-sim--mundo::before{inset:.35rem;background:radial-gradient(circle at 38% 32%,#EEF4E6 0 9%,#8DBB93 12% 39%,#2E5A48 42% 67%,transparent 70%);box-shadow:0 0 0 1px rgba(141,187,147,.45)}
.s-sim--mundo::after{top:.62rem;bottom:.62rem;left:1.32rem;right:1.32rem;border:1px solid rgba(233,206,140,.9)}
.s-sim--campus::before{left:.35rem;right:.35rem;top:.62rem;bottom:1.12rem;border-radius:.32rem;border:.17rem solid #E3D8BD;
  background:radial-gradient(ellipse at 28% 26%,rgba(238,244,230,.55) 0 9%,transparent 10%),linear-gradient(150deg,#4F8A76 0%,#2A5A4A 55%,#173B31 100%);
  box-shadow:0 .15rem .3rem rgba(0,0,0,.3)}
.s-sim--campus::after{left:1.3rem;right:1.3rem;bottom:.62rem;height:.34rem;border-radius:.2rem;background:linear-gradient(#F7E4A8,#CBA24E 50%,#8A6318)}
/* tamaño reducido: el símbolo entero a escala, ocupando 2.4rem en la maqueta */
.s-sim--sm{transform:scale(.615);transform-origin:0 0;margin:0 -1.5rem -1.5rem 0}
/* en el pie: el símbolo ocupa la columna del antiguo icono */
.site-foot .foot-contact li,.site-foot .foot-place{grid-template-columns:2.4rem minmax(0,1fr);gap:.9rem}
.site-foot .foot-contact li{align-items:center}
.site-foot .foot-place .foot-sim{margin-top:-.35rem}