:root{
  --negro:#0b0a09;
  --negro-2:#12100d;
  --texto:#cec6b6;
  /* --tenue lleva casi todo el cuerpo de la página. Antes era #8d8375:
     5,3:1 de contraste sobre el negro, que en peso 300 se leía apagado.
     Ahora 8,8:1 — pasa AAA y sigue siendo claramente secundario. */
  --tenue:#b5ac9c;
  --oro:#d4ab55;
  --oro-claro:#f7e6b8;
  --linea:rgba(212,171,85,.22);
}

*{box-sizing:border-box;margin:0;padding:0}
/* Sin scroll-behavior:smooth. La página mide ~13.400px: el salto del botón al
   Calendly son 12.000px, y animarlos deja la rueda muerta durante la animación.
   Se siente trabada. Con salto instantáneo, no. */

body{
  background:var(--negro);
  color:var(--texto);
  font-family:'Jost',-apple-system,BlinkMacSystemFont,sans-serif;
  /* peso 400, no 300: en texto claro sobre fondo oscuro los pesos finos
     se afinan todavía más y cuesta leerlos. */
  font-size:18px;font-weight:400;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

.wrap{width:100%;max-width:1020px;margin:0 auto;padding:0 26px}
.wrap.narrow{max-width:660px}

h1,h2,h3{font-family:'Cormorant Garamond',Garamond,serif;font-weight:400;line-height:1.14}

/* ---------- oro metálico ---------- */
/* El degradado sólo en .etapa .num (los romanos I/II/III, que en Cormorant se
   leen perfecto por ser letras). Los "01-04" de .paso quedan fuera: son cifras
   y sufren el mismo problema elzeviriano que sufrían los años. */
h1 em,.marca-txt,.etapa .num,.remate em{
  background:linear-gradient(180deg,#8a6520 0%,#e0bd72 28%,#f7e6b8 50%,#d4ab55 72%,#8a6520 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------- marca ---------- */
.marca{margin-bottom:52px}
.corona{width:74px;height:52px;display:block;margin:0 auto 14px}
.corona.chica{width:44px;height:31px;margin:0 auto 18px}
.marca-txt{
  font-family:'Cormorant Garamond',serif;
  font-size:1.42rem;text-transform:uppercase;
  letter-spacing:.3em;text-indent:.3em;margin:11px 0;font-weight:500;
}
.filete{display:flex;align-items:center;justify-content:center;gap:11px}
.filete span{height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--oro),transparent);opacity:.75}
.filete i{width:5px;height:5px;background:var(--oro);transform:rotate(45deg);flex-shrink:0}
.filete.solo{margin-bottom:34px}
.filete.solo span{width:90px}

/* ---------- hero ---------- */
.hero{
  padding:76px 0 88px;text-align:center;
  background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(212,171,85,.11), transparent 72%),var(--negro);
}
/* el max-width reemplaza al <br> que tenía el titular viejo: corta solo,
   sin quebrarse feo en pantallas angostas. */
h1{font-size:clamp(2.3rem,7.6vw,4.1rem);margin:0 auto 26px;max-width:25ch}
h1 em{font-style:italic}
.lead{font-size:clamp(1.05rem,2.5vw,1.18rem);color:var(--tenue);max-width:33rem;margin:0 auto 38px}

/* retrato del hero (ver el bloque comentado en index.html) */
.retrato{width:min(330px,70%);margin:0 auto 36px;border:1px solid var(--linea);padding:7px}
.retrato img{display:block;width:100%;height:auto}

/* ---------- botón ---------- */
.btn{
  display:inline-block;padding:16px 44px;border-radius:2px;text-decoration:none;
  font-family:'Jost',sans-serif;font-size:.85rem;font-weight:400;
  letter-spacing:.19em;text-transform:uppercase;color:#120f0a;
  background:linear-gradient(180deg,#e6c47c 0%,#d4ab55 52%,#a67f2e 100%);
  transition:filter .2s ease,transform .2s ease;
}
.btn:hover{filter:brightness(1.14);transform:translateY(-2px)}
.btn-note{font-size:.88rem;color:var(--tenue);margin-top:18px}

/* ---------- etiqueta de sección ---------- */
.kicker{
  font-size:.74rem;font-weight:500;
  letter-spacing:.32em;text-indent:.32em;
  text-transform:uppercase;color:var(--oro);margin-bottom:16px;
}
.kicker.center{text-align:center}
/* .historia y .diagnostico pintan TODOS sus <p> con --tenue, y el kicker es un
   <p>: por especificidad les ganaba y el rótulo salía blanco en vez de dorado.
   Esta línea lo devuelve al oro. */
.section .kicker{color:var(--oro)}

/* ---------- secciones ---------- */
.section{padding:78px 0;border-top:1px solid rgba(212,171,85,.11)}
.section h2{font-size:clamp(1.85rem,5vw,2.7rem);margin-bottom:30px;color:#e8e0cf}
.section h2.center{text-align:center}
.section p+p{margin-top:20px}
.section .sub{text-align:center;color:var(--tenue);max-width:29rem;margin:-14px auto 46px}
.intro{color:var(--tenue);margin-bottom:34px}

/* remate de sección */
.remate{
  margin-top:34px;font-family:'Cormorant Garamond',serif;
  font-size:1.55rem;line-height:1.34;color:#e8e0cf;
}
.remate em{font-style:italic}

/* ---------- listas ---------- */
.checks{list-style:none;display:grid;gap:17px}
.checks li{position:relative;padding-left:32px;color:var(--tenue)}
.checks li::before{content:"";position:absolute;left:2px;top:.66em;width:6px;height:6px;background:var(--oro);transform:rotate(45deg)}
.emphasis{
  margin-top:38px;padding-top:32px;border-top:1px solid var(--linea);
  font-family:'Cormorant Garamond',serif;font-size:1.5rem;line-height:1.38;color:#e8e0cf;
}
/* centrada y sin filete. Va en claro, no en --tenue: acá cae el remate
   emocional de la sección y tiene que pesar más que la línea de arriba. */
.emphasis.center{
  text-align:center;border-top:none;padding-top:0;
  margin:8px auto 0;max-width:32rem;color:#e8e0cf;
}

/* ---------- diagnóstico ---------- */
.diagnostico{background:var(--negro-2);text-align:center;border-top:none}
.diagnostico p{color:var(--tenue)}
.diagnostico .remate{color:#e8e0cf}

/* ---------- testimonio ---------- */
.testimonio{border-top:none;padding-top:0}
.testimonio blockquote{
  border-left:2px solid var(--oro);padding:6px 0 6px 30px;
}
.testimonio p{
  font-family:'Cormorant Garamond',serif;
  font-size:1.24rem;line-height:1.52;color:#ded5c4;font-style:italic;
}
.testimonio p+p{margin-top:16px}
.testimonio footer{
  margin-top:24px;font-family:'Jost',sans-serif;font-style:normal;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);
}

/* ---------- alumnos ---------- */
/* columnas tipo mosaico: las capturas tienen alturas muy distintas y así no
   quedan huecos. break-inside evita que una captura se parta en dos. */
/* 780px de ancho máximo: en nachosala.com los testimonios de alumnos miden
   378px cada uno en dos columnas (378×2 + separación). A todo el ancho del
   contenedor salían a 476px y se comían la sección. */
.alumnos{columns:1;column-gap:16px;margin:44px auto 0;max-width:780px}
.alumnos figure{break-inside:avoid;margin:0 0 16px}
.alumnos img{
  display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
}

/* ---------- historia ---------- */
/* con el reordenado, historia quedó pegada al diagnóstico y las dos usan
   --negro-2: sin el filete de arriba se fundirían en un solo bloque. */
.historia{background:var(--negro-2);text-align:center;border-top:1px solid rgba(212,171,85,.11)}
.historia p{color:var(--tenue)}
.historia .remate{color:#e8e0cf;max-width:34rem;margin-inline:auto}
.historia .intro{max-width:34rem;margin-inline:auto}

/* antes / después */
.antes-despues{
  display:grid;grid-template-columns:1fr 1fr;gap:13px;
  margin:42px auto 8px;text-align:left;max-width:608px;
}
.ad-foto img{
  /* height:auto es necesario: sin eso gana el height="1200" del HTML y la
     foto se estira. Con esto manda aspect-ratio. */
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border:1px solid var(--linea);border-radius:12px;
  /* las dos fotos vienen de luces distintas (una cálida de interior, otra
     con un rojo fuerte de fondo). Bajarles el color las empareja y las
     acomoda sobre el negro. */
  filter:saturate(.78) contrast(1.05) brightness(.98);
}
/* ahora el epígrafe es solo el rótulo, así que va centrado bajo cada foto */
.ad-foto figcaption{
  margin-top:14px;text-align:center;
  font-size:.72rem;font-weight:500;
  letter-spacing:.3em;text-indent:.3em;
  text-transform:uppercase;color:var(--oro);
}

/* línea de tiempo de la historia */
/* sin línea ni rombos: el ancla de cada hito es la fecha, y el texto queda
   a ras del contenedor en vez de correrse a la derecha. */
.linea{
  display:grid;gap:46px;text-align:left;
  margin:44px 0 8px;
}
/* mismo estilo que los kickers y que ANTES/HOY. Antes iba en Cormorant, que
   tiene cifras elzevirianas: "2016" salía con el 0 y el 1 a media altura y no
   se leía. Jost tiene cifras de caja alta, todas al mismo alto. */
.hito .etapa-lbl{
  display:block;font-family:'Jost',sans-serif;
  font-size:.95rem;font-weight:700;
  letter-spacing:.24em;text-indent:.24em;
  text-transform:uppercase;color:var(--oro);
  margin-bottom:10px;
}
.hito h3{font-size:1.34rem;color:#e8e0cf;margin-bottom:11px}
/* Sin font-size: hereda los 18px del cuerpo. OJO: 1rem son 16px porque el
   <html> está en 16 — poner "1rem" acá achicaba el texto en vez de dejarlo igual.
   Por eso todo el cuerpo de la página ahora hereda en lugar de fijar rem. */

/* foto o video de cada hito */
.hito-media{max-width:215px;margin:0 0 16px}
.hito-media img,.hito-media video{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border:1px solid var(--linea);background:#000;border-radius:12px;
}
/* el filtro va solo en las fotos: sobre el <video> apagaría también los
   controles nativos. */
.hito-media img{filter:saturate(.78) contrast(1.05) brightness(.98)}

/* ---------- método ---------- */
.metodo{display:grid;gap:40px}
.etapa .num{
  font-family:'Cormorant Garamond',serif;font-size:1.5rem;
  letter-spacing:.08em;display:block;margin-bottom:8px;
}
.etapa h3{font-size:1.62rem;margin-bottom:12px;color:#e8e0cf}
.etapa p{color:var(--tenue)}

/* ---------- qué incluye ---------- */
.incluye{display:grid;gap:34px}
.item .ico{color:var(--oro);font-size:.95rem;display:block;margin-bottom:11px}
.item h3{font-size:1.34rem;margin-bottom:9px;color:#e8e0cf}
.item p{color:var(--tenue);font-size:1rem}

/* ---------- a dónde llegás ---------- */
.resultados{display:grid;gap:22px}
.tarjeta{padding:34px 30px;border:1px solid var(--linea);background:rgba(255,255,255,.016)}
.tarjeta .rotulo{
  font-size:.72rem;font-weight:500;letter-spacing:.3em;text-indent:.3em;
  text-transform:uppercase;color:var(--oro);margin-bottom:13px;
}
.tarjeta h3{font-size:1.42rem;color:#e8e0cf;margin-bottom:22px}
.tarjeta ul{list-style:none;display:grid;gap:15px}
.tarjeta li{position:relative;padding-left:26px;color:var(--tenue)}
.tarjeta li::before{content:"✦";position:absolute;left:0;top:-1px;color:var(--oro);font-size:1rem}

/* ---------- pasos ---------- */
.pasos{display:grid;gap:26px}
.paso{display:flex;gap:22px;align-items:flex-start}
.paso .num{
  font-family:'Jost',sans-serif;font-size:.74rem;font-weight:500;
  letter-spacing:.18em;color:var(--oro);
  flex-shrink:0;min-width:34px;padding-top:7px;
}
.paso p{color:var(--tenue)}
/* con título: lo usa "Las bases". Sin .paso-txt el paso queda como estaba. */
/* el título en oro y la explicación más chica y tenue: lo importante primero */
.paso-txt h3{font-size:1.28rem;color:var(--oro);margin-bottom:5px}
.paso-txt p{font-size:16px}
/* el número se alinea con la primera línea, que acá es el h3 y no el párrafo */
.paso:has(.paso-txt) .num{padding-top:4px}
.objecion{
  margin-top:40px;padding:24px 26px;
  border:1px solid var(--linea);color:var(--tenue);
}
/* el cartel de la objeción, remarcado */
.objecion.fuerte{color:#e8e0cf;font-weight:500;background:rgba(212,171,85,.05)}

/* cifras sueltas dentro de un titular serif: van en Jost o se leen mal */
.cifra{font-family:'Jost',sans-serif;font-weight:500;font-size:.88em}

/* ---------- para quién ---------- */
.cols{display:grid;gap:22px}
.col{padding:32px 30px;border:1px solid var(--linea);background:rgba(255,255,255,.016)}
.col h3{font-size:1.4rem;margin-bottom:20px;color:#e8e0cf}
.col ul{list-style:none;display:grid;gap:14px}
.col li{position:relative;padding-left:26px;color:var(--tenue)}
.col li::before{position:absolute;left:0;top:-1px;font-size:1rem}
.col.si li::before{content:"✦";color:var(--oro)}
.col.no li::before{content:"×";color:#7d6f5e}
.col.no{border-color:rgba(255,255,255,.07);background:transparent}

/* ---------- agenda ---------- */
.calendly-inline-widget{border:1px solid var(--linea);background:var(--negro-2)}

/* ---------- footer ---------- */
.pie{background:var(--negro-2);text-align:center;padding:52px 0;border-top:1px solid rgba(212,171,85,.11)}
.pie .nombre{
  font-family:'Cormorant Garamond',serif;font-size:1.2rem;
  letter-spacing:.16em;text-transform:uppercase;color:#e8e0cf;margin-bottom:18px;
}
.pie nav{display:flex;gap:26px;justify-content:center}
.pie a{
  display:block;color:var(--tenue);
  transition:color .2s ease,transform .2s ease;
}
.pie a:hover{color:var(--oro);transform:translateY(-2px)}
/* los iconos heredan el color del enlace: currentColor en trazo y relleno */
.pie svg{width:23px;height:23px;display:block;fill:none;stroke:currentColor;stroke-width:1.6}
.pie svg .lleno{fill:currentColor;stroke:none}

/* ---------- historia en escritorio: dos columnas que alternan ---------- */
@media(min-width:860px){
  .linea{gap:72px}
  /* Foto en columna fija de 238px (70% de los 340px anteriores, pedido del
     usuario). El .hito-head ocupa las dos columnas para que el orden de lectura
     sea año → título → foto → texto. */
  .hito{
    display:grid;grid-template-columns:238px 1fr;
    column-gap:48px;row-gap:20px;align-items:center;
  }
  /* La línea de tiempo no usa todo el ancho del contenedor: a 968px el texto
     quedaba en renglones larguísimos y se veía chico al lado del año enorme.
     A 820px la medida es de ~68 caracteres, que es lo cómodo de leer. */
  .linea{max-width:820px;margin-inline:auto}
  .hito-head{grid-column:1 / -1}
  /* los pares invierten el lado: foto derecha, texto izquierda */
  .hito:nth-child(even){grid-template-columns:1fr 238px}
  .hito:nth-child(even) .hito-media{order:2}
  .hito-media{max-width:none;margin:0}
  .hito-txt{text-align:left}
  /* la fecha manda: acá es el título visual del hito, como en la referencia */
  /* el año bajó de 2.7 a 2.15rem: contra un cuerpo de 18px, 43px aplastaba
     todo lo demás y hacía parecer chico al texto. */
  .hito .etapa-lbl{
    font-size:2.15rem;font-weight:700;
    letter-spacing:.02em;text-indent:0;
    margin-bottom:2px;line-height:1;
  }
  .hito h3{font-size:1.5rem;margin-bottom:14px}
}

/* ---------- desktop ---------- */
@media(min-width:720px){
  .hero{padding:104px 0 118px}
  .section{padding:104px 0}
  .cols{grid-template-columns:1fr 1fr;gap:24px}
  .resultados{grid-template-columns:1fr 1fr;gap:24px}
  .linea{gap:54px}
  .alumnos{columns:2}
  .incluye{grid-template-columns:1fr 1fr;gap:44px 40px}
  .metodo{grid-template-columns:repeat(3,1fr);gap:40px}
  .corona{width:92px;height:64px}
  .marca{margin-bottom:64px}
  .testimonio blockquote{padding-left:40px}
}