/* ============================================================
   Casa Estudio Comala
   Paleta: cal (blanco de Comala), basalto (roca volcánica),
   cafetal (verde de hoja de café), niebla (bruma)
   Tipografías: Fraunces (display) · Karla (texto) · Courier Prime (datos)
   ============================================================ */

:root{
  --cal:       #f4f5f1;
  --cal-alt:   #e9eae2;
  --cal-line:  #d6d8cf;
  --basalto:   #131715;
  --basalto-2: #1c211e;
  --cafetal:   #2c4231;
  --cafetal-cl:#557a5f;
  /* niebla: gris secundario. El valor cambia según el fondo para
     mantener el contraste mínimo AA (4.5:1) en ambos casos. */
  --niebla:    #5f6760;  /* sobre cal / cal-alt  → 5.3 : 1 */
  --niebla-lt: #a9b2aa;  /* sobre basalto        → 8.3 : 1 */

  --ff-disp: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ff-body: "Karla", "Helvetica Neue", Arial, sans-serif;
  --ff-data: "Courier Prime", "Courier New", monospace;

  --wrap: 1180px;
  --gut: clamp(1.25rem, 5vw, 4rem);
  --secpad: clamp(4.5rem, 10vw, 9.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--cal);
  color:var(--basalto);
  font-family:var(--ff-body);
  font-size:clamp(1rem, .96rem + .18vw, 1.08rem);
  font-weight:400;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

em{ font-style:italic; }

a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--basalto); color:var(--cal);
  padding:.7rem 1.1rem; font-family:var(--ff-data); font-size:.78rem;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--cafetal-cl); outline-offset:3px; }

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */
.head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
/* velo degradado: separa el logotipo y el menú de la fotografía del hero */
.head::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(19,23,21,.78) 0%,
    rgba(19,23,21,.55) 42%,
    rgba(19,23,21,.22) 74%,
    rgba(19,23,21,0) 100%);
  transition:opacity .45s var(--ease);
}
.head.is-stuck::before{ opacity:0; }
.head__in{ position:relative; z-index:1; }
.head__in{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:1rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  transition:padding .45s var(--ease);
}
.head.is-stuck{ background:rgba(244,245,241,.94); backdrop-filter:blur(10px); border-bottom-color:var(--cal-line); }
.head.is-stuck .head__in{ padding-block:.6rem; }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:0 0 auto; }
.brand__mark{ width:42px; transition:width .45s var(--ease); }
.head.is-stuck .brand__mark{ width:35px; }
.brand__mark--dark{ display:none; }
.head.is-stuck .brand__mark--light{ display:none; }
.head.is-stuck .brand__mark--dark{ display:block; }

.nav ul{
  list-style:none; display:flex; flex-wrap:nowrap; align-items:center;
  gap:1.15rem; margin:0; padding:0; justify-content:flex-end;
}
.nav a{
  font-family:var(--ff-data); font-size:.79rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:rgba(244,245,241,.9);
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.nav a:hover{ color:var(--cal); border-bottom-color:currentColor; }
.head.is-stuck .nav a{ color:var(--basalto); }
.head.is-stuck .nav a:hover{ color:var(--cafetal); }

/* 1d. Contacto: botón, no un enlace más de la lista */
.nav__cta{ margin-left:.55rem; }
.nav__cta a{
  border:1px solid rgba(244,245,241,.5);
  padding:.5rem .95rem; padding-bottom:.5rem;
  color:var(--cal);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nav__cta a:hover{
  background:var(--cal); color:var(--basalto); border-color:var(--cal);
  border-bottom-color:var(--cal);
}
.head.is-stuck .nav__cta a{ border-color:var(--basalto); color:var(--basalto); }
.head.is-stuck .nav__cta a:hover{ background:var(--basalto); color:var(--cal); }

.burger{
  display:none; width:38px; height:32px; padding:0; border:0; background:none; cursor:pointer;
  position:relative; flex:0 0 auto;
}
.burger span{
  position:absolute; left:6px; right:6px; height:1.5px; background:var(--cal);
  transition:transform .35s var(--ease), background .45s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ top:12px; }
.burger span:nth-child(2){ top:19px; }
.head.is-stuck .burger span{ background:var(--basalto); }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.hero__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%;
  animation:heroIn 2.4s var(--ease) both;
}
@keyframes heroIn{ from{ transform:scale(1.06); opacity:0; } to{ transform:scale(1); opacity:1; } }

.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(19,23,21,.55) 0%, rgba(19,23,21,.18) 34%, rgba(19,23,21,.42) 72%, rgba(19,23,21,.82) 100%);
}

.hero__body{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:8rem var(--gut) clamp(3rem,7vh,5rem);
  color:var(--cal);
}
.hero__logo{ width:clamp(52px,7vw,78px); margin-bottom:1.6rem; opacity:0; animation:up 1s var(--ease) .5s both; }

.hero__h1{
  font-family:var(--ff-disp);
  font-optical-sizing:auto;
  font-variation-settings:"SOFT" 30, "WONK" 1;
  font-weight:300;
  font-size:clamp(2.7rem, 8.2vw, 6.6rem);
  line-height:.98;
  letter-spacing:-.02em;
  margin:0 0 1.2rem;
  max-width:16em;
  opacity:0; animation:up 1s var(--ease) .68s both;
}
.hero__h1 em{ font-style:italic; color:#e6ece4; }

.hero__sub{
  font-size:clamp(1.02rem,1.5vw,1.28rem);
  font-weight:300; line-height:1.6; max-width:34ch;
  color:rgba(244,245,241,.9);
  margin:0;
  opacity:0; animation:up 1s var(--ease) .86s both;
}

@keyframes up{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* claqueta / slate */
.slate{
  position:relative; z-index:2;
  background:rgba(19,23,21,.62); backdrop-filter:blur(8px);
  border-top:1px solid rgba(244,245,241,.16);
  opacity:0; animation:up .9s var(--ease) 1.05s both;
}
.slate__in{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:1.05rem var(--gut);
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 2.4rem;
  font-family:var(--ff-data); font-size:.73rem; letter-spacing:.07em;
  color:rgba(244,245,241,.82);
}
.slate__item b{ display:block; font-weight:400; font-size:.62rem; letter-spacing:.19em; text-transform:uppercase; color:var(--niebla-lt); }
.slate__cta{
  margin-left:auto; text-decoration:none; color:var(--cal);
  border:1px solid rgba(244,245,241,.4); padding:.55rem 1.1rem;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.slate__cta:hover{ background:var(--cal); color:var(--basalto); border-color:var(--cal); }

/* ------------------------------------------------------------
   SECCIONES
   ------------------------------------------------------------ */
.sec{ padding-block:var(--secpad); }
.sec--alt{ background:var(--cal-alt); }
.sec--dark{ background:var(--basalto); color:var(--cal); --niebla:var(--niebla-lt); }
.slate{ --niebla:var(--niebla-lt); }
.sec--dark em{ color:#dfe7de; }

/* slug line: etiqueta + filete + metadato */
.slug{ display:flex; align-items:center; gap:1.1rem; margin-bottom:clamp(2rem,4vw,3.2rem); }
.slug__label,
.slug__meta{
  font-family:var(--ff-data); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; white-space:nowrap;
  min-width:0;
}
.slug__meta{ overflow:hidden; text-overflow:ellipsis; }
.slug__label{ color:var(--cafetal); }
.slug__meta{ color:var(--niebla); }
.slug__rule{ flex:1 1 auto; height:1px; background:var(--cal-line); }
.slug--minor{ margin-top:clamp(3rem,6vw,5rem); }

.sec--dark .slug__label{ color:var(--cafetal-cl); }
.sec--dark .slug__rule{ background:rgba(244,245,241,.16); }

.h2{
  font-family:var(--ff-disp); font-optical-sizing:auto;
  font-variation-settings:"SOFT" 24, "WONK" 1;
  font-weight:300;
  font-size:clamp(2rem, 4.6vw, 3.5rem);
  line-height:1.06; letter-spacing:-.017em;
  margin:0 0 clamp(1.6rem,3vw,2.4rem);
  max-width:22ch;
}

.lede{ max-width:30ch; }
.lede p{
  font-family:var(--ff-disp); font-optical-sizing:auto;
  font-variation-settings:"SOFT" 40, "WONK" 0;
  font-weight:300;
  font-size:clamp(1.35rem, 2.9vw, 2.15rem);
  line-height:1.28; letter-spacing:-.012em;
  max-width:26ch;
}
.lede{ max-width:none; margin-bottom:clamp(2.5rem,5vw,4rem); }
.lede--sm p{ font-size:clamp(1.15rem,2vw,1.55rem); line-height:1.42; max-width:38ch; }

.pull{
  margin:clamp(3rem,6vw,5rem) 0 0;
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--cal-line);
  font-family:var(--ff-disp); font-optical-sizing:auto;
  font-variation-settings:"SOFT" 50, "WONK" 1;
  font-style:italic; font-weight:300;
  font-size:clamp(1.4rem,3.3vw,2.5rem);
  line-height:1.24; letter-spacing:-.01em;
  max-width:32ch;
}

.note{
  margin-top:clamp(2rem,4vw,3rem);
  font-family:var(--ff-data); font-size:.82rem; line-height:1.7;
  color:var(--niebla); max-width:56ch;
}
.note a{ color:var(--cafetal); text-decoration:underline; text-underline-offset:3px; }

.tbd{ font-family:var(--ff-data); font-size:.86em; color:var(--niebla); }

/* texto + figura */
.duo{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.duo--flip{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); }
.duo__text{ max-width:62ch; }

/* Apertura de INICIO: la fotografía sube hasta la altura del texto de
   entrada, de modo que no quede espacio vacío a su costado. */
.opener{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:stretch;
}
.opener__text{ display:flex; flex-direction:column; }
.opener__text .lede{ margin-bottom:clamp(1.8rem,3.5vw,2.8rem); }
.opener__text .lede p{ max-width:none; }
.opener__body{ max-width:54ch; }
.opener__fig{ margin:0; display:flex; }
.opener__fig img{
  width:100%; height:100%; object-fit:cover;
  min-height:clamp(340px, 44vw, 620px);
}

.duo__aside{
  border-top:1px solid var(--cal-line);
  padding-top:1.4rem;
}
.sec--dark .duo__aside{ border-top-color:rgba(244,245,241,.18); }
.aside__title{
  font-family:var(--ff-data); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cafetal); margin:0 0 1.4rem; font-weight:400;
}
.specs{ list-style:none; margin:0; padding:0; }
.specs li{
  padding:.9rem 0; border-bottom:1px solid var(--cal-line);
  font-size:.94rem; line-height:1.6;
}
.specs li span{
  display:block; font-family:var(--ff-data); font-size:.64rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--niebla); margin-bottom:.25rem;
}

/* ------------------------------------------------------------
   QUIÉNES SOMOS
   ------------------------------------------------------------ */
.orgs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,5vw,4.5rem); }
.org{ border-top:2px solid var(--basalto); padding-top:1.5rem; }
.org__name{
  font-family:var(--ff-disp); font-optical-sizing:auto; font-variation-settings:"WONK" 1;
  font-weight:400; font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.15;
  margin:0 0 .3rem; letter-spacing:-.01em;
}
.org__year{
  font-family:var(--ff-data); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--niebla); margin-bottom:1.3rem;
}

.people{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,4vw,3.5rem) clamp(2rem,5vw,4.5rem); }
.person{ border-top:1px solid var(--cal-line); padding-top:1.4rem; }
.person__org{
  font-family:var(--ff-data); font-size:.63rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--cafetal); margin-bottom:.6rem;
}
.person__name{
  font-family:var(--ff-disp); font-optical-sizing:auto; font-variation-settings:"SOFT" 20,"WONK" 1;
  font-weight:400; font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.2;
  margin:0 0 .9rem; letter-spacing:-.008em;
}
.person p:not(.person__org){ font-size:.96rem; }

/* ------------------------------------------------------------
   COMALA (oscuro)
   ------------------------------------------------------------ */
.cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,5vw,4.5rem); }
.cols p{ color:rgba(244,245,241,.86); }

.band{ margin:clamp(3rem,6vw,5rem) 0; }
.band img{ width:100%; aspect-ratio:21/9; object-fit:cover; }

.sec--dark .lede p{ color:var(--cal); }

/* ------------------------------------------------------------
   GALERÍA
   ------------------------------------------------------------ */
.gal{
  margin-top:clamp(3rem,6vw,5rem);
  display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.5rem,1.2vw,1rem);
}
.gal__i{ margin:0; grid-column:span 2; overflow:hidden; }
.gal__i img{
  width:100%; height:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
}
.gal__i:hover img{ transform:scale(1.035); }
.gal__i--w{ grid-column:span 6; }
.gal__i--w img{ aspect-ratio:21/9; }

/* ------------------------------------------------------------
   TUTORES
   Con sólo dos tutores, cada uno ocupa una franja de ancho completo
   y el retrato alterna de lado para dar ritmo a la sección.
   ------------------------------------------------------------ */
.tutor{
  display:grid;
  grid-template-columns:clamp(210px,20vw,290px) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
  padding:clamp(2.2rem,4.5vw,3.5rem) 0;
  border-top:1px solid var(--cal-line);
}
.tutor:first-of-type{ border-top:2px solid var(--basalto); }

/* Al alternar hay que invertir también el ancho de las columnas,
   no sólo la posición, o el texto cae en la columna angosta. */
.tutor--flip{ grid-template-columns:minmax(0,1fr) clamp(210px,20vw,290px); }
.tutor--flip .tutor__fig{ grid-column:2; grid-row:1; }
.tutor--flip .tutor__body{ grid-column:1; grid-row:1; }

.tutor__fig{ margin:0; }
.tutor__fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }

.tutor__body{ min-width:0; max-width:560px; }
.tutor__role{
  font-family:var(--ff-data); font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--cafetal); margin-bottom:.5rem;
}
.tutor__name{
  font-family:var(--ff-disp); font-optical-sizing:auto; font-variation-settings:"SOFT" 22,"WONK" 1;
  font-weight:300; font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.08;
  margin:0 0 1.1rem; letter-spacing:-.018em;
}
.tutor__bio{
  font-size:clamp(1rem,1.2vw,1.06rem); line-height:1.75; margin-bottom:1.8rem;
}

/* ficha de créditos: filmografía y bibliografía en la tipografía de datos */
.creds{ margin:0; border-top:1px solid var(--cal-line); }
.creds > div{
  display:grid; grid-template-columns:7rem minmax(0,1fr);
  gap:.6rem 1.5rem;
  padding:.85rem 0; border-bottom:1px solid var(--cal-line);
}
.creds dt{
  font-family:var(--ff-data); font-size:.64rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--niebla); padding-top:.2rem;
}
.creds dd{
  margin:0; font-family:var(--ff-data); font-size:.82rem; line-height:1.75;
  color:var(--basalto);
}
.creds dd em{ font-style:italic; }

/* ------------------------------------------------------------
   COSTOS
   ------------------------------------------------------------ */
.fee{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,.75fr) minmax(0,1.35fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(1.8rem,3.5vw,2.6rem) 0;
  border-top:1px solid var(--cal-line);
  align-items:start;
}
.fee--main{ border-top:2px solid var(--basalto); }

.fee__step{
  font-family:var(--ff-data); font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--cafetal); margin-bottom:.5rem;
}
.fee__label{
  font-family:var(--ff-disp); font-optical-sizing:auto; font-variation-settings:"SOFT" 22,"WONK" 1;
  font-weight:400; font-size:clamp(1.1rem,1.8vw,1.4rem); line-height:1.2;
  letter-spacing:-.008em; margin:0;
}

.fee__fig{
  font-family:var(--ff-disp); font-optical-sizing:auto; font-variation-settings:"SOFT" 20,"WONK" 1;
  font-weight:300; font-size:clamp(2.6rem,5.2vw,3.9rem); line-height:.95; letter-spacing:-.03em;
  margin:0 0 .4rem; white-space:nowrap;
}
.fee__from{
  display:block; font-family:var(--ff-data); font-size:.66rem; font-weight:400;
  letter-spacing:.19em; text-transform:uppercase; color:var(--niebla);
  margin-bottom:.45rem;
}
.fee__unit{
  font-family:var(--ff-data); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cafetal); margin:0;
}

.fee__body{ max-width:52ch; }
.fee__body p{ font-size:.98rem; }
.fee__sub{
  font-family:var(--ff-data); font-size:.66rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--niebla); margin-bottom:.9rem;
}
.fee__excl{
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--cal-line);
  font-size:.9rem; color:var(--niebla);
}

/* paso intermedio: la evaluación del panel */
.gate{
  display:grid; grid-template-columns:2.5rem minmax(0,1fr);
  gap:clamp(1rem,2vw,1.5rem); align-items:baseline;
  padding:clamp(1.4rem,3vw,2rem) 0;
  border-top:1px solid var(--cal-line);
}
.gate__mark{
  font-family:var(--ff-data); font-size:1.1rem; color:var(--cafetal); margin:0;
}
.gate__txt{
  margin:0; max-width:56ch;
  font-family:var(--ff-disp); font-optical-sizing:auto; font-variation-settings:"SOFT" 40;
  font-weight:300; font-style:italic;
  font-size:clamp(1.05rem,1.9vw,1.35rem); line-height:1.45;
}

/* calendario de pagos */
.pay{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,3vw,2.5rem);
}
.pay__i{ border-top:2px solid var(--cafetal); padding-top:1.2rem; }
.pay__pct{
  font-family:var(--ff-disp); font-optical-sizing:auto; font-variation-settings:"SOFT" 20,"WONK" 1;
  font-weight:300; font-size:clamp(2.6rem,5.5vw,3.6rem); line-height:.92; letter-spacing:-.03em;
  margin:0 0 .5rem;
}
.pay__pct span{ font-size:.42em; letter-spacing:0; }
.pay__when{
  font-family:var(--ff-data); font-size:.8rem; line-height:1.6; color:var(--niebla); margin:0;
}

.cost__data{ margin:clamp(2.5rem,5vw,3.5rem) 0 0; }
.cost__data > div{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem;
  padding:1.05rem 0; border-bottom:1px solid var(--cal-line);
}
.cost__data > div:first-child{ border-top:1px solid var(--cal-line); }
.cost__data dt{
  font-family:var(--ff-data); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--basalto);
}
.cost__data dd{ margin:0; font-size:.96rem; }

/* ------------------------------------------------------------
   ¿CÓMO APLICAR?
   ------------------------------------------------------------ */
.dates{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3rem);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.date{ border-top:2px solid var(--cafetal); padding-top:1.3rem; }
.date__k{
  font-family:var(--ff-data); font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--cafetal); margin-bottom:.6rem;
}
.date__v{
  font-family:var(--ff-disp); font-optical-sizing:auto; font-variation-settings:"SOFT" 25,"WONK" 1;
  font-weight:300; font-size:clamp(1.3rem,2.6vw,1.95rem); line-height:1.18; letter-spacing:-.01em;
  margin:0;
}

.steps{ display:grid; gap:0; }
.step{
  display:grid; grid-template-columns:5rem minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.8rem,3.5vw,2.8rem) 0;
  border-top:1px solid var(--cal-line);
}
.step:last-child{ border-bottom:1px solid var(--cal-line); }
.step__n{
  font-family:var(--ff-data); font-size:.9rem; letter-spacing:.1em; color:var(--cafetal);
  margin:0; padding-top:.3rem;
}
.step__t{
  grid-column:2; font-family:var(--ff-disp); font-optical-sizing:auto;
  font-variation-settings:"SOFT" 22,"WONK" 1;
  font-weight:400; font-size:clamp(1.2rem,2.1vw,1.6rem); line-height:1.2;
  margin:0 0 .9rem; letter-spacing:-.01em;
}
.step > :not(.step__n):not(.step__t){ grid-column:2; }
.step p, .step ul{ max-width:60ch; }
.step a:not(.btn){ color:var(--cafetal); text-decoration:underline; text-underline-offset:3px; }

.ticks{ list-style:none; margin:0 0 1.15em; padding:0; }
.ticks li{
  position:relative; padding-left:1.4rem; margin-bottom:.55rem;
  font-size:.98rem; line-height:1.6;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:.55rem; height:1px; background:var(--cafetal);
}

/* ------------------------------------------------------------
   BOTONES
   ------------------------------------------------------------ */
.btn{
  display:inline-block; margin-top:1.4rem;
  font-family:var(--ff-data); font-size:.7rem; letter-spacing:.17em; text-transform:uppercase;
  text-decoration:none; padding:.85rem 1.5rem;
  background:var(--basalto); color:var(--cal); border:1px solid var(--basalto);
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.btn:hover{ background:var(--cafetal); border-color:var(--cafetal); }
.btn--ghost{ background:none; color:var(--basalto); }
.btn--ghost:hover{ background:var(--basalto); color:var(--cal); border-color:var(--basalto); }
.btn--light{ background:var(--cal); color:var(--basalto); border-color:var(--cal); }
.btn--light:hover{ background:var(--cafetal-cl); border-color:var(--cafetal-cl); color:var(--basalto); }

/* ------------------------------------------------------------
   CONTACTO
   ------------------------------------------------------------ */
.contact{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(2.5rem,6vw,5rem); align-items:start; }

.field{ margin-bottom:1.4rem; }
.field label{
  display:block; font-family:var(--ff-data); font-size:.66rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--niebla-lt); margin-bottom:.5rem;
}
.field input,
.field select,
.field textarea{
  width:100%; background:transparent; color:var(--cal);
  border:0; border-bottom:1px solid rgba(244,245,241,.28);
  padding:.65rem 0; font-family:var(--ff-body); font-size:1rem;
  border-radius:0; transition:border-color .3s var(--ease);
}
.field textarea{ resize:vertical; }
.field select{ appearance:none; cursor:pointer; }
.field select option{ color:var(--basalto); }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-bottom-color:var(--cafetal-cl); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{ outline:none; }

.form__msg{
  margin-top:1rem; min-height:1.4em;
  font-family:var(--ff-data); font-size:.8rem; line-height:1.6;
  color:var(--niebla);
}
.form__msg.is-ok{ color:#9fd0ac; }
.form__msg.is-error{ color:#e8a99a; }

.cinfo dl{ margin:0; }
.cinfo dl > div{ padding:1.05rem 0; border-bottom:1px solid rgba(244,245,241,.16); }
.cinfo dl > div:first-child{ border-top:1px solid rgba(244,245,241,.16); }
.cinfo dt{
  font-family:var(--ff-data); font-size:.64rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--niebla); margin-bottom:.35rem;
}
.cinfo dd{ margin:0; font-size:.98rem; line-height:1.6; }
.cinfo dd a{
  color:var(--cal); text-decoration:none;
  border-bottom:1px solid rgba(244,245,241,.35);
  padding-bottom:1px; transition:border-color .3s var(--ease), color .3s var(--ease);
}
.cinfo dd a:hover{ color:#fff; border-bottom-color:var(--cal); }

/* campo trampa: fuera de la vista, pero no con display:none,
   porque algunos robots ignoran los campos ocultos así. */
.trampa{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none;
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.foot{ background:var(--cal-alt); padding-block:clamp(3rem,6vw,5rem) 2rem; }
.foot__in{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:2rem clamp(2rem,6vw,5rem); align-items:start; }
.foot__brand img{ width:46px; }
.foot__nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.7rem 1.6rem; }
.foot__nav a{
  font-family:var(--ff-data); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; color:var(--basalto); opacity:.7; transition:opacity .3s var(--ease);
}
.foot__nav a:hover{ opacity:1; }
.foot__note{
  grid-column:2; font-family:var(--ff-data); font-size:.76rem; line-height:1.8;
  color:var(--niebla); margin:0;
}
.foot__contact{
  grid-column:2; list-style:none; margin:.9rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
}
.foot__contact a{
  font-family:var(--ff-data); font-size:.76rem; letter-spacing:.06em;
  color:var(--basalto); text-decoration:none;
  border-bottom:1px solid var(--cal-line);
  padding-bottom:1px; transition:border-color .3s var(--ease);
}
.foot__contact a:hover{ border-bottom-color:var(--cafetal); }

.foot__legales{
  grid-column:2; list-style:none; margin:.9rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
}
.foot__legales a{
  font-family:var(--ff-data); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--basalto); text-decoration:none; border-bottom:1px solid var(--cal-line); padding-bottom:1px;
}
.foot__legales a:hover{ border-bottom-color:var(--cafetal); }

.foot__legal{
  grid-column:1/-1; margin:1.5rem 0 0; padding-top:1.5rem;
  border-top:1px solid var(--cal-line);
  font-family:var(--ff-data); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--niebla);
}

/* ------------------------------------------------------------
   BOTÓN FLOTANTE DE WHATSAPP
   ------------------------------------------------------------ */
.wa{
  position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem);
  z-index:90;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.15rem;
  /* Verde de WhatsApp: se reconoce de inmediato y, al ser un color
     saturado, se distingue tanto del fondo claro como del oscuro.
     El texto va en verde profundo para cumplir el contraste AA (6.2:1). */
  background:#25d366; color:#0b3d25;
  text-decoration:none; border:1px solid rgba(11,61,37,.35);
  box-shadow:0 6px 24px rgba(19,23,21,.28);
  transform:translateY(120%); opacity:0;
  transition:transform .45s var(--ease), opacity .45s var(--ease),
             background .3s var(--ease), border-color .3s var(--ease);
}
.wa.is-visible{ transform:none; opacity:1; }
.wa:hover{ background:#1ebe5a; border-color:rgba(11,61,37,.55); }
.wa__icon{ width:22px; height:22px; flex:0 0 auto; }
.wa__txt{
  font-family:var(--ff-data); font-size:.72rem; letter-spacing:.15em;
  text-transform:uppercase; white-space:nowrap;
}

/* ------------------------------------------------------------
   REVELADO AL SCROLL
   ------------------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
/* El menú completo son nueve entradas: por debajo de 1180px ya no caben
   en una sola línea, así que pasa a menú desplegable. */
@media (max-width:1180px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0; background:var(--basalto);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
  }
  .nav.is-open{ opacity:1; visibility:visible; }
  .nav ul{ flex-direction:column; gap:1.15rem; text-align:center; justify-content:center; }
  .nav a{
    font-size:1rem; letter-spacing:.16em; color:rgba(244,245,241,.9);
    border-bottom-color:transparent;
  }
  .nav a:hover{ color:var(--cal); }
  .nav__cta{ margin:.6rem 0 0; }
  .nav__cta a{ border-color:rgba(244,245,241,.5); color:var(--cal); padding:.7rem 1.5rem; }
  .head.is-stuck .nav a{ color:rgba(244,245,241,.9); }
  .head.is-stuck .nav a:hover{ color:var(--cal); }
  .head.is-stuck .nav__cta a{ border-color:rgba(244,245,241,.5); color:var(--cal); }
  .head.is-stuck .nav__cta a:hover{ background:var(--cal); color:var(--basalto); }
  .burger.is-open span{ background:var(--cal); }
  .burger.is-open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
  .burger.is-open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }
  .head.is-stuck .burger.is-open span{ background:var(--cal); }
}

@media (max-width:900px){
  .opener,.duo,.duo--flip,.orgs,.people,.cols,.dates,.contact{ grid-template-columns:minmax(0,1fr); }
  .tutor{ grid-template-columns:minmax(0,1fr); gap:1.5rem; }
  .tutor--flip .tutor__fig,.tutor--flip .tutor__body{ grid-column:1; grid-row:auto; }
  .tutor__fig img{ aspect-ratio:3/2; }
  .fee{ grid-template-columns:minmax(0,1fr); gap:1.2rem; }
  .fee__fig{ font-size:clamp(2.4rem,9vw,3rem); }
  .opener__fig img{ min-height:0; aspect-ratio:16/10; }
  .gal__i{ grid-column:span 3; }
  .gal__i--w{ grid-column:span 6; }
  .foot__in{ grid-template-columns:minmax(0,1fr); }
  .foot__note,.foot__legales{ grid-column:1; }
}

@media (max-width:560px){
  .slug{ gap:.8rem; }
  .slug__label,.slug__meta{ letter-spacing:.14em; font-size:.66rem; }
  .hero__body{ padding-top:6.5rem; }
  .slate__in{ font-size:.68rem; gap:.8rem 1.4rem; }
  .slate__cta{ margin-left:0; width:100%; text-align:center; }
  .step{ grid-template-columns:minmax(0,1fr); gap:.6rem; }
  .step__t,.step > :not(.step__n):not(.step__t){ grid-column:1; }
  .step__n{ padding-top:0; }
  .gal{ grid-template-columns:repeat(2,1fr); }
  .gal__i,.gal__i--w{ grid-column:span 2; }
  .gal__i--w img{ aspect-ratio:16/10; }
  .band img{ aspect-ratio:16/10; }
  .cost__data > div{ grid-template-columns:minmax(0,1fr); gap:.3rem; }
  .creds > div{ grid-template-columns:minmax(0,1fr); gap:.35rem; }
  .creds dt{ padding-top:0; }
  .pay{ grid-template-columns:minmax(0,1fr); gap:0; }
  .pay__i{ display:grid; grid-template-columns:4.5rem minmax(0,1fr); gap:1rem;
           align-items:baseline; padding:1rem 0; border-top-width:1px; }
  .pay__i:first-child{ border-top-width:2px; }
  .pay__pct{ font-size:2.1rem; margin:0; }
  .gate{ grid-template-columns:minmax(0,1fr); gap:.5rem; }
  .gate__mark{ display:none; }
  .wa{ padding:.9rem; border-radius:50%; }
  .wa__txt{ display:none; }
}

@media (max-width:380px){
  .slug__meta{ display:none; }
  .brand__txt{ display:none; }
}

/* ------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__logo,.hero__h1,.hero__sub,.slate{ opacity:1; }
}

/* ------------------------------------------------------------
   IMPRESIÓN
   ------------------------------------------------------------ */
@media print{
  .head,.burger,.slate,.gal,.band,.wa{ display:none; }
  body{ background:#fff; color:#000; }
  .sec--dark{ background:#fff; color:#000; }
  .reveal{ opacity:1; transform:none; }
}


/* ------------------------------------------------------------
   PÁGINAS DE POSTULACIÓN Y PAGO
   Reutilizan la paleta y las tipografías del sitio, pero sin el
   menú completo: son pantallas de trámite, y todo lo que distraiga
   aumenta el abandono a medio formulario.
   ------------------------------------------------------------ */
.pg{ background:var(--cal); }
.pg__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem clamp(1.25rem,5vw,4rem);
  border-bottom:1px solid var(--cal-line);
}
.pg__brand img{ width:34px; display:block; }
.pg__volver{
  font-family:var(--ff-data); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--basalto); text-decoration:none;
  border-bottom:1px solid var(--cal-line); padding-bottom:2px;
}
.pg__volver:hover{ border-bottom-color:var(--cafetal); }

.pg__main{ padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,8vw,6rem); max-width:820px; }
.pg__main--corto{ max-width:640px; }

.pg__foot{
  border-top:1px solid var(--cal-line);
  padding:1.5rem clamp(1.25rem,5vw,4rem);
  font-family:var(--ff-data); font-size:.74rem; color:var(--niebla);
}
.pg__foot a{ color:var(--cafetal); }

/* avisos */
.aviso{ padding:1.1rem 1.25rem; margin-bottom:2rem; font-size:.95rem; }
.aviso p{ margin-bottom:.5rem; }
.aviso p:last-child{ margin-bottom:0; }
.aviso ul{ margin:.5rem 0 0; padding-left:1.15rem; }
.aviso li{ margin-bottom:.3rem; }
.aviso--error{ background:#f7e6e2; border-left:3px solid #9b3d2a; color:#7a2e1f; }
.aviso--cerrado{ background:var(--cal-alt); border-left:3px solid var(--niebla); }

/* formulario de postulación */
.post{ margin-top:clamp(2rem,4vw,3rem); }
.bloque{ border:0; border-top:2px solid var(--basalto); padding:1.5rem 0 2.2rem; margin:0; }
.bloque__t{
  font-family:var(--ff-data); font-size:.7rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--cafetal); padding:0; margin-bottom:1.4rem;
}
.post .field{ margin-bottom:1.5rem; }
.post .field:last-child{ margin-bottom:0; }
.post label{
  display:block; font-family:var(--ff-data); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--basalto); margin-bottom:.5rem;
}
.req{
  font-size:.85em; letter-spacing:.12em; color:var(--cafetal);
  border:1px solid var(--cal-line); padding:.1rem .35rem; margin-left:.4rem;
}
.post input[type=text],.post input[type=email],.post input[type=tel],
.post input[type=date],.post select,.post textarea{
  width:100%; padding:.7rem .85rem; border:1px solid var(--cal-line);
  background:#fff; font-family:var(--ff-body); font-size:1rem; color:var(--basalto);
  border-radius:0;
}
.post textarea{ resize:vertical; line-height:1.7; }
.post select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--basalto) 50%),linear-gradient(135deg,var(--basalto) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:2.5rem;
}
.post input:focus,.post select:focus,.post textarea:focus{
  outline:2px solid var(--cafetal); outline-offset:-1px; border-color:var(--cafetal);
}
.post input[type=file]{
  width:100%; padding:.8rem; border:1px dashed var(--cal-line); background:var(--cal-alt);
  font-family:var(--ff-data); font-size:.82rem; cursor:pointer;
}
.post input[type=file]:focus{ outline:2px solid var(--cafetal); outline-offset:-1px; }
.pista{ font-family:var(--ff-data); font-size:.76rem; line-height:1.6; color:var(--niebla); margin:.45rem 0 0; }
.pista--bloque{ margin:-.7rem 0 1.4rem; }
.dosc{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.5rem; }

.cierre{ border-top:2px solid var(--basalto); padding-top:1.6rem; }
.cierre__monto{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-bottom:1.2rem; margin-bottom:1.2rem; border-bottom:1px solid var(--cal-line);
}
.cierre__monto span{
  font-family:var(--ff-data); font-size:.7rem; letter-spacing:.19em; text-transform:uppercase; color:var(--niebla);
}
.cierre__monto strong{
  font-family:var(--ff-disp); font-optical-sizing:auto; font-variation-settings:"WONK" 1;
  font-weight:300; font-size:clamp(1.8rem,4vw,2.4rem); letter-spacing:-.02em;
}
.cierre .btn{ margin-top:0; }
.cierre .btn:disabled{ opacity:.55; cursor:progress; }

/* resumen del pago */
.resumen{ margin:2rem 0 0; }
.resumen > div{ padding:.9rem 0; border-bottom:1px solid var(--cal-line); }
.resumen > div:first-child{ border-top:1px solid var(--cal-line); }
.resumen dt{
  font-family:var(--ff-data); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--niebla); margin-bottom:.25rem;
}
.resumen dd{ margin:0; font-size:1rem; }
.resumen .folio{
  font-family:var(--ff-data); font-size:1.3rem; letter-spacing:.1em; color:var(--cafetal);
}

@media (max-width:560px){
  .dosc{ grid-template-columns:minmax(0,1fr); }
}


/* ------------------------------------------------------------
   PÁGINAS LEGALES
   ------------------------------------------------------------ */
.legal{ max-width:760px; }
.legal h2{
  font-family:var(--ff-disp); font-optical-sizing:auto; font-variation-settings:"SOFT" 22,"WONK" 1;
  font-weight:400; font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.2;
  letter-spacing:-.01em; margin:clamp(2.5rem,5vw,3.5rem) 0 .9rem;
  padding-top:1.2rem; border-top:1px solid var(--cal-line);
}
.legal h3{
  font-family:var(--ff-data); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cafetal); margin:1.8rem 0 .7rem; font-weight:400;
}
.legal p{ max-width:68ch; }
.legal ul{ margin:0 0 1.15em; padding-left:1.2rem; max-width:68ch; }
.legal li{ margin-bottom:.5rem; line-height:1.7; }
.legal a{ color:var(--cafetal); text-decoration:underline; text-underline-offset:3px; }
.pend{
  background:#f3ebd6; color:#6b5415; padding:.1rem .4rem;
  font-family:var(--ff-data); font-size:.86em; font-weight:400;
}
.legal__cierre{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.2rem;
  border-top:1px solid var(--cal-line);
  font-family:var(--ff-data); font-size:.82rem; line-height:1.7; color:var(--niebla);
}
.legal__vinculo{ margin-top:2rem; font-family:var(--ff-data); font-size:.8rem; }

/* casilla de aceptación del formulario */
.acepto{
  display:grid; grid-template-columns:1.3rem 1fr; gap:.8rem; align-items:start;
  margin:1.5rem 0; padding:1.1rem 1.2rem;
  background:var(--cal-alt); border-left:3px solid var(--cafetal);
}
.acepto input[type=checkbox]{ width:1.1rem; height:1.1rem; margin-top:.2rem; accent-color:var(--cafetal); cursor:pointer; }
.acepto label{
  font-family:var(--ff-body) !important; font-size:.94rem !important; line-height:1.6 !important;
  letter-spacing:0 !important; text-transform:none !important; margin:0 !important; cursor:pointer;
}
.acepto a{ color:var(--cafetal); text-decoration:underline; text-underline-offset:2px; }