:root{
  --pizarra:#16281f;
  --pizarra-2:#1e3529;
  --tiza:#f6f2e7;
  --tiza-soft:#efe9d8;
  --ambar:#e3a72b;
  --celeste:#6db3d8;
  --tinta:#1b2b22;
  --wsp:#25d366;
  --wsp-dark:#1da851;
  --line:rgba(246,242,231,0.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  background:var(--tiza);
  color:var(--tinta);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.chalk{font-family:'Caveat',cursive}

/* ---------- HEADER ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(22,40,31,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.brand{
  font-family:'Caveat',cursive;
  font-weight:700;
  font-size:28px;
  color:var(--tiza);
  display:flex;align-items:center;gap:8px;
}
.brand .dot{color:var(--ambar)}
/* El menu tiene siete items y dos son de dos palabras. Con 32px de
   separacion la marca de la izquierda y el boton de la derecha le
   quedaban pegados. */
nav.mainnav{display:flex;gap:28px}
nav.mainnav a{
  color:var(--tiza-soft);
  font-size:14.5px;
  font-weight:500;
  opacity:0.85;
  transition:opacity .2s ease;
}
nav.mainnav a:hover{opacity:1}

/* Entre 861 y 1080 px el menu entra JUSTO: son siete palabras y una
   es larga. Se juntan un poco en vez de partirse en dos filas o de
   empujar el boton de reservar fuera de la pantalla, que es lo que
   venia pasando. Abajo de 861 el menu directamente no se muestra. */
/* El menu necesita unos 940 px para entrar sin pisarle la marca de la
   izquierda ni el boton de reservar de la derecha. Abajo de eso no se
   muestra, igual que ya pasaba abajo de 860: se navega desde los
   botones de la portada y desde el pie. Antes aparecia igual y se
   salia de la pantalla. */
@media (max-width:940px){
  nav.mainnav{ display:none }
}

@media (min-width:941px) and (max-width:1160px){
  nav.mainnav{ gap:15px }
  nav.mainnav a{ font-size:13px }
}

/* Entre 941 y 1000 px ni juntándolos entran: la marca de la izquierda
   le queda pegada al menú. Ahí sale "Dar clases", que es el único que
   está repetido en otro lado visible —el botón de la portada dice
   "¿Sos profesor? Dar clases" y se ve en esa misma pantalla—, así que
   nadie pierde el camino. */
@media (min-width:941px) and (max-width:1000px){
  nav.mainnav .nav-profes{ display:none }
}
.btn-wsp{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--wsp);
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:11px 20px;
  border-radius:999px;
  box-shadow:0 6px 16px rgba(37,211,102,0.28);
  transition:transform .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn-wsp:hover{transform:translateY(-2px);background:var(--wsp-dark)}
.btn-wsp svg{width:18px;height:18px;flex:0 0 auto}
.btn-mail{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;
  color:var(--tiza-soft);
  font-weight:600;
  font-size:14px;
  padding:11px 4px;
  border-bottom:1px solid rgba(246,242,231,0.3);
  white-space:nowrap;
}
.btn-mail svg{width:16px;height:16px;flex:0 0 auto}
.btn-mail.dark{color:#4b5750;border-bottom-color:#cfc6ab}
.btn-amber{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--pizarra);
  color:#fff;
  font-weight:800;
  font-size:15px;
  padding:14px 26px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
  font-family:'Inter',sans-serif;
}
.btn-amber:hover{transform:translateY(-2px);background:#0f1d15}
.btn-block{width:100%}

/* ---------- MODAL DE PAGO ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(15,29,21,0.72);
  display:none;
  align-items:center;justify-content:center;
  padding:20px;
}
.modal-overlay.open{display:flex}
.modal-box{
  background:#fff;
  border-radius:20px;
  max-width:440px;width:100%;
  padding:32px 28px;
  position:relative;
  box-shadow:0 30px 60px rgba(0,0,0,0.3);
  max-height:90vh;overflow-y:auto;
}
.modal-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;border-radius:50%;
  border:1px solid #e7e0cd;background:#fff;
  font-size:16px;color:#4b5750;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.modal-eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#8a6d24;margin-bottom:8px;
}
.modal-box h3{
  font-family:'Caveat',cursive;font-weight:700;font-size:30px;color:var(--pizarra);margin-bottom:18px;
}
.pay-details{
  background:var(--tiza);
  border:1px solid #e7e0cd;
  border-radius:14px;
  padding:16px 18px;
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:16px;
}
.pay-row{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.pay-row span{color:#6a5a1f;font-weight:600;flex:0 0 auto}
.pay-row strong{color:var(--pizarra);font-weight:700;text-align:right}
.pay-note{font-size:13.5px;color:#4b5750;line-height:1.55;margin-bottom:18px}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:radial-gradient(120% 140% at 15% 0%, var(--pizarra-2) 0%, var(--pizarra) 55%, #0f1d15 100%);
  color:var(--tiza);
  overflow:hidden;
  padding:88px 0 100px 0;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:0.5;
  z-index:0;
  mask-image:radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%);
}
/* ---------------------------------------------------------------------
   Los símbolos de fondo del hero
   ---------------------------------------------------------------------
   La inclinación va ACÁ, fija, y no dentro de los @keyframes.

   Antes la animación hacía "translateY(...) rotate(var(--r))". Como el
   rotate vivía adentro de la animación, mientras corría el
   animation-delay el símbolo no tenía NINGUNA inclinación, y al arrancar
   la animación se enderezaba de golpe: un salto de hasta 10 grados y
   10 píxeles en un solo fotograma.

   En la computadora eso pasaba una sola vez al cargar y casi no se veía.
   En el celular sí, porque los navegadores pausan y reinician las
   animaciones al hacer scroll, y cada reinicio repetía el salto.

   Al separarlos, la inclinación está siempre puesta y la animación sólo
   sube y baja: no hay nada que saltar.
   --------------------------------------------------------------------- */

.chalk-mark{
  position:absolute;
  font-family:'Caveat',cursive;
  color:var(--tiza);
  opacity:0.14;
  font-weight:600;
  user-select:none;
  z-index:0;
  rotate:var(--r,0deg);
}

/* Sólo el vaivén. La inclinación no se toca. */
@keyframes drift{
  0%,100%{translate:0 0}
  50%{translate:0 -10px}
}

/* ---------------------------------------------------------------------
   El movimiento es sólo para pantallas grandes.
   ---------------------------------------------------------------------
   En el celular quedan quietos: siguen decorando igual, sin distraer
   ni pelearse con el scroll.
   --------------------------------------------------------------------- */

@media (min-width:768px){
  .chalk-mark{
    animation:drift 9s ease-in-out infinite;
    will-change:translate;
  }
}

/* Quien pidió menos movimiento en su sistema, no ve ninguno */
@media (prefers-reduced-motion:reduce){
  .chalk-mark{
    animation:none;
    translate:none;
    will-change:auto;
  }
}
.m1{top:8%;left:6%;font-size:54px;--r:-8deg;animation-delay:.2s}
.m2{top:16%;right:8%;font-size:70px;--r:6deg;animation-delay:1.1s}
.m3{bottom:14%;left:10%;font-size:44px;--r:4deg;animation-delay:.6s}
.m4{bottom:8%;right:14%;font-size:60px;--r:-5deg;animation-delay:1.6s}
.m5{top:46%;left:2%;font-size:38px;--r:-10deg;animation-delay:2.1s}
.m6{top:56%;right:4%;font-size:46px;--r:8deg;animation-delay:.9s}

.hero-inner{
  position:relative;z-index:2;
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ambar);
  margin-bottom:22px;
}
.eyebrow::before,.eyebrow::after{content:"";width:26px;height:1px;background:var(--ambar);opacity:0.6}
h1{
  font-family:'Caveat',cursive;
  font-weight:700;
  font-size:clamp(40px,7vw,64px);
  line-height:1.08;
  color:var(--tiza);
  margin-bottom:22px;
}
h1 .hl{
  position:relative;
  color:var(--ambar);
  display:inline-block;
}
h1 .hl svg{
  position:absolute;left:-2%;bottom:-6px;width:104%;height:14px;
  overflow:visible;
}
h1 .hl path{
  fill:none;stroke:var(--ambar);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:340;stroke-dashoffset:340;
  animation:draw 1.1s 0.5s ease forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}

.hero p.sub{
  font-size:18px;
  color:var(--tiza-soft);
  opacity:0.88;
  max-width:540px;
  margin:0 auto 34px auto;
}
.hero .years{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-bottom:36px;
}
.year-chip{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;font-weight:600;
  color:var(--pizarra);
  background:var(--tiza);
  padding:7px 14px;
  border-radius:999px;
}
/* Los dos enlaces de abajo del hero.

   "align-items:center" no es un adorno: sin eso los hijos se estiran a
   la misma altura, y como uno es un enlace subrayado y el otro un
   botón con relleno, quedaban desalineados entre sí.

   Y el margen de arriba porque venían pegados a las tarjetas de
   precios, sin aire para separar una cosa de la otra. */
.hero-ctas{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:38px;
}
.btn-wsp.big{padding:16px 30px;font-size:16px}
.btn-ghost{
  display:inline-flex;align-items:center;
  color:var(--tiza-soft);
  font-size:14.5px;font-weight:600;
  padding:16px 8px;
  border-bottom:1px solid rgba(246,242,231,0.3);
}

/* ---------- SECTION SHARED ---------- */
section{padding:86px 0}
.section-head{max-width:640px;margin:0 auto 52px auto;text-align:center}
.section-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:#8a6d24;
  margin-bottom:12px;
}
.section-title{
  font-family:'Caveat',cursive;
  font-weight:700;
  font-size:clamp(32px,4.4vw,42px);
  color:var(--pizarra);
  line-height:1.15;
}
.section-desc{margin-top:14px;color:#4b5750;font-size:15.5px}

/* ---------- PRECIO ---------- */
/* La pastilla de la oferta sobresale 15 px por arriba de la tarjeta,
   así que con padding-top en cero quedaba metida dentro de la sección
   oscura de arriba. El aire va acá y no en la tarjeta, para que las
   tres queden a la misma altura. */
.pricing{background:var(--tiza);padding-top:56px;padding-bottom:64px}
.price-card{
  max-width:480px;margin:0 auto;
  background:#fff;
  border:1.5px solid #e7e0cd;
  border-radius:20px;
  padding:34px 32px;
  text-align:center;
  box-shadow:0 12px 30px rgba(22,40,31,0.07);
}
.price-card .price-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:#8a6d24;margin-bottom:10px;
}
.price-card .price-amount{
  font-family:'Caveat',cursive;font-weight:700;
  font-size:clamp(48px,8vw,64px);
  color:var(--pizarra);
  line-height:1;
}
.price-card .price-amount span{
  font-family:'IBM Plex Mono',monospace;
  font-size:15px;font-weight:600;color:#6a5a1f;
  vertical-align:middle;margin-left:6px;
}
.price-card .price-note{
  margin-top:10px;font-size:14.5px;color:#4b5750;
}
.price-card .price-tag{
  display:inline-block;margin-top:16px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;font-weight:700;color:#fff;
  background:var(--pizarra);
  padding:6px 14px;border-radius:999px;
  letter-spacing:.04em;text-transform:uppercase;
}

/* ---------- RESEÑAS ---------- */
.reviews{background:var(--pizarra);color:var(--tiza)}
.reviews .section-eyebrow{color:var(--ambar)}
.reviews .section-title{color:var(--tiza)}
.reviews .section-desc{color:var(--tiza-soft);opacity:0.85}
.review-form{
  max-width:560px;margin:0 auto;
  background:rgba(246,242,231,0.05);
  border:1px solid var(--line);
  border-radius:18px;
  padding:32px 28px;
  display:flex;flex-direction:column;gap:16px;
}
.review-form label{
  font-size:13px;font-weight:600;color:var(--tiza-soft);
  display:flex;flex-direction:column;gap:6px;
}
.review-form input,.review-form textarea{
  font-family:'Inter',sans-serif;
  font-size:14.5px;
  background:rgba(246,242,231,0.06);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  color:var(--tiza);
  resize:vertical;
}
.review-form input::placeholder,.review-form textarea::placeholder{color:rgba(246,242,231,0.4)}
.review-form input:focus,.review-form textarea:focus{
  outline:none;border-color:var(--ambar);
}
.star-rating{
  display:flex;gap:6px;flex-direction:row-reverse;justify-content:flex-end;
}
.star-rating input{position:absolute;opacity:0;pointer-events:none}
.star-rating label{
  font-size:26px;color:rgba(246,242,231,0.25);cursor:pointer;
  transition:color .15s ease;flex-direction:row;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label{color:var(--ambar)}
.review-form button{
  margin-top:6px;
  background:var(--ambar);
  color:var(--pizarra);
  border:none;
  font-weight:800;
  font-size:15px;
  padding:14px 20px;
  border-radius:999px;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.review-form button:hover{transform:translateY(-2px);background:#f0b642}
.review-form .form-note{
  font-size:12.5px;color:var(--tiza-soft);opacity:0.65;text-align:center;
}
.review-success{
  display:none;
  max-width:560px;margin:0 auto;
  background:rgba(227,167,43,0.1);
  border:1px solid var(--ambar);
  border-radius:18px;
  padding:32px 28px;
  text-align:center;
}
.review-success .rs-title{
  font-family:'Caveat',cursive;font-weight:700;font-size:28px;color:var(--ambar);margin-bottom:8px;
}
.review-success p{color:var(--tiza-soft);font-size:14.5px}

/* ---------- MATERIAS ---------- */
.subjects{background:var(--tiza)}
.subject-grid{display:flex;flex-direction:column;gap:38px}
.sg-tarjetas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.subject-card{
  background:#fff;
  border:1px solid #e7e0cd;
  border-radius:18px;
  padding:28px 26px 26px 26px;
  box-shadow:0 10px 28px rgba(22,40,31,0.06);
  display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.subject-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(22,40,31,0.12)}
.subject-icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  font-family:'Caveat',cursive;font-size:26px;font-weight:700;color:#fff;
}
.icon-mate{background:linear-gradient(135deg,#2f5c42,#1e3529)}
.icon-fisica{background:linear-gradient(135deg,#5a93b8,#2c5674)}
.icon-quimica{background:linear-gradient(135deg,#c98a2b,#8a6320)}
/* Contabilidad no tiene material, pero sí se reserva: sin su color, en
   el carrito quedaba el único punto sin pintar y se veía como si
   faltara cargar algo. */
.icon-contabilidad{background:linear-gradient(135deg,#3f7d8c,#22505b)}
.subject-card h3{
  font-size:19px;font-weight:800;color:var(--pizarra);margin-bottom:4px;
}
.subject-card .years-line{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;font-weight:600;color:#8a8676;
  text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:16px;
}
.topic-list{display:flex;flex-direction:column;gap:9px}
.topic-item{
  display:flex;gap:9px;align-items:flex-start;
  font-size:14px;color:#39443c;
}
.topic-item .yb{
  flex:0 0 auto;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:700;
  background:var(--tiza-soft);
  color:#6a5a1f;
  padding:2px 6px;border-radius:5px;
  margin-top:1px;
}

/* ---------- ELEGIR TEMAS ---------- */
.topic-picker{background:#fdfbf5}
.topic-form{
  max-width:900px;margin:0 auto;
  background:#fff;
  border:1px solid #e7e0cd;
  border-radius:20px;
  padding:32px 30px;
  box-shadow:0 10px 28px rgba(22,40,31,0.06);
}
.tf-name{
  display:flex;flex-direction:column;gap:6px;
  font-size:13px;font-weight:600;color:#39443c;
  max-width:340px;margin-bottom:24px;
}
.tf-name input{
  font-family:'Inter',sans-serif;font-size:14.5px;
  background:#fdfbf5;
  border:1px solid #e7e0cd;
  border-radius:10px;
  padding:11px 13px;
}
.tf-name input:focus{outline:none;border-color:var(--ambar)}
.topic-groups{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  margin-bottom:22px;
}
.topic-group h4{
  font-size:14.5px;font-weight:800;color:var(--pizarra);
  margin-bottom:12px;
  padding-bottom:8px;border-bottom:1px solid #eee6d2;
}
.chk{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13.5px;color:#39443c;
  margin-bottom:10px;cursor:pointer;
}
.chk input{margin-top:2px;flex:0 0 auto;accent-color:var(--pizarra);width:15px;height:15px}
.chk .yb{
  flex:0 0 auto;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;font-weight:700;
  background:var(--tiza-soft);color:#6a5a1f;
  padding:1px 5px;border-radius:5px;
}
.topic-other{
  width:100%;
  font-family:'Inter',sans-serif;font-size:14px;
  background:#fdfbf5;
  border:1px solid #e7e0cd;
  border-radius:12px;
  padding:12px 14px;
  resize:vertical;
  margin-bottom:22px;
}
.topic-other:focus{outline:none;border-color:var(--ambar)}
.topic-actions{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
}
.topic-actions button{
  flex:1 1 220px;
  justify-content:center;
}
.topic-form .form-note{
  margin-top:14px;font-size:12.5px;color:#8a8676;text-align:center;
}

/* ---------- TEORÍA (contenido con acceso pago) ---------- */
.teoria{background:var(--tiza)}
.teoria-price-tag{
  display:block;max-width:fit-content;margin:-30px auto 40px auto;text-align:center;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;
  color:#8a6d24;background:var(--tiza-soft);
  padding:9px 18px;border-radius:999px;
}
.teoria-tabs{
  display:flex;justify-content:center;gap:10px;margin-bottom:34px;flex-wrap:wrap;
}
.teoria-tab-btn{
  font-family:'Inter',sans-serif;font-weight:700;font-size:14px;
  padding:10px 22px;border-radius:999px;border:1.5px solid #e7e0cd;
  background:#fff;color:#39443c;cursor:pointer;transition:.2s ease;
}
.teoria-tab-btn.active{background:var(--pizarra);color:#fff;border-color:var(--pizarra)}
.teoria-pane{display:none;max-width:800px;margin:0 auto}
.teoria-pane.active{display:block}
.teoria-code-box{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;
  background:#fff;border:1px solid #e7e0cd;border-radius:14px;
  padding:16px 18px;margin-bottom:14px;
}
.teoria-code-box span.tc-label{font-size:13px;font-weight:600;color:#39443c}
.teoria-code-box input{
  font-family:'IBM Plex Mono',monospace;font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;text-align:center;
  border:1px solid #e7e0cd;border-radius:10px;padding:10px 14px;width:150px;
}
.teoria-code-box input:focus{outline:none;border-color:var(--ambar)}
.teoria-code-box button{
  background:var(--pizarra);color:#fff;border:none;font-weight:700;
  padding:10px 18px;border-radius:10px;cursor:pointer;font-size:13.5px;
  font-family:'Inter',sans-serif;
}
.btn-buy-materia{
  display:block;width:100%;max-width:400px;margin:0 auto 28px auto;
  text-align:center;font-size:14px;padding:13px 20px;
}
.code-status{font-size:12.5px;font-weight:700;width:100%;text-align:center;margin-top:2px}
.code-status.ok{color:#1a7a3e}
.code-status.error{color:#b23a3a}
.teoria-topic{
  background:#fff;border:1px solid #e7e0cd;border-radius:16px;
  padding:22px 24px;margin-bottom:16px;
}
.teoria-topic-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.teoria-topic-head h4{font-size:16.5px;font-weight:800;color:var(--pizarra)}
.teoria-body.locked .teoria-content{display:none}
.teoria-body .lock-teaser{display:none}
.teoria-body.locked .lock-teaser{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:22px;background:var(--tiza-soft);border-radius:12px;text-align:center;
}
.lock-teaser svg{width:24px;height:24px;color:#8a6d24}
.lock-teaser p{font-size:13.5px;color:#4b5750;font-weight:600;margin:0}
.lock-hint{font-size:12.5px;color:#8a8676;margin-top:2px}
.teoria-content{font-size:14.5px;color:#39443c;line-height:1.7}
.teoria-content p{margin-bottom:10px}
.teoria-content ul{margin:0 0 10px 18px;list-style:disc}
.teoria-content strong{color:var(--pizarra)}
/* ---------- EJERCICIOS ---------- */
.exercises-block{
  margin-top:18px;padding-top:16px;border-top:1px dashed #e7e0cd;
}
.exercises-block h5{
  font-size:14.5px;font-weight:800;color:var(--pizarra);margin-bottom:12px;
}
.exercise-q{margin-bottom:14px}
.exercise-q .eq-text{font-size:14px;font-weight:700;color:#39443c;margin-bottom:8px}
.eq-option{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;color:#4b5750;
  padding:7px 10px;border-radius:8px;margin-bottom:4px;
  cursor:pointer;transition:background .15s ease;
}
.eq-option:hover{background:var(--tiza)}
.eq-option input{flex:0 0 auto;accent-color:var(--pizarra)}
.eq-option.correct{background:rgba(26,122,62,.1);color:#1a7a3e;font-weight:700}
.eq-option.incorrect{background:rgba(178,58,58,.1);color:#b23a3a;font-weight:700}
.eq-check-btn{margin-top:6px;padding:10px 18px;font-size:13.5px}
.eq-result{
  margin-top:12px;font-size:14px;font-weight:800;color:var(--pizarra);
  display:none;
}
.eq-result.show{display:block}

/* ---------- Consulta con cuenta ---------- */

.cf-pedir-cuenta {
  max-width: 620px; margin: 0 auto; text-align: center;
  background: #fff; border: 1px dashed #d8cfb4;
  border-radius: 18px; padding: 30px 26px;
}
.cf-pedir-cuenta p {
  font-size: 14.5px; color: #5c6660; line-height: 1.65; margin-bottom: 18px;
}

.cf-quien {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  background: var(--tiza-soft, #f6f2e7);
  border-radius: 12px; padding: 11px 14px; margin-bottom: 16px;
}
.cf-quien .cfq-eti { font-size: 12px; color: #8a8676; }
.cf-quien strong    { font-size: 14px; color: #29352e; }
.cf-quien .cfq-mail { font-size: 12.5px; color: #6f7a72; }

/* ---------- MODAL REGISTRO ---------- */

/* Ocultar de verdad lo que lleva el atributo hidden.
   ---------------------------------------------------------------------
   Sin esto, .modal-box .reg-field{display:flex} le gana al display:none
   que el navegador aplica a [hidden], y el campo queda a la vista igual.
   Pasó con el campo de contraseña al pedir recuperarla. */
/* hidden quiere decir oculto, en toda la página.
   ---------------------------------------------------------------------
   Sin esto, una regla como .venc-abrir{display:flex} le gana al
   display:none que el navegador aplica a [hidden], y el elemento se ve
   igual aunque el código lo haya marcado como oculto. Ya pasó tres
   veces en este proyecto. */
[hidden] { display: none !important; }

.modal-box .reg-field{
  display:flex;flex-direction:column;gap:6px;
  font-size:13px;font-weight:600;color:#39443c;
  margin-bottom:14px;
}
.modal-box .reg-field input{
  font-family:'Inter',sans-serif;font-size:14.5px;
  background:var(--tiza);
  border:1px solid #e7e0cd;border-radius:10px;
  padding:11px 13px;
}
.modal-box .reg-field input:focus{outline:none;border-color:var(--ambar)}
.modal-box .reg-note{font-size:12.5px;color:#8a8676;margin-bottom:16px}

/* ---------- PANEL PRIVADO ---------- */
.panel-box{max-width:640px}
.panel-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.panel-tab-btn{
  font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:999px;
  border:1.5px solid #e7e0cd;background:#fff;color:#39443c;cursor:pointer;
}
.panel-tab-btn.active{background:var(--pizarra);color:#fff;border-color:var(--pizarra)}
.panel-pane{display:none;max-height:50vh;overflow-y:auto}
.panel-pane.active{display:block}
.panel-entry{
  border:1px solid #e7e0cd;border-radius:12px;padding:14px 16px;margin-bottom:10px;
  font-size:13.5px;color:#39443c;
}
.panel-entry .pe-head{display:flex;justify-content:space-between;gap:10px;font-weight:800;color:var(--pizarra);margin-bottom:4px}
.panel-entry .pe-date{font-size:11px;color:#8a8676;font-weight:600}
.panel-entry .pe-body{color:#4b5750;line-height:1.5}
.panel-empty{font-size:13.5px;color:#8a8676;text-align:center;padding:20px 0}
.panel-code-row{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:var(--tiza);border:1px solid #e7e0cd;border-radius:12px;
  padding:14px 16px;margin-bottom:16px;
}
.panel-code-row input{
  font-family:'IBM Plex Mono',monospace;font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;text-align:center;
  border:1px solid #e7e0cd;border-radius:10px;padding:9px 12px;width:140px;
}
.panel-code-current{font-family:'IBM Plex Mono',monospace;font-weight:800;font-size:16px;color:var(--pizarra)}

/* ---------- COMO FUNCIONA ---------- */
.how{background:var(--pizarra);color:var(--tiza)}
.how .section-eyebrow{color:var(--ambar)}
.how .section-title{color:var(--tiza)}
.how .section-desc{color:var(--tiza-soft);opacity:0.85}
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  counter-reset: step;
}
.step{
  background:rgba(246,242,231,0.05);
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px 22px;
  position:relative;
}
.step .num{
  font-family:'Caveat',cursive;font-weight:700;font-size:40px;
  color:var(--ambar);opacity:0.9;line-height:1;margin-bottom:10px;
}
.step h4{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--tiza)}
.step p{font-size:14px;color:var(--tiza-soft);opacity:0.82}

/* ---------- FAQ ---------- */
.faq{background:var(--tiza)}
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.faq-item{border-bottom:1px solid #e7e0cd}
.faq-item:first-child{border-top:1px solid #e7e0cd}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 4px;
  font-weight:700;font-size:15.5px;color:var(--pizarra);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .plus{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:1.5px solid #cfc6ab;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:#8a6d24;
  transition:transform .25s ease;
}
.faq-item[open] .plus{transform:rotate(45deg)}
.faq-item .a{
  padding:0 4px 20px 4px;
  color:#4b5750;font-size:14.5px;line-height:1.65;
}

/* ---------- CTA FINAL ---------- */
.cta-final{
  background:linear-gradient(135deg,var(--pizarra-2) 0%, var(--pizarra) 100%);
  color:var(--tiza);
  text-align:center;
}
.cta-final h2{
  font-family:'Caveat',cursive;font-weight:700;
  font-size:clamp(30px,5vw,44px);
  margin-bottom:14px;
}
.cta-final p{color:var(--tiza-soft);opacity:0.85;margin-bottom:28px;font-size:16px}

/* ---------- FOOTER ---------- */
footer{
  background:#0f1d15;color:var(--tiza-soft);
  padding:34px 0;
}
footer .wrap{
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
}
footer .brand{color:var(--tiza)}
footer .foot-note{font-size:12.5px;opacity:0.55}

/* ---------- STICKY WSP (mobile) ---------- */
.sticky-wsp{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;
  justify-content:center;
  padding:14px 16px;
  background:rgba(246,242,231,0.95);
  backdrop-filter:blur(8px);
  border-top:1px solid #e7e0cd;
}
.sticky-wsp .btn-wsp{width:100%;justify-content:center;padding:14px 20px}

/* ---------------------------------------------------------------------
   El encabezado en pantallas chicas
   ---------------------------------------------------------------------
   Sin el menú, quedan el nombre y los dos botones. En un celular de
   360px no entraban los tres y la página se corría de costado: se veía
   una franja vacía a la derecha al arrastrar.
   --------------------------------------------------------------------- */

@media (max-width:600px){
  .wrap{padding:0 16px}
  header .wrap{gap:12px;height:64px}
  .brand{font-size:24px;flex:0 1 auto;min-width:0;white-space:nowrap}
  .sesion{gap:8px;flex:0 0 auto}
  .btn-sesion,header .btn-chico{padding:9px 13px;font-size:12.5px}
}

@media (max-width:430px){
  /* Medido: el nombre necesita 128px y los dos botones 258px, así que
     los tres entran recién a partir de 430px. Abajo de eso queda el
     botón de la sesión —el que hace falta para desbloquear el
     material— y el de reservar sigue estando en la portada, que se ve
     apenas se entra, y en la sección Precio.

     Si se los deja a los tres, el nombre se achica y le pisa el botón:
     no se corre la página de costado, pero se lee mal. */
  header .btn-chico{display:none}
}

@media (max-width:860px){
  nav.mainnav{display:none}
  .sg-tarjetas{grid-template-columns:1fr}
  .topic-groups{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .sticky-wsp{display:flex}
  header .btn-wsp{display:none}
  section{padding:64px 0}
  .hero{padding:64px 0 76px 0}
}

/* =====================================================================
   OFERTA · CONTADOR REGRESIVO
   ===================================================================== */

/* ---------------------------------------------------------------------
   El marco es de la tarjeta, no de la oferta
   ---------------------------------------------------------------------
   El borde de color y la sombra estaban colgados de .en-oferta, así que
   al apagar la oferta las tres tarjetas perdían su marco y volvían al
   borde beige de base: quedaban planas y sin identidad de nivel.

   Ahora el marco lo tiene la tarjeta siempre. De la oferta queda sólo
   lo que de verdad es de la oferta: el lugar para la pastilla de arriba
   y un poco más de sombra.
   --------------------------------------------------------------------- */

/* Secundaria: es la que no lleva clase de color, el ámbar es su color */
.precio-grilla .price-card{
  position:relative;
  border:2px solid var(--ambar);
  box-shadow:0 18px 44px rgba(227,167,43,0.22);
}

.price-card.en-oferta{
  position:relative;
  /* El hueco para la pastilla de "oferta por tiempo limitado", que
     sobresale por arriba. Sin oferta no hay pastilla y no hace falta. */
  padding-top:44px;
}
.price-badge{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  white-space:nowrap;
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#3a2b06;
  background:linear-gradient(135deg,#f3c260,var(--ambar));
  padding:8px 18px;border-radius:999px;
  box-shadow:0 6px 18px rgba(227,167,43,0.4);
}
.price-antes{
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;font-weight:600;color:#9a9280;
  margin-bottom:2px;
}
.price-antes s{text-decoration-thickness:2px;text-decoration-color:#c0563f}
.price-ahorro{
  display:inline-block;margin-top:8px;
  font-size:13px;font-weight:700;color:#1a7a3e;
  background:rgba(26,122,62,.1);
  padding:5px 14px;border-radius:999px;
}

.countdown{
  margin-top:22px;
  background:var(--pizarra);
  border-radius:16px;
  padding:16px 14px 14px 14px;
  color:var(--tiza);
}
.countdown.compacto{
  margin:0 auto 26px auto;max-width:520px;
  padding:13px 14px 11px 14px;border-radius:14px;
}
.cd-titulo{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ambar);
  margin-bottom:12px;
}
.cd-punto{
  width:7px;height:7px;border-radius:50%;
  background:var(--ambar);
  animation:cdlatido 1.6s ease-in-out infinite;
}
@keyframes cdlatido{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(227,167,43,.6)}
  50%{opacity:.55;box-shadow:0 0 0 7px rgba(227,167,43,0)}
}
.cd-relojes{display:flex;align-items:flex-start;justify-content:center;gap:4px}
.cd-unidad{min-width:56px;text-align:center}
.countdown.compacto .cd-unidad{min-width:48px}
.cd-num{
  font-family:'IBM Plex Mono',monospace;
  font-size:30px;font-weight:600;line-height:1.05;
  color:#fff;
  background:rgba(246,242,231,0.08);
  border:1px solid rgba(246,242,231,0.14);
  border-radius:10px;
  padding:8px 4px;
  font-variant-numeric:tabular-nums;
}
.countdown.compacto .cd-num{font-size:24px;padding:6px 4px}
.cd-num.late{animation:cdflip .45s ease}
@keyframes cdflip{
  0%{transform:translateY(-22%);opacity:.25}
  100%{transform:translateY(0);opacity:1}
}
.cd-lbl{
  font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(246,242,231,.6);
  margin-top:6px;
}
.cd-sep{
  font-family:'IBM Plex Mono',monospace;
  font-size:24px;color:rgba(246,242,231,.3);
  padding-top:10px;
}
.countdown.compacto .cd-sep{font-size:19px;padding-top:8px}
.countdown.urgente .cd-num{
  background:rgba(200,70,60,.22);
  border-color:rgba(220,110,95,.45);
  color:#ffd9d2;
}
.countdown.urgente .cd-titulo,
.countdown.urgente .cd-punto{color:#ff9c8b;background-color:#ff9c8b}
.countdown.urgente .cd-titulo{background:none}
.countdown.terminado{background:#2c2c2c;padding:14px}
.cd-fin{margin:0;color:#c9c4b4;letter-spacing:.06em}

/* =====================================================================
   TEORÍA · BENEFICIOS Y CAJA DE COMPRA
   ===================================================================== */

.teoria-beneficios{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  max-width:900px;margin:-24px auto 38px auto;
}
.tb-item{
  display:flex;align-items:flex-start;gap:10px;
  background:#fff;border:1px solid #e7e0cd;border-radius:14px;
  padding:14px 14px;
}
.tb-ico{font-size:19px;line-height:1;flex:0 0 auto}
.tb-item strong{display:block;font-size:13px;color:var(--pizarra);margin-bottom:3px}
.tb-item span{display:block;font-size:11.5px;color:#6f7a72;line-height:1.4}

.materia-compra{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;gap:18px;
  background:#fff;border:1px solid #e7e0cd;border-radius:16px;
  padding:20px 22px;margin-bottom:14px;
}
.materia-compra.en-oferta{
  border:1.5px solid var(--ambar);
  background:linear-gradient(180deg,#fffdf6,#fff);
  box-shadow:0 10px 26px rgba(227,167,43,0.14);
}
.mc-nombre{font-size:15.5px;font-weight:800;color:var(--pizarra);margin-bottom:4px}
.mc-detalle{font-size:12.5px;color:#6f7a72;line-height:1.45}
.mc-precio{text-align:right;line-height:1.15}
.mc-antes{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#9a9280}
.mc-antes s{text-decoration-color:#c0563f;text-decoration-thickness:1.5px}
.mc-ahora{
  font-family:'Caveat',cursive;font-weight:700;
  font-size:34px;color:var(--pizarra);line-height:1;
}
.mc-off{
  display:inline-block;margin-top:4px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:700;color:#3a2b06;
  background:var(--ambar);padding:3px 9px;border-radius:999px;
}
.materia-compra .btn-buy-materia{
  margin:0;width:auto;max-width:none;
  padding:13px 22px;font-size:14px;white-space:nowrap;
}
/* Ya lo compró: la tarjeta pasa a segundo plano, pero el botón sigue
   sirviendo — ahora es el de extender el acceso. Antes estaba apagado
   y no se podía sumar días sin salir de la página. */
.materia-compra.ya-comprado{
  opacity:.75;
  border-color:rgba(26,122,62,.35);
}
.materia-compra.ya-comprado:hover{opacity:1}

.materia-compra.ya-comprado .btn-buy-materia{
  background:none;
  color:var(--pizarra);
  border:1.5px solid var(--pizarra);
}
.materia-compra.ya-comprado .btn-buy-materia:hover{
  background:var(--pizarra);
  color:var(--tiza);
}

/* =====================================================================
   TEORÍA · FÓRMULAS, GRÁFICOS, EJEMPLO Y ERRORES
   ===================================================================== */

.formula-box{
  background:var(--pizarra);
  border-radius:14px;
  padding:18px 20px;
  margin:18px 0;
}
.fb-titulo{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ambar);margin-bottom:14px;
}
.fb-fila{
  display:grid;grid-template-columns:150px 1fr;gap:6px 16px;
  padding:10px 0;
  border-top:1px solid rgba(246,242,231,0.12);
}
.fb-fila:first-of-type{border-top:none;padding-top:0}
.fb-nombre{font-size:12.5px;font-weight:700;color:rgba(246,242,231,.72);padding-top:2px}
.fb-formula{
  font-family:'IBM Plex Mono',monospace;
  font-size:14.5px;font-weight:600;color:#fff;
}
.fb-detalle{
  grid-column:2;
  font-size:12px;color:rgba(246,242,231,.5);font-style:italic;
}

.grafico{
  margin:20px 0;
  background:#fff;
  border:1px solid #e7e0cd;
  border-radius:14px;
  padding:18px 18px 14px 18px;
}
.grafico figcaption{
  margin-top:12px;padding-top:11px;
  border-top:1px dashed #e7e0cd;
  font-size:12.5px;color:#6f7a72;text-align:center;line-height:1.45;
}
.dg{width:100%;height:auto}
.dg text{
  font-family:'Inter',sans-serif;
  font-size:11px;fill:#4b5750;
}
.dg .lbl-b{font-weight:700;fill:#16281f}
.dg .ax{stroke:#9a9280;stroke-width:1.5;fill:none}
.dg .grid{stroke:#e0dac8;stroke-width:1;fill:none}
.dg .ln{stroke:#16281f;stroke-width:2.5;fill:none}
.dg .ln2{stroke:#5a9bbd;stroke-width:2.5;fill:none}
.dg .acc{stroke:#e3a72b;stroke-width:2.5;fill:none}
.dg .dot{fill:#e3a72b;stroke:#16281f;stroke-width:1.5}
.dg .box{fill:#fff;stroke:#d8d2c0;stroke-width:1.5}
.dg .fill-c{fill:#6db3d8;opacity:.22}
.dg .fill-a-solid{fill:#e3a72b;opacity:.55}

.ejemplo-box{
  background:var(--tiza-soft);
  border-left:4px solid var(--ambar);
  border-radius:0 14px 14px 0;
  padding:18px 20px;margin:18px 0;
}
.eb-titulo{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:#8a6d24;margin-bottom:10px;
}
.eb-enunciado{
  font-size:14.5px;font-weight:700;color:var(--pizarra);
  margin-bottom:12px !important;line-height:1.5;
}
.eb-pasos{
  margin:0 0 12px 0;padding-left:0;
  list-style:none;counter-reset:paso;
}
.eb-pasos li{
  position:relative;
  counter-increment:paso;
  padding-left:34px;margin-bottom:9px;
  font-size:14px;line-height:1.6;color:#39443c;
}
.eb-pasos li::before{
  content:counter(paso);
  position:absolute;left:0;top:1px;
  width:23px;height:23px;border-radius:50%;
  background:var(--pizarra);color:var(--tiza);
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.eb-resultado{
  background:#fff;border-radius:10px;
  padding:11px 14px;
  font-size:14px;color:#39443c;
}
.eb-resultado strong{color:var(--pizarra)}

.errores-box{
  background:rgba(178,58,58,.06);
  border:1px solid rgba(178,58,58,.18);
  border-radius:14px;
  padding:16px 20px;margin:18px 0;
}
.err-titulo{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:#a33f3f;margin-bottom:10px;
}
.errores-box ul{margin:0;padding:0;list-style:none}
.errores-box li{
  position:relative;padding-left:22px;margin-bottom:7px;
  font-size:13.5px;line-height:1.55;color:#4b5750;
}
.errores-box li:last-child{margin-bottom:0}
.errores-box li::before{
  content:'✕';
  position:absolute;left:0;top:0;
  color:#b23a3a;font-weight:700;font-size:12px;
}

/* =====================================================================
   EJERCICIOS
   ===================================================================== */

.ex-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:4px;
}
.exercises-block h5{margin-bottom:0}
.ex-tanda{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;font-weight:600;
  color:#8a6d24;background:var(--tiza-soft);
  padding:5px 12px;border-radius:999px;white-space:nowrap;
}
.ex-sub{font-size:12.5px;color:#8a8676;margin-bottom:16px;line-height:1.45}
.eq-option span{flex:1}
.eq-exp{
  display:none;
  margin:4px 0 0 10px;padding:9px 13px;
  background:var(--tiza-soft);border-radius:9px;
  font-size:12.5px;line-height:1.55;color:#4b5750;
}
.eq-exp.show{display:block}
.eq-exp strong{color:var(--pizarra)}
.ex-acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.btn-ghost-sm{
  font-family:'Inter',sans-serif;font-weight:600;font-size:13px;
  background:none;border:1.5px solid #e7e0cd;color:#6f7a72;
  padding:9px 16px;border-radius:999px;cursor:pointer;
  transition:.2s ease;
}
.btn-ghost-sm:hover{border-color:#c9c2ac;color:#39443c}
.eqr-nota{
  font-size:15px;font-weight:800;
  padding:11px 16px;border-radius:10px;
  display:inline-block;
}
.eqr-nota.nota-alta{background:rgba(26,122,62,.12);color:#166b36}
.eqr-nota.nota-media{background:rgba(227,167,43,.18);color:#8a6d24}
.eqr-nota.nota-baja{background:rgba(178,58,58,.1);color:#a33f3f}
.eqr-msg{margin-top:8px;font-size:13.5px;color:#4b5750;font-weight:500}

/* =====================================================================
   MODALES · PAGO Y REGISTRO
   ===================================================================== */

.pay-total{
  text-align:center;
  background:var(--pizarra);color:var(--tiza);
  border-radius:12px;padding:13px;margin-bottom:16px;
  font-size:13.5px;
}
.pay-total strong{
  font-family:'Caveat',cursive;font-size:29px;font-weight:700;
  color:#fff;margin-left:8px;vertical-align:-3px;
}
.pay-row{align-items:center;flex-wrap:wrap}
.pay-row strong{flex:1;min-width:0;word-break:break-all}
.pay-row strong.mono{font-family:'IBM Plex Mono',monospace;font-size:13px}
.pay-copy{
  flex:0 0 auto;
  font-family:'Inter',sans-serif;font-size:11px;font-weight:700;
  background:var(--tiza-soft);border:1px solid #e7e0cd;color:#6a5a1f;
  padding:5px 11px;border-radius:999px;cursor:pointer;
  transition:.15s ease;
}
.pay-copy:hover{background:var(--ambar);border-color:var(--ambar);color:#3a2b06}
.pay-copy.copiado{background:#1a7a3e;border-color:#1a7a3e;color:#fff}

.reg-precio{
  font-size:14px;color:#4b5750;
  background:var(--tiza-soft);
  border-radius:10px;padding:10px 14px;margin-bottom:12px;
}
.reg-precio:empty{display:none}
.reg-precio strong{font-size:17px;color:var(--pizarra)}
.rp-oferta{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:#3a2b06;background:var(--ambar);
  padding:3px 9px;border-radius:999px;margin-left:6px;vertical-align:1px;
}

/* Extensión: no es oferta, así que no lleva el ámbar de la promoción */
/* Aviso de que los datos vienen de la cuenta */
.reg-de-cuenta{
  font-size:12.5px;line-height:1.55;color:#1a7a3e;
  background:rgba(26,122,62,.09);
  border-radius:10px;padding:9px 12px;margin-bottom:12px;
}
.reg-de-cuenta strong{color:#14603d}

/* El correo no se puede cambiar: de él depende el acceso */
.reg-field input.bloqueado{
  background:var(--tiza-soft);
  color:#6f7a72;
  cursor:not-allowed;
}

.rp-extension{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:#1a7a3e;background:rgba(26,122,62,.14);
  padding:3px 9px;border-radius:999px;margin-left:6px;vertical-align:1px;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width:860px){
  .teoria-beneficios{grid-template-columns:1fr 1fr;margin-top:-10px}
  .materia-compra{grid-template-columns:1fr auto;gap:14px}
  .materia-compra .btn-buy-materia{grid-column:1 / -1;width:100%}
  .fb-fila{grid-template-columns:1fr}
  .fb-detalle{grid-column:1}
  .fb-nombre{padding-top:0}
}

@media (max-width:560px){
  .teoria-beneficios{grid-template-columns:1fr}
  .cd-unidad,.countdown.compacto .cd-unidad{min-width:0;flex:1}
  .cd-num{font-size:23px}
  .countdown.compacto .cd-num{font-size:20px}
  .cd-sep{font-size:18px;padding-top:8px}
  .price-badge{font-size:10px;padding:7px 12px}
  .ex-head{flex-direction:column;align-items:flex-start;gap:6px}
  .mc-precio{text-align:left}
  .materia-compra{grid-template-columns:1fr}
  .grafico{padding:12px 10px 10px 10px}
  .eb-pasos li{padding-left:30px}
}

/* =====================================================================
   PAGO CON MERCADO PAGO
   ===================================================================== */

.btn-mp{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:#00b1ea;
  color:#fff;
  border:none;
  font-family:'Inter',sans-serif;
  font-weight:800;font-size:15px;
  padding:15px 24px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,177,234,0.32);
  transition:transform .2s ease, background .2s ease;
}
.btn-mp:hover{transform:translateY(-2px);background:#009ed2}
.btn-mp:disabled{opacity:.65;cursor:default;transform:none}
.btn-mp svg{width:20px;height:20px;flex:0 0 auto}

.reg-error{
  display:none;
  font-size:13px;font-weight:700;color:#b23a3a;
  background:rgba(178,58,58,.08);
  border-radius:9px;padding:10px 13px;margin-bottom:12px;
  line-height:1.45;
}
.reg-error.visible{display:block}

/* Mensaje de que SALIÓ BIEN.
   ---------------------------------------------------------------------
   Comparte forma con .reg-error pero en el verde de la página. Antes el
   aviso de "te mandamos el correo" salía en rojo y parecía un error,
   cuando en realidad la cuenta se había creado bien. */
.reg-ok{
  display:none;
  font-size:13px;line-height:1.5;
  color:var(--pizarra);
  background:rgba(22,40,31,.06);
  border-left:3px solid var(--pizarra);
  border-radius:9px;padding:12px 14px;margin-bottom:12px;
}
.reg-ok.visible{display:block}
.reg-ok strong{display:flex;align-items:center;gap:7px;font-weight:800;margin-bottom:5px}
.reg-ok .ok-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;flex:0 0 auto;border-radius:50%;
  background:var(--pizarra);color:var(--tiza);font-size:10.5px;line-height:1;
}
.reg-ok em{display:block;margin-top:6px;font-style:normal;font-size:12.5px;color:#5c6660}

.reg-seguro{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:11.5px;color:#8a8676;line-height:1.4;
  margin-top:13px;text-align:center;
}
.reg-seguro svg{width:13px;height:13px;flex:0 0 auto}

.pay-aviso{
  display:none;
  font-size:13px;color:#8a6d24;line-height:1.5;
  background:rgba(227,167,43,.14);
  border:1px solid rgba(227,167,43,.4);
  border-radius:10px;padding:11px 14px;margin-bottom:14px;
}
.pay-aviso.visible{display:block}

.tc-perdido{
  width:100%;text-align:center;
  font-size:11.5px;color:#a89a70;text-decoration:underline;
  margin-top:2px;
}
.tc-perdido:hover{color:#8a6d24}

/* =====================================================================
   PÁGINA DE GRACIAS
   ===================================================================== */

.pagina-gracias header .wrap{justify-content:space-between}
.pagina-gracias .brand{color:var(--tiza)}

.gracias-main{
  min-height:calc(100vh - 72px - 200px);
  padding:60px 0 80px 0;
  background:var(--tiza);
}

.gr-card{
  max-width:520px;margin:0 auto;
  background:#fff;
  border:1.5px solid #e7e0cd;
  border-radius:22px;
  padding:44px 36px;
  text-align:center;
  box-shadow:0 18px 44px rgba(22,40,31,0.08);
}
.gr-card h1{
  font-family:'Caveat',cursive;font-weight:700;
  font-size:clamp(34px,6vw,44px);
  color:var(--pizarra);line-height:1.1;
  margin-bottom:10px;
}
.gr-sub{font-size:15.5px;color:#4b5750;line-height:1.6;margin-bottom:26px}

.gr-card.gr-exito{border-color:#1a7a3e;box-shadow:0 18px 44px rgba(26,122,62,0.14)}

/* Tilde animado */
.gr-tilde{width:76px;height:76px;margin:0 auto 18px auto}
.gr-tilde svg{width:100%;height:100%;overflow:visible}
.gr-tilde circle{
  fill:none;stroke:#1a7a3e;stroke-width:3;
  stroke-dasharray:151;stroke-dashoffset:151;
  animation:grcirculo .55s ease-out forwards;
}
.gr-tilde path{
  fill:none;stroke:#1a7a3e;stroke-width:4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:36;stroke-dashoffset:36;
  animation:grtilde .35s .5s ease-out forwards;
}
@keyframes grcirculo{to{stroke-dashoffset:0}}
@keyframes grtilde{to{stroke-dashoffset:0}}

.gr-spinner{
  width:44px;height:44px;margin:0 auto 20px auto;
  border:4px solid var(--tiza-soft);
  border-top-color:var(--ambar);
  border-radius:50%;
  animation:grgirar .8s linear infinite;
}
@keyframes grgirar{to{transform:rotate(360deg)}}

.gr-reloj{font-size:46px;line-height:1;margin-bottom:14px}

/* Código personal */
.gr-codigo-caja{
  background:var(--pizarra);
  border-radius:16px;
  padding:24px 20px;
  margin-bottom:18px;
}

/* Ya no hay código que copiar: el material queda abierto solo */
.gr-listo{ text-align:center }
.gr-listo-tilde{
  width:44px;height:44px;margin:0 auto 12px auto;border-radius:50%;
  background:#1a7a3e;color:#fff;font-size:22px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.gr-listo-nota{
  font-size:13.5px;line-height:1.6;color:rgba(246,242,231,.8);
  max-width:340px;margin:0 auto;
}
.gr-listo-nota strong{ color:var(--ambar) }
.gr-codigo-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ambar);margin-bottom:12px;
}
.gr-codigo{
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(26px,6vw,34px);font-weight:600;
  color:#fff;letter-spacing:.09em;
  word-break:break-all;
  margin-bottom:16px;
}
.gr-copiar{
  font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;
  background:rgba(246,242,231,0.12);
  border:1px solid rgba(246,242,231,0.28);
  color:var(--tiza);
  padding:9px 20px;border-radius:999px;cursor:pointer;
  transition:.18s ease;
}
.gr-copiar:hover{background:var(--ambar);border-color:var(--ambar);color:#3a2b06}
.gr-copiar.copiado{background:#1a7a3e;border-color:#1a7a3e;color:#fff}

.gr-aviso{
  font-size:13.5px;color:#4b5750;line-height:1.6;
  background:var(--tiza-soft);
  border-radius:12px;padding:14px 16px;margin-bottom:18px;
  text-align:left;
}
.gr-aviso strong{color:var(--pizarra)}

.gr-entrar{text-decoration:none}

#gr-espera-acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}
#gr-espera-acciones .btn-ghost-sm{text-decoration:none;display:inline-block}

/* Recuperar código */
.gr-recuperar{
  max-width:520px;margin:26px auto 0 auto;
  background:#fff;
  border:1px solid #e7e0cd;
  border-radius:18px;
  padding:26px 28px;
  text-align:center;
}
.gr-recuperar h2{
  font-family:'Caveat',cursive;font-weight:700;
  font-size:26px;color:var(--pizarra);margin-bottom:6px;
}
.gr-recuperar > p{font-size:13.5px;color:#6f7a72;margin-bottom:16px;line-height:1.5}
.gr-rec-form{display:flex;gap:9px;flex-wrap:wrap}
.gr-rec-form input{
  flex:1;min-width:190px;
  font-family:'Inter',sans-serif;font-size:14.5px;
  background:var(--tiza);
  border:1px solid #e7e0cd;border-radius:10px;
  padding:12px 14px;
}
.gr-rec-form input:focus{outline:none;border-color:var(--ambar)}
.gr-rec-form .btn-amber{white-space:nowrap;padding:12px 20px;font-size:14px}

.gr-rec-resultado{margin-top:14px;font-size:13.5px;line-height:1.5}
.gr-rec-resultado.error{color:#b23a3a;font-weight:600}
.gr-rec-resultado.ok{color:#39443c}
.gr-rec-titulo{font-weight:800;color:var(--pizarra);margin-bottom:10px}
.gr-rec-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--tiza-soft);
  border-radius:10px;padding:11px 14px;margin-bottom:7px;
}
.gr-rec-materia{font-size:13px;font-weight:700;color:#4b5750}
.gr-rec-codigo{
  font-family:'IBM Plex Mono',monospace;
  font-size:15px;font-weight:600;color:var(--pizarra);letter-spacing:.05em;
}

@media (max-width:560px){
  .gr-card{padding:34px 22px;border-radius:18px}
  .gr-recuperar{padding:22px 20px}
  .gr-rec-form{flex-direction:column}
  .gr-rec-form .btn-amber{width:100%}
  .gracias-main{padding:36px 0 50px 0}
}

/* =====================================================================
   ZONA DEL ALUMNO · sólo visible con el acceso confirmado
   ===================================================================== */

.zona-alumno { display: none; }

.zona-alumno.visible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #f0f7f2, #fff);
  border: 1.5px solid #1a7a3e;
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 16px;
}

.zona-alumno.por-vencer {
  background: linear-gradient(180deg, #fffaf0, #fff);
  border-color: var(--ambar);
}

.zona-alumno.vencido {
  background: rgba(178, 58, 58, 0.05);
  border-color: rgba(178, 58, 58, 0.4);
}

.za-cabecera {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 1;
  min-width: 220px;
}

.za-tilde {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1a7a3e;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.za-reloj { font-size: 26px; line-height: 1; flex: 0 0 auto; }

.za-cabecera strong {
  display: block;
  font-size: 15px;
  color: var(--pizarra);
  margin-bottom: 2px;
}

.za-cabecera span {
  display: block;
  font-size: 12.5px;
  color: #6f7a72;
}

.za-cabecera .za-poco { color: #8a6d24; font-weight: 700; }
.za-cabecera .za-vencido { color: #b23a3a; font-weight: 700; }

.za-wsp { white-space: nowrap; }
.za-renovar { white-space: nowrap; padding: 12px 22px; font-size: 14px; }

/* Para quien compró sólo el material: las dudas se ven en una clase */
.za-duda {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; justify-content: flex-end;
}

.za-duda-texto {
  flex: 1 1 200px; min-width: 0;
  font-size: 12.5px; line-height: 1.5; color: #6f7a72;
  text-align: right;
}

.za-clase {
  white-space: nowrap; padding: 12px 22px; font-size: 14px;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .za-duda { justify-content: flex-start; }
  .za-duda-texto { text-align: left; flex-basis: 100%; }
  .za-clase { width: 100%; }
}

.mc-duracion {
  font-size: 12px;
  color: #8a6d24;
  background: var(--tiza-soft);
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  margin-top: 7px;
}

.mc-duracion strong { color: var(--pizarra); }

/* =====================================================================
   FORMULARIO DE CONSULTAS
   ===================================================================== */

.consultas { background: var(--tiza-soft); }

.consulta-form {
  max-width: 620px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e7e0cd;
  border-radius: 18px;
  padding: 30px 32px;
}

.consulta-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #39443c;
  margin-bottom: 15px;
}

.consulta-form input,
.consulta-form textarea {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: var(--tinta);
  background: var(--tiza);
  border: 1px solid #e7e0cd;
  border-radius: 10px;
  padding: 11px 13px;
  margin-top: 6px;
}

.consulta-form input:focus,
.consulta-form textarea:focus { outline: none; border-color: var(--ambar); }

.consulta-form textarea { resize: vertical; }

.cf-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cf-opt { font-weight: 400; color: #a49c86; }

.cf-error {
  display: none;
  font-size: 13px;
  font-weight: 700;
  color: #b23a3a;
  background: rgba(178, 58, 58, 0.08);
  border-radius: 9px;
  padding: 10px 13px;
  margin-bottom: 12px;
}

.cf-error.visible { display: block; }

.consulta-form .btn-amber { width: 100%; }
.consulta-form .form-note { text-align: center; margin-top: 12px; }

/* =====================================================================
   VENCIMIENTO Y WHATSAPP EN LA PÁGINA DE GRACIAS
   ===================================================================== */

.gr-vence {
  background: rgba(227, 167, 43, 0.14);
  border: 1px solid rgba(227, 167, 43, 0.35);
}

.gr-whatsapp {
  border-top: 1px dashed #e7e0cd;
  margin-top: 22px;
  padding-top: 22px;
}

.gw-titulo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a7a3e;
  margin-bottom: 8px;
}

.gw-nota {
  font-size: 13.5px;
  color: #4b5750;
  margin-bottom: 14px;
  line-height: 1.55;
}

/* Compró el material: en vez del WhatsApp, la clase particular */
.gr-oferta-clase {
  border-top: 1px dashed #e7e0cd;
  margin-top: 22px;
  padding-top: 22px;
}

.goc-titulo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a6d24;
  margin-bottom: 8px;
}

.goc-nota {
  font-size: 13.5px;
  color: #4b5750;
  margin-bottom: 14px;
  line-height: 1.55;
}

/* ---------- Botón chico del encabezado ---------- */

.btn-chico {
  padding: 10px 18px;
  font-size: 13.5px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .cf-fila { grid-template-columns: 1fr; }
  .consulta-form { padding: 24px 20px; }
  .zona-alumno.visible { padding: 16px 18px; }
  .za-wsp, .za-renovar { width: 100%; justify-content: center; }
}

/* =====================================================================
   ELEGIR MATERIA Y HORAS AL RESERVAR CLASES
   ===================================================================== */

.reg-opciones {
  background: var(--tiza-soft);
  border-radius: 14px;
  padding: 16px 18px 6px 18px;
  margin-bottom: 16px;
}

.ro-materias { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 7px; }

.ro-chip {
  flex: 1;
  min-width: 90px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #4b5750;
  background: #fff;
  border: 1.5px solid #e7e0cd;
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  transition: 0.15s ease;
}

.ro-chip:hover { border-color: #c9c2ac; }

.ro-chip.elegida {
  background: var(--pizarra);
  border-color: var(--pizarra);
  color: #fff;
}

.ro-horas {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 7px;
}

.ro-menos, .ro-mas {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: var(--pizarra);
  background: #fff;
  border: 1.5px solid #e7e0cd;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.15s ease;
}

.ro-menos:hover, .ro-mas:hover { border-color: var(--ambar); background: #fffdf6; }
.ro-menos:disabled, .ro-mas:disabled { opacity: 0.35; cursor: default; }

.ro-cantidad {
  flex: 1;
  text-align: center;
  background: #fff;
  border: 1.5px solid #e7e0cd;
  border-radius: 12px;
  padding: 6px 10px;
}

.ro-cantidad span {
  display: block;
  font-family: 'Caveat', cursive;
  font-size: 30px;
  font-weight: 700;
  color: var(--pizarra);
  line-height: 1;
}

.ro-cantidad small {
  display: block;
  font-size: 11px;
  color: #8a8676;
  font-weight: 600;
  margin-top: 1px;
}

.ro-ayuda {
  font-size: 11.5px;
  color: #8a8676;
  margin-top: 8px;
  line-height: 1.45;
}

.rp-detalle {
  font-size: 12.5px;
  color: #6f7a72;
  margin-bottom: 3px;
}

.req { color: #b23a3a; }

/* =====================================================================
   ANIMACIONES
   ===================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1) var(--retraso,0ms),
              transform .6s cubic-bezier(.22,1,.36,1) var(--retraso,0ms);
  will-change: opacity, transform;
}

.reveal.visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.visto { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Un poco más de vida en lo que ya existía */
.subject-card, .tb-item, .step, .faq-item, .teoria-topic {
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .2s ease;
}

.tb-item:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(22,40,31,.09); }
.step:hover .num { transform: scale(1.08) rotate(-4deg); }
.step .num { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }

.btn-amber, .btn-mp, .btn-wsp, .btn-ghost {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s ease, box-shadow .2s ease;
}

.btn-amber:active, .btn-mp:active, .btn-wsp:active { transform: translateY(1px) scale(.98); }

.teoria-tab-btn { transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.teoria-tab-btn:hover:not(.active) { transform: translateY(-2px); }

.teoria-pane.active { animation: paneEntra .35s cubic-bezier(.22,1,.36,1); }
@keyframes paneEntra { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }

.modal-box { animation: modalEntra .3s cubic-bezier(.22,1,.36,1); }
@keyframes modalEntra {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.modal-overlay { animation: modalFondo .2s ease; }
@keyframes modalFondo { from { opacity: 0; } to { opacity: 1; } }

.zona-alumno.visible { animation: zonaEntra .45s cubic-bezier(.22,1,.36,1); }
@keyframes zonaEntra {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.eq-option.correct { animation: aciertoPulso .45s ease; }
@keyframes aciertoPulso { 0%{transform:scale(1)} 40%{transform:scale(1.02)} 100%{transform:scale(1)} }
.eq-option.incorrect { animation: errorTiembla .35s ease; }
@keyframes errorTiembla { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

.eq-result.show { animation: notaEntra .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes notaEntra { from { opacity:0; transform: scale(.94); } to { opacity:1; transform:none; } }

/* =====================================================================
   CARRITO DE CLASES
   ===================================================================== */

.ro-cabecera {
  font-size: 14.5px; font-weight: 800; color: var(--pizarra); margin-bottom: 4px;
}
.ro-intro { font-size: 12.5px; color: #6f7a72; line-height: 1.5; margin-bottom: 14px; }

.ro-lista { display: flex; flex-direction: column; gap: 8px; }

.ro-fila {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1.5px solid #e7e0cd; border-radius: 12px;
  padding: 10px 13px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.ro-fila.activa {
  border-color: var(--ambar);
  background: linear-gradient(180deg,#fffdf6,#fff);
}

.ro-punto { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.ro-nombre { flex: 1; font-size: 14px; font-weight: 700; color: var(--pizarra); }

.ro-contador { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.ro-btn {
  width: 32px; height: 32px; flex: 0 0 auto;
  font-size: 17px; font-weight: 700; line-height: 1;
  color: var(--pizarra); background: var(--tiza);
  border: 1.5px solid #e7e0cd; border-radius: 9px; cursor: pointer;
  transition: .16s cubic-bezier(.34,1.56,.64,1);
}
.ro-btn:hover:not(:disabled) { border-color: var(--ambar); background: #fffdf6; transform: scale(1.08); }
.ro-btn:active:not(:disabled) { transform: scale(.94); }
.ro-btn:disabled { opacity: .3; cursor: default; }

.ro-num {
  min-width: 30px; text-align: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 600;
  color: var(--pizarra);
}

.ro-vacio {
  font-size: 12px; color: #a49c86; text-align: center;
  margin-top: 11px; padding-top: 10px; border-top: 1px dashed #e7e0cd;
}

.rp-cuenta { font-size: 12.5px; color: #6f7a72; margin-bottom: 3px; }

/* =====================================================================
   RESEÑAS EN LA PÁGINA
   ===================================================================== */

.resenas-lista { margin-bottom: 44px; }

.rl-resumen {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 26px;
}
.rl-resumen strong {
  font-family: 'Caveat', cursive; font-size: 38px; font-weight: 700;
  color: var(--tiza); line-height: 1;
}
.rl-resumen span { font-size: 13px; color: rgba(246,242,231,.7); }

.rl-estrellas { color: var(--ambar); font-size: 17px; letter-spacing: 1px; white-space: nowrap; }
.rl-off { color: rgba(246,242,231,.25); }

.rl-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  gap: 16px;
}

.rl-tarjeta {
  background: rgba(246,242,231,.07);
  border: 1px solid rgba(246,242,231,.14);
  border-radius: 16px; padding: 20px 22px;
  transition: transform .28s cubic-bezier(.22,1,.36,1), background .25s ease, border-color .25s ease;
}
.rl-tarjeta:hover {
  transform: translateY(-4px);
  background: rgba(246,242,231,.11);
  border-color: rgba(227,167,43,.4);
}

.rl-cabeza { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }

.rl-avatar {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
  background: linear-gradient(135deg, var(--ambar), #c98a2b);
  color: #3a2b06; font-size: 13.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.rl-cabeza strong { display: block; font-size: 14px; color: var(--tiza); margin-bottom: 2px; }
.rl-cabeza .rl-estrellas { font-size: 13px; }

.rl-texto { font-size: 14px; line-height: 1.6; color: rgba(246,242,231,.82); margin-bottom: 10px; }
.rl-fecha { font-size: 11.5px; color: rgba(246,242,231,.45); text-transform: capitalize; }

@media (max-width: 560px) {
  .rl-grilla { grid-template-columns: 1fr; }
  .ro-fila { padding: 9px 11px; gap: 8px; }
  .ro-nombre { font-size: 13px; }
}

/* =====================================================================
   SESIÓN DEL ALUMNO
   ===================================================================== */

.sesion { display: flex; align-items: center; gap: 10px; }

.btn-sesion {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  color: var(--tiza-soft);
  background: rgba(246,242,231,.1);
  border: 1px solid rgba(246,242,231,.24);
  padding: 10px 16px; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
  transition: .2s cubic-bezier(.34,1.56,.64,1);
}
.btn-sesion:hover { background: rgba(246,242,231,.2); transform: translateY(-1px); }
.btn-sesion.con-sesion { border-color: var(--ambar); color: var(--ambar); }

.cuenta-tabs { display: flex; gap: 8px; margin-bottom: 16px; }

.ct-btn {
  flex: 1;
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 700;
  color: #6f7a72; background: var(--tiza);
  border: 1.5px solid #e7e0cd; border-radius: 999px;
  padding: 11px 14px; cursor: pointer; transition: .18s ease;
}
.ct-btn.active { background: var(--pizarra); border-color: var(--pizarra); color: #fff; }

.cuenta-intro { font-size: 13px; color: #6f7a72; line-height: 1.55; margin-bottom: 16px; padding-right: 34px; }

/* ---------- Recuperar la contraseña ---------- */

.cuenta-olvide {
  display: block; margin-top: 7px; margin-left: auto;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 12.5px; color: #6f7a72;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.cuenta-olvide:hover { color: var(--pizarra); }

.cuenta-volver-fila { margin-bottom: 16px; }

.cuenta-volver {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 13px; color: #6f7a72;
  cursor: pointer;
}
.cuenta-volver:hover { color: var(--pizarra); }


/* ---------- Reseña con cuenta ---------- */

.rv-pedir-login {
  max-width: 520px; margin: 0 auto 20px auto; text-align: center;
  background: rgba(246,242,231,.07);
  border: 1px dashed rgba(246,242,231,.28);
  border-radius: 16px; padding: 26px 24px;
}
.rv-pedir-login p { font-size: 14px; color: rgba(246,242,231,.8); margin-bottom: 16px; line-height: 1.6; }

.rv-quien {
  display: flex; align-items: center; gap: 12px;
  background: rgba(246,242,231,.07);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
}
.rv-avatar {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
  background: linear-gradient(135deg, var(--ambar), #c98a2b);
  color: #3a2b06; font-size: 13.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
/* ---------------------------------------------------------------------
   Ojo con estos dos: van apuntados al <div> del texto a propósito.
   ---------------------------------------------------------------------
   El avatar también es un <span> dentro de .rv-quien, así que un
   ".rv-quien span" suelto le ganaba a .rv-avatar por especificidad y le
   rompía el centrado: las iniciales quedaban chiquitas y descoloridas
   arriba a la izquierda, fuera del círculo.
   --------------------------------------------------------------------- */

.rv-quien > div { min-width: 0; }
.rv-quien > div strong { display: block; font-size: 14px; color: var(--tiza); }
.rv-quien > div span {
  display: block; font-size: 11.5px;
  color: rgba(246,242,231,.55); margin-top: 1px;
}

/* =====================================================================
   TEMAS DENTRO DEL PEDIDO
   ===================================================================== */

.reg-temas {
  background: var(--tiza-soft); border-radius: 14px;
  padding: 4px 16px; margin-bottom: 16px;
}
.reg-temas > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 0; cursor: pointer; list-style: none; user-select: none;
}
.reg-temas > summary::-webkit-details-marker { display: none; }
.rt-tit { font-size: 13.5px; font-weight: 700; color: var(--pizarra); }
.rt-tit::before {
  content: '▸'; display: inline-block; margin-right: 8px; color: #a49c86;
  transition: transform .2s ease;
}
.reg-temas[open] .rt-tit::before { transform: rotate(90deg); }
.rt-cuenta {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
  color: #8a6d24; background: #fff; padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.rt-cuerpo { padding-bottom: 14px; animation: desplegar .25s ease; }
@keyframes desplegar { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform:none; } }
.rt-ayuda { font-size: 12px; color: #8a8676; line-height: 1.5; margin-bottom: 12px; }
.rt-grupos { display: flex; flex-direction: column; gap: 14px; max-height: 260px; overflow-y: auto; }
.rt-grupo h5 {
  font-size: 11.5px; font-weight: 700; color: #8a6d24;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
.rt-chk {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: #4b5750; line-height: 1.4;
  padding: 5px 0; cursor: pointer;
}
.rt-chk input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--pizarra); width: 15px; height: 15px; }
.rt-otros {
  width: 100%; margin-top: 12px;
  font-family: 'Inter', sans-serif; font-size: 13.5px;
  background: #fff; border: 1px solid #e7e0cd; border-radius: 10px; padding: 10px 12px;
  resize: vertical;
}
.rt-otros:focus { outline: none; border-color: var(--ambar); }


/* =====================================================================
   CONTADOR DE PRÁCTICA · uno solo, chico, en píldora clara
   ---------------------------------------------------------------------
   A propósito NO se parece al de la oferta: ese es oscuro y grande
   porque vende; este sólo informa.
   ===================================================================== */

.practica-contador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: fit-content;
  margin: 0 auto 30px auto;
  background: #fff;
  border: 1.5px solid #e7e0cd;
  border-radius: 999px;
  padding: 9px 20px 9px 16px;
  box-shadow: 0 4px 14px rgba(22, 40, 31, .05);
}

.practica-contador:empty { display: none; }

.pc-ico { font-size: 14px; line-height: 1; animation: pcGira 6s linear infinite; }

@keyframes pcGira { to { transform: rotate(360deg); } }

.pc-texto { font-size: 12.5px; color: #6f7a72; font-weight: 500; }

.pc-reloj { display: inline-flex; align-items: baseline; gap: 7px; }

.pc-par {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: 'IBM Plex Mono', monospace;
}

.pc-par b {
  font-size: 15px;
  font-weight: 600;
  color: var(--pizarra);
  font-variant-numeric: tabular-nums;
  transition: color .2s ease;
}

.pc-par i { font-size: 10px; font-style: normal; color: #a49c86; }

.pc-par b.late { animation: pcLatido .4s ease; }

@keyframes pcLatido {
  0% { color: var(--ambar); transform: translateY(-1px); }
  100% { color: var(--pizarra); transform: none; }
}

/* =====================================================================
   VENTANA FLOTANTE DEL ACCESO
   ---------------------------------------------------------------------
   Aparece abajo a la derecha recién cuando el alumno desbloquea el
   material, es decir, después del pago.
   ===================================================================== */

.venc-flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 216px;
  /* En un celular angosto, 216 + los 20 de margen no entraban */
  max-width: calc(100vw - 40px);
  background: #fff;
  border: 1.5px solid #1a7a3e;
  border-radius: 16px;
  padding: 15px 16px 13px 16px;
  box-shadow: 0 16px 40px rgba(22, 40, 31, .22);

  opacity: 0;
  transform: translateY(20px) scale(.94);
  pointer-events: none;
  transition: opacity .35s cubic-bezier(.22,1,.36,1),
              transform .35s cubic-bezier(.34,1.56,.64,1);
}

.venc-flotante.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  animation: vfEntra .55s cubic-bezier(.34,1.56,.64,1);
}

@keyframes vfEntra {
  0%   { opacity: 0; transform: translateY(28px) scale(.9); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}

.venc-flotante.por-vencer { border-color: var(--ambar); }

/* La ✕ existe sólo en el celular: la dibuja el JavaScript nada más
   cuando no hay mouse. En la computadora la ventanita se cierra sola
   al salir el mouse, y ahí el botón sobra. */
.vf-cerrar {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  border: none; border-radius: 50%;
  background: var(--tiza);
  color: #a49c86;
  font-size: 11px; line-height: 1; cursor: pointer;
  transition: .18s ease;
}
.vf-cerrar:hover { background: var(--tiza-soft); color: var(--pizarra); transform: rotate(90deg); }

/* Donde está la ✕, la cabecera le deja el hueco. Va atado al mouse y no
   al ancho, igual que el botón. */
@media (hover: none) {
  .vf-cabeza { padding-right: 20px; }
}

.vf-cabeza { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }

.vf-tilde {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%;
  background: #1a7a3e; color: #fff;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  animation: vfPulso 2.6s ease-in-out infinite;
}

@keyframes vfPulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26,122,62,.45); }
  55%      { box-shadow: 0 0 0 6px rgba(26,122,62,0); }
}

.venc-flotante.por-vencer .vf-tilde { background: var(--ambar); color: #3a2b06; }

.vf-cabeza strong { display: block; font-size: 13px; color: var(--pizarra); line-height: 1.2; }
.vf-cabeza span {
  display: block; font-size: 11px; color: #8a8676; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.vf-reloj {
  display: flex; align-items: baseline; justify-content: space-between;
  background: var(--tiza); border-radius: 10px; padding: 9px 10px;
}

.vf-par { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1; }

.vf-par b {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px; font-weight: 600; color: var(--pizarra);
  font-variant-numeric: tabular-nums; line-height: 1;
}

.vf-par i { font-size: 8.5px; font-style: normal; color: #a49c86; text-transform: uppercase; letter-spacing: .04em; }

.vf-par b.late { animation: vfLatido .4s ease; }

@keyframes vfLatido {
  0% { color: #1a7a3e; transform: translateY(-2px); }
  100% { color: var(--pizarra); transform: none; }
}

.venc-flotante.por-vencer .vf-par b.late { animation: vfLatidoAmbar .4s ease; }

@keyframes vfLatidoAmbar {
  0% { color: var(--ambar); transform: translateY(-2px); }
  100% { color: var(--pizarra); transform: none; }
}

.vf-pie { font-size: 10.5px; color: #8a8676; text-align: center; margin-top: 9px; line-height: 1.4; }

@media (max-width: 560px) {
  /* Las ventanitas del acceso se acomodan todas juntas más abajo,
     en el bloque del celular. */
  .vf-par b { font-size: 15px; }
  .practica-contador { padding: 8px 14px; gap: 8px; }
  .pc-texto { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .venc-flotante.visible { animation: none; }
  .pc-ico, .vf-tilde { animation: none; }
}

/* ---------- Aviso al volver del correo de confirmación ---------- */

.aviso-cuenta {
  position: fixed;
  left: 50%;
  top: 18px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: min(440px, calc(100vw - 32px));
  background: #fff;
  border: 1.5px solid #1a7a3e;
  border-radius: 14px;
  padding: 13px 14px 13px 15px;
  box-shadow: 0 14px 36px rgba(22,40,31,.2);
  font-size: 13.5px;
  color: var(--pizarra);
  line-height: 1.45;

  opacity: 0;
  transform: translate(-50%, -18px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}

.aviso-cuenta.visible { opacity: 1; transform: translate(-50%, 0); }

.aviso-cuenta.error { border-color: #b23a3a; }

.ac-ico {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%;
  background: #1a7a3e; color: #fff;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.aviso-cuenta.error .ac-ico { background: #b23a3a; }

.ac-cerrar {
  flex: 0 0 auto; margin-left: auto;
  width: 22px; height: 22px;
  border: none; border-radius: 50%;
  background: var(--tiza); color: #a49c86;
  font-size: 11px; cursor: pointer; transition: .18s ease;
}
.ac-cerrar:hover { background: var(--tiza-soft); color: var(--pizarra); }

/* ---------- Aviso: el material se abre al iniciar sesión ---------- */

.tc-aviso {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #8a6d24;
  line-height: 1.5;
  background: rgba(227, 167, 43, .12);
  border: 1px solid rgba(227, 167, 43, .3);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.tc-aviso.visible { display: flex; }

.tc-aviso span { flex: 1 1 220px; min-width: 0; }

.tc-entrar {
  flex: 0 0 auto;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--tiza);
  background: var(--pizarra);
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
}

.tc-entrar:hover { background: #0f1d15; }

@media (max-width: 560px) {
  .tc-aviso { justify-content: stretch; }
  .tc-entrar { width: 100%; }
}

.tc-entrar:hover { color: #8a6d24; }

/* ---------- Respuesta de Leslie a una reseña ---------- */

.rl-respuesta {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--ambar);
  border-radius: 0 12px 12px 0;
  background: rgba(227, 167, 43, .1);
}

.rl-resp-quien {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}

.rl-resp-avatar {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  background: linear-gradient(135deg, var(--ambar), #c98a2b);
  color: #3a2b06; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.rl-resp-quien strong {
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--ambar);
}

.rl-respuesta p {
  font-size: 13.5px; line-height: 1.6; color: rgba(246, 242, 231, .8);
}

/* ---------- Cuando no sabemos el nombre de quien deja la reseña ---------- */

.rv-quien.rv-pedir-nombre {
  display: block;
  border: 1px dashed rgba(246,242,231,.28);
}

.rvn-texto {
  font-size: 13px; line-height: 1.6;
  color: rgba(246,242,231,.8); margin-bottom: 11px;
}

/* En grilla y no en flex: así los dos campos quedan siempre del mismo
   ancho en vez de escalonarse cuando la pantalla es angosta. */
.rvn-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rvn-campos input {
  min-width: 0;                 /* sin esto la grilla se desborda */
  font-family: inherit; font-size: 14px; color: var(--tiza);
  background: rgba(246,242,231,.08);
  border: 1px solid rgba(246,242,231,.2);
  border-radius: 10px; padding: 10px 12px;
}

.rvn-campos input::placeholder { color: rgba(246,242,231,.45); }

.rvn-campos input:focus {
  outline: none;
  border-color: var(--ambar);
  background: rgba(246,242,231,.12);
}

/* En pantalla angosta el botón va abajo, ocupando el ancho completo:
   queda parejo con los campos y es más fácil de tocar con el dedo.

   Va con doble clase a propósito: este botón está dentro del
   .review-form, y ".review-form button" (el de Enviar reseña) le ganaba
   por especificidad. Le imponía un margen de arriba y forma de píldora,
   y por eso no llegaba a la altura de los campos. */
.rvn-campos .rvn-guardar {
  grid-column: 1 / -1;
  margin: 0;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: #3a2b06; background: var(--ambar);
  border: none; border-radius: 10px; padding: 10px 20px; cursor: pointer;
  min-height: 44px;
}

.rvn-campos .rvn-guardar:hover { background: #f0b53c; transform: none; }
.rvn-campos .rvn-guardar:disabled { opacity: .6; cursor: default; }

/* Con lugar de sobra, los tres entran en una sola línea. El botón se
   estira solo hasta la altura de los campos, que es lo que faltaba. */
@media (min-width: 560px) {
  .rvn-campos { grid-template-columns: 1fr 1fr auto; }
  .rvn-campos .rvn-guardar { grid-column: auto; }
}

.rvn-error { display: none; font-size: 12.5px; color: #ff9d9d; margin-top: 9px; }
.rvn-error.visible { display: block; }

/* Cuando no se pudo averiguar el acceso: el aviso va en rojo */
.tc-aviso.tc-problema {
  color: #b23a3a;
  background: rgba(178, 58, 58, .08);
  border-color: rgba(178, 58, 58, .3);
}

/* ---------- Primaria: selector de horas ---------- */

.reg-horas{
  background:var(--tiza-soft);border-radius:14px;
  padding:18px 16px;margin-bottom:16px;text-align:center;
}
.rh-titulo{font-size:14px;font-weight:700;color:#29352e;margin-bottom:12px}
.rh-contador{display:flex;align-items:center;justify-content:center;gap:18px}
.rh-btn{
  width:38px;height:38px;border-radius:50%;
  border:1.5px solid #d8cfb4;background:#fff;
  font-size:20px;font-weight:700;color:#29352e;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.rh-btn:hover:not(:disabled){border-color:var(--celeste);color:var(--celeste)}
.rh-btn:disabled{opacity:.4;cursor:default}
.rh-num{font-family:'Caveat',cursive;font-size:38px;font-weight:700;color:#29352e;min-width:46px}
.rh-nota{font-size:12.5px;color:#6f7a72;margin-top:12px;line-height:1.5}

/* =====================================================================
   PRIMARIA Y SECUNDARIA
   ---------------------------------------------------------------------
   Dos niveles con el mismo diseño: primaria en azul, secundaria en el
   verde de siempre. El azul sale del --celeste que ya usaba la página,
   oscurecido para que aguante texto blanco encima.
   ===================================================================== */

:root{
  --azul:#2d6d92;
  --azul-2:#1d4d69;
  --azul-claro:#6db3d8;
}

/* ---------- Portada: los dos niveles ---------- */

.hero-niveles{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  max-width:880px;margin:30px auto 0 auto;
  border-radius:20px;overflow:hidden;
  border:1px solid var(--line);
}

.nivel{
  padding:26px 24px 28px 24px;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}

.nivel-primaria{
  background:linear-gradient(160deg,rgba(45,109,146,.42),rgba(45,109,146,.18));
}
.nivel-secundaria{
  background:linear-gradient(160deg,rgba(30,53,41,.55),rgba(30,53,41,.25));
}

.nivel-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:8px;
}
.nivel-primaria   .nivel-eyebrow{color:var(--azul-claro)}
.nivel-secundaria .nivel-eyebrow{color:var(--ambar)}

.nivel-titulo{
  font-family:'Caveat',cursive;font-weight:700;
  font-size:clamp(24px,3.4vw,30px);line-height:1.15;
  color:var(--tiza);margin-bottom:8px;
}
.nivel-sub{
  font-size:13.5px;line-height:1.55;
  color:var(--tiza-soft);opacity:.85;
  margin-bottom:14px;max-width:34ch;
}

.nivel .years{margin-bottom:18px}

.btn-nivel{
  display:inline-block;margin-top:auto;
  font-size:14px;font-weight:700;
  padding:11px 26px;border-radius:999px;
  text-decoration:none;transition:transform .15s ease,background .15s ease;
}
.btn-nivel:hover{transform:translateY(-2px)}
.nivel-primaria .btn-nivel{
  background:var(--azul-claro);color:#0d2c3d;
}
.nivel-primaria .btn-nivel:hover{background:#8ac6e4}
.nivel-secundaria .btn-nivel{
  background:var(--ambar);color:#3a2b06;
}
.nivel-secundaria .btn-nivel:hover{background:#f3c260}

/* En el celular se apilan, primaria arriba */
@media (max-width:760px){
  .hero-niveles{grid-template-columns:1fr}
  .nivel{padding:24px 20px}
  .nivel-primaria{border-bottom:1px solid var(--line)}
}

/* ---------- Precios: las dos tarjetas ---------- */

.precio-grilla{
  display:grid;
  /* El min() es lo que evita que desborde en un teléfono angosto:
     minmax(320px,...) a secas nunca baja de 320, así que en una pantalla
     de 320 la tarjeta se salía 32 px por el costado. */
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:26px;align-items:start;
  max-width:920px;margin:0 auto;
}
.precio-grilla .price-card{max-width:none;margin:0}

.price-nivel{
  display:inline-block;margin-bottom:12px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 14px;border-radius:999px;
  color:#2c3b33;background:rgba(22,40,31,.09);
}

/* La tarjeta azul: mismo diseño, otro color */
.price-card.azul .price-nivel{color:#1d4d69;background:rgba(45,109,146,.14)}
.price-card.azul .price-eyebrow{color:#2d6d92}
.price-card.azul .price-amount span{color:#2d6d92}
.price-card.azul .price-tag{background:var(--azul)}
.price-card.azul .btn-amber{
  background:linear-gradient(135deg,#6db3d8,#2d6d92);color:#fff;
}
.price-card.azul .btn-amber:hover{
  background:linear-gradient(135deg,#8ac6e4,#3a7ea6);
}
.precio-grilla .price-card.azul{
  border-color:var(--azul-claro);
  box-shadow:0 18px 44px rgba(45,109,146,.22);
}
.price-card.azul .price-badge{
  background:linear-gradient(135deg,#8ac6e4,#2d6d92);color:#fff;
  /* la sombra base es ámbar y dejaba un resplandor amarillo detrás */
  box-shadow:0 6px 18px rgba(45,109,146,.4);
}

/* El detalle de horas en el total del modal */
.rp-detalle{
  display:block;margin-top:3px;
  font-size:12px;font-weight:500;color:#6f7a72;
}

/* En la tarjeta azul el ahorro va en azul, no en verde */
.price-card.azul .price-ahorro{color:#1d4d69;background:rgba(45,109,146,.12)}

/* El campo de temas dentro del selector de horas de primaria */
.rh-temas{display:block;margin-top:16px;text-align:left}
.rh-temas-eti{
  display:block;font-size:13px;font-weight:700;color:#29352e;margin-bottom:6px;
}
.rh-temas textarea{
  width:100%;border:1px solid #d8cfb4;border-radius:10px;
  padding:10px 12px;font:inherit;font-size:14px;color:#29352e;
  background:#fff;resize:vertical;
}
.rh-temas textarea:focus{outline:none;border-color:var(--azul-claro)}
.rh-temas-nota{display:block;font-size:12px;color:#6f7a72;margin-top:6px;line-height:1.45}

/* =====================================================================
   VENTANITA DE ACCESO: UNA FILA POR MATERIA
   ---------------------------------------------------------------------
   Cada materia vence en su propia fecha, porque cuenta desde su compra.
   Los colores son los mismos de los iconos de cada materia, así se
   reconocen sin leer.
   ===================================================================== */

.vf-materia {
  border-top: 1px solid #eee7d6;
  padding-top: 10px;
  margin-top: 10px;
}
.vf-materia:first-of-type { border-top: 0; padding-top: 4px; margin-top: 6px; }

.vf-mat-cab {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}

.vf-mat-punto {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
}
.mat-mate    .vf-mat-punto { background: #2f5c42; }
.mat-fisica  .vf-mat-punto { background: #2c5674; }
.mat-quimica .vf-mat-punto { background: #8a6320; }

.vf-mat-nombre {
  font-size: 12.5px; font-weight: 800; color: #29352e;
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.vf-mat-dias {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  white-space: nowrap;
}
.mat-mate    .vf-mat-dias { color: #1c3a29; background: rgba(47,92,66,.13); }
.mat-fisica  .vf-mat-dias { color: #1d3c53; background: rgba(44,86,116,.13); }
.mat-quimica .vf-mat-dias { color: #5c4314; background: rgba(138,99,32,.15); }

/* A menos de 5 días, la fila avisa */
.vf-materia.urgente .vf-mat-dias {
  color: #8a2626; background: rgba(178,58,58,.13);
}
.vf-materia.urgente .vf-mat-punto { background: #b23a3a; }

/* El reloj de cada fila, más compacto que el de una sola materia */
.vf-materia .vf-reloj { margin: 0; }
.vf-materia .vf-par b { font-size: 15px; }

/* Con varias materias la ventanita necesita un poco más de aire */
.venc-flotante { width: 232px; }

/* =====================================================================
   DETALLES DE TERMINACIÓN
   ---------------------------------------------------------------------
   Cinco toques, elegidos para que se note el cuidado sin ensuciar. La
   página ya tenía bastante movimiento propio, así que acá va poco y
   discreto: nada gira, nada rebota, nada distrae de leer.

   Todo se apaga solo para quien pidió menos movimiento en su sistema.
   ===================================================================== */

/* ---------- 1 · La marca, ahora que se puede tocar ----------
   Tiene que dar la pista de que es un enlace sin gritarlo. */

a.brand {
  text-decoration: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.4,.64,1);
  transform-origin: left center;
}
a.brand:hover { opacity: .82; transform: scale(1.03); }
a.brand:active { transform: scale(.99); }

footer a.brand { transform-origin: center; }

/* El borde de foco, para quien navega con el teclado */
a.brand:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 6px;
  border-radius: 6px;
}


/* ---------- 2 · Un reflejo cruza los botones principales ----------
   Sólo al pasar el mouse, una vez, y de lado a lado. Es el detalle que
   hace que un botón se sienta "de verdad" sin agregarle ruido. */

.btn-amber,
.btn-mp,
.btn-nivel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-amber::after,
.btn-mp::after,
.btn-nivel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg,
    transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.btn-amber:hover::after,
.btn-mp:hover::after,
.btn-nivel:hover::after {
  animation: reflejo .75s ease-out;
}

@keyframes reflejo {
  from { left: -60%; opacity: 1; }
  to   { left: 115%; opacity: 0; }
}

/* El texto del botón queda por encima del reflejo */
.btn-amber > *, .btn-mp > *, .btn-nivel > * { position: relative; z-index: 2; }


/* ---------- 3 · Los enlaces del menú se subrayan solos ----------
   La línea crece desde el centro. Marca cuál está activo sin mover
   nada de lugar, que es lo que arruina un menú. */

nav.mainnav a {
  position: relative;
  padding-bottom: 3px;
}

nav.mainnav a::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%; bottom: 0;
  height: 1.5px;
  background: var(--ambar);
  border-radius: 2px;
  transition: left .28s cubic-bezier(.22,1,.36,1),
              right .28s cubic-bezier(.22,1,.36,1);
}

nav.mainnav a:hover::after,
nav.mainnav a:focus-visible::after { left: 0; right: 0; }


/* ---------- 4 · Las reseñas responden al pasar por encima ----------
   Era lo único de la página que no reaccionaba a nada. */

.review-card {
  transition: transform .25s cubic-bezier(.22,1,.36,1),
              border-color .25s ease;
}
.review-card:hover {
  transform: translateY(-3px);
  border-color: rgba(227,167,43,.4);
}


/* ---------- Todo esto se apaga si pediste menos movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  a.brand,
  .review-card,
  nav.mainnav a::after { transition: none; }

  a.brand:hover,
  a.brand:active,
  .review-card:hover { transform: none; }

  .btn-amber:hover::after,
  .btn-mp:hover::after,
  .btn-nivel:hover::after { animation: none; }
}

/* =====================================================================
   LA PASTILLA PARA VOLVER A ABRIR LOS ACCESOS
   ---------------------------------------------------------------------
   Antes, cerrar la ventanita era definitivo hasta recargar la página.
   Ahora queda esto en el mismo rincón, chiquito, y muestra de un
   vistazo cuánto le queda del acceso que vence primero.
   ===================================================================== */

.venc-abrir {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;

  display: flex;
  align-items: center;
  gap: 9px;

  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--tiza);

  background: linear-gradient(140deg, var(--pizarra-2), var(--pizarra));
  border: 1.5px solid rgba(26, 122, 62, .55);
  border-radius: 999px;
  padding: 10px 18px 10px 12px;
  cursor: pointer;

  box-shadow: 0 10px 26px rgba(22, 40, 31, .28);

  /* El reflejo se recorta contra el borde redondeado */
  overflow: hidden;
  isolation: isolate;

  animation: vaEntra .45s cubic-bezier(.34,1.4,.64,1);
  transition: transform .25s cubic-bezier(.22,1,.36,1),
              box-shadow .25s ease,
              border-color .25s ease;
}

.venc-abrir:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(22, 40, 31, .34);
  border-color: rgba(26, 122, 62, .9);
}
.venc-abrir:active { transform: translateY(-1px); }

.venc-abrir:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
}

/* Aparece creciendo desde el rincón, sin sobresaltar */
@keyframes vaEntra {
  from { opacity: 0; transform: translateY(14px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* ---------- El reloj, con su latido ---------- */

.va-reloj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(26, 122, 62, .22);
  color: #7fd8a2;
  z-index: 2;
}
.va-reloj svg { width: 15px; height: 15px; }

/* Late despacio, para que se note que hay algo andando ahí */
.venc-abrir .va-reloj { animation: vaLatido 2.8s ease-in-out infinite; }

@keyframes vaLatido {
  0%, 82%, 100% { transform: scale(1); }
  88%           { transform: scale(1.14); }
  94%           { transform: scale(.98); }
}

.va-texto { z-index: 2; white-space: nowrap; }

/* Si le quedan pocos días, la pastilla avisa en ámbar */
.venc-abrir.por-vencer {
  border-color: rgba(227, 167, 43, .75);
}
.venc-abrir.por-vencer .va-reloj {
  background: rgba(227, 167, 43, .22);
  color: #f3c260;
}

/* ---------- El reflejo, igual que en los botones principales ---------- */

.venc-abrir::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg,
    transparent, rgba(255,255,255,.30), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.venc-abrir:hover::after { animation: reflejo .75s ease-out; }

/* Y uno solo al aparecer, para que se note que llegó */
.venc-abrir::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg,
    transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 1;
  animation: reflejo 1s ease-out .35s;
  opacity: 0;
}

/* Lo de las pastillas en el celular va todo junto más abajo. */

@media (prefers-reduced-motion: reduce) {
  .venc-abrir,
  .venc-abrir .va-reloj { animation: none; }
  .venc-abrir::before,
  .venc-abrir:hover::after { animation: none; opacity: 0; }
  .venc-abrir:hover,
  .venc-abrir:active { transform: none; }
}


/* =====================================================================
   LOS DOS NIVELES: PRIMARIA EN AZUL, SECUNDARIA EN VERDE
   ---------------------------------------------------------------------
   Mismo diseño para los dos y siempre separados: hay dos materias que
   se llaman "Matemática", así que lo único que las distingue es el
   nivel. Por eso el nivel se nombra en todos lados donde una aparece
   sola, y cada uno lleva su color.

   Primaria va siempre a la izquierda o arriba, igual que en la portada
   y en las tarjetas de precio. Un solo orden en toda la página.
   ===================================================================== */

/* ---------- El temario, agrupado por nivel ---------- */

.sg-nivel + .sg-nivel { padding-top: 4px; }

.sg-titulo{
  display:flex;align-items:center;gap:10px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:16px;
}
.sg-titulo span{ width:22px;height:3px;border-radius:2px; }

.sg-titulo.primaria        { color:var(--azul-2) }
.sg-titulo.primaria span   { background:var(--azul) }
.sg-titulo.secundaria      { color:#1c3a29 }
.sg-titulo.secundaria span { background:#1a7a3e }

.icon-primmate{background:linear-gradient(135deg,#5a93b8,#1d4d69)}
.icon-primlengua{background:linear-gradient(135deg,#7ec0e0,#2d6d92)}

.subject-card.primaria{border-color:rgba(45,109,146,.28)}
.subject-card.primaria:hover{box-shadow:0 18px 36px rgba(29,77,105,.16)}
.subject-card.secundaria{border-color:rgba(26,122,62,.26)}
.subject-card.secundaria:hover{box-shadow:0 18px 36px rgba(22,60,40,.14)}

/* ---------- Las pestañas del material ---------- */

.tt-grupo{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  padding:6px 10px 6px 6px;
  border:1px solid #e7e0cd;border-radius:999px;
}
.tt-etiqueta{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  padding:0 6px 0 10px;white-space:nowrap;
}

.tt-grupo.primaria      { border-color:rgba(45,109,146,.35);background:rgba(109,179,216,.09) }
.tt-etiqueta.primaria   { color:var(--azul-2) }
.tt-grupo.secundaria    { border-color:rgba(26,122,62,.32);background:rgba(26,122,62,.055) }
.tt-etiqueta.secundaria { color:#1c3a29 }

.teoria-tab-btn.primaria.active{background:var(--azul);border-color:var(--azul);color:#fff}
.teoria-tab-btn.primaria:hover:not(.active){border-color:var(--azul-claro)}
.teoria-tab-btn.secundaria:hover:not(.active){border-color:rgba(26,122,62,.55)}

/* ---------- La caja de compra ---------- */

.mc-nivel{
  display:inline-block;margin-bottom:7px;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;
  padding:3px 9px;border-radius:999px;
}
.mc-nivel.primaria   { color:#123448;background:rgba(45,109,146,.15) }
.mc-nivel.secundaria { color:#1c3a29;background:rgba(26,122,62,.13) }

.materia-compra.primaria  { border-color:rgba(45,109,146,.3) }
.materia-compra.secundaria{ border-color:rgba(26,122,62,.28) }

/* En oferta manda el ámbar, en los dos niveles */
.materia-compra.primaria.en-oferta,
.materia-compra.secundaria.en-oferta{ border-color:var(--ambar) }

.materia-compra.primaria.ya-comprado{border-color:rgba(45,109,146,.45)}
.materia-compra.primaria.ya-comprado .btn-buy-materia{
  color:var(--azul-2);border-color:var(--azul-2);
}
.materia-compra.primaria.ya-comprado .btn-buy-materia:hover{
  background:var(--azul-2);color:#fff;
}

/* ---------- Los relojes de primaria: a la izquierda y en azul ---------- */

.venc-flotante.prim{
  right:auto;left:20px;
  border-color:var(--azul);
}
.venc-flotante.prim.por-vencer{border-color:var(--ambar)}

.venc-flotante.prim .vf-tilde{background:var(--azul);color:#fff}
.venc-flotante.prim.por-vencer .vf-tilde{background:var(--ambar);color:#3a2b06}

.mat-primmate   .vf-mat-punto{background:#1d4d69}
.mat-primlengua .vf-mat-punto{background:#2d6d92}
.mat-primmate   .vf-mat-dias{color:#123448;background:rgba(29,77,105,.14)}
.mat-primlengua .vf-mat-dias{color:#123448;background:rgba(45,109,146,.14)}

/* Urgente manda sobre el color de la materia, en los dos niveles */
.vf-materia.urgente .vf-mat-punto{background:#b23a3a}

.venc-abrir.prim{
  right:auto;left:20px;
  border-color:rgba(109,179,216,.7);
}
.venc-abrir.prim:hover{
  box-shadow:0 16px 34px rgba(18,52,72,.34);
  border-color:rgba(109,179,216,.95);
}

/* El relojito también va en azul: con el verde de siempre, la pastilla
   de primaria se leía como si fuera la de secundaria. */
.venc-abrir.prim .va-reloj{
  background:rgba(45,109,146,.3);
  color:#9ad2ee;
}
/* Salvo cuando está por vencer, que ahí manda el ámbar en las dos */
.venc-abrir.prim.por-vencer{border-color:rgba(227,167,43,.75)}
.venc-abrir.prim.por-vencer .va-reloj{
  background:rgba(227,167,43,.22);
  color:#f3c260;
}

/* Lo del celular va todo junto más abajo, en un solo lugar. */

/* Las unidades del reloj: largas en la computadora, cortas en el
   celular. Las dos viajan en el HTML y elige el CSS. */
.u-corta{display:none}

/* =====================================================================
   LAS VENTANITAS EN EL CELULAR
   ---------------------------------------------------------------------
   Con cinco materias entre los dos niveles, dos ventanitas abiertas
   tapaban casi toda la pantalla de un teléfono y encima se pisaban.
   Acá se achican de tres formas:

     · arrancan cerradas (lo decide el JavaScript), así que lo primero
       que se ve son las dos pastillas chiquitas en el borde de abajo
     · se abre una por vez, ancha de lado a lado y por encima de las
       pastillas, que quedan a mano
     · cada materia entra en UN renglón: el nombre a la izquierda y el
       reloj al lado, en vez de una grilla de cuatro casilleros

   Nada de esto toca la computadora, donde entran las dos cómodas.
   ===================================================================== */

@media (max-width:560px){

  /* De lado a lado, apoyadas arriba de las pastillas */
  .venc-flotante,
  .venc-flotante.prim{
    left:12px;right:12px;width:auto;max-width:none;
    top:auto;bottom:66px;
    max-height:56vh;overflow-y:auto;
    padding:13px 14px 11px 14px;
    border-radius:14px;
  }

  /* Las pastillas, cada una en su esquina de abajo. El tope de ancho
     es lo que garantiza que no se toquen en el medio: aunque el texto
     quedara largo, se corta con puntos suspensivos. */
  .venc-abrir{
    right:12px;left:auto;bottom:12px;
    max-width:calc(50% - 16px);
  }
  .venc-abrir.prim{left:12px;right:auto;bottom:12px;top:auto}
  .va-texto{overflow:hidden;text-overflow:ellipsis}

  /* El renglón compacto vive ahora en .compacta, que el JavaScript le
     pone a toda ventanita del celular. Ver el bloque de abajo. */
}


/* =====================================================================
   LA VENTANITA COMPACTA
   ---------------------------------------------------------------------
   Cada materia en un renglón —nombre a la izquierda, reloj a la
   derecha— en vez de la grilla de cuatro casilleros. Ocupa menos de la
   mitad de alto.

   Era la forma del celular y estaba escrita adentro de su media query.
   Pero el CBC son SEIS materias, contra las dos de primaria y las tres
   de secundaria: quien las compra todas veía en la computadora una
   ventanita de 758 px, más alta que la pantalla de una notebook, con
   el borde de arriba cortado y tapando el material de atrás.

   Así que ahora es una clase: la pone el JavaScript en el celular
   —como antes— y también cuando hay más de tres materias, sea la
   pantalla que sea.
   ===================================================================== */

.venc-flotante.compacta .vf-materia{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:8px;padding:8px 0;
}
.venc-flotante.compacta .vf-materia:first-of-type{margin-top:4px}
.venc-flotante.compacta .vf-mat-cab{margin:0;min-width:0}
.venc-flotante.compacta .vf-mat-nombre{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* El reloj ya empieza por los días, así que la pastillita sobra */
.venc-flotante.compacta .vf-mat-dias{display:none}

.venc-flotante.compacta .vf-reloj{
  margin:0;padding:0;background:none;border:0;gap:5px;
  justify-content:flex-end;
}
.venc-flotante.compacta .vf-par{
  flex:none;flex-direction:row;align-items:baseline;gap:1px;
}
.venc-flotante.compacta .vf-par b{font-size:14px}
.venc-flotante.compacta .vf-par i{font-size:9px}

.venc-flotante.compacta .u-larga{display:none}
.venc-flotante.compacta .u-corta{display:inline}

.venc-flotante.compacta .vf-cabeza{margin-bottom:8px}
.venc-flotante.compacta .vf-pie{margin-top:7px}

/* En la computadora la ventanita mide 216 px de ancho. Con el nombre
   y el reloj en el mismo renglón, "Pensamiento Científico" y "Sociedad
   y Estado" quedaban cortados en "P…" y "S…", que es justamente lo
   único que la persona necesita leer. Un poco más ancha y entran los
   dos cómodos. En el celular ya va de lado a lado. */
@media (min-width:561px){
  .venc-flotante.cbc.compacta{ width:372px }
}

/* ---------------------------------------------------------------------
   Las dos pastillas tienen que entrar enteras
   ---------------------------------------------------------------------
   Van una en cada esquina de abajo, así que cada una dispone de media
   pantalla. "Secundaria · 28d" no entraba en un teléfono de 375 px y
   quedaba cortado con puntos suspensivos, que es justo la palabra que
   dice de qué es la pastilla.

   Se achican de a poco: a partir de 420 px la letra baja un punto, y
   en los teléfonos muy angostos también el relojito.
   --------------------------------------------------------------------- */

@media (max-width:420px){
  .venc-abrir,
  .venc-abrir.prim{font-size:12px;padding:8px 13px 8px 9px;gap:7px}
}

@media (max-width:340px){
  .venc-flotante,
  .venc-flotante.prim{bottom:60px;max-height:52vh}


  .venc-abrir,
  .venc-abrir.prim{font-size:11px;padding:7px 11px 7px 7px;gap:6px}
  .venc-abrir .va-reloj{width:21px;height:21px}
  .venc-abrir .va-reloj svg{width:12px;height:12px}
}


/* =====================================================================
   EL CONTADOR DE LA OFERTA, UNO SOLO PARA LOS DOS NIVELES
   ---------------------------------------------------------------------
   Antes cada tarjeta de precio tenía el suyo y quedaban dos relojes
   idénticos, uno al lado del otro, contando lo mismo. Es una sola
   oferta: ahora es un solo reloj, ancho, debajo de las dos tarjetas.

   El fondo se parte por la mitad, azul del lado de primaria y verde
   del lado de secundaria, para que se lea de un vistazo que la oferta
   vale para los dos. La mezcla del centro es suave a propósito: un
   corte duro justo detrás de los números quedaba sucio.
   ===================================================================== */

.precio-bloque{max-width:920px;margin:0 auto}

.oferta-doble{
  position:relative;
  margin-top:26px;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(22,40,31,.16);
}

/* La barrita de arriba sí se parte al medio, sin mezcla: es una línea
   fina y ahí el corte se lee limpio. */
.oferta-doble::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,
    var(--azul-claro) 0 50%,
    #35a05f 50% 100%);
}

/* El nombre de cada nivel, en su extremo */
.od-lado{
  position:absolute;top:15px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  pointer-events:none;
}
.od-primaria{left:20px;color:#8ecdf0}
.od-secundaria{right:20px;color:#7fd8a2}

/* El reloj de siempre, con el fondo partido */
.oferta-doble .countdown{
  margin:0;
  border-radius:0;
  padding:18px 16px 16px 16px;
  background:linear-gradient(90deg,
    #143b52 0%,
    #143b52 38%,
    #1a3a2a 62%,
    #1a3a2a 100%);
}

/* Los números, más aire: ahora hay ancho de sobra */
.oferta-doble .cd-unidad{min-width:76px}
.oferta-doble .cd-relojes{gap:8px}
.oferta-doble .cd-sep{font-size:26px}

/* Cuando queda poco, el rojo manda sobre el partido */
.oferta-doble .countdown.urgente{
  background:linear-gradient(90deg,#3d1c1c 0%,#3d1c1c 38%,#331919 62%,#331919 100%);
}
.oferta-doble .countdown.terminado{background:#2c2c2c}

/* En el celular las tarjetas se apilan y el "mitad y mitad" pierde
   sentido: el nombre de cada nivel estorba más de lo que ayuda. */
@media (max-width:760px){
  .od-lado{display:none}
  .oferta-doble .cd-unidad{min-width:0;flex:1}
  .oferta-doble .cd-relojes{gap:4px}
  .oferta-doble .countdown{padding:15px 12px 13px 12px}

  /* Apiladas, el contador quedaba al final de todo: había que pasar
     las dos tarjetas enteras para enterarse de que la oferta vence.
     Acá va primero. */
  .precio-bloque{display:flex;flex-direction:column}
  .oferta-doble{order:-1;margin-top:0;margin-bottom:26px}

  /* La grilla tiene "margin: 0 auto", y un margen automático en el eje
     transversal cancela el estirado del flex: en vez de tomar el ancho
     del teléfono se dimensionaba a sus dos columnas de 320 px y se iba
     a 666, desbordando la pantalla. Acá se le sacan los márgenes y se
     le dice el ancho a mano. */
  .precio-grilla{width:100%;min-width:0;margin-left:0;margin-right:0}
}

/* Aclaración chiquita debajo de un campo del formulario de cuenta.
   Se agregó para el WhatsApp: quien está fuera de Argentina tiene que
   poner el código de país, o el enlace del panel no le llega. */
.reg-ayuda{
  display:block;margin-top:5px;
  font-size:11.5px;color:#8a8676;line-height:1.4;
}

/* ---------------------------------------------------------------------
   El contador chico, el que va dentro de cada materia
   ---------------------------------------------------------------------
   Es la misma oferta que la de arriba, así que lleva el mismo fondo
   partido: azul del lado de primaria, verde del de secundaria. Antes
   era verde a secas y parecía otro aviso distinto.

   Va sin los nombres de los niveles en los extremos: ahí adentro ya
   estás mirando una materia sola y sobrarían.
   --------------------------------------------------------------------- */

.oferta-doble.compacta{
  max-width:520px;
  margin:0 auto 26px auto;
  border-radius:14px;
}
.oferta-doble.compacta .countdown{
  padding:14px 14px 12px 14px;
}
.oferta-doble.compacta .cd-unidad{min-width:48px}
.oferta-doble.compacta .cd-relojes{gap:5px}
.oferta-doble.compacta .cd-sep{font-size:19px;padding-top:8px}

@media (max-width:420px){
  .oferta-doble.compacta .cd-unidad{min-width:0;flex:1}
  .oferta-doble.compacta .cd-relojes{gap:3px}
}

/* =====================================================================
   EL MATERIAL DE PRIMARIA, EN AZUL
   ---------------------------------------------------------------------
   Adentro de un tema, todo lo que llevaba el verde de la casa —la caja
   de fórmulas, los títulos, la zona del alumno— hacía que Matemática de
   primaria se viera igual que Química. El nivel se distinguía sólo en
   las pestañas de arriba, y una vez que bajabas se perdía.

   Acá se pinta de azul lo que es DEL NIVEL. Lo que es semántico se
   queda como está en los dos, porque significa otra cosa:

     · el ámbar del ejemplo resuelto y de la tanda de práctica
     · el rojo de los errores comunes y de una respuesta equivocada
     · el verde de una respuesta correcta

   Si el "correcto" de un ejercicio fuera azul en primaria, ya no se
   leería como correcto: se leería como primaria.
   ===================================================================== */

/* El azul oscuro de las cajas, el mismo del contador partido */
.teoria-pane.primaria .formula-box{ background:#143b52 }

/* Títulos y negritas */
.teoria-pane.primaria .teoria-topic-head h4,
.teoria-pane.primaria .teoria-content strong,
.teoria-pane.primaria .exercises-block h5,
.teoria-pane.primaria .eq-result,
.teoria-pane.primaria .eb-enunciado,
.teoria-pane.primaria .eb-resultado strong{ color:var(--azul-2) }

/* El año de cada tema */
.teoria-pane.primaria .teoria-topic-head .yb{
  color:#123448;background:rgba(45,109,146,.14);
}

/* Los redondelitos de las opciones */
.teoria-pane.primaria .eq-option input{ accent-color:var(--azul) }
.teoria-pane.primaria .eq-option:hover{ background:rgba(109,179,216,.09) }

/* ---------- La zona del alumno: "Tenés acceso a…" ---------- */

.teoria-pane.primaria .zona-alumno.visible{
  background:linear-gradient(180deg,#eef5fa,#fff);
  border-color:var(--azul);
}
.teoria-pane.primaria .za-tilde{ background:var(--azul-2) }
.teoria-pane.primaria .za-cabecera strong{ color:var(--azul-2) }

/* El botón de reservar, con el mismo azul que el de la tarjeta de precio */
.teoria-pane.primaria .za-clase{
  background:linear-gradient(135deg,#6db3d8,#2d6d92);
}
.teoria-pane.primaria .za-clase:hover{
  background:linear-gradient(135deg,#8ac6e4,#3a7ea6);
}

/* Por vencer y vencido mandan sobre el azul: son avisos, no niveles */
.teoria-pane.primaria .zona-alumno.por-vencer{
  background:linear-gradient(180deg,#fffaf0,#fff);
  border-color:var(--ambar);
}
.teoria-pane.primaria .zona-alumno.por-vencer .za-tilde{
  background:var(--ambar);color:#3a2b06;
}
.teoria-pane.primaria .zona-alumno.vencido{
  background:rgba(178,58,58,.05);
  border-color:rgba(178,58,58,.4);
}

/* ---------------------------------------------------------------------
   "Otra materia" en el carrito
   ---------------------------------------------------------------------
   Matemática, Física y Química son las que tienen material propio, pero
   Leslie da otras. Antes no había forma de pedirlas y la primera alumna
   que quiso Biología se quedó sin poder reservar.
   --------------------------------------------------------------------- */

.icon-otra{background:linear-gradient(135deg,#9a9280,#5f5a4c)}

.ro-fila.ro-otra{border-style:dashed}
.ro-otra .ro-nombre{line-height:1.25}

.ro-ayuda{
  display:block;
  font-size:11.5px;font-weight:500;color:#8a8676;
  margin-top:2px;
}

/* El campo de "¿cuál?", que aparece sólo si sumó horas de otra */
.ro-cual{
  display:block;margin-top:12px;
  background:#fff;border:1px solid #d8cfb4;border-radius:12px;
  padding:13px 15px;
}
.ro-cual-eti{
  display:block;font-size:13px;font-weight:700;color:#29352e;margin-bottom:6px;
}
.ro-cual input{
  width:100%;box-sizing:border-box;
  border:1px solid #d8cfb4;border-radius:9px;
  padding:10px 12px;font:inherit;font-size:14px;color:#29352e;
  background:#fff;
}
.ro-cual input:focus{outline:none;border-color:var(--ambar)}
.ro-cual-nota{
  display:block;margin-top:6px;
  font-size:11.5px;color:#8a8676;line-height:1.45;
}

/* ---------------------------------------------------------------------
   El Instagram, en el pie
   --------------------------------------------------------------------- */

.btn-ig{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:700;
  color:var(--tiza);
  background:linear-gradient(135deg,#c9518f,#e3a72b);
  border-radius:999px;
  padding:11px 20px;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-ig svg{width:18px;height:18px;flex:0 0 auto}
.btn-ig:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:0 10px 24px rgba(201,81,143,.28);
}
.btn-ig:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .btn-ig:hover{transform:none}
}

/* ---------------------------------------------------------------------
   "¿Necesitás otra materia?" en la tarjeta de precio
   ---------------------------------------------------------------------
   Leslie da más materias que las tres principales, pero no todas. En
   vez de anunciar cuáles —y que alguien pague por una que no da, con la
   devolución que eso implica— se lo manda a consultar y ella contesta
   desde el panel.
   --------------------------------------------------------------------- */

.price-consulta{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:12px;
  font-size:13px;font-weight:700;
  color:#1c3a29;
  background:rgba(26,122,62,.09);
  border:1px dashed rgba(26,122,62,.35);
  border-radius:999px;
  padding:9px 16px;
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.price-consulta span{transition:transform .2s ease}
.price-consulta:hover{
  background:rgba(26,122,62,.15);
  border-color:rgba(26,122,62,.6);
}
.price-consulta:hover span{transform:translateX(3px)}
.price-consulta:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}

/* En la tarjeta azul, con el azul de primaria */
.price-card.azul .price-consulta{
  color:#123448;
  background:rgba(45,109,146,.1);
  border-color:rgba(45,109,146,.35);
}

/* El enlace de "preguntame antes", dentro del campo del carrito */
.ro-cual-nota a{
  color:#1c3a29;font-weight:700;
  text-decoration:underline;text-underline-offset:2px;
}
.ro-cual-nota a:hover{color:#1a7a3e}

@media (prefers-reduced-motion: reduce){
  .price-consulta:hover span{transform:none}
}

/* ---------------------------------------------------------------------
   "Doy más materias" en la portada
   ---------------------------------------------------------------------
   Estaba dicho, pero como tercera oración de un párrafo gris: el ojo
   iba al título y a los años y no lo leía nadie. Ahora tiene lugar
   propio, se puede tocar y lleva a las consultas.
   --------------------------------------------------------------------- */

.nivel-otras{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 0 18px 0;
  font-family:'Inter',sans-serif;
  font-size:12.5px;font-weight:700;
  color:var(--tiza);
  background:rgba(246,242,231,.09);
  border:1px dashed rgba(246,242,231,.34);
  border-radius:999px;
  padding:8px 16px 8px 10px;
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}

.no-mas{
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;flex:0 0 auto;
  border-radius:50%;
  font-size:13px;font-weight:800;line-height:1;
  color:#3a2b06;background:var(--ambar);
}

.nivel-otras:hover{
  background:rgba(246,242,231,.16);
  border-color:rgba(246,242,231,.6);
  transform:translateY(-2px);
}
.nivel-otras:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}

/* En la de primaria el acento va en azul, si alguna vez se usa ahí */
.nivel-primaria .no-mas{color:#0d2c3d;background:var(--azul-claro)}

@media (max-width:640px){
  .nivel-otras{font-size:12px;padding:7px 14px 7px 9px;margin-bottom:16px}
}

@media (prefers-reduced-motion: reduce){
  .nivel-otras:hover{transform:none}
}

/* Las respuestas largas, con varios párrafos y una nota al pie */
.faq-item .a p{margin:0 0 10px 0}
.faq-item .a p:last-child{margin-bottom:0}
.faq-item .a strong{color:var(--pizarra)}
.faq-item .a a{
  color:#1c3a29;font-weight:700;
  text-decoration:underline;text-underline-offset:2px;
}
.faq-item .a a:hover{color:#1a7a3e}

.faq-nota{
  font-size:12.5px;color:#8a8676;
  border-top:1px dashed #e7e0cd;
  padding-top:9px;margin-top:12px !important;
}

/* La aclaración de las formas de pago, arriba del botón de Mercado
   Pago. Mismo formato que la del WhatsApp: quien está fuera del país
   tiene que enterarse antes de apretar, no después del rechazo. */
.reg-ayuda-pago{
  text-align:center;
  margin-top:9px;
}
.reg-ayuda a{
  color:#1c3a29;font-weight:700;
  text-decoration:underline;text-underline-offset:2px;
}
.reg-ayuda a:hover{color:#1a7a3e}

/* =====================================================================
   CBC  ·  sección aparte, con los colores de la bandera
   ---------------------------------------------------------------------
   No es primaria ni secundaria y no tiene que parecerlo. Su identidad
   son las tres bandas de la bandera argentina, bien puestas: celeste,
   blanca con el sol en el medio, y celeste otra vez.

   El celeste de la bandera (#75aadb) es demasiado claro para texto
   blanco encima, así que se usa como fondo y como banda, y para las
   letras va el celeste hondo (#2b6ca3), que sí se lee. El amarillo del
   sol se guarda para el sol y para los detalles: sobre blanco no se
   lee, así que nunca lleva texto encima.
   ===================================================================== */

:root{
  --cbc-celeste:  #75aadb;   /* el de la bandera */
  --cbc-hondo:    #2b6ca3;   /* para texto y botones: 4.8:1 sobre blanco */
  --cbc-tinta:    #14405f;   /* títulos */
  --cbc-sol:      #f6b40e;   /* sólo el sol y detalles, nunca texto */
  --cbc-fondo:    #f3f8fc;
}

/* section.cbc y no .cbc a secas: las pastillas del nivel y los
   paneles de cada materia también llevan la clase "cbc", y esto les
   estaba borrando el padding de arriba. El texto de los seis botones
   quedaba pegado al borde superior. */
section.cbc{
  background:var(--cbc-fondo);
  position:relative;
  padding-top:0;
}

/* ---------- La bandera ---------- */

.bandera{
  display:flex;
  flex-direction:column;
  width:100%;
  position:relative;
  margin-bottom:34px;
}

.bnd-celeste{ display:block;height:15px;background:var(--cbc-celeste) }

.bnd-blanca{
  display:flex;
  align-items:center;
  justify-content:center;
  height:26px;
  background:#fff;
}

/* El sol va centrado en la banda blanca, que es donde va en la bandera */
.bnd-sol{
  width:22px;height:22px;
  flex:0 0 auto;
  filter:drop-shadow(0 1px 2px rgba(120,80,0,.22));
}

/* ---------- La cabecera ---------- */

section.cbc .section-eyebrow{ color:var(--cbc-hondo) }
section.cbc .section-title{ color:var(--cbc-tinta) }
section.cbc .section-desc strong{ color:var(--cbc-hondo) }

/* ---------- El buscador de carrera ---------- */

.cbc-buscador{
  background:#fff;
  border:1px solid rgba(117,170,219,.42);
  border-radius:18px;
  padding:22px 22px 20px;
  margin:0 auto 30px;
  max-width:760px;
  box-shadow:0 10px 28px rgba(20,64,95,.07);
}

.cbc-lbl{
  display:block;
  font-size:14.5px;font-weight:700;
  color:var(--cbc-tinta);
  margin-bottom:10px;
}

.cbc-campo{
  display:flex;align-items:center;gap:9px;
  border:1.5px solid rgba(117,170,219,.6);
  border-radius:999px;
  padding:0 16px;
  background:#fbfdff;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.cbc-campo:focus-within{
  border-color:var(--cbc-hondo);
  box-shadow:0 0 0 3px rgba(117,170,219,.22);
}
.cbc-campo svg{ width:17px;height:17px;flex:0 0 auto;color:var(--cbc-hondo);opacity:.75 }

.cbc-campo input{
  flex:1 1 auto;min-width:0;
  border:0;background:transparent;outline:none;
  font-family:'Inter',sans-serif;
  font-size:15px;
  color:var(--cbc-tinta);
  padding:12px 0;
}
.cbc-campo input::placeholder{ color:#8fa3b0 }
/* La crucecita que Chrome le pone al type=search desalinea la fila */
.cbc-campo input::-webkit-search-cancel-button{ -webkit-appearance:none }

.cbc-chips{
  display:flex;flex-wrap:wrap;gap:7px;
  margin-top:13px;
}

.cbc-chip{
  font-family:'Inter',sans-serif;
  font-size:12px;font-weight:700;
  padding:7px 13px;
  border-radius:999px;
  border:1.5px solid rgba(117,170,219,.5);
  background:#fff;
  color:var(--cbc-hondo);
  cursor:pointer;
  transition:.16s ease;
}
.cbc-chip:hover{ background:rgba(117,170,219,.12) }
.cbc-chip.active{
  background:var(--cbc-hondo);
  border-color:var(--cbc-hondo);
  color:#fff;
}

.cbc-lista{
  display:flex;flex-wrap:wrap;gap:7px;
  margin-top:14px;
}

.cbc-carrera{
  font-family:'Inter',sans-serif;
  font-size:12.5px;font-weight:600;
  padding:7px 13px;
  border-radius:9px;
  border:1px solid #e2e8ee;
  background:#f8fbfd;
  color:#33495a;
  cursor:pointer;
  text-align:left;
  transition:.15s ease;
}
.cbc-carrera:hover{ border-color:var(--cbc-celeste);background:#fff }
.cbc-carrera.active{
  border-color:var(--cbc-hondo);
  background:var(--cbc-hondo);
  color:#fff;
}

.cbc-pista, .cbc-vacio, .cbc-mas{
  font-size:13px;color:#5a6873;margin-top:12px;
}
.cbc-mas{ align-self:center;padding:7px 4px }
.cbc-vacio a{ color:var(--cbc-hondo);font-weight:700 }

/* ---------- La ficha de la carrera elegida ---------- */

.cbc-ficha:not(:empty){
  margin-top:16px;
  border:1.5px solid rgba(117,170,219,.5);
  border-radius:14px;
  overflow:hidden;
}

/* Blanco sobre el celeste de la bandera da 2,5:1 y no se lee. En vez
   de oscurecer el celeste —que es el color de la sección— se da
   vuelta: texto azul noche sobre celeste, que da 5,2:1. */
.cf-cabeza{
  padding:13px 17px;
  background:linear-gradient(135deg, #8ab8e2, #6ba3d6);
  color:#0f2f47;
}
.cf-carrera{ font-size:16.5px;font-weight:800;line-height:1.25 }
.cf-orient{ font-size:12px;color:#0f2f47;margin-top:3px;font-weight:600 }

.cf-cuerpo{ padding:15px 17px 16px;background:#fff }

.cf-titulo{ font-size:13.5px;color:#33495a;margin-bottom:11px }
.cf-titulo strong{ color:var(--cbc-hondo) }

.cf-materias{ display:flex;flex-wrap:wrap;gap:7px }

.cf-mat{
  font-size:12.5px;font-weight:700;
  padding:6px 11px;border-radius:8px;
}
.cf-mat.si{ color:#0f4d2e;background:rgba(26,122,62,.13) }
.cf-mat.no{ color:#8b95a0;background:#f1f4f6;font-weight:600 }

.cf-nota{
  font-size:12.5px;color:#5a6873;
  margin-top:12px;line-height:1.5;
}
.cf-nota strong{ color:var(--cbc-hondo) }

/* ---------- Las pestañas del CBC ---------- */

.tt-grupo.cbc{
  border-color:rgba(117,170,219,.45);
  background:rgba(117,170,219,.1);
}
.tt-etiqueta.cbc{ color:var(--cbc-hondo) }

.teoria-tab-btn.cbc.active{
  background:var(--cbc-hondo);
  border-color:var(--cbc-hondo);
  color:#fff;
}
.teoria-tab-btn.cbc:hover:not(.active){ border-color:var(--cbc-celeste) }

/* ---------- La caja de compra ---------- */

.mc-nivel.cbc{ color:var(--cbc-tinta);background:rgba(117,170,219,.24) }

.materia-compra.cbc{ border-color:rgba(117,170,219,.55) }
.materia-compra.cbc.en-oferta{ border-color:var(--ambar) }

.materia-compra.cbc.ya-comprado{ border-color:var(--cbc-hondo) }
.materia-compra.cbc.ya-comprado .btn-buy-materia{
  color:var(--cbc-hondo);border-color:var(--cbc-hondo);
}
.materia-compra.cbc.ya-comprado .btn-buy-materia:hover{
  background:var(--cbc-hondo);color:#fff;
}

/* ---------- El contenido de cada tema ---------- */

.teoria-pane.cbc .formula-box{ background:#123c58 }

.teoria-pane.cbc .teoria-topic-head h4,
.teoria-pane.cbc .teoria-content strong,
.teoria-pane.cbc .exercises-block h5,
.teoria-pane.cbc .eq-result,
.teoria-pane.cbc .eb-enunciado,
.teoria-pane.cbc .eb-resultado strong{ color:var(--cbc-tinta) }

.teoria-pane.cbc .teoria-topic-head .yb{
  color:var(--cbc-tinta);background:rgba(117,170,219,.22);
}

.teoria-pane.cbc .eq-option input{ accent-color:var(--cbc-hondo) }
.teoria-pane.cbc .eq-option:hover{ background:rgba(117,170,219,.1) }

.teoria-pane.cbc .zona-alumno.visible{
  background:linear-gradient(180deg,#eff6fb,#fff);
  border-color:var(--cbc-celeste);
}
.teoria-pane.cbc .za-tilde{ background:var(--cbc-hondo) }
.teoria-pane.cbc .za-cabecera strong{ color:var(--cbc-hondo) }
.teoria-pane.cbc .za-clase{
  background:linear-gradient(135deg, var(--cbc-celeste), var(--cbc-hondo));
}

/* ---------- Los tips ---------- */
/* No son teoría ni son errores: son lo que conviene tener a mano el
   día del parcial. Van con el amarillo del sol, que es el único lugar
   de la sección donde ese color aparece fuera de la bandera. */

.tips-box{
  background:#fffaf0;
  border:1px solid rgba(246,180,14,.42);
  border-left:4px solid var(--cbc-sol);
  border-radius:12px;
  padding:15px 18px 14px;
  margin:18px 0;
}

.tp-titulo{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:#8a6a12;
  margin-bottom:9px;
}

.tips-box ul{ margin:0;padding-left:19px }
.tips-box li{
  font-size:14px;color:#4a4235;
  line-height:1.62;margin-bottom:7px;
}
.tips-box li:last-child{ margin-bottom:0 }
.tips-box li strong{ color:#7a5c0d }
.tips-box li em{ color:#6b5a35 }

/* ---------- En pantallas chicas ---------- */

@media (max-width:620px){
  .cbc-buscador{ padding:18px 15px 16px;border-radius:15px }
  .cbc-campo input{ font-size:16px }   /* 16 px o iOS hace zoom solo */
  .cf-carrera{ font-size:15px }
  .cbc-lista{ gap:6px }
  .cbc-carrera{ font-size:12px;padding:6px 11px }
  .bnd-celeste, .bnd-blanca{ height:11px }
  .bnd-sol{ width:24px;height:24px }
  .bandera{ margin-bottom:26px }
  .tips-box{ padding:13px 15px 12px }
}

/* El CBC en la barra de arriba, marcado para que se note que es una
   sección nueva y aparte, con el celeste de su bandera. */
.mainnav .nav-cbc{
  color:#bcd9ef;
}
.mainnav .nav-cbc::after{ background:var(--cbc-celeste) }

/* La descripción de cada materia queda en 4,18:1 sobre el fondo celeste
   claro de esta sección, que es más claro que el crema del resto. Se le
   sube un punto para pasar el piso de 4,5. */
.teoria-pane.cbc .mc-detalle{ color:#5b675f }

/* ---------------------------------------------------------------------
   El contador de la oferta, dentro de una materia del CBC
   ---------------------------------------------------------------------
   El fondo partido azul | verde es el de primaria y secundaria. Adentro
   del CBC no significa nada y encima mete los colores de los otros dos
   niveles en una sección que tiene el suyo. Acá va entero en azul
   noche, con la barrita superior celeste.
   --------------------------------------------------------------------- */

.teoria-pane.cbc .oferta-doble::before{
  background:var(--cbc-celeste);
}

.teoria-pane.cbc .oferta-doble .countdown{
  background:#123c58;
}

.teoria-pane.cbc .oferta-doble .countdown.urgente{
  background:#3d1c1c;
}

/* El contador de la práctica, con el celeste de la sección */
#practica-contador-cbc .pc-ico{ background:rgba(117,170,219,.2) }

/* ---------------------------------------------------------------------
   El contador de la oferta, dentro del CBC
   ---------------------------------------------------------------------
   El compacto viene partido al medio —azul de primaria a la izquierda,
   verde de secundaria a la derecha—, y esos dos colores no tienen nada
   que hacer en esta sección. Acá va entero, en el azul de la bandera.
   --------------------------------------------------------------------- */

.teoria-pane.cbc .oferta-doble::before{
  background:linear-gradient(90deg, var(--cbc-celeste), var(--cbc-hondo));
}

.teoria-pane.cbc .oferta-doble .countdown{
  background:linear-gradient(120deg, #123c58 0%, #17496b 100%);
}

.teoria-pane.cbc .oferta-doble .countdown.urgente{
  background:linear-gradient(120deg, #3d1c1c 0%, #4a2222 100%);
}

/* El contador de la práctica también lleva el celeste acá */
#practica-contador-cbc .pc-ico{ background:rgba(117,170,219,.2) }

/* =====================================================================
   EL CBC, MÁS ARGENTINO Y MENOS PARECIDO A PRIMARIA
   ---------------------------------------------------------------------
   El primer intento usaba #2b6ca3 como color principal, y el azul de
   primaria es #2d6d92: son prácticamente el mismo. Se veía como un
   tercer tono de primaria en vez de como otra cosa.

   La diferencia ahora no la hace un azul distinto sino la BANDERA:

     · las superficies van en celeste claro con texto azul noche,
       al revés que primaria, que va en azul oscuro con texto blanco;
     · aparece el AMARILLO DEL SOL, que primaria no tiene en ningún lado;
     · y donde entra, las tres bandas de la bandera.
   ===================================================================== */

/* ---------- Las pestañas ---------- */

.teoria-tab-btn.cbc{
  border-color:rgba(117,170,219,.55);
  color:#22333e;
}

.teoria-tab-btn.cbc:hover:not(.active){
  border-color:var(--cbc-celeste);
  background:#f4f9fd;
}

/* La activa: celeste con letras oscuras y el sol abajo. Primaria hace
   justo lo contrario —azul oscuro con letras blancas— así que a un
   metro de distancia ya no se confunden. */
.teoria-tab-btn.cbc.active{
  background:linear-gradient(180deg, #9cc6e8, #7fb0dd);
  border-color:#7fb0dd;
  border-bottom:3px solid var(--cbc-sol);
  color:#0f2f47;
  padding-bottom:8px;
}

/* Sin la píldora, los botones necesitan su propio aire */
.cbc-tabs{ gap:9px; margin-bottom:30px }

/* ---------- Los filtros del buscador ---------- */

.cbc-chip.active{
  background:linear-gradient(180deg, #9cc6e8, #7fb0dd);
  border-color:#7fb0dd;
  border-bottom:3px solid var(--cbc-sol);
  color:#0f2f47;
}

.cbc-carrera.active{
  background:linear-gradient(180deg, #9cc6e8, #7fb0dd);
  border-color:#7fb0dd;
  color:#0f2f47;
}

/* ---------- La barrita del contador de oferta: la bandera ---------- */

.teoria-pane.cbc .oferta-doble::before{
  height:4px;
  background:linear-gradient(90deg,
    var(--cbc-celeste) 0 34%,
    #ffffff 34% 66%,
    var(--cbc-celeste) 66% 100%);
}

/* ---------- El chip del nivel, con el sol ---------- */

.mc-nivel.cbc{
  background:rgba(117,170,219,.3);
  box-shadow:inset 0 -2px 0 var(--cbc-sol);
}

/* ---------- El botón del alumno: consultar, no reservar ---------- */

.za-consultar{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  white-space:nowrap;
}





/* =====================================================================
   EL CBC EN EL MEDIO DE LA PORTADA
   ---------------------------------------------------------------------
   Va entre primaria y secundaria: es el paso siguiente al secundario y
   el anterior a la facultad, así que ahí se entiende sin explicarlo.

   Lo que lo distingue no es otro azul —eso ya se probó y se confundía
   con primaria— sino la bandera arriba de la tarjeta, el amarillo del
   sol y el botón celeste.
   ===================================================================== */

.hero-niveles{
  grid-template-columns:1fr 1fr 1fr;
  max-width:1060px;
}

.nivel-cbc{
  position:relative;
  background:linear-gradient(160deg,rgba(117,170,219,.30),rgba(117,170,219,.09));
  /* Las líneas que la separan de sus dos vecinas */
  box-shadow:inset 1px 0 0 rgba(246,242,231,.14), inset -1px 0 0 rgba(246,242,231,.14);
  padding-top:44px;
}

/* La bandera, pegada al borde de arriba de la tarjeta */
.nc-bandera{
  position:absolute;top:0;left:0;right:0;
  display:flex;flex-direction:column;
}
.nc-cel{ display:block;height:7px;background:#75aadb }
.nc-bla{
  display:flex;align-items:center;justify-content:center;
  height:17px;background:#fff;
}
.nc-bla svg{ width:14px;height:14px }

.nivel-cbc .nivel-eyebrow{ color:#a9cdea }

/* El chip, con el sol abajo */
.nivel-cbc .year-chip{
  background:rgba(117,170,219,.22);
  border-color:rgba(117,170,219,.5);
  color:#dcecf8;
  box-shadow:inset 0 -2px 0 rgba(246,180,14,.85);
}

.nivel-cbc .btn-nivel{
  background:#9cc6e8;color:#0d2c3d;
  border-bottom:3px solid #f6b40e;
}
.nivel-cbc .btn-nivel:hover{ background:#b3d5ef }

/* ---------- Cuando no entran tres al lado ---------- */

/* Entre 760 y 1000 px las tres columnas quedan de menos de 300 px y la
   de secundaria, que lleva tres pastillas de año más la de "doy más
   materias", se rompe. Antes de eso se apilan. */
@media (max-width:1000px){
  .hero-niveles{ grid-template-columns:1fr;max-width:560px }
  .nivel-primaria{ border-bottom:1px solid var(--line) }
  .nivel-cbc{
    box-shadow:none;
    border-bottom:1px solid var(--line);
  }
}

@media (max-width:760px){
  .nivel-cbc{ padding-top:42px }
}

/* ---------------------------------------------------------------------
   Las tres tarjetas salen del ancho del texto
   ---------------------------------------------------------------------
   .hero-inner está limitado a 760 px a propósito: es lo que hace que el
   título y el párrafo no queden en renglones larguísimos. Pero tres
   tarjetas en 760 px quedan de 237 px cada una y el contenido se
   amontona en 443 px de alto.

   Así que sólo la fila de tarjetas se sale de ese límite, centrada
   respecto de la pantalla y sin pasarse nunca de ella.
   --------------------------------------------------------------------- */

@media (min-width:1001px){
  .hero-niveles{
    max-width:none;
    width:min(1060px, calc(100vw - 64px));
    margin-left:50%;
    transform:translateX(-50%);
  }
}

/* Un halo celeste muy suave: es la del medio y la que hay que mirar */
.nivel-cbc{
  box-shadow:
    inset 1px 0 0 rgba(246,242,231,.14),
    inset -1px 0 0 rgba(246,242,231,.14),
    inset 0 0 40px rgba(117,170,219,.10);
}

/* =====================================================================
   LA TARJETA DE PRECIO DEL CBC
   ---------------------------------------------------------------------
   Misma forma que las otras dos: cambia el color y le agrega la bandera
   arriba. El celeste solo se confundía con el azul de primaria; la
   bandera y el amarillo del sol son lo que la separa de un vistazo.
   ===================================================================== */

.price-card.celeste{ position:relative }

/* La bandera, pegada al borde de arriba */
.pc-bandera{
  position:absolute;top:0;left:0;right:0;
  display:flex;flex-direction:column;
}
.pcb-cel{ display:block;height:8px;background:var(--cbc-celeste) }
.pcb-bla{
  display:flex;align-items:center;justify-content:center;
  height:18px;background:#fff;
}
.pcb-bla svg{ width:15px;height:15px }

/* La pastilla de la oferta no puede taparse con la bandera */
.price-card.celeste .price-badge{
  background:linear-gradient(135deg,#9cc6e8,#2b6ca3);color:#fff;
  box-shadow:0 6px 18px rgba(43,108,163,.4);
  margin-top:8px;
}

.price-card.celeste .price-nivel{ color:var(--cbc-tinta);background:rgba(117,170,219,.22) }
.price-card.celeste .price-eyebrow{ color:var(--cbc-hondo) }
.price-card.celeste .price-amount span{ color:var(--cbc-hondo) }
.price-card.celeste .price-tag{ background:var(--cbc-hondo) }

.price-card.celeste .btn-amber{
  background:linear-gradient(135deg,#9cc6e8,#2b6ca3);color:#fff;
  border-bottom:3px solid var(--cbc-sol);
}
.price-card.celeste .btn-amber:hover{
  background:linear-gradient(135deg,#b3d5ef,#357ab5);
}

.precio-grilla .price-card.celeste{
  border-color:var(--cbc-celeste);
  box-shadow:0 18px 44px rgba(43,108,163,.2);
}

/* ---------- Tres tarjetas en vez de dos ---------- */

/* Con minmax(320px) las tres no entraban en una fila hasta muy ancho y
   quedaba una sola abajo, descolgada. A partir de 1040 px van las tres;
   más angosto, se apilan todas. */
@media (min-width:1040px){
  .precio-grilla{
    /* minmax(0,1fr) y no 1fr a secas: con 1fr el contenido puede
       empujar su columna, y como los precios tienen distinta cantidad
       de dígitos las tres quedaban de anchos distintos. */
    grid-template-columns:repeat(3, minmax(0, 1fr));
    max-width:1120px;
  }
}
@media (max-width:1039px){
  .precio-grilla{ grid-template-columns:1fr;max-width:520px }
}

/* ---------------------------------------------------------------------
   El contador de la oferta, ahora partido en TRES
   ---------------------------------------------------------------------
   Eran dos tarjetas y el fondo iba mitad azul, mitad verde. Con la del
   CBC en el medio, ese corte al 50 % ya no coincidía con nada: el
   celeste tiene que quedar alineado con la tarjeta que tiene encima.
   --------------------------------------------------------------------- */

.precio-bloque{ max-width:1120px }

/* Blanco en el medio, no celeste: el celeste de la bandera y el azul
   claro de primaria son casi el mismo color y los dos tercios de la
   izquierda se leían como uno solo. El blanco es además la banda del
   medio de la bandera. */
.oferta-doble.triple::before{
  background:linear-gradient(90deg,
    var(--azul-claro) 0 33.33%,
    #ffffff           33.33% 66.66%,
    #35a05f           66.66% 100%);
}

.oferta-doble.triple .countdown{
  background:linear-gradient(90deg,
    #143b52  0%,
    #143b52  26%,
    #1d5478  38%,
    #1d5478  62%,
    #1a3a2a  74%,
    #1a3a2a  100%);
}

.oferta-doble.triple .countdown.urgente{
  background:linear-gradient(90deg,#3d1c1c 0%,#3d1c1c 30%,#411f1f 40%,
                                   #411f1f 60%,#331919 70%,#331919 100%);
}

/* El del medio no lleva rótulo: iría centrado y choca con el título
   del contador, que también va centrado. La banda celeste alcanza. */

/* Cuando las tarjetas se apilan, los tres nombres sobran igual */
@media (max-width:1039px){
  .precio-bloque{ max-width:520px }
  .oferta-doble.triple::before{ background:var(--cbc-celeste) }
  .oferta-doble.triple .countdown{
    background:linear-gradient(140deg,#143b52,#123c58 55%,#1a3a2a);
  }
}

/* La bandera se posiciona contra la caja de relleno, que empieza
   después del borde de 1,5 px: sin esto queda flotando 2 px abajo. */
.pc-bandera{ top:-2px;left:-2px;right:-2px }

/* ---------------------------------------------------------------------
   Las tres tarjetas, del mismo alto
   ---------------------------------------------------------------------
   Con dos, la diferencia de alto casi no se notaba. Con tres —y con la
   del medio más corta que las de los costados— el escalonado queda
   feo. Se estiran todas a la más alta y los botones se alinean abajo.
   --------------------------------------------------------------------- */

@media (min-width:1040px){
  .precio-grilla{ align-items:stretch }
  .precio-grilla .price-card{
    display:flex;
    flex-direction:column;
  }
  /* Todo lo que va del botón para abajo se pega al pie */
  .precio-grilla .price-card .btn-amber{ margin-top:auto !important }
}

/* Con tres tarjetas son más angostas y "ARS / hora" se partía en dos
   renglones, dejando "hora" suelto abajo del precio. */
.price-amount span{ white-space:nowrap }

/* ---------------------------------------------------------------------
   La bandera del CBC, abajo
   ---------------------------------------------------------------------
   Arriba se peleaba con la pastilla de la oferta, que va justo ahí y
   la tapaba por el medio, escondiendo el sol. La pastilla no se puede
   mover —es la misma en las tres tarjetas—, así que se mueve la
   bandera: abajo queda como una cinta al pie y no choca con nada.
   --------------------------------------------------------------------- */

.price-card.celeste{
  padding-top:34px;         /* el mismo que las otras dos */
  padding-bottom:52px;      /* le deja lugar a la cinta */
}

/* Adentro del todo: con bottom negativo la cinta agranda el área
   desplazable de la tarjeta 2 px, que es invisible pero ensucia
   cualquier medición de "esto se está cortando". */
.pc-bandera{
  top:auto;
  bottom:0;
  left:0;right:0;
}

.price-card.celeste .price-badge{ margin-top:0 }

/* Con tres tarjetas en fila, el precio en 64 px más "ARS / hora" en una
   sola línea pide 281 px y la columna tiene 272. Se achica lo justo:
   sigue siendo el número más grande de la tarjeta. */
@media (min-width:1040px){
  .precio-grilla .price-card .price-amount{ font-size:clamp(42px,3.8vw,54px) }
  .precio-grilla .price-card .price-amount span{ font-size:13.5px }
}

/* La cinta sigue la curva de la tarjeta sin necesidad de recortarla:
   así la pastilla de la oferta, que asoma por arriba, no se corta. */
.pc-bandera{
  border-bottom-left-radius:18px;
  border-bottom-right-radius:18px;
  overflow:hidden;
}

/* ---------------------------------------------------------------------
   El enlace de la nota del CBC
   ---------------------------------------------------------------------
   Sin esto heredaba el gris del texto de alrededor y no se veía que
   fuera un enlace: al lado del de secundaria —negrita y subrayado— se
   notaba que uno se podía tocar y el otro no. Mismo tratamiento, con
   el azul del CBC en vez del verde de secundaria.
   --------------------------------------------------------------------- */

.rh-temas-nota a{
  color:var(--cbc-hondo);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}
.rh-temas-nota a:hover{ color:var(--cbc-tinta) }

/* ---------------------------------------------------------------------
   El aviso pegado al campo que falla
   ---------------------------------------------------------------------
   El mensaje del pie del modal puede quedar a 750 px del campo, o sea
   fuera de pantalla: la persona veía saltar el formulario y nada que le
   dijera qué faltaba. Este va donde está mirando.
   --------------------------------------------------------------------- */

.campo-error{
  display:block;
  margin-top:6px;
  font-size:12.5px;font-weight:700;
  color:#b23a3a;
  line-height:1.4;
}

.campo-falla{
  border-color:#b23a3a !important;
  box-shadow:0 0 0 3px rgba(178,58,58,.14) !important;
}

@media (prefers-reduced-motion: reduce){
  .campo-error{ animation:none }
}

/* =====================================================================
   EL RELOJ DE VENCIMIENTO DEL CBC
   ---------------------------------------------------------------------
   Primaria abajo a la izquierda, secundaria abajo a la derecha. El CBC
   va en el medio, que es donde está en todo el resto de la página: en
   la portada, en los precios y en el material.

   Los colores, los de la bandera: celeste el borde, el sol como línea
   abajo de la pastilla. Con el celeste solo se confundía con el azul
   de primaria.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Las tres se centran distinto, y eso rompía las animaciones
   ---------------------------------------------------------------------
   Primaria y secundaria van pegadas a una esquina: se acomodan con
   'left' y 'right', y su transform está libre para que las animaciones
   de entrada las hagan subir y crecer.

   La del CBC va en el MEDIO, y en CSS el medio se consigue poniéndola
   en el 50% y corriéndola media ventanita para atrás con
   translateX(-50%). O sea que su transform no está libre: la está
   sosteniendo ahí.

   Las animaciones reemplazan el transform ENTERO, así que mientras
   corrían le sacaban el centrado: la pastilla saltaba 82 px de costado
   al aparecer y la ventanita 205 px al abrirse, viajando hasta su
   lugar. Se veía como que todo se movía al pasar el mouse.

   Así que el CBC no anima el transform: aparece con un fundido, en su
   lugar, y se queda quieto.
   --------------------------------------------------------------------- */

.venc-flotante.cbc{
  right:auto;
  left:50%;
  transform:translateX(-50%);
  animation:none;
  border-color:var(--cbc-celeste);
  /* La misma línea del sol que tiene su pastilla: así se reconoce de un
     vistazo cuál de las tres es la del CBC. */
  border-bottom:3px solid var(--cbc-sol);
}
.venc-flotante.cbc.visible{
  transform:translateX(-50%);
  animation:none;
}
.venc-flotante.cbc.por-vencer{ border-color:var(--ambar) }

.venc-flotante.cbc .vf-tilde{ background:var(--cbc-hondo);color:#fff }

/* Los nombres del CBC son largos —"Pensamiento Científico", "Sociedad
   y Estado"— y en el renglón compacto del celular quedaban cortados
   con puntos suspensivos, que es justo lo único que hay que leer. Acá
   bajan a dos renglones: la ventanita crece unos pocos píxeles y se
   leen enteros. En la computadora entran en uno y esto no hace nada. */
.venc-flotante.cbc .vf-mat-nombre{
  white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;
}
.venc-flotante.cbc.por-vencer .vf-tilde{ background:var(--ambar);color:#3a2b06 }

/* La pastilla, también en el medio */
.venc-abrir.cbc{
  right:auto;
  left:50%;
  transform:translateX(-50%);
  /* Un fundido, sin mover nada: ver el comentario de arriba */
  animation:cbcAparece .45s ease;
  border-color:rgba(117,170,219,.75);
  border-bottom:3px solid var(--cbc-sol);
}

@keyframes cbcAparece{ from{ opacity:0 } to{ opacity:1 } }

/* Al pasar el mouse no se levanta ni le pasa el reflejo por encima:
   se queda donde está y se abre la ventanita, que es lo único que
   tiene que pasar. Sólo se le enciende un poco el borde. */
.venc-abrir.cbc:hover,
.venc-abrir.cbc:active{
  transform:translateX(-50%);
  box-shadow:0 16px 34px rgba(20,64,95,.34);
  border-color:rgba(117,170,219,1);
}
.venc-abrir.cbc:hover::after{ animation:none;opacity:0 }

/* ---------- En el celular no entran tres en una fila ---------- */

@media (max-width:560px){
  /* La ventanita, del mismo ancho que las otras dos */
  .venc-flotante.cbc{
    left:12px;right:12px;width:auto;max-width:none;
    transform:none;
    top:auto;bottom:66px;
    max-height:56vh;overflow-y:auto;
    padding:13px 14px 11px 14px;
    border-radius:14px;
  }
  .venc-flotante.cbc.visible{ transform:none }

  /* Las de primaria y secundaria ocupan las dos esquinas de abajo, así
     que la del CBC va en un renglón arriba, centrada. Sólo se ve
     cuando hay accesos del CBC vigentes. */
  .venc-abrir.cbc{
    left:50%;right:auto;
    /* 12 de margen + 50 de la pastilla de abajo + 8 de aire */
    bottom:70px;
    max-width:calc(100% - 24px);
    transform:translateX(-50%);
  }
  .venc-abrir.cbc:hover{ transform:translateX(-50%) }

  /* Con la pastilla del CBC arriba, las ventanitas empiezan más alto */
  .venc-flotante.cbc{ bottom:126px }
}

@media (max-width:340px){
  .venc-flotante.cbc{ bottom:110px;max-height:52vh }
  .venc-abrir.cbc{ bottom:58px;font-size:11px;padding:7px 11px 7px 7px;gap:6px }
  .venc-abrir.cbc .va-reloj{ width:21px;height:21px }
  .venc-abrir.cbc .va-reloj svg{ width:12px;height:12px }
}

@media (prefers-reduced-motion: reduce){
  .venc-abrir.cbc:hover{ transform:translateX(-50%) }
}


/* =====================================================================
   ELEGIR HORARIO ANTES DE PAGAR
   ---------------------------------------------------------------------
   Una fila de días arriba y las horas de ese día abajo. Las ocupadas se
   ven igual pero apagadas y tachadas: enterarse de que las tres ya no
   está es tan útil como ver que las cuatro sí.

   Los mismos colores del formulario, para que no parezca pegado.
   ===================================================================== */

.reg-horario{
  margin:18px 0 4px 0;
  padding:16px 16px 14px 16px;
  background:#fbfaf7;
  border:1px solid #e6e0d4;
  border-radius:14px;
}

.rhr-cabecera{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;flex-wrap:wrap;
  margin-bottom:4px;
}
.rhr-titulo{
  font-size:14.5px;font-weight:700;
  color:#243b2e;
}
/* ---------------------------------------------------------------------
   Los colores del selector, por nivel
   ---------------------------------------------------------------------
   El día y la hora elegidos se marcaban con el verde de "todo bien" del
   sitio. Adentro del modal de primaria —que es azul— o del CBC —celeste—
   quedaba de otro palo, igual que pasaba con la barra de beneficios.

   Por defecto sigue siendo el verde de siempre, que es el de secundaria.
   --------------------------------------------------------------------- */
.reg-horario{
  --rhr-ok:#1a7a3e;
  --rhr-ok-hondo:#14602f;
  --rhr-ok-suave:#f2f9f4;
  --rhr-ok-velo:rgba(26,122,62,.09);
  --rhr-ok-borde:rgba(26,122,62,.3);
  --rhr-ok-halo:rgba(26,122,62,.14);
}

#register-modal.reg-nivel-primaria .reg-horario{
  --rhr-ok:#2d6d92;
  --rhr-ok-hondo:#1d4d69;
  --rhr-ok-suave:#f1f7fb;
  --rhr-ok-velo:rgba(45,109,146,.09);
  --rhr-ok-borde:rgba(45,109,146,.3);
  --rhr-ok-halo:rgba(45,109,146,.16);
}

#register-modal.reg-nivel-cbc .reg-horario{
  --rhr-ok:#2b6ca3;
  --rhr-ok-hondo:#14405f;
  --rhr-ok-suave:#f3f8fc;
  --rhr-ok-velo:rgba(43,108,163,.09);
  --rhr-ok-borde:rgba(43,108,163,.3);
  --rhr-ok-halo:rgba(43,108,163,.16);
}

.rhr-req{
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:#8d5a1f;
  background:rgba(227,167,43,.16);
  border:1px solid rgba(227,167,43,.4);
  border-radius:999px;
  padding:2px 8px;
}

/* Cuántas lleva elegidas de cuántas necesita */
.rhr-cuenta{
  font-size:12.5px;font-weight:700;
  color:#8d5a1f;
  background:rgba(227,167,43,.11);
  border:1px solid rgba(227,167,43,.28);
  border-radius:9px;
  padding:7px 11px;
  margin-bottom:11px;
}
.rhr-cuenta.completo{
  color:var(--rhr-ok-hondo);
  background:var(--rhr-ok-velo);
  border-color:var(--rhr-ok-borde);
}
.rhr-intro{
  font-size:12.5px;line-height:1.45;
  color:#5f6f66;
  margin:0 0 12px 0;
}

.rhr-cargando{
  font-size:12.5px;color:#7d8b83;
  padding:10px 0 4px 0;
}

/* ---------- La fila de días ---------- */

.rhr-dias{
  display:flex;gap:7px;
  overflow-x:auto;
  padding:2px 2px 8px 2px;
  scrollbar-width:thin;
  /* Se difumina el borde derecho para que se note que sigue */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
}

.rhr-dia{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  min-width:56px;
  padding:8px 9px 7px 9px;
  background:#fff;
  border:1.5px solid #e0dacd;
  border-radius:11px;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.rhr-dia:hover{ border-color:#bcae93;transform:translateY(-1px) }

.rhr-dia-n{
  font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:#8b978f;
}
.rhr-dia-d{
  font-family:'IBM Plex Mono',monospace;
  font-size:17px;font-weight:600;
  color:#243b2e;line-height:1.1;
}
/* Debajo del número va, si eligió alguna ahí, cuántas puso ese día.
   No dice cuántas quedan libres: con la agenda casi vacía, repetir
   "12 libres" catorce veces cuenta algo que no hace falta contar. */
.rhr-dia-l{
  font-size:9.5px;font-weight:600;
  color:var(--rhr-ok);
  min-height:12px;
}

.rhr-dia.activo{
  border-color:var(--rhr-ok);
  background:var(--rhr-ok-suave);
}
/* Un día donde ya puso horas: se ve de un vistazo dónde repartió */
.rhr-dia.tiene{
  border-color:var(--rhr-ok);
  box-shadow:inset 0 -3px 0 var(--rhr-ok);
}
.rhr-dia.tiene .rhr-dia-d{ color:var(--rhr-ok-hondo) }

.rhr-dia:focus-visible{ outline:2px solid var(--ambar,#e3a72b);outline-offset:2px }

/* ---------- Las horas ---------- */

.rhr-horas{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:8px;
  margin-top:10px;
}

.rhr-hora{
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:9px 6px 8px 6px;
  background:#fff;
  border:1.5px solid #d9e6dd;
  border-radius:11px;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  transition:border-color .18s ease, background .18s ease,
             transform .18s ease, box-shadow .18s ease;
}
.rhr-hora .rhr-h{
  font-family:'IBM Plex Mono',monospace;
  font-size:14.5px;font-weight:600;
  color:#243b2e;
}
.rhr-hora .rhr-e{
  font-size:9.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--rhr-ok);
  min-height:12px;
}

.rhr-hora:hover{
  border-color:var(--rhr-ok);
  transform:translateY(-2px);
  box-shadow:0 8px 18px var(--rhr-ok-halo);
}

/* El reflejo, el mismo de los botones principales */
.rhr-hora::after{
  content:'';
  position:absolute;top:0;bottom:0;left:-60%;
  width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg);
  pointer-events:none;
  opacity:0;
}
.rhr-hora:hover::after{ animation:reflejo .7s ease-out }

.rhr-hora.elegida{
  border-color:var(--rhr-ok);
  background:var(--rhr-ok-suave);
  box-shadow:0 0 0 3px var(--rhr-ok-halo);
}

.rhr-hora.ocupada{
  cursor:not-allowed;
  background:#f4f2ee;
  border-color:#e6e0d4;
  border-style:dashed;
}
.rhr-hora.ocupada .rhr-h{ color:#a8afa9;text-decoration:line-through }
.rhr-hora.ocupada .rhr-e{ color:#b0a99c;font-size:8.5px;letter-spacing:.02em }
.rhr-hora.ocupada:hover{ transform:none;box-shadow:none;border-color:#e6e0d4 }
.rhr-hora.ocupada:hover::after{ animation:none }

.rhr-hora:focus-visible{ outline:2px solid var(--ambar,#e3a72b);outline-offset:2px }

/* ---------- Lo que quedó elegido ---------- */

.rhr-elegido{
  margin-top:12px;
  padding:11px 13px;
  background:var(--rhr-ok-suave);
  border:1.5px solid var(--rhr-ok);
  border-radius:12px;
}
.rhr-elegido-cab{
  display:flex;align-items:center;gap:9px;
  margin-bottom:8px;
}
.rhr-tilde{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--rhr-ok);color:#fff;
  font-size:12px;font-weight:700;
}
.rhr-elegido-eti{
  flex:1 1 auto;
  font-size:12.5px;font-weight:700;
  color:#243b2e;
}
.rhr-elegido-txt{
  display:flex;flex-wrap:wrap;gap:7px;
}

/* Cada horario elegido, con su ✕ para sacarlo */
.rhr-uno{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;
  border:1px solid #cbe3d4;
  border-radius:999px;
  padding:5px 6px 5px 11px;
}
.rhr-uno-txt{
  font-size:12.5px;font-weight:600;
  color:#243b2e;
}
.rhr-quitar{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  background:#eef6f0;
  border:0;border-radius:50%;
  color:#4a7a5e;
  font-size:10px;
  cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.rhr-quitar:hover{ background:var(--rhr-ok);color:#fff }

.rhr-borrar{
  flex:0 0 auto;
  background:none;border:0;
  font-family:'Inter',sans-serif;
  font-size:11.5px;font-weight:700;
  color:var(--rhr-ok);
  text-decoration:underline;
  cursor:pointer;
  padding:4px 2px;
}
.rhr-borrar:hover{ color:var(--rhr-ok-hondo) }

.rhr-elegido.late{ animation:rhrLatido .42s cubic-bezier(.34,1.56,.64,1) }
@keyframes rhrLatido{
  0%   { transform:scale(.97);opacity:.6 }
  60%  { transform:scale(1.015) }
  100% { transform:scale(1);opacity:1 }
}

/* ---------- Si se ocupó mientras llenaba el formulario ---------- */

.rhr-falla.late{ animation:rhrLatido .42s cubic-bezier(.34,1.56,.64,1) }

.rhr-falla{
  margin-top:10px;
  padding:9px 12px;
  background:rgba(178,58,58,.07);
  border:1px solid rgba(178,58,58,.3);
  border-radius:10px;
  font-size:12.5px;font-weight:600;
  color:#8d2f2f;
}

@media (max-width:430px){
  .reg-horario{ padding:14px 12px 12px 12px }
  .rhr-horas{ grid-template-columns:repeat(auto-fill, minmax(74px, 1fr));gap:7px }
  .rhr-dia{ min-width:52px;padding:7px 7px 6px 7px }
  .rhr-uno-txt{ font-size:11.5px }
}

@media (prefers-reduced-motion: reduce){
  .rhr-dia,.rhr-hora{ transition:none }
  .rhr-dia:hover,.rhr-hora:hover{ transform:none }
  .rhr-hora:hover::after{ animation:none }
  .rhr-elegido.late,.rhr-falla.late{ animation:none }
}


/* En el celular las tarjetas ya vienen separadas de la sección de
   arriba, así que el aire extra de la pastilla sobra: con los 56 px
   quedaba un hueco enorme. */
@media (max-width:760px){
  .pricing{ padding-top:10px }
}


/* =====================================================================
   BARRA DE BENEFICIOS POR CANTIDAD DE HORAS
   ---------------------------------------------------------------------
   Arriba, grande, a cuánto le queda la hora: ese es el número que
   empuja a sumar tiempo, más que el porcentaje. Abajo, la barra con
   una marca por escalón, y al pie qué falta para el próximo.

   Todo centrado sobre el mismo eje: el precio, la barra y el pie.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Cada nivel con su color
   ---------------------------------------------------------------------
   Los colores son los mismos que los de las tarjetas de precio de la
   portada: primaria azul, el CBC celeste y sol —los de la bandera— y
   secundaria verde. Antes la barra era verde para los tres y el modal
   de primaria no se parecía en nada a la tarjeta desde la que se abrió.

   Lo único que cambia entre niveles son estas siete variables; el resto
   del dibujo es uno solo.
   --------------------------------------------------------------------- */
.benef{
  /* Verde: secundaria, que es el que estaba */
  --bf-fondo:linear-gradient(150deg,#1f3a2c 0%,#16281f 62%,#101d17 100%);
  --bf-hondo:#16281f;              /* el más oscuro del fondo, para los puntos */
  --bf-sombra:rgba(22,40,31,.26);
  --bf-acento:var(--ambar);        /* la pastilla del % y los puntos logrados */
  --bf-acento-claro:#f3c260;
  --bf-acento-tinta:#3a2b06;       /* texto sobre la pastilla */
  --bf-lleno:linear-gradient(90deg,#4fb87a,#7fd8a2 60%,var(--ambar));
  --bf-brillo-color:rgba(127,216,162,.4);
  --bf-tope:#9ee6bb;               /* "llegaste al máximo" */

  position:relative;
  overflow:hidden;
  isolation:isolate;
  margin:18px 0 4px 0;
  padding:18px 20px 16px 20px;
  background:var(--bf-fondo);
  border:1px solid rgba(255,255,255,.12);
  border-top-color:rgba(255,255,255,.26);
  border-radius:16px;
  box-shadow:0 16px 38px var(--bf-sombra), inset 0 1px 0 rgba(255,255,255,.09);
  text-align:center;
}

/* Primaria: el azul de su tarjeta */
#register-modal.reg-nivel-primaria .benef{
  --bf-fondo:linear-gradient(150deg,#26516c 0%,#1b3c53 62%,#132b3c 100%);
  --bf-hondo:#1b3c53;
  --bf-sombra:rgba(19,43,60,.3);
  --bf-acento:#7cc4e6;
  --bf-acento-claro:#aeddf3;
  --bf-acento-tinta:#0c2c3e;
  --bf-lleno:linear-gradient(90deg,#3f8fbe,#7cc4e6 60%,#aeddf3);
  --bf-brillo-color:rgba(124,196,230,.45);
  --bf-tope:#aeddf3;
}

/* CBC: el celeste de la bandera, y el sol como acento */
#register-modal.reg-nivel-cbc .benef{
  --bf-fondo:linear-gradient(150deg,#1e5680 0%,#14405f 62%,#0d2d43 100%);
  --bf-hondo:#14405f;
  --bf-sombra:rgba(13,45,67,.3);
  --bf-acento:var(--cbc-sol);
  --bf-acento-claro:#ffd45e;
  --bf-acento-tinta:#3d2c02;
  --bf-lleno:linear-gradient(90deg,#75aadb,#a9cded 55%,var(--cbc-sol));
  --bf-brillo-color:rgba(117,170,219,.45);
  --bf-tope:#a9cded;
}

/* El reflejo: barre al aparecer y después cada tanto, apenas */
.bf-brillo{
  position:absolute;top:0;bottom:0;left:-65%;
  width:46%;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.07) 40%,
    var(--bf-brillo-color) 50%,
    rgba(255,255,255,.07) 60%,
    transparent 100%);
  transform:skewX(-18deg);
  pointer-events:none;
  z-index:-1;
  animation:bfBrillo 8s ease-in-out 1s infinite;
}
@keyframes bfBrillo{
  0%   { left:-65% }
  20%  { left:130% }
  100% { left:130% }
}

/* ---------- Arriba: el precio de la hora ---------- */

.bf-cabeza{
  display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap;
  margin-bottom:16px;
}

.bf-hora{
  display:inline-flex;align-items:baseline;gap:7px;
}
.bf-hora-eti,.bf-hora-uni{
  font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.62);
}
.bf-hora-num{
  font-family:'IBM Plex Mono',monospace;
  font-size:27px;font-weight:600;line-height:1;
  color:#fff;
  font-variant-numeric:tabular-nums;
  display:inline-block;
}
.bf-hora-num.late{ animation:bfLatido .45s cubic-bezier(.34,1.56,.64,1) }
@keyframes bfLatido{
  0%   { transform:scale(.86);opacity:.5 }
  60%  { transform:scale(1.06) }
  100% { transform:scale(1);opacity:1 }
}

.bf-off{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;font-weight:700;letter-spacing:.06em;
  color:var(--bf-acento-tinta);
  background:linear-gradient(135deg,var(--bf-acento-claro),var(--bf-acento));
  border-radius:999px;
  padding:4px 11px;
  box-shadow:0 4px 12px var(--bf-brillo-color);
  animation:bfLatido .45s cubic-bezier(.34,1.56,.64,1);
}

/* ---------- La barra ---------- */

.bf-barra{
  position:relative;
  height:9px;
  background:rgba(255,255,255,.12);
  border-radius:999px;
  /* Aire a los costados para que las etiquetas de las marcas no se
     salgan de la caja */
  margin:0 6px 34px 6px;
}

.bf-lleno{
  height:100%;
  width:0;
  border-radius:999px;
  background:var(--bf-lleno);
  box-shadow:0 0 14px var(--bf-brillo-color);
  transition:width .55s cubic-bezier(.22,1,.36,1);
}

.bf-marca{
  position:absolute;top:50%;
  transform:translate(-50%,-50%);
}
.bf-punto{
  display:block;
  width:13px;height:13px;
  border-radius:50%;
  background:var(--bf-hondo);
  border:2px solid rgba(255,255,255,.28);
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.bf-eti{
  position:absolute;top:15px;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  white-space:nowrap;
  font-size:10.5px;font-weight:700;
  color:rgba(255,255,255,.5);
  transition:color .3s ease;
}
.bf-eti i{
  font-style:normal;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;font-weight:600;
  color:rgba(255,255,255,.38);
}

.bf-marca.logrado .bf-punto{
  background:var(--bf-acento);
  border-color:var(--bf-acento-claro);
  transform:scale(1.15);
  box-shadow:0 0 12px var(--bf-brillo-color);
}
.bf-marca.logrado .bf-eti{ color:#fff }
.bf-marca.logrado .bf-eti i{ color:var(--bf-acento) }

/* ---------- La cuenta con la clase de regalo ----------
     Dentro de la tarjeta oscura de beneficios. Explica de dónde sale el
     precio real de la hora: se paga por las horas pagas y se reciben
     esas más la de regalo. */

.bf-regalo{
  font-size:12.5px;line-height:1.55;
  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:9px 12px;
  margin-bottom:11px;
}
.bf-regalo strong{ color:#fff;font-weight:700 }

/* ---------- El pie ---------- */

.bf-pie{
  font-size:13px;line-height:1.5;
  color:rgba(255,255,255,.74);
}
.bf-pie strong{ color:#fff;font-weight:700 }
.bf-pie.tope strong{ color:var(--bf-tope) }

.bf-ahorro{
  display:block;
  margin-top:3px;
  font-size:11.5px;font-weight:600;
  color:var(--bf-acento);
}

/* Las horas de regalo, al lado de la cuenta del total */
.rp-regalo{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  color:#14602f;
  background:rgba(26,122,62,.13);
  border:1px solid rgba(26,122,62,.3);
  border-radius:999px;
  padding:2px 8px;
  margin-left:6px;
}

/* La pastilla del beneficio en el total */
/* La pastilla del beneficio en el total, con el color de su nivel:
   era lo último que quedaba verde en el modal de primaria y del CBC. */
.rp-benef{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--rp-benef-tinta,#1f4d2c);
  background:var(--rp-benef-fondo,rgba(26,122,62,.13));
  border:1px solid var(--rp-benef-borde,rgba(26,122,62,.3));
  border-radius:999px;
  padding:2px 8px;
  margin-left:4px;
}

#register-modal.reg-nivel-primaria{
  --rp-benef-tinta:#1d4d69;
  --rp-benef-fondo:rgba(45,109,146,.13);
  --rp-benef-borde:rgba(45,109,146,.3);
}

#register-modal.reg-nivel-cbc{
  --rp-benef-tinta:#14405f;
  --rp-benef-fondo:rgba(43,108,163,.13);
  --rp-benef-borde:rgba(43,108,163,.32);
}

@media (max-width:430px){
  .benef{ padding:16px 14px 14px 14px }
  .bf-hora-num{ font-size:23px }
  .bf-barra{ margin-bottom:32px }
  .bf-eti{ font-size:9.5px }
  .bf-pie{ font-size:12.5px }
}

@media (prefers-reduced-motion: reduce){
  .bf-brillo{ animation:none;opacity:0 }
  .bf-lleno{ transition:none }
  .bf-hora-num.late,.bf-off{ animation:none }
  .bf-punto{ transition:none }
}

/* =====================================================================
   LA PROMO: UNA CLASE GRATIS CADA 3 HORAS
   =====================================================================
   Va debajo de las tarjetas de precio, que es donde se está decidiendo
   cuántas horas comprar. Arriba se leería como publicidad; acá, como
   una cuenta que conviene hacer.
   ===================================================================== */

.promo-gratis{
  max-width:760px;margin:0 auto 12px auto;
  padding:12px 15px;
  background:#eef8f1;
  border:1.5px solid #9ed9b4;
  border-radius:13px;
  box-shadow:0 6px 16px rgba(26,122,62,.07);
}

/* El del CBC va abajo del otro, con el color de su bandera. El
   margen de abajo es mayor: separa los dos carteles de los precios. */
.promo-gratis.promo-cbc{
  margin-bottom:26px;
  background:var(--cbc-fondo);
  border-color:var(--cbc-celeste);
  box-shadow:0 6px 16px rgba(43,108,163,.08);
}

/* Cada nivel —o cada grupo que dice lo mismo— es un bloque. Casi
   siempre hay uno solo. */
.promo-gratis.partida .pg-uno + .pg-uno{
  margin-top:11px;padding-top:11px;
  border-top:1px solid rgba(26,122,62,.16);
}
.promo-cbc.partida .pg-uno + .pg-uno{ border-top-color:rgba(43,108,163,.18) }

/* ---------- El título, chiquito ---------- */

.pg-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  color:#4d7a5f;
  margin-bottom:8px;
}
.pg-eyebrow b{ color:#14602f;font-weight:700 }
.promo-cbc .pg-eyebrow{ color:#5c7f99 }
.promo-cbc .pg-eyebrow b{ color:var(--cbc-tinta) }

/* ---------- La tira de precios ----------
     Una pastilla por tramo: las horas arriba, el precio abajo, y el
     precio contando la clase de regalo en ámbar. En el teléfono
     envuelven solas. */

/* Grilla y no flex: al envolver, la última pastilla se estiraba a lo
   ancho de la fila y quedaba desprolija. Con columnas iguales cada una
   ocupa lo suyo, esté sola o acompañada. */
.pg-chips{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  gap:7px;
}

.pg-chip{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  min-width:0;
  padding:7px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(26,122,62,.18);
  line-height:1.25;
}
.promo-cbc .pg-chip{ border-color:rgba(43,108,163,.2) }

/* Una hora sola es la referencia, no una oferta: va apagada */
.pg-chip.suelta{
  background:transparent;
  border-style:dashed;
  opacity:.72;
}

.pg-chip .pg-h{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:700;
  letter-spacing:.04em;
  color:#4d7a5f;
}
.promo-cbc .pg-chip .pg-h{ color:var(--cbc-hondo) }

.pg-chip .pg-p{
  font-size:14.5px;font-weight:700;
  color:#14602f;
  white-space:nowrap;
}
.promo-cbc .pg-chip .pg-p{ color:var(--cbc-tinta) }

/* Lo que sale la hora contando la regalada */
.pg-chip .pg-g{
  font-size:12px;font-weight:700;
  color:#8d5a1f;
  white-space:nowrap;
}
.pg-chip.con-regalo{
  background:#fffdf6;
  border-color:rgba(227,167,43,.5);
}

/* ---------- La línea del regalo ---------- */

.pg-linea{
  margin-top:9px;
  font-size:13px;line-height:1.5;
  color:#2c4a38;
}
.pg-linea strong{ color:#14602f;font-weight:700 }
.promo-cbc .pg-linea{ color:#1f4a68 }
.promo-cbc .pg-linea strong{ color:var(--cbc-tinta) }

@media (max-width:560px){
  .promo-gratis{ padding:11px 13px }
  .pg-chips{ gap:6px;grid-template-columns:repeat(auto-fit,minmax(70px,1fr)) }
  .pg-chip{ padding:6px 5px }
  .pg-chip .pg-p{ font-size:13.5px }
  .pg-chip .pg-g{ font-size:11.5px }
  .pg-linea{ font-size:12.5px }
}

/* ---------- El horario de regalo, en la lista de elegidos ---------- */

.rhr-uno.de-regalo{
  border-color:#9ed9b4;
  background:#eef8f1;
}
.rhr-regalo{
  display:inline-block;
  margin-left:7px;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:#14602f;
  background:#c9ecd6;
  border-radius:999px;
  padding:1px 7px;
}

/* =====================================================================
   LA PÁGINA DE PROFESORES  (profesores.html)
   ---------------------------------------------------------------------
   Usa el mismo header, los mismos botones y los mismos colores que el
   resto del sitio. Lo propio son las cajas del formulario y las
   fichas que dicen cómo va la postulación.
   ===================================================================== */

.pagina-profes main{ padding-bottom:10px }

/* ---------- La portada ---------- */

.pf-hero{
  background:var(--pizarra);
  color:var(--tiza);
  padding:56px 0 48px 0;
  text-align:center;
}
.pf-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ambar);
  margin-bottom:14px;
}
.pf-titulo{
  font-family:'Caveat',cursive;
  font-size:clamp(38px,7vw,62px);
  font-weight:700;line-height:1.05;
  margin-bottom:16px;
}
.pf-titulo em{ color:var(--ambar);font-style:normal }
.pf-bajada{
  max-width:620px;margin:0 auto;
  font-size:15.5px;line-height:1.6;
  color:rgba(246,242,231,.82);
}

/* ---------- De dónde tiene que ser ----------
   Sobre el fondo oscuro de la portada. Se lee antes de postularse, no
   después: alguien de afuera del país podría completar todo y
   enterarse recién cuando llega el momento de cobrar. */
.pf-requisito{
  display:flex;
  align-items:flex-start;
  gap:11px;
  max-width:620px;
  margin:20px auto 0;
  padding:13px 17px;
  background:rgba(246,242,231,.09);
  border:1px solid rgba(246,242,231,.2);
  border-radius:14px;
  font-size:14px;
  line-height:1.6;
  color:rgba(246,242,231,.85);
  text-align:left;
}
.pf-requisito b{ color:#f6f2e7;font-weight:700 }
.pf-req-ico{ font-size:17px;line-height:1.3;flex:none }

@media (max-width:560px){
  .pf-requisito{ font-size:13.5px;padding:12px 14px;gap:9px }
}

/* ---------- La caja que cambia ---------- */

.pf-caja-seccion{ padding:0 0 10px 0;margin-top:-26px }

.pf-caja{
  max-width:700px;margin:0 auto;
  background:#fff;
  border:1px solid rgba(22,40,31,.1);
  border-radius:18px;
  padding:24px;
  box-shadow:0 14px 40px rgba(22,40,31,.12);
}

.pf-cargando{
  text-align:center;padding:18px 0;
  font-size:14px;color:#6f7a72;
}

/* Las dos pestañas: entrar o crear cuenta */
.pf-pestanas{
  display:flex;gap:6px;
  background:var(--tiza);
  border-radius:12px;padding:4px;
  margin-bottom:18px;
}
.pf-pest{
  flex:1 1 0;
  font-family:'Inter',sans-serif;
  font-size:13.5px;font-weight:600;
  color:#5c6b62;
  background:transparent;border:none;
  border-radius:9px;padding:9px 10px;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.pf-pest.activa{ background:#fff;color:var(--tinta);box-shadow:0 2px 8px rgba(22,40,31,.1) }

.pf-caja-nota{
  font-size:13.5px;line-height:1.55;
  color:#6f7a72;
  margin-bottom:14px;
}

/* Con qué cuenta se está postulando */
.pf-quien{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;color:#6f7a72;
  background:var(--tiza);
  border-radius:10px;padding:9px 12px;
  margin-bottom:18px;
}
.pf-quien strong{ color:var(--tinta) }

.pf-salir{
  font-family:'Inter',sans-serif;
  font-size:12.5px;font-weight:600;
  color:#8a6a55;
  background:none;border:none;
  text-decoration:underline;
  cursor:pointer;padding:0;
}
.pf-salir:hover{ color:var(--tinta) }

/* ---------- El formulario ---------- */

.pf-form{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:13px;
}
.pf-form label, .pf-bloque label{
  display:flex;flex-direction:column;gap:5px;
  font-size:12.5px;font-weight:600;
  color:#42504a;
}
.pf-form label i, .pf-bloque label i{
  font-style:normal;font-weight:500;
  font-size:11.5px;color:#8a948d;
}
.pf-form label.pf-ancho{ grid-column:1 / -1 }

.pf-form input, .pf-caja textarea{
  font-family:'Inter',sans-serif;
  font-size:14px;color:var(--tinta);
  background:var(--tiza);
  border:1px solid rgba(22,40,31,.12);
  border-radius:10px;
  padding:10px 12px;
  width:100%;
}
.pf-caja textarea{ resize:vertical;line-height:1.55 }
.pf-form input:focus, .pf-caja textarea:focus{
  outline:none;border-color:var(--ambar);background:#fff;
}

.pf-bloque{
  margin-top:20px;padding-top:18px;
  border-top:1px solid rgba(22,40,31,.08);
}
.pf-bloque-tit{
  font-size:14px;font-weight:700;
  color:var(--tinta);
  margin-bottom:8px;
}

/* Las materias, agrupadas por nivel */
.pf-materias{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:14px;
}
.pf-mat-tit{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:#8a948d;
  margin-bottom:7px;
}
.pf-mat{
  display:flex !important;flex-direction:row !important;
  align-items:center;gap:8px;
  font-size:13.5px;font-weight:500;
  color:var(--tinta);
  padding:6px 0;
  cursor:pointer;
}
.pf-mat input{ accent-color:var(--ambar);width:16px;height:16px;flex:none }

.pf-contador{
  margin-top:6px;
  font-size:11.5px;color:#8a948d;
}
.pf-contador.corto{ color:#b4553f }
.pf-contador.bien{ color:#3f7a55 }

.pf-caja input[type="file"]{
  font-size:13px;color:#42504a;
  margin-top:2px;
}
.pf-foto-estado{
  margin-top:7px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;color:#8a948d;
}
.pf-foto-estado.error{ color:#b4553f }
.pf-foto-estado.bien{ color:#3f7a55 }

/* ---------- La barra de abajo ---------- */

.pf-barra{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:22px;
}
.pf-estado{
  font-size:13px;font-weight:600;
  color:#6f7a72;
}
.pf-estado.error{ color:#b4553f }
.pf-estado.ok{ color:#3f7a55 }

/* ---------- Cómo va la postulación ---------- */

.pf-ficha{
  border-radius:14px;
  padding:20px;
  background:var(--tiza);
  border:1px solid rgba(22,40,31,.1);
}
.pf-ficha.pendiente{ background:#fffdf6;border-color:rgba(227,167,43,.4) }
.pf-ficha.aceptada{ background:#eef8f1;border-color:#9ed9b4 }
.pf-ficha.rechazada{ background:#fdf4f1;border-color:rgba(180,85,63,.3) }

.pf-ficha-marca{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:#8d5a1f;
  background:rgba(227,167,43,.18);
  border-radius:999px;padding:3px 10px;
  margin-bottom:10px;
}
.pf-ficha.aceptada .pf-ficha-marca{ color:#14602f;background:rgba(26,122,62,.14) }

.pf-ficha h2{
  font-size:19px;font-weight:700;
  color:var(--tinta);
  margin-bottom:8px;
}
.pf-ficha p{
  font-size:14px;line-height:1.6;
  color:#42504a;
}
.pf-ficha p + p{ margin-top:8px }

.pf-nota-admin{
  margin-top:12px;padding:11px 13px;
  background:#fff;
  border-left:3px solid rgba(180,85,63,.5);
  border-radius:0 8px 8px 0;
  font-size:13.5px;line-height:1.55;
  color:#42504a;
}

.pf-resumen{
  margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(22,40,31,.1);
  display:grid;gap:9px;
}
.pf-resumen > div{
  display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;
  font-size:13.5px;color:var(--tinta);
}
.pf-resumen i{
  flex:0 0 74px;
  font-family:'IBM Plex Mono',monospace;
  font-style:normal;
  font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:#8a948d;
}

.pf-chips{ display:flex;flex-wrap:wrap;gap:5px }
.pf-chip{
  font-size:11.5px;font-weight:600;
  color:#42504a;
  background:rgba(22,40,31,.07);
  border-radius:999px;padding:3px 9px;
}

.pf-aviso{
  display:flex;flex-direction:column;gap:5px;
  padding:14px 16px;
  background:#fffdf6;
  border:1px solid rgba(227,167,43,.4);
  border-radius:12px;
  margin-bottom:18px;
}
.pf-aviso strong{ font-size:14px;color:var(--tinta) }
.pf-aviso span{ font-size:13px;line-height:1.55;color:#6f7a72 }

/* ---------- Cómo funciona ---------- */

.pf-como{ padding:52px 0 64px 0 }

.pf-pasos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(192px,1fr));
  gap:18px;
  margin-bottom:34px;
}
.pf-paso{
  background:#fff;
  border:1px solid rgba(22,40,31,.09);
  border-radius:14px;
  padding:20px;
}
.pf-num{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--pizarra);color:var(--ambar);
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;font-weight:700;
  margin-bottom:12px;
}
.pf-paso h3{
  font-size:15px;font-weight:700;
  color:var(--tinta);margin-bottom:6px;
}
.pf-paso p{
  font-size:13.5px;line-height:1.6;
  color:#6f7a72;
}

.pf-datos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}
.pf-dato{
  display:flex;flex-direction:column;gap:5px;
  padding:15px 17px;
  background:var(--tiza-soft);
  border-radius:12px;
}
.pf-dato strong{ font-size:13.5px;color:var(--tinta) }
.pf-dato span{ font-size:13px;line-height:1.55;color:#6f7a72 }

.pf-nota{
  margin-top:26px;text-align:center;
  font-size:13.5px;color:#6f7a72;
}
.pf-nota a{ color:#8d5a1f;text-decoration:underline }

@media (max-width:640px){
  .pf-hero{ padding:42px 0 40px 0 }
  .pf-caja{ padding:18px;border-radius:15px }
  .pf-caja-seccion{ margin-top:-20px }
  .pf-como{ padding:40px 0 48px 0 }
}

/* El enlace a la página de profesores: en la barra y en el pie */
.foot-profes{
  font-size:12.5px;
  color:rgba(246,242,231,.6);
}
.foot-profes a{
  color:var(--ambar);
  text-decoration:underline;
  font-weight:600;
}

/* El campo para escribir la materia, cuando marcan "otra" */
.pf-otra{
  display:flex !important;flex-direction:column !important;gap:5px;
  margin-top:12px;
  font-size:12.5px;font-weight:600;color:#42504a;
}
.pf-otra input{
  font-family:'Inter',sans-serif;
  font-size:14px;color:var(--tinta);
  background:var(--tiza);
  border:1px solid rgba(22,40,31,.12);
  border-radius:10px;
  padding:10px 12px;width:100%;
}
.pf-otra input:focus{ outline:none;border-color:var(--ambar);background:#fff }

/* El acceso a la página de profesores desde la portada. En el celular
   la barra de arriba no se muestra, así que este es el único camino
   corto: va en ámbar para que se distinga del otro enlace. */
.btn-ghost.es-profe{
  color:var(--ambar);
  border-bottom-color:rgba(227,167,43,.45);
}
.btn-ghost.es-profe:hover{ border-bottom-color:var(--ambar) }

/* Los campos que salen de la cuenta y no se pueden cambiar. Se ven
   apagados a propósito: que no parezca que se pueden escribir. */
.pf-form input[readonly]{
  background:rgba(22,40,31,.05);
  color:#5c6b62;
  cursor:default;
}
.pf-form input[readonly]:focus{ border-color:rgba(22,40,31,.12) }

/* La aclaración de por qué un campo se puede escribir y otro no */
.pf-pista{
  margin-top:5px;
  font-size:11.5px;line-height:1.45;
  font-weight:500;
  color:#8a6a55;
}

/* =====================================================================
   EL PANEL DEL PROFESOR
   ===================================================================== */

.pf-panel-cabeza{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid rgba(22,40,31,.1);
}
.pf-panel-foto{
  flex:0 0 auto;
  width:74px;height:74px;
  border-radius:14px;overflow:hidden;
  background:var(--tiza);
  border:1px solid rgba(22,40,31,.1);
}
.pf-panel-foto img{ width:100%;height:100%;object-fit:cover }

.pf-panel-marca{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:#14602f;margin-bottom:5px;
}
.pf-panel-cabeza h2{
  font-size:21px;font-weight:700;color:var(--tinta);
  line-height:1.2;
}
.pf-panel-titulo{
  font-size:13.5px;color:#6f7a72;margin-top:3px;
}

/* La comisión: es lo primero que va a mirar */
.pf-comision{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 18px;
  background:#fffdf6;
  border:1.5px solid rgba(227,167,43,.45);
  border-radius:14px;
}
.pf-com-num{
  flex:0 0 auto;
  font-size:32px;font-weight:800;
  color:#8d5a1f;line-height:1;
}
.pf-com-txt{
  flex:1 1 240px;
  font-size:13px;line-height:1.55;color:#6f5c42;
}

.pf-panel-bloque{
  margin-top:20px;padding-top:18px;
  border-top:1px solid rgba(22,40,31,.08);
}
.pf-panel-otras{
  margin-top:8px;font-size:13px;color:#6f7a72;
}
.pf-panel-bio{
  font-size:14px;line-height:1.65;color:#42504a;
  white-space:pre-wrap;overflow-wrap:anywhere;
}

@media (max-width:560px){
  .pf-panel-foto{ width:60px;height:60px }
  .pf-panel-cabeza h2{ font-size:18px }
  .pf-com-num{ font-size:27px }
}


/* El que ya da clases no se postula: entra a su panel. El enlace va
   abajo de todo, que es donde mira el que no encontró lo que buscaba. */
.pf-ya-profe{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px solid rgba(22,40,31,.08);
  text-align:center;
}
.pf-ya-profe a{
  font-weight:700;
  color:var(--verde, #1f7a4d);
}

/* El botón para entrar al panel, desde la ficha del profesor */
.pf-ir-panel{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:700;
  color:#fff;background:#1f7a4d;
  border:none;border-radius:999px;
  padding:13px 26px;
  text-decoration:none;
  cursor:pointer;
}
.pf-ir-panel:hover{ background:#175c3a }


/* =====================================================================
   "MI PANEL": EL ENLACE DEL PROFESOR QUE YA ESTÁ ADENTRO
   ---------------------------------------------------------------------
   Los tres enlaces para profesores dicen "Dar clases". Cuando el que
   entró ya da clases, cambian de texto y de destino —eso lo hace el
   JavaScript— y acá se los pone en verde con un marco, para que no se
   pierdan entre los otros enlaces de la barra: el que viene a trabajar
   tiene que encontrar su panel de una.
   ===================================================================== */

nav.mainnav a.es-mi-panel{
  color:#dff1e8;
  opacity:1;
  font-weight:700;
  border:1px solid rgba(122,214,171,.55);
  border-radius:999px;
  padding:5px 14px;
  margin:-5px 0;
  background:rgba(31,122,77,.28);
}
nav.mainnav a.es-mi-panel:hover{
  background:rgba(31,122,77,.5);
  border-color:#7ad6ab;
}

/* El de la portada, que en el celular es el único camino corto */
.btn-ghost.es-profe.es-mi-panel{
  color:#0f2e24;
  background:#7ad6ab;
  border-bottom-color:#7ad6ab;
  border-radius:999px;
  padding:11px 22px;
  font-weight:700;
}
.btn-ghost.es-profe.es-mi-panel:hover{ background:#5fc795 }

.foot-profes a.es-mi-panel{ color:#7ad6ab }


/* ---------------------------------------------------------------------
   El acceso al panel, arriba de todo
   ---------------------------------------------------------------------
   Verde y con relleno para que se vea antes que los otros dos botones
   de la barra: el profesor que abre la página viene a trabajar, no a
   comprar una clase. En el celular es lo único suyo que se ve sin
   bajar, así que no puede ser un enlace tímido.
   --------------------------------------------------------------------- */

.btn-mi-panel{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Inter',sans-serif;
  font-size:13px;font-weight:700;
  color:#0f2e24;
  background:#7ad6ab;
  border:1px solid #7ad6ab;
  padding:10px 16px;border-radius:999px;
  white-space:nowrap;
  text-decoration:none;
  transition:.2s cubic-bezier(.34,1.56,.64,1);
}
.btn-mi-panel:hover{ background:#5fc795;transform:translateY(-1px) }
.btn-mi-panel[hidden]{ display:none }

/* En pantallas angostas, tres botones no entran. El del panel se
   queda —es el suyo— y se achica lo justo. */
@media (max-width: 640px){
  .btn-mi-panel{ padding:9px 13px;font-size:12.5px }
}


/* =====================================================================
   CALIFICAR LAS CLASES QUE TE DIERON
   ---------------------------------------------------------------------
   Otra cosa que la reseña del sitio: acá se califica UNA clase y al
   profesor que la dio. No se publica.

   Las estrellas son botones de verdad y no un dibujo: se tocan con el
   dedo en el celular y se llegan con el teclado.
   ===================================================================== */

.calificar{
  max-width:620px;
  margin:0 auto 34px;
  padding:22px 24px;
  background:var(--tiza);
  border:1px solid rgba(22,40,31,.08);
  border-radius:16px;
}
.calificar[hidden]{ display:none }

.calificar h3{
  font-size:17px;font-weight:800;color:var(--tinta);
  margin-bottom:5px;
}
.cf-nota{
  font-size:13.5px;line-height:1.55;color:#6f7a72;
  margin-bottom:16px;
}

.cf-card{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  background:#fff;
  border:1px solid rgba(22,40,31,.08);
  border-radius:12px;
  padding:13px 16px;
  margin-bottom:9px;
}
.cf-card:last-child{ margin-bottom:0 }
.cf-card.puesta{ border-color:rgba(31,122,77,.35);background:#fbfefc }

.cf-datos{ flex:1 1 220px;min-width:0 }
.cf-quien{ font-size:14px;color:var(--tinta) }
.cf-quien strong{ font-weight:700 }
.cf-cuando{ font-size:12.5px;color:#6f7a72;margin-top:2px }

.cf-estrellas{ display:flex;gap:2px;flex:0 0 auto }

.cf-estrella{
  font-size:26px;line-height:1;
  color:#d8ddd9;
  background:none;border:none;
  padding:2px 3px;
  cursor:pointer;
  transition:color .12s ease,transform .12s ease;
}
.cf-estrella:hover{ transform:scale(1.15) }
.cf-estrella.prendida{ color:var(--ambar) }
.cf-estrella:focus-visible{
  outline:2px solid var(--ambar);outline-offset:2px;border-radius:4px;
}

/* Al pasar el dedo o el mouse se prenden todas las anteriores, que es
   como se entiende que se está eligiendo "hasta acá". */
.cf-estrellas:hover .cf-estrella{ color:var(--ambar) }
.cf-estrella:hover ~ .cf-estrella{ color:#d8ddd9 }

.cf-estado{
  flex-basis:100%;
  font-size:12.5px;color:#6f7a72;
  min-height:1em;
}
.cf-estado.bien{ color:#1f7a4d;font-weight:600 }
.cf-estado.mal{ color:#b4553f;font-weight:600 }

@media (max-width:560px){
  .cf-estrellas{ width:100% }
  .cf-estrella{ font-size:30px;padding:4px 6px }
}


/* =====================================================================
   PESOS O DÓLARES
   ---------------------------------------------------------------------
   Un interruptor de dos posiciones con una pastilla que se desliza. La
   pastilla es un elemento aparte, detrás de los dos botones: así se
   mueve con transform —que el navegador anima sin repintar— en vez de
   cambiarle el fondo a cada botón, que salta.

   Arranca escondido: aparece cuando el servidor pudo traer la
   cotización. Si no la pudo traer, no se ofrece.
   ===================================================================== */

.moneda{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  margin:0 auto 22px;
  max-width:620px;
}
.moneda[hidden]{ display:none }

.mo-switch{
  position:relative;
  display:inline-flex;
  background:#e9e4d6;
  border-radius:999px;
  padding:4px;
  box-shadow:inset 0 1px 3px rgba(22,40,31,.12);
}

/* La pastilla que se desliza. Va detrás de los botones. */
.mo-pastilla{
  position:absolute;
  top:4px;
  left:4px;
  width:calc(50% - 4px);
  height:calc(100% - 8px);
  background:#fff;
  border-radius:999px;
  box-shadow:0 2px 8px rgba(22,40,31,.16);
  transition:transform .32s cubic-bezier(.34,1.4,.5,1);
  z-index:0;
}
.mo-pastilla.derecha{ transform:translateX(100%) }

.mo-btn{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  font-weight:700;
  color:#7b8880;
  background:none;
  border:none;
  border-radius:999px;
  padding:8px 22px;
  cursor:pointer;
  transition:color .22s ease;
  min-width:124px;
}
.mo-btn.activa{ color:var(--tinta) }
.mo-btn:focus-visible{ outline:2px solid var(--ambar);outline-offset:3px }

/* ---------- Las banderas ----------
   La que no está elegida se apaga en vez de desaparecer: con las dos
   a todo color el interruptor parece un cartel de dos banderas y no
   se entiende cuál está puesta. Apagada sigue reconociéndose.

   El alto fijo y "flex:none" son para que el botón no cambie de
   tamaño al pasar de una a otra: si se mueve, la pastilla que se
   desliza queda corrida. */
.mo-bandera{
  flex:none;
  width:21px;
  height:14px;
  display:block;
  border-radius:2.5px;
  filter:saturate(.4) opacity(.62);
  transition:filter .28s ease, transform .28s ease;
}
.mo-btn.activa .mo-bandera{
  filter:none;
  transform:scale(1.06);
}

.mo-nota{
  font-size:12.5px;
  line-height:1.5;
  color:#6f7a72;
  text-align:center;
  margin:0;
  max-width:520px;
}
.mo-nota strong{ color:var(--tinta);font-weight:700 }


/* ---------------------------------------------------------------------
   El cambio de los números
   ---------------------------------------------------------------------
   Sin animación los precios cambian de golpe y no se entiende que son
   los mismos en otra moneda: parece que cambió la lista. Con un
   desvanecido corto se lee como una conversión.

   Se anima cada número y no la caja entera: mover el cartel completo
   sacude la página a la altura donde uno está mirando.
   --------------------------------------------------------------------- */

.cambiando-moneda .pg-p,
.cambiando-moneda .pg-g,
.cambiando-moneda .price-amount,
.cambiando-moneda .price-antes,
.cambiando-moneda .price-ahorro{
  animation:cambioDeMoneda .4s ease-out;
}

@keyframes cambioDeMoneda{
  0%   { opacity:0; transform:translateY(-6px) }
  55%  { opacity:1 }
  100% { opacity:1; transform:none }
}

/* Para quien pidió menos movimiento, el cambio es instantáneo */
@media (prefers-reduced-motion: reduce){
  .mo-pastilla{ transition:none }
  .mo-bandera{ transition:none }
  .cambiando-moneda .pg-p,
  .cambiando-moneda .pg-g,
  .cambiando-moneda .price-amount,
  .cambiando-moneda .price-antes,
  .cambiando-moneda .price-ahorro{ animation:none }
}

@media (max-width:560px){
  .mo-btn{ padding:8px 16px;min-width:112px;font-size:13px;gap:7px }
  .mo-bandera{ width:19px;height:12.7px }
  .mo-nota{ font-size:12px }
}


/* =====================================================================
   CON QUIÉN QUIERE LA CLASE
   ---------------------------------------------------------------------
   Va arriba del selector de horarios porque lo que se elige acá cambia
   qué horarios quedan libres.
   ===================================================================== */

.reg-profe{
  border:1px solid rgba(22,40,31,.12);
  border-radius:14px;
  padding:16px 18px;
  margin-bottom:16px;
  background:#fff;
}
.reg-profe[hidden]{ display:none }

.rpf-opcional{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#8a8676;
  background:rgba(22,40,31,.06);
  border-radius:999px;
  padding:3px 10px;
}

.rpf-lista{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:9px;
  margin-top:12px;
}

.rpf-uno{
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  font-family:'Inter',sans-serif;
  background:var(--tiza);
  border:1.5px solid rgba(22,40,31,.12);
  border-radius:12px;
  padding:11px 13px;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.rpf-uno:hover{ border-color:rgba(22,40,31,.3) }

/* El elegido se marca con borde y tilde, no sólo con un color de
   fondo: sobre el papel de la página un fondo apenas distinto no se
   ve, y quedaba sin saber cuál había tocado. */
.rpf-uno.elegido{
  border-color:var(--ambar);
  background:#fffaf0;
}

.rpf-tilde{
  flex:none;
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(22,40,31,.25);
  border-radius:50%;
  font-size:12px;font-weight:800;
  color:#fff;
}
.rpf-uno.elegido .rpf-tilde{
  background:var(--ambar);
  border-color:var(--ambar);
}

.rpf-datos{ display:flex;flex-direction:column;gap:2px;min-width:0 }
.rpf-datos strong{
  font-size:14px;font-weight:700;color:var(--tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rpf-datos small{ font-size:12px;color:#6f7a72 }

.rpf-falla{
  margin-top:10px;
  font-size:13px;
  color:#a3562a;
}
.rpf-falla[hidden]{ display:none }

@media (max-width:560px){
  .reg-profe{ padding:14px 15px }
  .rpf-lista{ grid-template-columns:1fr;gap:8px }
}

/* La presentación del profesor: dos renglones como mucho, si no la
   tarjeta crece según lo que cada uno haya escrito y la fila queda
   despareja. */
.rpf-bio{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:#8a8676 !important;
  line-height:1.45;
}