@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Patrick+Hand&display=swap');

/* =========================================================
   01. FUENTES Y CONFIGURACIÓN GLOBAL
   ========================================================= */
:root {
  color-scheme: light;
  --cream: #fffdf4;
  --paper: #fffefa;
  --blue: #1144ed;
  --blue-dark: #132e78;
  --red: #ff362f;
  --yellow: #ffe36f;
  --sky: #a9c4ff;
  --ink: #152c65;
  --muted: #586789;
  --font-body: 'DM Sans', Arial, sans-serif;
  --font-playful: 'Patrick Hand', 'Comic Sans MS', cursive;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header,
.hero,
.audience {
  width: min(100% - 64px, 1110px);
  margin-inline: auto;
}

/* =========================================================
   02. CABECERA, NAVEGACIÓN Y BOTONES
   ========================================================= */
.site-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-logo {
  display: block;
  width: 230px;
  height: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .brand-logo {
    width: 180px;
  }
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.7px;
}

.logo-mark {
  width: 39px;
  height: 35px;
  display: inline-flex;
  flex: 0 0 39px;
  align-items: center;
  justify-content: center;
  margin-right: 3px;
}

.logo-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.logo-bubble {
  fill: none;
  stroke: var(--blue);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo-star {
  fill: var(--yellow);
  stroke: var(--yellow);
  stroke-linejoin: round;
}

.logo-star-small {
  transform: translate(2px, 0) scale(0.78);
  transform-origin: 15px 62px;
}

.logo-star-eye {
  fill: #111827;
}

.logo-english {
  color: var(--blue);
}

.logo-with,
.logo-celes {
  color: var(--red);
  font-family: var(--font-playful);
  font-size: 16px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  font-size: 13px;
  font-weight: 700;
}

.main-nav a,
.button {
  transition: transform 180ms ease, color 180ms ease, background-color 180ms ease;
}

.main-nav a:hover {
  color: var(--red);
  transform: translateY(-2px);
}

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.button:hover {
  transform: translateY(-3px) rotate(-1deg);
}

.button-primary {
  background: var(--red);
  color: white;
  box-shadow: 0 5px 0 #d94448;
}

.button-primary:hover {
  background: #f34c49;
}

.button-secondary {
  background: var(--blue);
  color: white;
  box-shadow: 0 5px 0 #9aa9c9;
}

/* =========================================================
   03. HERO: TITULAR, DESCRIPCIÓN Y DECORACIONES
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 410px;
  padding: 36px 24px 36px;
  text-align: center;
}

/* Textura sutil de papel sobre el fondo crema del inicio. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 28px;
  border: 1px solid rgba(17, 68, 237, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 16px 38px rgba(36, 45, 82, 0.035);
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse at 18% 24%, rgba(255, 227, 111, 0.14), transparent 38%),
    radial-gradient(ellipse at 82% 72%, rgba(17, 68, 237, 0.055), transparent 42%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");
  background-size: auto, auto, 180px 180px;
  pointer-events: none;
}

.hero-eyebrow {
  width: fit-content;
  margin: 0 auto 14px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hero-title {
  margin: 0;
  color: var(--blue);
  font-size: clamp(54px, 8vw, 96px);
  font-weight: 800;
  letter-spacing: -0.085em;
  line-height: 0.98;
}

.hero-title span {
  display: block;
}

.hero-title .hero-title-handwritten {
  margin-top: 8px;
  color: var(--red);
  font-family: var(--font-playful);
  font-size: clamp(58px, 7vw, 82px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
  transform: rotate(-2deg);
}

.hero-bottom {
  width: min(100%, 820px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  margin: 30px auto 0;
  text-align: left;
}

.hero-description {
  max-width: 490px;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.hero-action {
  min-width: 205px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-note {
  margin: 9px 0 0;
  color: var(--red);
  font-family: var(--font-playful);
  font-size: 20px;
  transform: rotate(-4deg);
}

.hero-location {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.hero-doodles {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: visible;
  pointer-events: none;
}

.hero-doodle {
  position: absolute;
  display: block;
  height: auto;
  overflow: visible;
}

.doodle-star-face {
  width: clamp(105px, 12vw, 150px);
  top: 4px;
  right: 4.5%;
  transform: rotate(9deg);
}

.doodle-cloud-face {
  width: clamp(145px, 17vw, 205px);
  top: 150px;
  left: -4.5%;
  transform: rotate(-8deg);
}

/* =========================================================
   04. CURSOS POR PÚBLICO
   ========================================================= */
.audience {
  padding: 8px 0 86px;
}

.section-heading {
  margin-bottom: 18px;
}

.section-kicker {
  margin: 0 0 5px;
  color: var(--red);
  font-family: var(--font-playful);
  font-size: 18px;
}

.section-heading h2 {
  margin: 0;
  color: var(--blue-dark);
  font-size: clamp(25px, 3vw, 34px);
  letter-spacing: -0.045em;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.audience-card {
  min-height: 176px;
  padding: 23px 21px;
  border-radius: 22px;
  color: var(--blue-dark);
  box-shadow: 0 5px 0 rgba(21, 44, 101, 0.12);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.audience-card:hover {
  box-shadow: 0 9px 0 rgba(21, 44, 101, 0.1);
  transform: translateY(-5px) rotate(0deg);
}

.audience-card-kids {
  background: var(--yellow);
  transform: rotate(-1deg);
}

.audience-card-teens {
  margin-top: 13px;
  background: var(--sky);
  transform: rotate(1.5deg);
}

.audience-card-adults {
  background: #ff9289;
  transform: rotate(-1.5deg);
}

.audience-card-goals {
  margin-top: 9px;
  background: #ffe36f;
  transform: rotate(1deg);
}

.card-label {
  margin: 0 0 21px;
  color: rgba(21, 44, 101, 0.75);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.audience-card h3 {
  margin: 0 0 8px;
  font-size: 19px;
  letter-spacing: -0.04em;
}

.audience-card > p:last-child {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .site-header,
  .hero,
  .audience {
    width: min(100% - 36px, 600px);
  }

  .site-header {
    min-height: 70px;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 0;
  }

  .main-nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
  }

  .header-cta {
    min-height: 40px;
    padding-inline: 15px;
    font-size: 11px;
  }

  .hero {
    min-height: 0;
    padding: 46px 0 34px;
  }

  .hero-eyebrow {
    font-size: 9px;
  }

  .hero-title {
    font-size: clamp(44px, 11vw, 68px);
  }

  .hero-title .hero-title-handwritten {
    font-size: clamp(52px, 12vw, 72px);
  }

  .hero-bottom {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
    text-align: center;
  }

  .hero-description {
    max-width: 500px;
    font-size: 14px;
  }

  .audience {
    padding-bottom: 54px;
  }

  .audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
  }

  .audience-card {
    min-height: 166px;
    padding: 19px 16px;
    border-radius: 18px;
  }
}

@media (max-width: 420px) {
  .site-header,
  .hero,
  .audience {
    width: min(100% - 28px, 380px);
  }

  .logo {
    gap: 3px;
    font-size: 15px;
  }

  .logo-mark {
    width: 33px;
    height: 30px;
    flex-basis: 33px;
    margin-right: 1px;
  }

  .logo-with,
  .logo-celes {
    font-size: 14px;
  }

  .header-cta {
    padding-inline: 12px;
    font-size: 10px;
  }

  .main-nav {
    font-size: 10px;
  }

  .hero-eyebrow {
    max-width: 90%;
    text-align: center;
  }

  .audience-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .audience-card,
  .audience-card-teens,
  .audience-card-goals {
    min-height: 145px;
    margin-top: 0;
  }
}

/* En tablet y móvil dejamos el hero limpio: solo queda el fondo crema. */
@media (max-width: 900px) {
  .hero-doodles {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   05. OBJETIVOS Y TIPOS DE CLASES
   ========================================================= */
.goals {
  padding: 64px max(32px, calc((100% - 1110px) / 2)) 72px;
  background: var(--blue);
  color: white;
}

.goals-inner {
  max-width: 1110px;
  margin-inline: auto;
}

.goals-intro {
  max-width: 620px;
  margin-bottom: 30px;
}

.goals-kicker {
  margin: 0 0 17px;
  color: var(--yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.goals-intro h2 {
  margin: 0 0 14px;
  font-size: clamp(27px, 3vw, 36px);
  letter-spacing: -0.05em;
}

.goals-intro > p:last-child {
  max-width: 600px;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}

.goals-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.goal-card {
  min-height: 246px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 25px 23px 24px;
  border-radius: 23px;
  color: var(--blue-dark);
  box-shadow: 0 6px 0 rgba(13, 34, 100, 0.28);
}

.goal-card-conversation {
  background: white;
}

.goal-card-work {
  background: #ffdc36;
}

.goal-card-study {
  background: #ffe9e5;
}

.goal-card-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 32px;
}

.goal-card .card-label {
  margin: 0;
  color: var(--blue-dark);
}

.goal-icon {
  color: var(--red);
  font-family: var(--font-playful);
  font-size: 29px;
  line-height: 1;
}

.goal-card h3 {
  margin: 0 0 10px;
  font-size: clamp(20px, 2.2vw, 25px);
  letter-spacing: -0.045em;
}

.goal-card > p {
  max-width: 330px;
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
}

.goal-card > a {
  margin-top: auto;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 180ms ease, transform 180ms ease;
}

.goal-card > a:hover {
  color: var(--red);
  transform: translateX(3px);
}

@media (max-width: 760px) {
  .goals {
    padding: 48px 18px 54px;
  }

  .goals-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .goal-card {
    min-height: 220px;
  }
}

@media (max-width: 420px) {
  .goals {
    padding-inline: 14px;
  }
}

/* =========================================================
   06. PRESENTACIÓN DEL INSTITUTO
   ========================================================= */
.institute {
  width: min(100% - 64px, 1110px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(42px, 8vw, 100px);
  margin: 0 auto;
  padding: 96px 0;
}

.institute-copy {
  max-width: 560px;
}

.institute-kicker,
.institute-note-kicker {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.institute-copy h2 {
  max-width: 520px;
  margin: 0 0 16px;
  color: var(--blue-dark);
  font-size: clamp(34px, 4.2vw, 48px);
  letter-spacing: -0.065em;
  line-height: 1.04;
}

.institute-description {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.institute-points {
  display: grid;
  gap: 15px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.institute-points li {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 14px;
  font-weight: 700;
}

.institute-points li::before {
  width: 28px;
  height: 28px;
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--blue-dark);
  content: '✓';
  font-size: 17px;
  font-weight: 800;
}

.institute-note {
  position: relative;
  overflow: hidden;
  padding: 34px 32px 29px;
  border-radius: 25px;
  background: #ffdc36;
  color: var(--blue-dark);
}

.institute-note-kicker {
  margin-bottom: 13px;
}

.institute-note h3 {
  margin: 0 0 17px;
  color: var(--blue);
  font-size: clamp(25px, 3vw, 32px);
  letter-spacing: -0.05em;
}

.institute-note > p:not(.institute-note-kicker):not(.institute-note-signoff) {
  max-width: 420px;
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
}

.institute-note-signoff {
  margin: 19px 0 0;
  color: var(--red);
  font-family: var(--font-playful);
  font-size: 21px;
  transform: rotate(-3deg);
}

.institute-spark {
  position: absolute;
  right: 23px;
  bottom: 19px;
  color: #ffb437;
  font-size: 76px;
  line-height: 1;
}

@media (max-width: 760px) {
  .institute {
    width: min(100% - 36px, 600px);
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 64px 0;
  }

  .institute-note {
    padding: 29px 24px 26px;
  }
}

@media (max-width: 420px) {
  .institute {
    width: min(100% - 28px, 380px);
  }

  .institute-note {
    padding: 26px 20px 24px;
  }
}

/* =========================================================
   07. VOCES Y RESEÑAS
   ========================================================= */
.student-voices {
  padding: 72px 32px 80px;
  background: var(--blue);
  color: white;
}

.voices-inner {
  max-width: 1110px;
  margin-inline: auto;
}

.voices-heading {
  max-width: 760px;
  margin-bottom: 34px;
}

.voices-kicker {
  margin: 0 0 12px;
  color: var(--yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.voices-heading h2 {
  margin: 0 0 12px;
  font-size: clamp(34px, 4.5vw, 52px);
  letter-spacing: -0.06em;
  line-height: 1.04;
}

.voices-disclaimer {
  margin: 0;
  color: rgba(255, 255, 255, 0.83);
  font-size: 12px;
}

.voices-layout {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: stretch;
  gap: clamp(28px, 6vw, 72px);
}

.voice-feature {
  position: relative;
  min-height: 310px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 34px 38px 30px;
  border-radius: 4px 36px 5px 34px;
  background: var(--yellow);
  color: var(--blue-dark);
  transform: rotate(-1deg);
}

.voice-quote-mark {
  height: 52px;
  color: var(--red);
  font-family: Georgia, serif;
  font-size: 92px;
  line-height: 1;
}

.voice-feature blockquote {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 12px 0 30px;
  font-size: clamp(28px, 3.7vw, 43px);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1.12;
}

.voice-source {
  margin: 0;
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 700;
}

.voice-source span {
  padding-inline: 4px;
  color: var(--red);
}

.voice-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.voice-line {
  padding: 23px 0 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.voice-line:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.voice-category {
  margin: 0 0 9px;
  color: var(--yellow);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.voice-line blockquote {
  margin: 0 0 13px;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.voice-feature-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.voice-next {
  width: 46px;
  height: 46px;
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background: var(--blue);
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: 23px;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.voice-next:hover {
  background: transparent;
  color: var(--blue);
  transform: translateX(3px);
}

.voice-next:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .student-voices {
    padding: 52px 18px 60px;
  }

  .voices-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .voice-feature {
    min-height: 260px;
  }
}

@media (max-width: 420px) {
  .student-voices {
    padding: 44px 14px 52px;
  }

  .voice-feature {
    min-height: 240px;
    padding: 27px 23px 24px;
    border-radius: 4px 27px 5px 26px;
  }

  .voice-feature blockquote {
    font-size: 29px;
  }
}

/* =========================================================
   08. PASOS PARA COORDINAR LA ENTREVISTA
   ========================================================= */
.interview {
  width: min(100% - 64px, 1110px);
  margin: 0 auto;
  padding: 70px 0 90px;
}

.interview-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 48px;
  margin-bottom: 27px;
}

.interview-kicker {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.interview-heading h2 {
  max-width: 520px;
  margin: 0;
  color: var(--blue-dark);
  font-size: clamp(36px, 4.5vw, 50px);
  letter-spacing: -0.065em;
  line-height: 1.02;
}

.interview-intro {
  max-width: 520px;
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.7;
}

.interview-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.interview-step {
  min-height: 224px;
  padding: 24px 22px 21px;
  border: 1px solid #e7e1d4;
  border-radius: 22px;
  background: white;
}

.interview-step-think {
  margin-top: 10px;
  background: #fff8d8;
  transform: rotate(1deg);
}

.interview-step-find {
  margin-top: 3px;
  background: #fff0ed;
  transform: rotate(-1deg);
}

.interview-number {
  margin: 0 0 28px;
  color: var(--red);
  font-size: 16px;
  font-weight: 800;
}

.interview-step h3 {
  margin: 0 0 9px;
  color: var(--blue);
  font-size: 22px;
  letter-spacing: -0.045em;
}

.interview-step > p:not(.interview-number):not(.interview-aside) {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.interview-aside {
  margin: 16px 0 0;
  color: var(--red);
  font-family: var(--font-playful);
  font-size: 18px;
  transform: rotate(-2deg);
}

.interview-cta {
  margin-top: 28px;
}

@media (max-width: 760px) {
  .interview {
    width: min(100% - 36px, 600px);
    padding: 54px 0 66px;
  }

  .interview-heading {
    grid-template-columns: 1fr;
    gap: 17px;
    margin-bottom: 23px;
  }

  .interview-steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .interview-step,
  .interview-step-think,
  .interview-step-find {
    min-height: 0;
    margin-top: 0;
    transform: none;
  }

  .interview-number {
    margin-bottom: 19px;
  }
}

@media (max-width: 420px) {
  .interview {
    width: min(100% - 28px, 380px);
  }

  .interview-step {
    padding: 22px 19px;
  }

  .interview-cta {
    width: 100%;
    padding-inline: 14px;
    font-size: 12px;
  }
}

/* =========================================================
   09. PREGUNTAS FRECUENTES Y CTA FINAL
   ========================================================= */
.faq {
  padding: 38px 32px 70px;
  background: var(--yellow);
}

.faq-inner {
  width: min(100%, 1110px);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(42px, 8vw, 100px);
  margin-inline: auto;
}

.faq-kicker,
.final-cta-kicker {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.faq-copy h2 {
  margin: 0 0 13px;
  color: var(--blue-dark);
  font-size: clamp(28px, 3vw, 34px);
  letter-spacing: -0.05em;
}

.faq-copy > p:not(.faq-kicker):not(.faq-note) {
  max-width: 390px;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.faq-note {
  margin: 25px 0 0;
  color: var(--red);
  font-family: var(--font-playful);
  font-size: 21px;
  transform: rotate(-3deg);
}

.faq-note span {
  display: inline-block;
  margin-left: 5px;
  font-size: 24px;
}

.faq-list {
  display: grid;
  gap: 9px;
}

.faq-item {
  overflow: hidden;
  border-radius: 17px;
  background: var(--cream);
  box-shadow: 0 3px 0 rgba(21, 44, 101, 0.12);
}

.faq-item summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  color: var(--blue-dark);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  color: var(--red);
  content: '+';
  font-size: 22px;
  font-weight: 500;
  transition: transform 180ms ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item > p {
  margin: 0;
  padding: 0 18px 17px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

.final-cta {
  position: relative;
  overflow: hidden;
  width: min(100% - 64px, 1110px);
  min-height: 216px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin: 0 auto 20px;
  padding: 34px 40px;
  border-radius: 25px;
  background: var(--red);
  color: white;
}

.final-cta-kicker {
  color: var(--yellow);
}

.final-cta-copy h2 {
  margin: 0 0 10px;
  font-size: clamp(25px, 3vw, 32px);
  letter-spacing: -0.045em;
  line-height: 1.18;
}

.final-cta-copy > p:last-child {
  max-width: 460px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.final-cta-spark {
  position: absolute;
  top: 18px;
  right: 23%;
  color: rgba(255, 255, 255, 0.18);
  font-size: 96px;
  line-height: 1;
}

.final-cta-button {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .faq {
    padding: 42px 18px 52px;
  }

  .faq-inner {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .faq-note {
    margin-top: 15px;
  }

  .final-cta {
    width: min(100% - 36px, 600px);
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 18px;
    padding: 29px 24px;
  }

  .final-cta-spark {
    top: 10px;
    right: 14px;
    font-size: 70px;
  }
}

@media (max-width: 420px) {
  .faq {
    padding-inline: 14px;
  }

  .faq-item summary {
    font-size: 13px;
  }

  .final-cta {
    width: min(100% - 28px, 380px);
    padding: 25px 20px;
  }

  .final-cta-button {
    width: 100%;
  }
}

/* =========================================================
   10. PIE DE PÁGINA
   ========================================================= */
.site-footer {
  padding: 48px max(32px, calc((100% - 1110px) / 2)) 20px;
  background: #172b70;
  color: white;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.1fr 0.7fr 1.15fr;
  gap: clamp(36px, 7vw, 88px);
  padding-bottom: 40px;
}

.footer-brand {
  max-width: 330px;
}

.footer-logo {
  width: 190px;
  min-height: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fffefa;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.16);
}

/* El footer reutiliza exactamente el mismo archivo de logo del menú */
.footer-brand-logo {
  display: block;
  width: 100%;
  max-height: 58px;
  object-fit: contain;
}

.footer-brand > p:not(.footer-play) {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.7;
}

.footer-play {
  margin: 16px 0 0;
  color: var(--yellow);
  font-family: var(--font-playful);
  font-size: 23px;
  transform: rotate(-3deg);
}

.footer-play span {
  font-family: var(--font-body);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding-top: 4px;
}

.footer-nav h2 {
  margin: 0 0 5px;
  font-size: 17px;
}

.footer-nav a,
.footer-bottom a {
  font-size: 12px;
  transition: color 180ms ease;
}

.footer-nav a:hover,
.footer-bottom a:hover {
  color: var(--yellow);
}

.footer-contact {
  position: relative;
  padding: 23px 24px 24px;
  border-radius: 22px;
  background: #ffdc36;
  color: var(--blue-dark);
  transform: rotate(0.7deg);
}

.footer-contact-kicker {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.footer-contact h2 {
  margin: 0 0 8px;
  color: var(--blue-dark);
  font-size: 24px;
  letter-spacing: -0.045em;
}

.footer-contact > p:not(.footer-contact-kicker) {
  max-width: 360px;
  margin: 0 0 15px;
  font-size: 12px;
  line-height: 1.6;
}

.footer-contact .button {
  min-height: 40px;
  padding-inline: 16px;
  font-size: 11px;
}

.footer-bottom {
  min-height: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: center;
  gap: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-bottom p {
  margin: 0;
  font-size: 11px;
}

.footer-bottom a {
  font-size: 11px;
  font-weight: 700;
}

.footer-back-top {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .site-footer {
    padding: 38px 18px 18px;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    padding-bottom: 30px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    max-width: 460px;
  }

  .footer-contact {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .footer-bottom p:nth-child(2) {
    text-align: right;
  }

  .footer-back-top {
    text-align: right;
  }
}

@media (max-width: 420px) {
  .site-footer {
    padding-inline: 14px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 29px;
  }

  .footer-brand,
  .footer-contact {
    grid-column: auto;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .footer-bottom p:nth-child(2),
  .footer-back-top {
    text-align: left;
  }
}


/* =========================================================
   11. MICROINTERACCIONES Y ANIMACIONES
   ========================================================= */

/* Los elementos entran suavemente cuando aparecen en pantalla. */
.js-reveal {
  opacity: 0;
  translate: 0 22px;
  transition:
    opacity 650ms ease,
    translate 650ms cubic-bezier(0.2, 0.75, 0.25, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* Las tarjetas se elevan y sus títulos cambian de color al pasar el cursor. */
.audience-card,
.goal-card,
.interview-step,
.voice-line,
.faq-item,
.institute-note,
.footer-contact {
  transition:
    transform 260ms cubic-bezier(0.2, 0.75, 0.25, 1),
    box-shadow 260ms ease,
    background-color 260ms ease,
    color 260ms ease;
}

.audience-card h3,
.goal-card h3,
.interview-step h3,
.voice-line blockquote,
.faq-item summary,
.footer-nav a {
  transition: color 220ms ease;
}

.audience-card:hover h3,
.goal-card:hover h3,
.interview-step:hover h3 {
  color: var(--red);
}

.goal-card:hover,
.interview-step:hover {
  box-shadow: 0 12px 26px rgba(19, 46, 120, 0.12);
  transform: translateY(-6px) rotate(0deg);
}

.voice-line:hover blockquote {
  color: var(--yellow);
}

.voice-line:hover {
  transform: translateX(5px);
}

.faq-item:hover summary {
  color: var(--red);
}

.institute-note:hover,
.footer-contact:hover {
  box-shadow: 0 14px 30px rgba(19, 46, 120, 0.12);
  transform: translateY(-4px) rotate(0deg);
}

.hero-eyebrow {
  animation: celes-pop-in 650ms 100ms both;
}

.hero-title > span:first-child {
  animation: celes-rise-in 700ms 160ms both;
}

.hero-title .hero-title-handwritten {
  position: relative;
  animation: celes-rise-in 750ms 280ms both;
}

.doodle-star-face {
  animation: celes-float 5s ease-in-out infinite;
  transform-origin: center;
}

.doodle-cloud-face {
  animation: celes-float 6s ease-in-out infinite reverse;
  transform-origin: center;
}

.goal-icon,
.institute-spark,
.final-cta-spark {
  transition: transform 300ms ease;
}

.goal-card:hover .goal-icon {
  transform: rotate(18deg) scale(1.18);
}

.institute-note:hover .institute-spark,
.final-cta:hover .final-cta-spark {
  transform: rotate(22deg) scale(1.08);
}

.button:active,
.voice-next:active {
  transform: translateY(1px) scale(0.98);
}

@keyframes celes-rise-in {
  from {
    opacity: 0;
    translate: 0 18px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes celes-pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes celes-float {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -9px;
  }
}

/* Evitamos animaciones intrusivas si la persona prefiere movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .js-reveal {
    opacity: 1;
    translate: none;
  }
}


/* Animación breve al cambiar la reseña. */
.voice-feature-quote.review-enter {
  animation: review-change 420ms ease both;
}

@keyframes review-change {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}


/* CERTIFICACIÓN UTN — banner compacto, fondo azul suave y dibujo visible */
.certification {
  padding: clamp(1.5rem, 3vw, 2.8rem) clamp(1rem, 6vw, 6.75rem);
}

.certification-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  align-items: center;
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  row-gap: .9rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(1.35rem, 2.8vw, 2.35rem);
  overflow: hidden;
  border-radius: 30px;
  background: #e7f4ff;
  background-image: radial-gradient(rgba(17, 68, 237, .045) .65px, transparent .65px);
  background-size: 9px 9px;
  border: 1px solid rgba(17, 68, 237, .08);
  box-shadow: 0 12px 35px rgba(17, 68, 237, .045);
}

/* Fondo ondulado: la forma se construye con radios orgánicos, sin capas transparentes superpuestas. */
.certification-main { position: relative; z-index: 1; }
.certification-kicker {
  margin: 0 0 .55rem;
  color: #1144ed;
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.certification-main h2 {
  max-width: 650px;
  margin: 0;
  color: #1144ed;
  font-size: clamp(1.9rem, 3vw, 3.25rem);
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -.052em;
}
.certification-main h2 span {
  display: inline;
  color: #ff362f;
  font-family: var(--font-playful, cursive);
  font-weight: 700;
  letter-spacing: -.035em;
  text-decoration: underline;
  text-decoration-color: #ffe36f;
  text-decoration-thickness: .08em;
  text-underline-offset: .1em;
}
.certification-intro {
  max-width: 560px;
  margin: .85rem 0 0;
  color: #173777;
  font-size: clamp(.95rem, 1.1vw, 1.08rem);
  line-height: 1.5;
}

.certification .certificate-art {
  position: relative;
  display: grid;
  min-height: 225px;
  place-items: center;
  padding: .3rem 1rem .9rem .2rem;
  isolation: isolate;
}
.certificate-paper {
  position: relative;
  z-index: 2;
  width: min(100%, 390px);
  padding: clamp(1rem, 1.8vw, 1.45rem);
  transform: rotate(1.5deg);
  border: 2px solid #f1d8c8;
  border-radius: 12px;
  background: #fffdf7;
  box-shadow: 0 9px 0 rgba(17, 68, 237, .07), 0 12px 24px rgba(23, 55, 119, .12);
}
.certificate-institutions { display: flex; align-items: center; justify-content: space-around; gap: .8rem; color: #173777; }
.certificate-utn, .certificate-inspt { display: block; font-size: clamp(1.1rem, 1.5vw, 1.5rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.certificate-inspt { color: #1472b8; }
.certificate-institutions small { display: block; max-width: 145px; margin-top: .3rem; font-size: .4rem; font-weight: 650; letter-spacing: 0; line-height: 1.2; text-transform: uppercase; }
.certificate-divider { width: 1px; height: 38px; background: #e8dfd1; }
.certificate-label { margin: 1rem 0 .7rem; color: #1144ed; font-size: clamp(1.1rem, 1.5vw, 1.45rem); letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.certificate-line { display: block; height: 6px; margin: .5rem auto; border-radius: 20px; background: #e9e4da; }
.certificate-line-long { width: 68%; }
.certificate-line-short { width: 48%; }
.certificate-bottom { display: flex; align-items: end; justify-content: space-between; margin-top: .9rem; }
.certificate-signature { color: #1144ed; font-family: var(--font-playful, cursive); font-size: 1rem; font-style: italic; }
.certificate-seal { display: grid; width: 42px; aspect-ratio: 1; place-items: center; border: 3px double #fff8d5; border-radius: 50%; background: #ffe36f; color: #d69c00; font-size: 1.45rem; box-shadow: 0 0 0 4px #ffe36f; }

.certification-benefits {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: .15rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(17, 68, 237, .16);
}
.certification-benefit { display: flex; align-items: flex-start; gap: .7rem; padding: 0 .3rem; }
.certification-benefit + .certification-benefit { border-left: 1px solid rgba(17, 68, 237, .16); padding-left: 1.2rem; }
.certification-icon { flex: 0 0 auto; display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid #1144ed; border-radius: 50%; color: #1144ed; font-size: 1.15rem; font-weight: 800; }
.certification-icon-red { border-color: #ff362f; color: #ff362f; }
.certification-benefit h3 { margin: 0 0 .25rem; color: #1144ed; font-size: .93rem; line-height: 1.25; }
.certification-benefit p { margin: 0; color: #173777; font-size: .82rem; line-height: 1.4; }

/* Entrada suave al llegar a la sección durante el scroll */
.certification-panel.js-reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.certification-panel.js-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .certification-panel { grid-template-columns: minmax(0, 1fr) minmax(250px, .9fr); column-gap: 1rem; }
  .certification-benefits { gap: .7rem; }
  .certification-benefit { gap: .55rem; }
  .certification-benefit + .certification-benefit { padding-left: .8rem; }
}
@media (max-width: 700px) {
  .certification { padding: 1.5rem 1rem; }
  .certification-panel { grid-template-columns: 1fr; gap: .65rem; padding: 1.25rem; border-radius: 23px; }
  .certification-main h2 { font-size: clamp(2rem, 8.8vw, 2.7rem); }
  .certification-intro { margin-top: .7rem; }
  .certification .certificate-art { min-height: 190px; padding: .4rem .7rem 1rem .2rem; }
  .certificate-paper { width: 88%; }
  .certification-benefits { grid-column: auto; grid-template-columns: 1fr; gap: .85rem; margin-top: .2rem; padding-top: .9rem; }
  .certification-benefit + .certification-benefit { border-left: 0; padding-left: .3rem; border-top: 1px solid rgba(17, 68, 237, .14); padding-top: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .certification-panel.js-reveal { opacity: 1; transform: none; transition: none; }
}


/* =========================================================
   AJUSTES FINALES — CERTIFICACIÓN Y ENLACES DEL FOOTER
   ========================================================= */

/* Acerca el banner a las secciones vecinas sin quitarle el marco. */
.certification {
  padding-top: clamp(.45rem, 1.2vw, 1rem);
  padding-bottom: clamp(.45rem, 1.2vw, 1rem);
}

.certification-panel {
  row-gap: .45rem;
  padding-block: clamp(1.2rem, 2.1vw, 1.8rem);
}

/* El certificado cobra vida con un movimiento muy leve, sin animar el texto. */
.certification-panel.is-visible .certificate-paper {
  animation: certificate-float 5.8s ease-in-out infinite;
  transform-origin: 50% 50%;
}

.certification-panel.is-visible .certificate-seal {
  animation: seal-glint 3.8s ease-in-out infinite;
}


.certification-panel.is-visible .certificate-doodle-one {
  animation: doodle-pop 3.4s ease-in-out infinite;
}

.certification-panel.is-visible .certification-benefit {
  animation: benefit-rise .55s both;
}
.certification-panel.is-visible .certification-benefit:nth-child(2) { animation-delay: 100ms; }
.certification-panel.is-visible .certification-benefit:nth-child(3) { animation-delay: 200ms; }

@keyframes certificate-float {
  0%, 100% { transform: translateY(0) rotate(1.5deg); }
  50% { transform: translateY(-5px) rotate(.5deg); }
}
@keyframes seal-glint {
  0%, 78%, 100% { box-shadow: 0 0 0 4px #ffe36f; }
  88% { box-shadow: 0 0 0 7px rgba(255, 227, 111, .35), 0 0 18px rgba(255, 190, 20, .25); }
}
@keyframes doodle-pop {
  0%, 100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(12deg) scale(1.12); }
}
@keyframes benefit-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Enlaces de «Explorá»: pequeño deslizamiento de flecha al pasar el cursor. */
.footer-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color 180ms ease, transform 180ms ease;
}
.footer-nav a::after {
  content: "→";
  display: inline-block;
  color: var(--yellow);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--yellow);
  transform: translateX(3px);
}
.footer-nav a:hover::after,
.footer-nav a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 700px) {
  .certification { padding-top: .35rem; padding-bottom: .5rem; }
  .certification-panel { padding-block: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .certification-panel.is-visible .certificate-paper,
  .certification-panel.is-visible .certificate-seal,
  .certification-panel.is-visible .certificate-doodle-one,
  .certification-panel.is-visible .certification-benefit {
    animation: none !important;
  }
  .footer-nav a, .footer-nav a::after { transition: none; }
}


/* =========================================================
   CERTIFICACIÓN — COMPOSICIÓN FINAL EN TRES COLUMNAS
   Certificado protagonista y libros por encima, sin doodles extra.
   ========================================================= */
.certification {
  padding-top: clamp(.35rem, 1vw, .8rem);
  padding-bottom: clamp(.5rem, 1.1vw, .9rem);
}
.certification-panel {
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, .9fr) minmax(230px, .78fr);
  align-items: center;
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: .5rem;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  overflow: hidden;
  border-radius: 7% 5% 8% 4% / 8% 7% 6% 9%;
}
.certification-panel::before {
  content: none;
}
.certification-main h2 {
  font-size: clamp(1.8rem, 2.45vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: -.055em;
}
.certification-intro {
  margin-top: .8rem;
  font-size: clamp(.92rem, 1vw, 1.03rem);
}
.certification .certificate-art {
  min-width: 0;
  min-height: 230px;
  padding: 1.1rem .2rem .5rem;
  overflow: visible;
}
.certificate-paper {
  z-index: 2;
  width: min(100%, 410px);
  transform: rotate(1.2deg);
}
.certification-benefits {
  grid-column: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0 0 0 clamp(.8rem, 1.5vw, 1.4rem);
  border-top: 0;
  border-left: 1px solid rgba(17, 68, 237, .18);
}
.certification-benefit { gap: .65rem; padding: 0; }
.certification-benefit + .certification-benefit {
  border-left: 0;
  padding-left: 0;
}
.certification-benefit h3 { font-size: .9rem; }
.certification-benefit p { font-size: .8rem; }
/* Mantener el siguiente bloque cerca para que la página fluya mejor. */
.interview { padding-top: clamp(1.2rem, 2vw, 2rem); }

@media (max-width: 1050px) {
  .certification-panel {
    grid-template-columns: minmax(0, 1fr) minmax(240px, .85fr);
  }
  .certification-benefits {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-left: 0;
    border-top: 1px solid rgba(17, 68, 237, .16);
    padding: 1rem 0 0;
    gap: .8rem;
  }
  .certification-benefit + .certification-benefit {
    border-left: 1px solid rgba(17, 68, 237, .16);
    padding-left: .8rem;
  }
}
@media (max-width: 700px) {
  .certification-panel { grid-template-columns: 1fr; gap: .45rem; overflow: hidden; }
  .certification .certificate-art { min-height: 190px; padding: 1rem .5rem .6rem; }
  .certificate-paper { width: 88%; }
  .certification-benefits {
    grid-column: auto;
    grid-template-columns: 1fr;
    gap: .8rem;
    margin-top: .3rem;
    padding: .9rem 0 0;
    border-top: 1px solid rgba(17, 68, 237, .16);
  }
  .certification-benefit + .certification-benefit {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(17, 68, 237, .12);
    padding-top: .8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
}

/* =========================================================
   CERTIFICACIÓN FULL-BLEED — unida a la sección azul de reseñas
   El fondo celeste ocupa todo el ancho; el contenido conserva aire.
   ========================================================= */
.student-voices {
  padding-bottom: 0;
}

.certification {
  width: 100%;
  margin: 0;
  padding: 0;
}

.certification-panel {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(2.1rem, 4.2vw, 4rem) clamp(1.25rem, 6.2vw, 7rem);
  border: 1px solid rgba(17, 68, 237, .08);
  border-top: 0;
  border-radius: 0 0 5.5rem 5.5rem / 0 0 3.8rem 3.8rem;
  box-shadow: 0 12px 32px rgba(17, 68, 237, .035);
}

/* Evita cualquier pequeño hueco entre el azul y el banner. */
.certification + .interview {
  margin-top: 0;
}

@media (max-width: 1050px) {
  .certification-panel {
    padding-inline: clamp(1.25rem, 4vw, 3rem);
  }
}

@media (max-width: 700px) {
  .student-voices {
    padding-bottom: 0;
  }
  .certification-panel {
    padding: 1.8rem 1.2rem 2rem;
    border-radius: 0 0 2.5rem 2.5rem / 0 0 2rem 2rem;
  }
}


/* =========================================================
   AJUSTE FINAL — CERTIFICACIÓN SIN SOLAPES
   Banner horizontal rectangular, pegado a reseñas.
   ========================================================= */
.student-voices {
  position: relative;
  z-index: 2;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.certification {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  clear: both;
}
.certification-panel {
  position: relative;
  display: grid;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0;
  border-top: 1px solid rgba(17, 68, 237, .1);
  box-shadow: none;
  transform: none;
  padding: clamp(2rem, 3.5vw, 3.25rem) clamp(1.25rem, 6.2vw, 7rem);
}
.certification-main h2 {
  max-width: 13.5em;
}
.certification-main h2 span {
  display: block;
  margin-top: .06em;
  color: var(--red);
}
/* La entrada solo cambia la opacidad: no desplaza ni pisa otras secciones. */
.certification-panel.js-reveal {
  opacity: 0;
  transform: none !important;
  transition: opacity .55s ease;
}
.certification-panel.js-reveal.is-visible {
  opacity: 1;
  transform: none !important;
}
@media (max-width: 700px) {
  .certification-panel {
    border-radius: 0 !important;
    padding: 1.8rem 1.2rem 2rem;
  }
  .certification-main h2 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .certification-panel.js-reveal { opacity: 1; transition: none; }
}

/* =========================================================
   ESPACIO ENTRE RESEÑAS Y CERTIFICACIÓN
   Deja respirar la tarjeta amarilla dentro del bloque azul,
   sin separar el banner celeste de la sección de reseñas.
   ========================================================= */
.student-voices {
  padding-bottom: clamp(2.5rem, 4.5vw, 4.5rem) !important;
}

/* =========================================================
   TRANSICIÓN ORGÁNICA ENTRE BLOQUES
   Mantiene la identidad y los colores originales; solo suaviza
   el encuentro del fondo crema con el bloque azul de reseñas.
   Sin ilustraciones ni elementos decorativos nuevos.
   ========================================================= */
.student-voices {
  isolation: isolate;
  margin-top: 0;
}

.student-voices::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -54px;
  left: 0;
  width: 100%;
  height: 55px;
  background-color: var(--blue);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 35 C150 5 245 3 390 28 S620 57 760 31 S1010 3 1160 25 S1330 48 1440 30 L1440 60 L0 60 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 35 C150 5 245 3 390 28 S620 57 760 31 S1010 3 1160 25 S1330 48 1440 30 L1440 60 L0 60 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

@media (max-width: 700px) {
  .student-voices::before {
    top: -30px;
    height: 31px;
  }
}

/* =========================================================
   CERTIFICACIÓN UTN — transición crema/azul y certificado vivo
   Mantiene tipografías, colores y contenido existentes; sin dibujos nuevos.
   ========================================================= */
.certification {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cream, #fffdf5);
}
.certification-panel {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--cream, #fffdf5) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-bottom: clamp(5.5rem, 9vw, 8rem);
}
.certification-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -2%;
  bottom: -1px;
  width: 104%;
  height: clamp(95px, 15vw, 175px);
  background: var(--blue, #1144ed);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath d='M0 80 C150 25 265 45 390 95 S625 145 785 85 S1035 15 1185 55 S1340 105 1440 55 L1440 180 L0 180 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath d='M0 80 C150 25 265 45 390 95 S625 145 785 85 S1035 15 1185 55 S1340 105 1440 55 L1440 180 L0 180 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}
.certification-main,
.certification .certificate-art,
.certification-benefits {
  position: relative;
  z-index: 1;
}
.certification-panel.is-visible .certificate-paper {
  animation: ewc-certificate-float 5.6s ease-in-out infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
@keyframes ewc-certificate-float {
  0%, 100% { transform: translateY(0) rotate(1.2deg); }
  50% { transform: translateY(-9px) rotate(-0.6deg); }
}
@media (max-width: 700px) {
  .certification-panel {
    padding-bottom: 6.5rem;
  }
  .certification-panel::before {
    height: 95px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .certification-panel.is-visible .certificate-paper {
    animation: none !important;
    transform: rotate(1deg);
    will-change: auto;
  }
}


/* CERTIFICACIÓN — refinamiento: menos componentes, más identidad de marca */
.certification {
  background: var(--cream, #fffdf5);
  overflow: hidden;
}
.certification-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, .65fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 6.2vw, 7rem) clamp(6rem, 9vw, 8rem);
  background: var(--cream, #fffdf5) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
  isolation: isolate;
}
.certification-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(55px, 8vw, 95px);
  background: var(--blue, #1144ed);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 48 C190 8 300 28 455 55 S720 85 870 48 S1110 12 1260 42 S1370 56 1440 34 L1440 100 L0 100 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 48 C190 8 300 28 455 55 S720 85 870 48 S1110 12 1260 42 S1370 56 1440 34 L1440 100 L0 100 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  pointer-events: none;
}
.certification-main h2 { max-width: 12.5em; }
.certification-main h2 span {
  display: inline;
  color: var(--red, #ff362f);
  font-family: var(--font-playful, cursive);
  font-weight: 700;
  letter-spacing: -.035em;
  text-decoration: underline;
  text-decoration-color: #ffe36f;
  text-decoration-thickness: .08em;
  text-underline-offset: .1em;
}
.certification-note {
  max-width: 360px;
  justify-self: center;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid rgba(17, 68, 237, .18);
}
.certification-note-label {
  margin: 0 0 .8rem;
  color: var(--blue, #1144ed);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.certification-note-title {
  margin: 0;
  color: var(--blue, #1144ed);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1.02;
}
.certification-note-copy {
  max-width: 28rem;
  margin: 1rem 0 0;
  color: var(--navy, #173777);
  font-size: .95rem;
  line-height: 1.55;
}
@media (max-width: 760px) {
  .certification-panel {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding: 2.6rem 1.25rem 6.5rem;
  }
  .certification-main h2 { max-width: none; }
  .certification-note { justify-self: stretch; margin-left: .1rem; }
  .certification-panel::before { height: 55px; }
}
@media (prefers-reduced-motion: reduce) {
  .certification-panel, .certification-note { animation: none !important; transition: none !important; }
}

/* CERTIFICACIÓN — birrete de fibra y ondas orgánicas */
.certification {
  position: relative;
  overflow: hidden;
  background: var(--cream, #fffdf5);
}
.certification-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  position: relative;
  isolation: isolate;
  padding: clamp(5.5rem, 8vw, 7rem) clamp(1.25rem, 6.2vw, 7rem) clamp(7rem, 10vw, 9rem);
  background: var(--cream, #fffdf5) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.certification-panel::before,
.certification-panel::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: -1;
  background: var(--blue, #1144ed);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
/* Onda superior: conecta con la sección azul anterior sin una línea recta */
.certification-panel::before {
  top: 0;
  height: clamp(28px, 4vw, 52px);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V12C1280 52 1190 24 1050 22S810 58 670 30 400 8 260 27 80 42 0 18Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V12C1280 52 1190 24 1050 22S810 58 670 30 400 8 260 27 80 42 0 18Z' fill='black'/%3E%3C/svg%3E");
}
/* Onda inferior: el azul termina con curvas, nunca en un corte recto */
.certification-panel::after {
  bottom: -1px;
  height: clamp(65px, 10vw, 120px);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 44C155 -8 280 18 430 54S690 105 850 58 1110 4 1260 36 1380 66 1440 32V120H0Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 44C155 -8 280 18 430 54S690 105 850 58 1110 4 1260 36 1380 66 1440 32V120H0Z' fill='black'/%3E%3C/svg%3E");
}
.certification-kicker {
  margin: 0 0 .9rem;
  color: var(--blue, #1144ed);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.certification-main h2 {
  max-width: 12em;
  margin: 0;
  color: var(--blue, #1144ed);
  font-size: clamp(2.3rem, 4.3vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .99;
}
.certification-period { color: var(--blue, #1144ed); text-decoration: none; }
.certification-handwritten {
  display: inline-block;
  margin: .45rem 0 1.25rem;
  color: var(--red, #ff493f);
  font-family: var(--font-playful, cursive);
  font-size: clamp(1.8rem, 3.3vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -.035em;
  text-decoration: none;
}
.certification-intro {
  max-width: 39rem;
  margin: .5rem 0 0;
  color: var(--navy, #173777);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.55;
}
.certification-art {
  display: grid;
  place-items: center;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.certification-cap {
  display: block;
  width: min(100%, 610px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 7px rgba(23, 55, 119, .04));
  transform-origin: 50% 55%;
  animation: celes-cap-float 5.8s ease-in-out infinite;
}
@keyframes celes-cap-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}
@media (max-width: 760px) {
  .certification-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: .8rem;
    padding: 4.5rem 1.25rem 7rem;
  }
  .certification-main h2 { max-width: 11em; font-size: clamp(2.35rem, 10vw, 3.5rem); }
  .certification-handwritten { margin-bottom: 1rem; }
  .certification-art { margin: -.15rem 0 .2rem; }
  .certification-cap { width: min(94%, 440px); }
  .certification-panel::before { height: 28px; }
  .certification-panel::after { height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .certification-cap { animation: none !important; }
}


/* Certificado ilustrativo: documento horizontal basado en la estructura del ejemplo, sin datos personales. */
.certification-art { position: relative; display: grid; place-items: center; min-width: 0; padding: .35rem .4rem .8rem; }
.certification-art .certificate-paper { display: block; width: min(100%, 560px); height: auto; padding: 0; border: 0; border-radius: 2px; background: transparent; box-shadow: 0 12px 25px rgba(23, 55, 119, .13); transform: rotate(1deg); }
.certification-panel.is-visible .certification-art .certificate-paper { animation: certificate-float 5.8s ease-in-out infinite; }
@media (max-width: 700px) { .certification-art .certificate-paper { width: min(100%, 520px); } }
@media (prefers-reduced-motion: reduce) { .certification-panel.is-visible .certification-art .certificate-paper { animation: none !important; transform: none; } }


/* Ajuste solicitado: la onda azul inferior también tiene borde orgánico. */
.certification-panel::after {
  z-index: 0;
  bottom: 0;
  height: clamp(72px, 10vw, 124px);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 24C150 -8 275 14 420 44S690 82 850 43 1100 8 1245 28 1380 52 1440 22V88C1320 120 1260 102 1130 91S900 112 760 105 510 79 370 101 120 122 0 92Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 24C150 -8 275 14 420 44S690 82 850 43 1100 8 1245 28 1380 52 1440 22V88C1320 120 1260 102 1130 91S900 112 760 105 510 79 370 101 120 122 0 92Z' fill='black'/%3E%3C/svg%3E");
}
.certification-main, .certification-art { position: relative; z-index: 1; }
@media (max-width: 760px) { .certification-panel::after { height: 74px; } }


/* FIX HOSTINGER 23-10: certificado horizontal, sin marco vertical heredado */
.certification {
  background: var(--cream, #fffdf5) !important;
  overflow: hidden;
}
.certification-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr) !important;
  align-items: center !important;
  gap: clamp(2rem, 5vw, 5rem) !important;
  min-height: 0 !important;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 6.2vw, 7rem) clamp(6rem, 9vw, 8rem) !important;
  background: var(--cream, #fffdf5) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.certification-art {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.certification-art::before,
.certification-art::after { content: none !important; display: none !important; }
.certification-art .certificate-paper {
  display: block !important;
  width: min(100%, 620px) !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 900 / 580 !important;
  object-fit: contain !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform-origin: center !important;
}
.certification-main h2 .certification-period {
  color: var(--blue, #1144ed) !important;
  text-decoration: none !important;
}
@media (max-width: 760px) {
  .certification-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.25rem !important;
    padding: 3rem 1.25rem 6.5rem !important;
  }
  .certification-art .certificate-paper { width: min(100%, 560px) !important; }
}

/* AJUSTE DE ESPACIO — certificación: separar el texto de la onda inferior */
.certification {
  padding-bottom: clamp(3.25rem, 6vw, 5.5rem) !important;
}
.certification-panel {
  padding-bottom: clamp(2rem, 3.5vw, 3rem) !important;
}
@media (max-width: 700px) {
  .certification {
    padding-bottom: 3.25rem !important;
  }
  .certification-panel {
    padding-bottom: 1.8rem !important;
  }
}

/* FIX DEFINITIVO: la onda inferior queda por debajo del contenido, nunca encima del texto. */
.certification-panel {
  /* La altura extra reserva una franja real para la onda azul inferior. */
  padding-bottom: clamp(10rem, 13vw, 12rem) !important;
}
.certification-panel::after {
  z-index: 0 !important;
  bottom: 0 !important;
  height: clamp(72px, 9vw, 112px) !important;
}
.certification-main,
.certification-art {
  position: relative !important;
  z-index: 2 !important;
}
.certification-intro {
  margin-bottom: 0 !important;
}
@media (max-width: 760px) {
  .certification-panel {
    padding-bottom: 8.5rem !important;
  }
  .certification-panel::after {
    height: 70px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .certification-panel.is-visible .certificate-paper {
    animation: none !important;
    transform: none !important;
  }
}