/* ==========================================================
   Beauty by Javiera Velásquez — Curso de Automaquillaje
   ========================================================== */

:root {
  /* Paleta entregada */
  --cream: #F2EBE4;
  --sand: #EBE1D8;
  --brown: #5C3A21;
  --blush: #FFE8F4;

  /* Derivados */
  --ink: #5C3A21;          /* mismo café de la paleta: texto, botones y secciones oscuras */
  --ink-soft: rgba(92, 58, 33, .8); /* texto secundario */
  --rose: #D4689C;         /* rosa del "by" del logo */
  --line: rgba(92, 58, 33, .22);

  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --script: "Pinyon Script", cursive;

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; color-scheme: only light; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .01em;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Textura de papel sobre toda la página */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .23 0 0 0 0 .13 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible { outline-color: var(--blush); }

.container { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(820px + var(--gutter) * 2); }

/* ---------- Tipografía ---------- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.300rem, 5vw, 4rem);
  line-height: 1.060;
  letter-spacing: -.015em;
}
.display em, .hero__title em { font-style: italic; color: var(--brown); }
.dark .display em { color: var(--blush); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brown);
  margin-bottom: 22px;
}
.eyebrow__line { width: 64px; height: 1px; background: currentColor; flex: none; }
.eyebrow--light { color: var(--brown); }

.numbered {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.200rem, 4.500vw, 3.400rem);
  line-height: 1.100;
  margin-bottom: 28px;
}
.numbered__n { font-style: italic; color: rgba(255, 232, 244, .38); margin-right: .25em; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--dark { background: var(--ink); color: var(--cream); }
.btn--dark:hover { filter: brightness(1.180); }
.btn--light { background: #fff; color: var(--ink); border-color: rgba(92, 58, 33, .12); }
.btn--light:hover { background: var(--ink); color: var(--cream); }
.btn--full { width: 100%; }

.link-arrow { display: inline-flex; align-items: center; gap: 14px; font-size: .95rem; font-weight: 400; }
.link-arrow__icon {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .45);
  transition: transform .4s var(--ease), background .3s, color .3s;
}
.link-arrow__text { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link-arrow:hover .link-arrow__icon { transform: rotate(90deg); background: var(--ink); color: var(--cream); }

/* ---------- Logo ---------- */
.logo { display: grid; justify-items: center; gap: 3px; line-height: 1; color: var(--ink); }
.logo__beauty { font-family: var(--serif); font-size: 1.750rem; letter-spacing: .05em; }
.logo__sub { display: flex; align-items: baseline; gap: 7px; }
.logo__by { font-family: var(--script); font-size: 1.150rem; line-height: .7; color: var(--rose); }
.logo__name { font-family: var(--serif); font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; }
.logo--light { color: var(--cream); justify-items: start; gap: 8px; }
.logo--light .logo__beauty { font-size: 2.600rem; }
.logo--light .logo__by { font-size: 1.600rem; }
.logo--light .logo__name { font-size: .8rem; }

/* ---------- Navegación ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background .4s, box-shadow .4s, padding .4s;
  padding-block: 18px;
}
.nav.is-stuck {
  background: rgba(242, 235, 228, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding-block: 8px;
}
.nav__inner {
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.nav__links { display: flex; gap: clamp(18px, 2.600vw, 40px); font-size: .95rem; font-weight: 400; }
.nav__links a { position: relative; padding-block: 6px; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__links-cta { display: none; }
.nav__actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.nav__cta { min-height: 46px; padding-inline: 26px; font-size: .74rem; }
.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav__toggle span {
  position: absolute; left: 13px; right: 13px; height: 1px; background: var(--ink);
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.nav__toggle span:first-child { top: 19px; }
.nav__toggle span:last-child { top: 26px; }
.nav__toggle[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(120px, 14vw, 170px);
  background:
    radial-gradient(60% 55% at 85% 20%, var(--blush) 0%, transparent 70%),
    linear-gradient(180deg, var(--cream) 0%, var(--sand) 100%);
  overflow: hidden;
}
.hero__curve {
  position: absolute; left: -20px; bottom: -40px;
  width: clamp(120px, 14vw, 220px);
  color: var(--brown); opacity: .55;
}
.hero__inner {
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.200fr .8fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
}
.hero__copy { padding-bottom: clamp(60px, 9vw, 130px); padding-left: clamp(0px, 4vw, 60px); }
.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.500rem, 5.100vw, 4.500rem);
  line-height: 1.020;
  letter-spacing: -.02em;
  margin-bottom: 28px;
}
.hero__title span, .hero__title em { display: block; }
.hero__lead { max-width: 30em; color: var(--ink-soft); margin-bottom: 40px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; }

.hero__visual { position: relative; display: flex; justify-content: center; }
.arch { position: relative; width: min(100%, 470px); }
.arch__photo {
  position: relative;
  aspect-ratio: 47 / 69;
  border-radius: 999px 999px 0 0;
  background: #D6D2CB;
}
/* Foto sin fondo, más ancha que el arco: codos y brochas sobresalen por los lados */
.arch__photo img {
  position: absolute; left: -8%; bottom: 0;
  width: 116%; max-width: none; height: auto;
  filter: drop-shadow(0 18px 26px rgba(42, 26, 15, .28));
}
.arch__outline {
  position: absolute;
  inset: -22px 22px 0 -22px;
  border: 1px solid var(--brown);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  opacity: .7;
}
.arch__badge {
  position: absolute;
  left: -14%;
  bottom: 12%;
  display: grid;
  gap: 2px;
  padding: 18px 26px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 18px 40px -18px rgba(42, 26, 15, .4);
}
.arch__badge-big { font-family: var(--serif); font-style: italic; font-size: 1.450rem; line-height: 1.200; }
.arch__badge-small { font-size: .8rem; letter-spacing: .06em; color: var(--ink-soft); }

/* ---------- Cinta ---------- */
.ribbon { background: var(--blush); color: var(--brown); overflow: hidden; padding-block: 16px; }
.ribbon__track { display: flex; align-items: center; gap: 36px; width: max-content; animation: slide 36s linear infinite; }
.ribbon span { font-family: var(--serif); font-style: italic; font-size: 1.150rem; white-space: nowrap; }
.ribbon svg { width: 12px; height: 12px; color: var(--brown); flex: none; }

/* ---------- Secciones oscuras ---------- */
.dark { background: var(--ink); color: var(--cream); }
.dark p { color: rgba(242, 235, 228, .76); }

/* ---------- 01 / El curso ---------- */
.about { padding-block: clamp(80px, 10vw, 140px); }
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.about__copy p + p { margin-top: 1em; }
.stats {
  display: inline-flex;
  margin-top: 44px;
  padding: 22px 12px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--ink);
}
.stats__item { display: grid; justify-items: center; padding-inline: clamp(18px, 2.600vw, 36px); line-height: 1.200; }
.stats__item + .stats__item { border-left: 1px solid var(--line); }
.stats__item strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.600rem, 2.800vw, 2.300rem); }
.stats__item span { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

.about__pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.600vw, 22px); align-items: end; }
.pill { border-radius: 999px; overflow: hidden; background: var(--brown); }
.pill img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.200s var(--ease); }
.pill:hover img { transform: scale(1.060); }
.pill--1 { aspect-ratio: 1 / 2.100; }
.pill--2 { aspect-ratio: 1 / 2.500; }
.pill--3 { aspect-ratio: 1 / 2.900; }

/* ---------- 02 / Temario ---------- */
.modules { padding-block: clamp(80px, 10vw, 150px); }
.section-head { margin-bottom: clamp(50px, 7vw, 90px); max-width: 760px; }
.section-head--split { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; }
.section-head__aside { max-width: 24em; color: var(--ink-soft); }

.module {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 460px);
  justify-content: center;
  align-items: center;
  gap: clamp(50px, 9vw, 130px);
}
.module + .module { margin-top: clamp(60px, 8vw, 110px); }
.module--flip .module__media { order: 2; }
.module__media { position: relative; }
.module__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 34% / 27%;
}
.glass {
  position: absolute;
  top: 9%;
  right: -22%;
  display: grid;
  justify-items: center;
  padding: 20px 30px;
  border-radius: 40px;
  background: linear-gradient(120deg, rgba(235, 225, 216, .62), rgba(255, 255, 255, .72));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 20px 44px -22px rgba(42, 26, 15, .45);
  line-height: 1.250;
}
.module--flip .glass { right: auto; left: -22%; }
.glass strong { font-family: var(--serif); font-weight: 400; font-size: 1.700rem; white-space: nowrap; }
.glass span { font-size: .8rem; letter-spacing: .1em; color: var(--ink-soft); }

.module__tag {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brown);
  margin-bottom: 14px;
}
.module__tag svg { width: 14px; height: 14px; }
.module__body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.100rem, 4vw, 3.200rem);
  line-height: 1.080;
  margin-bottom: 18px;
}
.module__body h3 span { font-style: italic; color: var(--brown); opacity: .75; }
.module__body > p:not(.module__tag) { color: var(--ink-soft); }
.module__body ul { margin-top: 22px; border-top: 1px solid var(--line); }
.module__body li { padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 400; font-size: .95rem; }

/* ---------- Galería ---------- */
.gallery { padding-block: clamp(70px, 9vw, 120px); background: var(--sand); }
.gallery .section-head { margin-bottom: clamp(36px, 5vw, 60px); }
.gallery__rail {
  display: flex;
  gap: clamp(14px, 2vw, 26px);
  overflow-x: auto;
  padding: 6px var(--gutter) 26px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--brown) transparent;
}
.gallery__rail figure {
  flex: none;
  width: clamp(230px, 24vw, 330px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  scroll-snap-align: center;
  border-radius: 28px;
  background: var(--cream);
}
.gallery__rail figure:nth-child(odd) { border-radius: 999px 999px 28px 28px; }
.gallery__rail figure:nth-child(even) { margin-top: 44px; }
.gallery__rail img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform 1.200s var(--ease); }
.gallery__rail figure:hover img { transform: scale(1.050); }

/* Carrusel en loop (lo activa main.js; sin JS o con movimiento reducido queda el scroll manual) */
.gallery__rail.is-loop { display: block; overflow: hidden; padding-inline: 0; scroll-snap-type: none; }
.gallery__track { display: flex; width: max-content; animation: slideLoop 90s linear infinite; }
.gallery__track figure { margin-right: clamp(14px, 2vw, 26px); }
.gallery__rail.is-loop:hover .gallery__track,
.gallery__rail.is-loop:focus-visible .gallery__track { animation-play-state: paused; }
@keyframes slideLoop { to { transform: translateX(-50%); } }

/* ---------- 03 / Javiera ---------- */
.teacher { padding-block: clamp(80px, 10vw, 150px); }
.teacher__grid { display: grid; grid-template-columns: .8fr 1.200fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.teacher__photo { position: relative; }

/* Retrato sin fondo: la figura sobresale del arco y tapa parte de la palabra */
.portrait { position: relative; container-type: inline-size; padding-top: 14%; }
.portrait__arch {
  position: absolute;
  inset: 11% 16% 0 3%;
  border-radius: 999px 999px 0 0;
  background: var(--blush);
}
.portrait__arch::before {
  content: "";
  position: absolute;
  inset: -4cqw -4cqw 0 4cqw;
  border: 1px solid var(--brown);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  opacity: .55;
}
.portrait__word {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-style: italic;
  font-size: 33cqw;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--brown);
  white-space: nowrap;
}
.portrait__fig { position: relative; display: block; width: 100%; }
.portrait__seal {
  position: absolute;
  right: 0;
  bottom: 7%;
  width: 27cqw;
  height: 27cqw;
  filter: drop-shadow(0 2.400cqw 3cqw rgba(42, 26, 15, .35));
}
.portrait__seal-ring { transform-origin: 60px 60px; animation: spin 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Entrada por capas: primero el arco y la palabra, después sube la figura */
.js .portrait__arch { transform: scaleY(.6); transform-origin: bottom; opacity: 0; transition: transform 1.100s var(--ease), opacity .8s; }
.js .portrait__word { opacity: 0; transition: opacity 1.200s .35s; }
.js .portrait__fig { opacity: 0; transform: translateY(7%); transition: opacity .9s .45s, transform 1.200s var(--ease) .45s; }
.js .portrait__seal { opacity: 0; scale: .6; transition: opacity .6s 1s, scale .8s var(--ease) 1s; }
.js .is-in .portrait__arch { transform: none; opacity: 1; }
.js .is-in .portrait__word, .js .is-in .portrait__fig, .js .is-in .portrait__seal { opacity: 1; }
.js .is-in .portrait__fig { transform: none; }
.js .is-in .portrait__seal { scale: 1; }
.teacher__copy > p { color: var(--ink-soft); max-width: 36em; margin-top: 22px; }

.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.feat { padding: 26px 24px 28px; border-radius: 22px; transition: transform .5s var(--ease); }
.feat:hover { transform: translateY(-6px); }
.feat svg { width: 22px; height: 22px; margin-bottom: 16px; }
.feat h3 { font-family: var(--sans); font-weight: 400; font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; }
.feat p { font-size: .88rem; line-height: 1.550; }
.feat--white { background: var(--blush); }
.feat--sand { background: var(--sand); }
.feat--brown { background: var(--brown); color: var(--cream); }
.feat--white p, .feat--sand p { color: var(--ink-soft); }

/* ---------- Testimonios ---------- */
.voices { padding-block: clamp(80px, 10vw, 130px); border-radius: clamp(36px, 6vw, 80px) clamp(36px, 6vw, 80px) 0 0; }
.voices__grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(50px, 7vw, 90px); }
.voices blockquote { padding: 6px clamp(20px, 3vw, 44px) 6px 0; display: grid; align-content: space-between; gap: 30px; }
.voices blockquote + blockquote { border-left: 1px solid rgba(242, 235, 228, .28); padding-left: clamp(20px, 3vw, 44px); }
.voices blockquote p { font-size: 1rem; }
.voices blockquote footer { font-weight: 400; font-size: .95rem; color: var(--blush); }

/* ---------- Certificado ---------- */
.cert { position: relative; padding-block: clamp(90px, 11vw, 160px); background: linear-gradient(180deg, var(--blush) 0%, var(--cream) 100%); overflow: hidden; }
.cert__curve { position: absolute; right: -30px; top: 0; width: clamp(160px, 22vw, 320px); color: var(--brown); opacity: .4; }
.cert__grid { position: relative; display: grid; grid-template-columns: .85fr 1.150fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.cert__copy p:not(.eyebrow) { color: var(--ink-soft); margin: 22px 0 34px; max-width: 30em; }
.cert__frame { position: relative; transform: rotate(2.500deg); transition: transform .8s var(--ease); }
.cert__frame:hover { transform: rotate(0deg) scale(1.015); }
.cert__frame { container-type: inline-size; }

/* Certificado dibujado en CSS (medidas en cqw para que escale con el ancho).
   Formato editorial: banda rosada con arco a la izquierda, texto alineado a la izquierda. */
.diploma {
  aspect-ratio: 1.414 / 1;
  display: grid;
  grid-template-columns: 31% 1fr;
  background: var(--cream);
  border-radius: 1.200cqw;
  overflow: hidden;
  box-shadow: 0 44px 80px -48px rgba(92, 58, 33, .34), 0 0 0 1px var(--line);
  color: var(--ink);
}
.diploma p { margin: 0; line-height: 1.200; }

.diploma__side { position: relative; background: var(--blush); }
.diploma__vertical {
  position: absolute; top: 5cqw; left: 3.400cqw;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 1.300cqw; font-weight: 400; letter-spacing: .42em; text-transform: uppercase;
  color: var(--brown); white-space: nowrap;
}
.diploma__arch {
  position: absolute; inset: 20% 12% 0 34%;
  display: grid; place-items: center;
  border-radius: 999px 999px 0 0;
  background: var(--greige);
}
.diploma__arch::before {
  content: ""; position: absolute; inset: -1.600cqw 1.600cqw 0 -1.600cqw;
  border: 1px solid var(--brown); border-bottom: 0; border-radius: 999px 999px 0 0; opacity: .5;
}
.diploma__arch span { font-family: var(--script); font-size: 9cqw; line-height: 1; color: var(--brown); }

.diploma__main { display: flex; flex-direction: column; padding: 5cqw 5.500cqw 4.400cqw 5cqw; }
.diploma__brand { font-family: var(--serif); font-size: 1.450cqw; letter-spacing: .3em; text-transform: uppercase; color: var(--brown); }
.diploma__brand i { font-family: var(--script); font-size: 2.300cqw; letter-spacing: 0; text-transform: none; color: var(--rose); margin-inline: .2em; }
.diploma__title { font-family: var(--serif); font-size: 7.800cqw; line-height: .95 !important; letter-spacing: -.02em; margin-top: 3.200cqw !important; }
.diploma__title em { display: block; font-size: 4.300cqw; line-height: 1.250; letter-spacing: 0; color: var(--ink-soft); }
.diploma__label { font-size: 1.250cqw; font-weight: 400; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4cqw !important; }
.diploma__name { font-family: var(--serif); font-style: italic; font-size: 4.400cqw; padding: .8cqw 0 1.200cqw; border-bottom: 1px solid var(--line); }
.diploma__text { font-size: 1.700cqw; line-height: 1.500 !important; color: var(--ink-soft); margin-top: 1.600cqw !important; max-width: 30em; }
.diploma__text strong { font-weight: 500; color: var(--ink); }

.diploma__foot { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw; align-items: end; }
.diploma__sign { display: grid; gap: .8cqw; }
.diploma__sign-value { padding-bottom: .5cqw; border-bottom: 1px solid var(--brown); font-family: var(--script); font-size: 3.200cqw; line-height: 1.100; white-space: nowrap; }
.diploma__sign-value--date { font-family: var(--sans); font-size: 1.500cqw; line-height: 2.350; color: var(--ink-soft); }
.diploma__sign-label { font-size: 1.200cqw; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--brown); }

/* ---------- Inscripción ---------- */
.enroll { padding-block: clamp(40px, 6vw, 80px) clamp(80px, 10vw, 140px); }
.enroll__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: clamp(28px, 4vw, 48px);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 50px 90px -60px rgba(42, 26, 15, .5);
}
.enroll__info { padding: clamp(32px, 5vw, 70px); background: var(--sand); }
.enroll__info > p:not(.eyebrow) { color: var(--ink-soft); margin-top: 20px; }
.enroll__list { margin-top: 32px; display: grid; gap: 14px; }
.enroll__list li { display: flex; align-items: center; gap: 14px; font-weight: 400; }
.enroll__list svg { width: 14px; height: 14px; color: var(--brown); flex: none; }

.form { position: relative; padding: clamp(32px, 5vw, 70px); display: grid; gap: 20px; align-content: center; }
.field { display: grid; gap: 6px; }
.field label { font-size: .76rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--brown); }
.field input, .field select {
  width: 100%;
  min-height: 52px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font: 400 1.050rem var(--sans);
  color: var(--ink);
  transition: border-color .3s;
}
.field input::placeholder { color: rgba(107, 86, 71, .5); }
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--brown); box-shadow: 0 1px 0 var(--brown); }
.field.is-invalid input { border-bottom-color: #A8324A; }
.field__error { min-height: 1.100em; font-size: .8rem; color: #A8324A; }
.form__note { font-size: .8rem; color: var(--ink-soft); text-align: center; }
.form__done {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 10px;
  padding: 30px; text-align: center;
  background: #fff;
  animation: fadeUp .7s var(--ease) both;
}
.form__done[hidden] { display: none; }
.form__done svg { width: 44px; height: 44px; color: var(--brown); animation: twinkle 3s ease-in-out infinite; }
.form__done h3 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 2rem; line-height: 1.200; }
.form__done p { color: var(--ink-soft); }

/* ---------- Preguntas ---------- */
.faq { padding-block: 0 clamp(90px, 11vw, 150px); }
.faq__head { text-align: center; margin-bottom: 44px; }
.faq__head p { color: var(--ink-soft); margin-top: 14px; }
.faq__list { display: grid; gap: 14px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: 30px;
  background: rgba(255, 255, 255, .4);
  transition: background .3s, border-color .3s;
}
.faq details[open] { background: #fff; border-color: var(--brown); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 62px; padding: 10px 28px;
  font-weight: 400; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; width: 14px; height: 14px; flex: none; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--ink);
  transition: transform .35s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
details[open] .faq__icon::after { transform: rotate(0deg); }
.faq details p { padding: 0 28px 24px; color: var(--ink-soft); max-width: 46em; }

/* ---------- Footer ---------- */
.footer { padding-top: clamp(60px, 8vw, 100px); border-radius: clamp(36px, 6vw, 80px) clamp(36px, 6vw, 80px) 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.600fr 1fr 1fr; gap: 40px; padding-bottom: clamp(50px, 7vw, 80px); }
.footer__brand p { margin-top: 20px; font-family: var(--serif); font-style: italic; font-size: 1.100rem; }
.footer__col { display: grid; gap: 10px; align-content: start; }
.footer__col h3 { font-family: var(--sans); font-size: .74rem; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--blush); margin-bottom: 10px; }
.footer__col a { width: fit-content; opacity: .8; transition: opacity .3s; }
.footer__col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.footer__base {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
  padding-block: 22px;
  border-top: 1px solid rgba(242, 235, 228, .16);
  font-size: .8rem;
  color: rgba(242, 235, 228, .55);
}

/* ---------- Animaciones ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(.7) rotate(20deg); opacity: .5; } }
@keyframes slide { to { transform: translateX(calc(-50% - 18px)); } }

.load { animation: fadeUp 1s var(--ease) var(--d, 0s) both; }
.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease) var(--rd, 0s), transform 1s var(--ease) var(--rd, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .cert__frame.reveal { transform: translateY(34px) rotate(2.500deg); }
.js .cert__frame.reveal.is-in { transform: rotate(2.500deg); }
.js .cert__frame.reveal.is-in:hover { transform: rotate(0deg) scale(1.015); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .glass { right: -10%; }
  .module--flip .glass { left: -10%; }
  .arch__badge { left: -6%; }
  .feats { grid-template-columns: 1fr; }
  .feat { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding: 20px 22px; }
  .feat svg { grid-row: span 2; margin: 4px 0 0; }
}

@media (max-width: 900px) {
  body { font-size: 16px; }

  .nav__inner { grid-template-columns: auto 1fr; }
  .logo { order: -1; justify-items: start; }
  .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
    background: var(--cream);
    font-family: var(--serif);
    font-size: 1.900rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility .4s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; }
  .nav__links-cta {
    display: inline-flex; margin-top: 12px;
    font-family: var(--sans); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
    background: var(--ink); color: var(--cream);
    padding: 16px 32px !important; border-radius: 999px;
  }
  .nav__links-cta::after { display: none; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { padding: 0 0 20px; }
  .arch { width: min(78%, 400px); }
  .arch__badge { left: -12%; padding: 14px 20px; }

  .about__grid, .teacher__grid, .cert__grid, .enroll__card { grid-template-columns: 1fr; }
  .about__pills { max-width: 480px; margin-inline: auto; width: 100%; }
  .teacher__photo { max-width: 400px; margin-inline: auto; width: 100%; }

  .module, .module--flip { grid-template-columns: 1fr; gap: 34px; }
  .module__media { max-width: 340px; margin-inline: auto; width: 100%; order: 0 !important; }
  .glass, .module--flip .glass { right: -8%; left: auto; padding: 14px 22px; }
  .glass strong { font-size: 1.350rem; }

  .voices__grid { grid-template-columns: 1fr; gap: 34px; }
  .voices blockquote + blockquote { border-left: 0; padding-left: 0; border-top: 1px solid rgba(242, 235, 228, .28); padding-top: 34px; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .stats { display: flex; padding: 18px 4px; }
  .stats__item { flex: 1; padding-inline: 8px; }
  .hero__actions { gap: 20px; }
  .btn { padding-inline: 28px; }
  .arch__badge { left: -16%; bottom: 8%; }
  .arch__badge-big { font-size: 1.150rem; }
  .gallery__rail figure:nth-child(even) { margin-top: 26px; }
  .footer__base { justify-content: center; text-align: center; }
}

/* ==========================================================
   Móvil: carrusel de módulos, barra fija y ajustes táctiles
   ========================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }

.modules__dots, .sticky-cta { display: none; }

/* El menú a pantalla completa es position:fixed dentro del nav: sin esto,
   el backdrop-filter del nav "pegado" lo encierra en la altura de la barra */
.nav.is-open { background: var(--cream); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }

@media (max-width: 900px) {
  /* Sin textura en móvil: es una capa fija transparente a pantalla completa, y Safari
     de iPhone la toma como referencia para el color de la barra de estado (en vez
     del nav), dejando ver la página por detrás. Además es costosa al hacer scroll. */
  body::before { display: none; }

  .nav { padding-block: 12px; padding-top: max(12px, env(safe-area-inset-top)); }
  .nav.is-stuck { padding-block: 6px; padding-top: max(6px, env(safe-area-inset-top)); }
  .nav__links { height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
  .nav__links a { padding: 8px 20px; }

  /* Hero */
  .hero { padding-top: 104px; }
  .hero__curve, .cert__curve { display: none; }
  .hero__title { margin-bottom: 18px; }
  .hero__lead { margin-bottom: 28px; }
  .hero__copy { padding-bottom: 40px; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .link-arrow { justify-content: center; min-height: 52px; }
  .link-arrow__icon { width: 38px; height: 38px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .45); }
  .ribbon { padding-block: 12px; }
  .ribbon span { font-size: 1rem; }

  /* Ritmo vertical más compacto */
  .about, .modules, .teacher, .voices { padding-block: 64px; }
  .about__grid { gap: 44px; }
  .stats { margin-top: 32px; }
  .section-head, .gallery .section-head { margin-bottom: 32px; }
  .section-head--split { gap: 16px; }
  .gallery { padding-block: 60px 44px; }
  .gallery__rail { padding-bottom: 12px; }
  .teacher__photo { max-width: 270px; }
  .teacher__grid { gap: 48px; }
  .feats { margin-top: 32px; gap: 10px; }
  .cert { padding-block: 64px 72px; }
  .cert__grid { gap: 48px; }
  .cert__frame, .js .cert__frame.reveal.is-in { transform: rotate(1.500deg); }
  .enroll { padding-block: 0 72px; }
  .form { padding: 30px 24px 34px; gap: 14px; }
  .enroll__info { padding: 36px 24px; }
  .faq { padding-bottom: 72px; }
  .faq summary { padding-inline: 22px; }
  .faq details p { padding-inline: 22px; }

  /* Zonas táctiles de 44px en el pie */
  .footer__col { gap: 0; }
  .footer__col a { display: flex; align-items: center; min-height: 44px; }
  .footer__base { padding-bottom: calc(22px + 74px + env(safe-area-inset-bottom)); }

  /* Barra superior opaca: en iPhone, Safari deja ver la página detrás de la barra
     de estado si el fondo es translúcido. El ::before la prolonga hacia arriba. */
  .nav.is-stuck, .nav.is-open {
    background: var(--cream);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav.is-stuck::before, .nav.is-open::before {
    content: "";
    position: absolute;
    inset: -200px 0 100% 0;
    background: var(--cream);
  }

  /* Botón flotante de inscripción: sin franja de fondo, para que no choque
     con la barra de direcciones flotante de Safari */
  .sticky-cta {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    padding: 0 var(--gutter) calc(14px + env(safe-area-inset-bottom));
    pointer-events: none;
    transform: translateY(calc(100% + 40px));
    transition: transform .45s var(--ease);
  }
  .sticky-cta.is-visible { transform: none; }
  .sticky-cta .btn {
    min-height: 54px;
    pointer-events: auto;
    box-shadow: 0 0 0 4px rgba(242, 235, 228, .9), 0 16px 30px -10px rgba(42, 26, 15, .55);
  }
}

@media (max-width: 700px) {
  /* Carruseles deslizables: módulos y testimonios */
  .modules__rail, .voices__grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 10px;
    scrollbar-width: none;
  }
  .modules__rail::-webkit-scrollbar, .voices__grid::-webkit-scrollbar { display: none; }
  .js .modules__rail .reveal, .js .voices__grid .reveal { opacity: 1; transform: none; }

  .module, .module--flip {
    flex: 0 0 84%;
    display: flex;
    flex-direction: column;
    gap: 0;
    scroll-snap-align: start;
    padding: 12px 12px 10px;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 26px 40px -36px rgba(42, 26, 15, .6);
  }
  .module + .module { margin-top: 0; }
  .module__media { max-width: none; margin: 0; }
  .module__media img { aspect-ratio: 1 / 1; border-radius: 20px; }
  .glass, .module--flip .glass { top: 10px; right: 10px; left: auto; padding: 8px 16px; border-radius: 18px; }
  .glass strong { font-size: 1.050rem; }
  .glass span { font-size: .66rem; }
  .module__body { padding: 20px 8px 4px; }
  .module__tag { margin-bottom: 8px; }
  .module__body h3 { font-size: 1.900rem; margin-bottom: 10px; }
  .module__body ul { margin-top: 16px; }
  .module__body li:last-child { border-bottom: 0; }

  .modules__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
  .modules__dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .3s var(--ease), background .3s; }
  .modules__dots i.is-active { width: 22px; background: var(--brown); }

  .voices__grid { margin-top: 32px; }
  .voices blockquote, .voices blockquote + blockquote {
    flex: 0 0 84%;
    scroll-snap-align: start;
    padding: 26px 22px;
    border: 1px solid rgba(242, 235, 228, .24);
    border-radius: 26px;
  }
}

/* ==========================================================
   Ambiente soft elegante: superficies claras en vez de bloques
   oscuros, sombras difusas, líneas finas y movimiento pausado.
   El pie es el único bloque café, como ancla.
   ========================================================== */
:root { --ease: cubic-bezier(.22, .61, .36, 1); }

.eyebrow { font-size: .74rem; letter-spacing: .3em; }
.btn { font-size: .78rem; letter-spacing: .2em; }
.btn--light { background: rgba(255, 255, 255, .7); }

/* Secciones antes oscuras */
.soft { color: var(--ink); }
.soft p { color: var(--ink-soft); }
.soft .numbered__n { color: rgba(92, 58, 33, .3); }
.about.soft { background: linear-gradient(180deg, var(--blush) 0%, var(--cream) 75%); }
.about.soft .stats { background: rgba(255, 255, 255, .55); border: 1px solid var(--line); }
.pill { background: var(--sand); }
.ribbon { border-block: 1px solid var(--line); }

.voices.soft { background: var(--sand); }
.voices blockquote, .voices blockquote + blockquote { border-color: var(--line); }
.voices blockquote p { font-family: var(--serif); font-style: italic; font-size: 1.180rem; line-height: 1.550; color: var(--ink); }
.voices blockquote footer { color: var(--ink-soft); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; }

/* Tarjeta café → contorno fino */
.feat--brown { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.feat--brown p { color: var(--ink-soft); }

/* Sombras más tenues y difusas */
.arch__photo img { filter: drop-shadow(0 26px 36px rgba(92, 58, 33, .16)); }
.arch__badge, .glass { box-shadow: 0 22px 46px -28px rgba(92, 58, 33, .3); }
.enroll__card { box-shadow: 0 60px 100px -70px rgba(92, 58, 33, .34), 0 0 0 1px var(--line); }
.portrait__seal { filter: drop-shadow(0 2cqw 3cqw rgba(92, 58, 33, .22)); }

/* Movimiento más lento y corto */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.load { animation-duration: 1.500s; }
.js .reveal { transform: translateY(20px); transition-duration: 1.500s; }
.js .cert__frame.reveal { transform: translateY(20px) rotate(2.500deg); }
.ribbon__track { animation-duration: 55s; }

@media (max-width: 900px) {
  .sticky-cta .btn { box-shadow: 0 0 0 4px rgba(242, 235, 228, .9), 0 16px 30px -14px rgba(92, 58, 33, .4); }
}
@media (max-width: 700px) {
  .module, .module--flip { box-shadow: 0 0 0 1px var(--line); }
}

/* ==========================================================
   Greige (#D6D2CB) en lugar del café como color de superficie:
   botones, pie y sellos. El café queda solo para texto y líneas.
   ========================================================== */
:root { --greige: #D6D2CB; }

.btn--dark { background: var(--greige); color: var(--ink); }
.btn--dark:hover { filter: none; background: #CAC5BD; }
.btn--light:hover { background: var(--greige); color: var(--ink); }
.link-arrow:hover .link-arrow__icon { background: var(--greige); color: var(--ink); }

.footer { background: var(--greige); color: var(--ink); }
.footer .logo--light { color: var(--ink); }
.footer__col h3 { color: var(--ink); opacity: .6; }
.footer__base { border-top-color: var(--line); color: var(--ink-soft); }

@media (max-width: 900px) {
  .nav__links-cta { background: var(--greige); color: var(--ink); }
  .sticky-cta .btn { box-shadow: 0 0 0 4px rgba(242, 235, 228, .9), 0 16px 30px -14px rgba(92, 58, 33, .3); }
}

/* ==========================================================
   Letras negras y rosado casi blanco
   ========================================================== */
:root {
  --blush: #FFF5FA;
  --brown: #1A1A1A;
  --ink: #1A1A1A;
  --ink-soft: rgba(26, 26, 26, .72);
  --line: rgba(26, 26, 26, .16);
}
.soft .numbered__n { color: rgba(26, 26, 26, .25); }