/* Tipografías servidas como archivos, no incrustadas: el navegador las
   cachea una vez y no viajan en cada carga de la página. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/fraunces.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/fraunces-italic.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/spectral-400.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/spectral-600.woff2) format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/spectral-400i.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/mono-500.woff2) format('woff2')}

/* =========================================================
   CURSOS DE HISTORIA — dirección de arte
   Catálogo de archivo: escala tipográfica, grilla asimétrica,
   filetes de 1px, duotono. Azul profundo / celeste de Mayo / oro sobre crema.
   ========================================================= */

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

:root {
  --azul-prof:   #15283d;
  --azul-prof-2: #1e3854;
  --azul:        #1a5580;
  --azul-osc:    #0f3d5e;
  --celeste:     #74b3d8;
  --celeste-osc: #2b6180;
  --oro:     #b8933f;
  --oro-2:   #e0c07a;
  --papel:   #f1eade;
  --papel-2: #faf5ea;
  --papel-3: #fffdf8;
  --tinta:   #2a231b;
  --tinta-2: #5d5244;
  --tinta-3: #6f6253;
  --hair:    #cdbfa6;
  --hair-2:  #e0d5be;
  --verde:   #157a4a;
  --rojo:    #a52017;

  --disp: "Fraunces", "Libre Baskerville", Georgia, "Times New Roman", serif;
  --serif:"Spectral", "Libre Baskerville", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut: 32px;
  --ancho: 1280px;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--serif); font-size: 16.5px; line-height: 1.72;
  -webkit-font-smoothing: antialiased; font-optical-sizing: auto;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: .40; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
p { margin: 0 0 1.1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--disp); font-weight: 700; color: var(--azul-prof); line-height: 1.06; letter-spacing: -.018em; }

.wrap { width: 100%; max-width: var(--ancho); margin: 0 auto; padding-inline: var(--gut); }
@media (max-width: 700px) { :root { --gut: 20px; } }

/* ---------- etiquetas de catálogo ---------- */
.lbl {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-3);
  margin: 0;
}
.lbl.azul { color: var(--azul); }
.lbl.oro { color: var(--oro); }
.lbl.cel { color: var(--celeste); }
.lbl.claro { color: rgba(241,234,222,.64); }

/* duotono común a todas las imágenes de archivo */
.duo { position: relative; overflow: hidden; background: var(--azul-prof); border-radius: 12px; }
.duo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(1.04); mix-blend-mode: luminosity; transition: filter .7s ease, transform .9s cubic-bezier(.16,.8,.24,1); }
.duo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(21,40,61,.62), rgba(116,179,216,.34) 70%); mix-blend-mode: color; transition: opacity .6s ease; }
.duo.viva::after { opacity: 0; }
.duo.viva img { filter: none; mix-blend-mode: normal; }


/* =================== HEADER =================== */
header.top {
  position: sticky; top: 0; z-index: 60; background: rgba(241,234,222,.92);
  backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--hair);
}
.top-in { display: flex; align-items: center; gap: 34px; height: 74px; }
.brand { display: flex; align-items: baseline; gap: 12px; margin-right: auto; }
.brand .mono { font-family: var(--disp); font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--azul-prof); }
.brand .mono em { font-style: italic; font-weight: 400; color: var(--azul); }
.brand .sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); }
nav.main { display: flex; gap: 30px; }
nav.main a {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-2); position: relative; padding-block: 3px;
}
nav.main a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--azul); transition: right .32s cubic-bezier(.16,.8,.24,1); }
nav.main a:hover { color: var(--azul); }
nav.main a:hover::after { right: 0; }

/* =================== BOTONES =================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  padding: 15px 30px; border: 1px solid transparent; transition: .28s cubic-bezier(.16,.8,.24,1);
  white-space: nowrap; border-radius: 100px;
  box-shadow: 0 2px 5px rgba(21,40,61,.12), 0 10px 24px -10px rgba(21,40,61,.34);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(21,40,61,.16), 0 18px 34px -12px rgba(21,40,61,.44); }
.btn:active { transform: translateY(0); }
.btn-azul { background: var(--azul); color: var(--papel-3); }
.btn-azul:hover { background: var(--azul-osc); }
.btn-prof { background: var(--azul-prof); color: var(--papel); }
.btn-prof:hover { background: var(--azul); }
.btn-oro { background: var(--oro); color: var(--azul-prof); }
.btn-oro:hover { background: var(--oro-2); color: var(--azul-prof); }
.btn-wa { background: var(--verde); color: #fff; }
.btn-wa:hover { background: #0f6b41; }
.btn-linea { border-color: var(--tinta); color: var(--tinta); }
.btn-linea:hover { background: var(--azul-prof); color: var(--papel); border-color: var(--azul-prof); }
.btn-linea-claro { border-color: rgba(241,234,222,.45); color: var(--papel); }
.btn-linea-claro:hover { background: var(--papel); color: var(--azul-prof); }
.btn-sm { padding: 11px 20px; font-size: 10px; letter-spacing: .16em; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .32; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover { transform: none; box-shadow: none; }

/* =================== PORTADA =================== */
.portada { background: var(--azul-prof); color: var(--papel); position: relative; overflow: hidden; }
.portada .grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; align-items: stretch;
  min-height: min(78vh, 720px);
}
.portada .txt { padding: 76px 0 68px; position: relative; display: flex; flex-direction: column; justify-content: center; padding-right: 56px; }
.portada .kicker { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }
.portada .kicker i { width: 54px; height: 1px; background: var(--oro); display: block; flex: none; }
.portada h1 {
  color: var(--papel-3); font-size: clamp(52px, 8.4vw, 122px); line-height: .86;
  letter-spacing: -.045em; font-weight: 700;
}
.portada h1 em {
  display: block; font-style: italic; font-weight: 400; color: var(--oro-2);
  font-size: clamp(26px, 3.6vw, 50px); letter-spacing: -.02em; margin-top: 16px; line-height: 1;
}
.portada .bajada {
  font-size: 17px; line-height: 1.8; color: rgba(241,234,222,.7);
  max-width: 460px; margin: 34px 0 0; border-left: 1px solid rgba(184,147,63,.5); padding-left: 22px;
}
.portada .acc { display: flex; gap: 26px; align-items: center; margin-top: 40px; flex-wrap: wrap; }
.portada .dato { display: flex; gap: 32px; margin-top: 52px; flex-wrap: wrap; }
.portada .dato div { border-top: 1px solid rgba(241,234,222,.2); padding-top: 12px; min-width: 92px; }
.portada .dato .n { font-family: var(--disp); font-size: 34px; color: var(--papel-3); line-height: 1; }
.portada .dato .t { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(241,234,222,.62); margin-top: 7px; }

.portada .mosaico { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); position: relative; }
.portada .mosaico .duo { border-radius: 0; border-left: 1px solid rgba(241,234,222,.12); border-bottom: 1px solid rgba(241,234,222,.12); }
.portada .mosaico .duo:first-child { grid-column: 1 / -1; grid-row: 1 / 3; }
.portada .sello {
  position: absolute; left: -46px; bottom: 42px; z-index: 3;
  width: 92px; height: 92px; border-radius: 50%; background: var(--azul);
  display: grid; place-items: center; color: var(--oro-2);
  box-shadow: 0 0 0 1px rgba(224,192,122,.6) inset;
}
@media (max-width: 900px) {
  .portada .grid { grid-template-columns: 1fr; min-height: 0; }
  .portada .txt { padding: 54px 0 44px; padding-right: 0; }
  .portada .mosaico { grid-template-columns: repeat(5, 1fr); grid-template-rows: 120px; }
  .portada .mosaico .duo:first-child { grid-column: auto; grid-row: auto; }
  .portada .sello { display: none; }
}

/* =================== SECCIONES =================== */
section.sec { padding: 104px 0; position: relative; overflow-x: clip; }
section.sec.oscura { background: var(--azul-prof); color: rgba(241,234,222,.78); }
section.sec.oscura h2, section.sec.oscura h3 { color: var(--papel-3); }
section.sec.papel { background: var(--papel-2); }
@media (max-width: 700px) { section.sec { padding: 62px 0; } }

.sec-head { display: grid; grid-template-columns: 150px 1fr; gap: 34px; align-items: end; margin-bottom: 58px; padding-bottom: 26px; border-bottom: 1px solid var(--hair); }
section.sec.oscura .sec-head { border-color: rgba(241,234,222,.2); }
.sec-head .col-izq { padding-bottom: 5px; }
.sec-head h2 { font-size: clamp(34px, 5.2vw, 62px); letter-spacing: -.035em; }
.sec-head .dcha { max-width: 430px; margin-left: auto; font-size: 15px; color: var(--tinta-2); line-height: 1.7; }
section.sec.oscura .sec-head .dcha { color: rgba(241,234,222,.6); }
@media (max-width: 820px) {
  .sec-head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .sec-head .dcha { margin-left: 0; }
}

/* =================== ÍNDICE DE CURSOS =================== */
.indice { border-top: 1px solid var(--hair); }
.fila {
  display: grid; grid-template-columns: 76px 118px 1fr 128px 44px;
  gap: 26px; align-items: center; padding: 26px 0;
  border-bottom: 1px solid var(--hair); position: relative;
  transition: background .4s;
}
.fila::before {
  content: ""; position: absolute; left: -24px; right: -24px; top: 0; bottom: 0;
  background: var(--papel-3); opacity: 0; transition: opacity .4s; z-index: 0;
}
.fila:hover::before { opacity: 1; }
.fila > * { position: relative; z-index: 1; }
.fila .num { font-family: var(--disp); font-size: 30px; color: #96845f; transition: color .4s; line-height: 1; }
.fila:hover .num { color: var(--azul); }
.fila .dia { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); transition: color .4s; }
.fila:hover .dia { color: var(--celeste-osc); }
.fila .tit { font-family: var(--disp); font-size: clamp(22px, 2.6vw, 33px); color: var(--azul-prof); letter-spacing: -.025em; line-height: 1.08; }
.fila .tit span { display: block; font-family: var(--serif); font-size: 13.5px; font-weight: 400; letter-spacing: 0; color: var(--tinta-3); line-height: 1.5; margin-top: 8px; max-width: 460px; }
.fila .meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); text-align: right; }
.fila .meta b { display: block; color: var(--tinta); font-weight: 500; margin-bottom: 4px; }
.fila .fl { font-family: var(--disp); font-size: 22px; color: #96845f; text-align: right; transition: transform .4s cubic-bezier(.16,.8,.24,1), color .4s; }
.fila:hover .fl { color: var(--azul); transform: translateX(7px); }
.pill-acc { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #11653d; border: 1px solid #11653d; padding: 4px 10px; display: inline-block; margin-top: 8px; border-radius: 100px; }
.pill-nuevo { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--celeste-osc); border: 1px solid var(--celeste-osc); padding: 4px 10px; display: inline-block; margin-top: 8px; border-radius: 100px; }

/* lámina flotante que sigue al cursor sobre el índice */
.lamina {
  position: fixed; width: 196px; aspect-ratio: 1100/619; pointer-events: none; z-index: 40;
  opacity: 0; transform: translate(0, 0) scale(.92);
  transition: opacity .3s ease, transform .42s cubic-bezier(.16,.8,.24,1);
  box-shadow: 0 24px 60px -18px rgba(21,40,61,.6); overflow: hidden;
}
.lamina { border-radius: 12px; }
.lamina.on { opacity: 1; transform: translate(0, 0) scale(1); }
.lamina img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px), (pointer: coarse) { .lamina { display: none; } }

.fila .mini { display: none; }
@media (max-width: 820px) {
  .fila { grid-template-columns: 92px 1fr; grid-template-areas: "img tit" "img meta"; gap: 6px 16px; align-items: start; padding: 20px 0; }
  .fila .num, .fila .fl, .fila .dia { display: none; }
  .fila .tit { grid-area: tit; font-size: 20px; }
  .fila .tit span { display: none; }
  .fila .meta { grid-area: meta; text-align: left; }
  .fila .mini { display: block; grid-area: img; width: 92px; aspect-ratio: 1100/619; }
}

/* =================== ARCHIVO =================== */
.archivo-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
.archivo-grid .lam { aspect-ratio: 1100/619; }
.archivo-grid h3 { font-size: clamp(28px, 4vw, 46px); letter-spacing: -.03em; margin-bottom: 22px; }
.archivo-grid p { font-size: 16px; color: rgba(241,234,222,.66); }
.archivo-grid .precio-mini { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; margin: 26px 0 22px; padding-top: 16px; border-top: 1px solid rgba(241,234,222,.22); color: rgba(241,234,222,.64); }
@media (max-width: 860px) { .archivo-grid { grid-template-columns: 1fr; gap: 30px; } }

/* =================== PLANES =================== */
.planes { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 6px rgba(21,40,61,.06); }
.plan { padding: 42px 32px; border-right: 1px solid var(--hair); position: relative; transition: background .4s; }
.plan:last-child { border-right: 0; }
.plan:hover { background: var(--papel-3); }
.plan.dest { background: var(--azul-prof); color: rgba(241,234,222,.72); }
.plan.dest h3 { color: var(--papel-3); }
.plan.dest:hover { background: var(--azul-prof-2); }
.plan .tag { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-2); margin-bottom: 18px; display: block; min-height: 14px; }
.plan h3 { font-size: 25px; letter-spacing: -.02em; }
.plan .p { font-family: var(--disp); font-size: 42px; color: var(--azul); margin: 20px 0 2px; line-height: 1; letter-spacing: -.03em; }
.plan.dest .p { color: var(--oro-2); }
.plan .p small { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--tinta-3); }
.plan.dest .p small { color: rgba(241,234,222,.62); }
.plan .usd { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--tinta-3); margin: 0; }
.plan.dest .usd { color: rgba(241,234,222,.62); }
.plan ul { list-style: none; margin: 28px 0 32px; padding: 0; }
.plan li { font-size: 14.5px; padding: 10px 0; border-bottom: 1px solid var(--hair-2); color: var(--tinta-2); line-height: 1.5; }
.plan.dest li { border-color: rgba(241,234,222,.14); color: rgba(241,234,222,.7); }
.plan li:last-child { border-bottom: 0; }
@media (max-width: 820px) { .planes { grid-template-columns: 1fr; } .plan { border-right: 0; border-bottom: 1px solid var(--hair); } }

/* =================== PROFESORA =================== */
.prof { display: grid; grid-template-columns: 330px 1fr; gap: 70px; align-items: center; }
.prof .retrato { aspect-ratio: 1; position: relative; }
.prof .retrato { border-radius: 16px; }
.prof .retrato::after { content: ""; position: absolute; inset: 14px; border: 1px solid var(--oro); pointer-events: none; z-index: 2; border-radius: 6px; }
.prof h2 { font-size: clamp(34px, 5vw, 58px); letter-spacing: -.035em; margin: 16px 0 24px; }
.prof p { font-size: 17px; line-height: 1.85; color: var(--tinta-2); max-width: 560px; }
.prof p em { color: var(--azul); }
.prof .credenciales { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--hair); }
.prof .credenciales div { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); line-height: 1.9; }
.prof .credenciales b { display: block; font-family: var(--serif); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--tinta); font-weight: 600; }
@media (max-width: 820px) { .prof { grid-template-columns: 1fr; gap: 30px; } .prof .retrato { max-width: 240px; } }

/* =================== FICHA DE CURSO =================== */
.ficha-hero { background: var(--azul-prof); color: var(--papel); position: relative; overflow: hidden; }
.ficha-hero .fondo { position: absolute; inset: 0; }
.ficha-hero .fondo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); opacity: .42; }
.ficha-hero .fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, var(--azul-prof) 20%, rgba(21,40,61,.74) 58%, rgba(43,97,128,.34)); }
.ficha-hero .in { position: relative; z-index: 2; padding-block: 46px 58px; }
.ficha-hero .volver { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-2); display: inline-block; margin-bottom: 44px; }
.ficha-hero .volver:hover { color: var(--papel-3); }
.ficha-hero .cab { display: flex; gap: 18px; align-items: baseline; margin-bottom: 22px; flex-wrap: wrap; }
.ficha-hero h1 { color: var(--papel-3); font-size: clamp(38px, 6.6vw, 86px); line-height: .92; letter-spacing: -.042em; max-width: 15ch; }
.ficha-hero .sub { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 2.1vw, 22px); color: rgba(241,234,222,.68); margin: 24px 0 0; max-width: 52ch; }

.rieles { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(241,234,222,.22); margin-top: 46px; }
.rieles > div { padding: 20px 22px 4px 0; }
.rieles dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); margin-bottom: 8px; }
.rieles dd { margin: 0; font-size: 15px; color: var(--papel); line-height: 1.4; }
@media (max-width: 760px) { .rieles { grid-template-columns: 1fr 1fr; } }

.ficha-cuerpo { display: grid; grid-template-columns: 1fr 340px; gap: 76px; padding-block: 82px 100px; align-items: start; }
@media (max-width: 1000px) { .ficha-cuerpo { grid-template-columns: 1fr; gap: 44px; padding-block: 50px 70px; } }

.entrada { font-size: 20px; line-height: 1.78; color: var(--tinta); max-width: 62ch; }
.entrada::first-letter {
  float: left; font-family: var(--disp); font-size: 78px; line-height: .76;
  color: var(--azul); margin: 10px 14px 0 0; font-weight: 700;
}

.programa { margin-top: 66px; }
.programa .enc { display: flex; align-items: baseline; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--tinta); flex-wrap: wrap; }
.programa .enc h2 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.03em; }
.programa .enc .cnt { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); margin-left: auto; }
.mod { border-bottom: 1px solid var(--hair); }
.mod > button { width: 100%; display: grid; grid-template-columns: 62px 1fr 26px; gap: 22px; align-items: start; padding: 24px 0; text-align: left; }
.mod .num { font-family: var(--disp); font-size: 26px; color: #96845f; line-height: 1; padding-top: 2px; transition: color .35s; }
.mod.open .num, .mod:hover .num { color: var(--azul); }
.mod .tt { font-family: var(--disp); font-size: clamp(19px, 2.2vw, 25px); color: var(--azul-prof); letter-spacing: -.022em; line-height: 1.16; }
.mod .et { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--celeste-osc); display: block; margin-bottom: 9px; }
.mod .sg { font-family: var(--disp); font-size: 22px; color: #96845f; text-align: right; line-height: 1; transition: transform .35s, color .35s; }
.mod.open .sg { transform: rotate(45deg); color: var(--azul); }
.mod .det { padding: 0 0 28px 84px; font-size: 16px; color: var(--tinta-2); line-height: 1.8; max-width: 66ch; }
@media (max-width: 640px) { .mod > button { grid-template-columns: 40px 1fr 20px; gap: 14px; } .mod .det { padding-left: 54px; } }

.mira {
  margin-top: 66px; padding: 46px 46px 46px 52px; border-radius: 16px; background: var(--azul-prof); color: rgba(241,234,222,.8);
  position: relative; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.72;
}
.mira::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--oro); }
.mira .lbl { margin-bottom: 18px; color: var(--oro); }
.mira p { margin: 0; color: rgba(241,234,222,.84); }

.inscr { position: sticky; top: 96px; background: var(--papel-3); border-radius: 18px; overflow: hidden; box-shadow: 0 3px 8px rgba(21,40,61,.08), 0 26px 54px -22px rgba(21,40,61,.36); }
.inscr .cabecera { background: var(--azul-prof); color: var(--papel); padding: 26px 26px 24px; }
.inscr .cabecera .lbl { color: var(--oro-2); margin-bottom: 14px; }
.inscr .precio { font-family: var(--disp); font-size: 46px; color: var(--papel-3); line-height: 1; letter-spacing: -.035em; }
.inscr .precio small { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: rgba(241,234,222,.64); }
.inscr .alt { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: rgba(241,234,222,.64); margin: 12px 0 0; }
.inscr .cuerpo { padding: 24px 26px 28px; }
.pais-sel { display: flex; border: 1px solid var(--hair); margin-bottom: 20px; border-radius: 100px; overflow: hidden; }
.pais-sel button { flex: 1; padding: 11px 4px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); transition: .25s; }
.pais-sel button.on { background: var(--azul-prof); color: var(--oro-2); }
.pais-sel button:not(.on):hover { background: var(--papel-2); }
.pay-stack { display: grid; gap: 10px; }
.pay-btn { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--hair); background: #fff; text-align: left; transition: .28s; border-radius: 14px; box-shadow: 0 1px 2px rgba(21,40,61,.05); }
.pay-btn:hover { border-color: var(--azul); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(21,40,61,.09), 0 14px 28px -12px rgba(21,40,61,.3); }
.pay-btn.rec { border-color: var(--azul); }
.pay-btn .logo {
  width: 42px; height: 42px; flex: none; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; background: #fff; border: 1px solid var(--hair);
}
.pay-btn .logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.pay-btn .logo img + i { display: none; }   /* si el logo cargó, la sigla de respaldo sobra */
.pay-btn .logo i {                          /* respaldo: cuadro con la sigla en el color de la marca */
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--mono); font-size: 11px; font-weight: 600; font-style: normal; letter-spacing: .04em;
}
.pay-btn .logo.mp i { background: #00b1ea; color: #06344a; }
.pay-btn .logo.pp i { background: #003087; color: #fff; }

/* ícono de WhatsApp dentro de los botones verdes */
.ico-wa { width: 18px; height: 18px; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; }
.ico-wa img { width: 100%; height: 100%; object-fit: contain; }
/* Sin imagen adentro no tiene sentido pintar el círculo blanco vacío. */
.ico-wa:empty { display: none; }
.pay-btn .txt { flex: 1; }
.pay-btn .txt b { display: block; font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--tinta); }
.pay-btn .txt span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--tinta-3); margin-top: 3px; }
.pay-btn .rec-tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; color: var(--azul); flex: none; }
.sep-o { display: flex; align-items: center; gap: 14px; margin: 22px 0; }
.sep-o i { flex: 1; height: 1px; background: var(--hair); }
.sep-o span { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); }
.inscr .nota { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; line-height: 1.9; color: var(--tinta-3); margin: 16px 0 0; text-align: center; }
.inscr .sello-ok { width: 58px; height: 58px; border: 1px solid var(--verde); color: var(--verde); display: grid; place-items: center; font-size: 22px; margin: 0 auto 18px; border-radius: 50%; }

/* =================== MODAL =================== */
.overlay { position: fixed; inset: 0; z-index: 200; background: rgba(21,40,61,.82); display: grid; place-items: center; padding: 20px; overflow-y: auto; backdrop-filter: blur(6px); animation: fd .25s ease; }
@keyframes fd { from { opacity: 0 } }
.modal { background: var(--papel-2); width: 100%; max-width: 470px; margin: auto; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(21,40,61,.6); animation: up .34s cubic-bezier(.16,.8,.24,1); }
@keyframes up { from { transform: translateY(18px); opacity: 0 } }
.modal .mhead { background: var(--azul-prof); color: var(--papel); padding: 26px 30px 24px; position: relative; }
.modal .mhead .lbl { color: var(--oro-2); margin-bottom: 12px; }
.modal .mhead h3 { color: var(--papel-3); font-size: 26px; letter-spacing: -.028em; }
.modal .mhead p { margin: 12px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: rgba(241,234,222,.55); }
.modal .mhead .x { position: absolute; top: 18px; right: 22px; font-size: 22px; color: rgba(241,234,222,.64); line-height: 1; }
.modal .mhead .x:hover { color: var(--oro-2); }
.modal .mbody { padding: 28px 30px 30px; }
.field { margin-bottom: 17px; }
.field label { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--hair);
  font-family: var(--serif); font-size: 16px; background: transparent; color: var(--tinta); transition: border-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--azul); }
.field .hint { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--tinta-3); margin: 7px 0 0; }
.field.err input, .field.err textarea, .field.err select { border-color: var(--rojo); }
.field.err .hint { color: var(--rojo); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mail-prev { border: 1px solid var(--hair); background: var(--papel-3); margin-top: 22px; }
.mail-prev .mp-h { padding: 12px 16px; border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--celeste-osc); word-break: break-word; }
.mail-prev .mp-b { padding: 16px; color: var(--tinta-2); line-height: 1.8; font-size: 14px; }
.mail-prev .mp-b strong { color: var(--azul-prof); }
.spin { width: 34px; height: 34px; border: 1px solid var(--hair); border-top-color: var(--azul); border-radius: 50%; animation: sp .9s linear infinite; margin: 10px auto 20px; }
@keyframes sp { to { transform: rotate(360deg) } }

/* =================== AULA =================== */
.aula-barra { background: var(--azul-prof); color: var(--papel); padding: 26px 0 24px; border-bottom: 1px solid rgba(241,234,222,.16); }
.aula-barra .in { display: flex; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.aula-barra h1 { color: var(--papel-3); font-size: clamp(24px, 3.4vw, 36px); letter-spacing: -.03em; flex: 1; min-width: 240px; }
.aula-barra .lbl { color: var(--oro-2); margin-bottom: 11px; }
.prog { min-width: 210px; }
.prog .bar { height: 2px; background: rgba(241,234,222,.2); }
.prog .bar i { display: block; height: 100%; background: var(--oro-2); transition: width .6s cubic-bezier(.16,.8,.24,1); }
.prog .lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: rgba(241,234,222,.55); margin-top: 10px; }

.aula-layout { display: grid; grid-template-columns: 1fr 320px; gap: 52px; padding-block: 44px 86px; align-items: start; }
@media (max-width: 1000px) { .aula-layout { grid-template-columns: 1fr; gap: 36px; } }

.player-wrap { background: var(--azul-prof); aspect-ratio: 16/9; position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 4px 12px rgba(21,40,61,.14), 0 28px 56px -24px rgba(21,40,61,.44); }
.player-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; text-align: left; }
.poster img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.56); transition: filter .8s ease, transform 1.1s cubic-bezier(.16,.8,.24,1); }
.poster:hover img { filter: grayscale(.3) contrast(1.05) brightness(.62); transform: scale(1.03); }
.poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(21,40,61,.94) 4%, rgba(21,40,61,.28) 54%, rgba(43,97,128,.22)); }
.poster .p-mid { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; display: grid; justify-items: center; gap: 18px; }
.poster .p-play { width: 90px; height: 90px; border-radius: 50%; border: 1px solid rgba(241,234,222,.64); display: grid; place-items: center; color: var(--papel); font-size: 20px; padding-left: 4px; transition: .42s cubic-bezier(.16,.8,.24,1); }
.poster:hover .p-play { background: var(--azul); border-color: var(--azul); color: var(--papel-3); transform: scale(1.06); }
.poster .p-ver { font-family: var(--mono); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(241,234,222,.8); }
.poster .p-bot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 32px; }
.poster .p-et { font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-2); margin-bottom: 12px; }
.poster .p-tit { font-family: var(--disp); font-size: clamp(20px, 2.7vw, 32px); color: var(--papel-3); line-height: 1.08; margin: 0; letter-spacing: -.03em; }
.poster .p-meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(241,234,222,.55); margin-top: 14px; }
.poster .p-vimeo { position: absolute; top: 22px; right: 26px; z-index: 2; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(241,234,222,.55); }
.poster .p-vimeo b { color: #4fc3ea; font-weight: 500; }
@media (max-width: 600px) { .poster .p-play { width: 62px; height: 62px; font-size: 15px; } .poster .p-bot { padding: 18px 20px; } }

.player-pie { display: flex; gap: 14px; align-items: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; line-height: 1.9; color: var(--tinta-3); margin-top: 18px; padding-bottom: 26px; border-bottom: 1px solid var(--hair); }
.player-pie b { color: var(--tinta-2); font-weight: 500; }
.clase-txt { margin-top: 34px; }
.clase-txt .lbl { margin-bottom: 16px; }
.clase-txt p { font-size: 17px; line-height: 1.82; color: var(--tinta-2); max-width: 64ch; }
.clase-nav { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

.riel { margin-bottom: 40px; }
.riel > h4 { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-3); padding-bottom: 14px; border-bottom: 1px solid var(--tinta); margin: 0; font-weight: 500; }
.clase-list { list-style: none; margin: 0; padding: 0; }
.clase-list li { border-bottom: 1px solid var(--hair); }
.clase-list button { width: 100%; display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 16px 0; text-align: left; align-items: start; }
.clase-list button:hover .t { color: var(--azul); }
.clase-list li.on .t { color: var(--azul); }
.clase-list .n { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--tinta-3); padding-top: 3px; }
.clase-list li.seen .n { color: var(--verde); }
.clase-list li.on .n { color: var(--azul); }
.clase-list .t { display: block; font-family: var(--serif); font-size: 14.5px; font-weight: 600; color: var(--tinta); line-height: 1.45; transition: color .25s; }
.clase-list .f { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin-top: 6px; }
.mat-list { list-style: none; margin: 0; padding: 0; }
.mat-list li { border-bottom: 1px solid var(--hair); }
.mat-list a { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 15px 0; align-items: start; }
.mat-list a:hover .tx { color: var(--azul); }
.mat-list .ic { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; color: var(--tinta-3); border: 1px solid var(--hair); padding: 3px 0; text-align: center; }
.mat-list .ic.pdf { color: var(--azul); border-color: rgba(26,85,128,.45); }
.mat-list .ic.link { color: var(--celeste-osc); border-color: rgba(43,97,128,.45); }
.mat-list .tx { display: block; font-size: 14px; font-weight: 600; color: var(--tinta); line-height: 1.45; transition: color .25s; }
.mat-list .mt { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: var(--tinta-3); margin-top: 5px; }
.aviso { padding: 16px 0; border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--tinta-2); line-height: 1.7; }
.aviso .fecha { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--celeste-osc); margin-bottom: 7px; }
/* Un "se cancela la clase del jueves" no puede tener el mismo peso visual que
   "subí el PDF": el alumno tiene que distinguirlos de un vistazo. */
.aviso b { display: block; color: var(--tinta); font-size: 15px; font-weight: 600; }
.aviso .aviso-txt { display: block; margin-top: 6px; white-space: pre-line; }
.aviso-cambio, .aviso-cancelada { border-left: 2px solid var(--oro); padding-left: 16px; }
.aviso-cancelada { border-left-color: var(--rojo); }
.aviso-cambio .fecha, .aviso-cancelada .fecha { color: var(--oro); }
.aviso-cancelada .fecha { color: var(--rojo); }
/* El estado del envío de mails del panel: cambia mientras se manda. */
.aviso-envio { margin-top: 14px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--celeste-osc); }
.wa-box p { font-size: 14px; color: var(--tinta-2); margin: 16px 0; line-height: 1.7; }
.aula-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 52px; padding-top: 44px; border-top: 1px solid var(--hair); }
@media (max-width: 760px) { .aula-extra { grid-template-columns: 1fr; gap: 30px; } }

/* =================== CUESTIONARIO =================== */
.quiz-band { background: var(--azul-prof); padding: 92px 0 100px; }
.quiz-card { max-width: 820px; margin: 0 auto; }
.quiz-head { text-align: center; padding-bottom: 40px; border-bottom: 1px solid rgba(241,234,222,.2); }
.quiz-head .lbl { color: var(--oro); margin-bottom: 20px; }
.quiz-head h2 { color: var(--papel-3); font-size: clamp(34px, 5.4vw, 62px); letter-spacing: -.04em; }
.quiz-head p { margin: 24px auto 0; color: rgba(241,234,222,.6); font-size: 16px; max-width: 50ch; line-height: 1.75; }
.quiz-body { padding-top: 40px; }
.q-prog { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
.q-prog .bar { flex: 1; height: 1px; background: rgba(241,234,222,.22); }
.q-prog .bar i { display: block; height: 1px; background: var(--oro-2); transition: width .5s cubic-bezier(.16,.8,.24,1); }
.q-prog .cnt { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: rgba(241,234,222,.64); white-space: nowrap; }
.q-block { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--celeste); margin-bottom: 18px; }
.q-text { font-family: var(--disp); font-size: clamp(24px, 3.4vw, 38px); line-height: 1.14; color: var(--papel-3); margin-bottom: 38px; letter-spacing: -.032em; max-width: 24ch; }
.opts { display: grid; gap: 0; border-top: 1px solid rgba(241,234,222,.18); }
.opt {
  display: grid; grid-template-columns: 40px 1fr; gap: 18px; align-items: start; width: 100%;
  padding: 20px 4px; border-bottom: 1px solid rgba(241,234,222,.18); text-align: left;
  font-family: var(--serif); font-size: 17px; line-height: 1.55; color: rgba(241,234,222,.82);
  transition: .3s cubic-bezier(.16,.8,.24,1);
}
.opt:hover:not(:disabled) { padding-left: 16px; color: var(--papel-3); background: rgba(241,234,222,.05); }
.opt .letra { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--oro); padding-top: 4px; }
.opt.ok { color: var(--papel-3); background: rgba(21,122,74,.16); }
.opt.ok .letra { color: #4fd493; }
.opt.bad { color: rgba(241,234,222,.55); background: rgba(165,32,23,.14); }
.opt.bad .letra { color: #e86a60; }
.opt:disabled { cursor: default; }
.exp { margin-top: 30px; padding-left: 24px; border-left: 1px solid var(--oro); font-size: 16px; color: rgba(241,234,222,.7); line-height: 1.8; animation: sl .3s ease; }
@keyframes sl { from { opacity: 0; transform: translateY(-8px) } }
.exp b { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-2); margin-bottom: 12px; }
.exp b.mal { color: #e86a60; }
.quiz-foot { margin-top: 36px; display: flex; justify-content: flex-end; }

.score { text-align: center; padding: 20px 0 10px; }
.score .cifra { font-family: var(--disp); font-size: clamp(90px, 16vw, 180px); color: var(--papel-3); line-height: .86; letter-spacing: -.06em; margin: 0; }
.score .cifra small { font-size: .28em; color: rgba(241,234,222,.6); letter-spacing: -.02em; }
.score .rango { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--oro-2); margin: 26px 0 0; }
.score .msg { font-size: 17px; color: rgba(241,234,222,.62); margin: 22px auto 34px; max-width: 46ch; line-height: 1.75; }
.rev { text-align: left; margin-top: 44px; padding-top: 34px; border-top: 1px solid rgba(241,234,222,.2); }
.rev h4 { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: rgba(241,234,222,.64); margin-bottom: 10px; font-weight: 500; }
.rev-item { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(241,234,222,.14); }
.rev-item .dot { font-family: var(--mono); font-size: 12px; padding-top: 2px; }
.rev-item .dot.ok { color: #4fd493; }
.rev-item .dot.bad { color: #e86a60; }
.rev-item .qq { display: block; color: rgba(241,234,222,.85); line-height: 1.6; font-size: 15px; }
.rev-item .aa { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: rgba(241,234,222,.62); margin-top: 7px; line-height: 1.7; }

/* =================== PANEL =================== */
.admin-barra { background: var(--azul-prof); padding: 30px 0 28px; }
.admin-barra .in { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.admin-barra h1 { color: var(--papel-3); font-size: 32px; flex: 1; min-width: 220px; letter-spacing: -.03em; }
.admin-barra .lbl { color: var(--oro-2); margin-bottom: 11px; }
.aviso-panel { border-left: 2px solid var(--azul); padding: 18px 0 18px 24px; margin: 40px 0 0; font-size: 16px; color: var(--tinta-2); line-height: 1.75; max-width: 80ch; }
.aviso-panel b { color: var(--azul-prof); }
.tabs { display: flex; gap: 8px; margin: 34px 0 38px; flex-wrap: wrap; padding: 6px; background: rgba(21,40,61,.05); border-radius: 100px; width: fit-content; max-width: 100%; }
.tabs button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2); padding: 11px 22px; border-radius: 100px; transition: .24s cubic-bezier(.16,.8,.24,1);
  white-space: nowrap;
}
.tabs button.on { background: var(--azul); color: var(--papel-3); box-shadow: 0 2px 5px rgba(21,40,61,.14), 0 8px 18px -8px rgba(26,85,128,.5); }
.tabs button:hover:not(.on) { background: var(--papel-3); color: var(--azul-prof); }
.tabs-sel { display: none; }
@media (max-width: 820px) {
  .tabs { display: none; }
  .tabs-sel {
    display: block; width: 100%; margin: 22px 0 26px; padding: 15px 44px 15px 18px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--papel-3); background: var(--azul); border: 0; border-radius: 100px;
    box-shadow: 0 2px 6px rgba(21,40,61,.16), 0 10px 22px -10px rgba(26,85,128,.5);
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23fffdf8' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 20px center;
  }
  .tabs-sel:focus { outline: 2px solid var(--oro); outline-offset: 2px; }
  .tabs-sel option { color: var(--tinta); background: var(--papel-3); }
}
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
@media (max-width: 980px) { .panel-grid { grid-template-columns: 1fr; gap: 40px; } }
.box h3 { font-size: 24px; letter-spacing: -.025em; margin-bottom: 10px; }
.box .bsub { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; line-height: 1.9; color: var(--tinta-3); margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--hair); }
.box .bsub b { color: var(--tinta); font-weight: 500; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th { text-align: left; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); padding: 0 14px 12px 0; border-bottom: 1px solid var(--tinta); white-space: nowrap; font-weight: 500; }
table.tbl td { padding: 15px 14px 15px 0; border-bottom: 1px solid var(--hair); color: var(--tinta-2); vertical-align: top; }
table.tbl tbody tr:hover td { color: var(--tinta); }
.pill { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border: 1px solid; white-space: nowrap; border-radius: 100px; }
.pill.web { color: var(--celeste-osc); border-color: rgba(116,179,216,.6); }
.pill.wa { color: #11603a; border-color: rgba(17,96,58,.5); }
.pill.mp { color: var(--celeste-osc); border-color: rgba(116,179,216,.6); }
.pill.pp { color: #003087; border-color: rgba(0,48,135,.35); }
.pill.oro { color: #7d6018; border-color: rgba(138,106,28,.5); }
.vid-slot { display: grid; grid-template-columns: 26px 1fr 76px; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.vid-slot .n { font-family: var(--mono); font-size: 10px; color: var(--oro); letter-spacing: .1em; }
.vid-slot .info .t { font-size: 14.5px; font-weight: 600; color: var(--tinta); }
.vid-slot .info input { width: 100%; margin-top: 8px; padding: 7px 0; border: 0; border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 11.5px; background: transparent; color: var(--tinta-2); }
.vid-slot .info input:focus { outline: 0; border-color: var(--azul); }
.vid-slot .st { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-align: right; }
.drop { display: block; border: 1px dashed var(--hair); border-radius: 14px; padding: 30px; text-align: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); cursor: pointer; transition: .25s; }
.drop:hover { border-color: var(--azul); color: var(--azul); }
.drop b { display: block; font-family: var(--serif); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--tinta); margin-bottom: 7px; font-weight: 600; }
.toast {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  background: var(--azul-prof); color: var(--oro-2); padding: 18px var(--gut);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  transform: translateY(100%); transition: transform .4s cubic-bezier(.16,.8,.24,1); text-align: center;
}
.toast.show { transform: translateY(0); }

/* =================== PIE =================== */
footer.site { background: var(--azul-prof); color: rgba(241,234,222,.55); padding: 86px 0 44px; }
footer.site .fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 50px; padding-bottom: 52px; border-bottom: 1px solid rgba(241,234,222,.16); }
footer.site h3 { color: var(--papel-3); font-size: 34px; letter-spacing: -.03em; margin-bottom: 18px; }
footer.site h3 em { font-style: italic; font-weight: 400; color: var(--oro-2); }
footer.site .lbl { color: rgba(241,234,222,.6); margin-bottom: 16px; }
footer.site .tel { font-family: var(--disp); font-size: 27px; color: var(--papel-3); margin: 0 0 20px; letter-spacing: -.02em; }
footer.site .col p { font-size: 14px; line-height: 1.8; margin: 0 0 8px; }
footer.site .col a:not(.btn):hover { color: var(--oro-2); }
footer.site .pie { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(241,234,222,.58); }
footer.site .pie a { color: var(--oro); }
@media (max-width: 820px) { footer.site .fgrid { grid-template-columns: 1fr; gap: 34px; } }

.tabl-scroll { overflow-x: auto; }
@media (max-width: 980px) { nav.main { display: none; } .inscr { position: static; } }

/* los ítems de grilla deben poder achicarse */
.mod > button > span, .fila > *, .clase-list button > span, .mat-list a > span,
.rieles > div, .vid-slot > span, .rev-item > span, .opt > span { min-width: 0; }
.mod .tt, .fila .tit, .clase-list .t, .mat-list .tx, .q-text { overflow-wrap: anywhere; }

/* el signo del acordeón nunca desborda su columna */
.mod .sg { width: 100%; overflow: hidden; }

/* =========================================================
   MOBILE — versión compacta
   ========================================================= */
@media (max-width: 820px) {
  section.sec { padding: 42px 0; }
  .sec-head { margin-bottom: 26px; padding-bottom: 16px; gap: 10px; }
  .sec-head h2 { font-size: clamp(27px, 8vw, 36px); }
  .sec-head .dcha { display: none; }          /* el texto de apoyo no aporta en pantalla chica */
  .sec-head > div[style] { gap: 10px !important; display: block !important; }

  /* portada */
  .portada .txt { padding: 36px 0 30px; }
  .portada .kicker { margin-bottom: 22px; }
  .portada .kicker i { width: 30px; }
  .portada h1 { font-size: clamp(44px, 13vw, 62px); }
  .portada h1 em { font-size: clamp(22px, 6vw, 30px); margin-top: 10px; }
  .portada .bajada { font-size: 15px; margin-top: 22px; padding-left: 16px; line-height: 1.65; }
  .portada .acc { margin-top: 26px; gap: 12px; }
  .portada .acc .btn { flex: 1; padding-inline: 16px; }
  .portada .dato { margin-top: 30px; gap: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
  .portada .dato div { min-width: 0; padding-top: 9px; }
  .portada .dato .n { font-size: 24px; }
  .portada .dato .t { font-size: 8px; letter-spacing: .12em; margin-top: 4px; }
  .portada .mosaico { grid-template-rows: 82px; }

  /* índice */
  .fila { padding: 14px 0; gap: 4px 14px; }
  .fila .mini { width: 78px; border-radius: 8px; }
  .fila .tit { font-size: 17px; line-height: 1.2; }
  .fila .meta { font-size: 9.5px; }
  .fila .meta b { margin-bottom: 2px; }
  .pill-acc, .pill-nuevo { margin-top: 5px; padding: 2px 8px; font-size: 8px; }

  /* archivo */
  .archivo-grid { gap: 20px; }
  .archivo-grid h3 { font-size: 25px; }
  .archivo-grid p { font-size: 14.5px; line-height: 1.65; }
  .archivo-grid .precio-mini { margin: 16px 0 16px; padding-top: 12px; }

  /* planes: carrusel horizontal en vez de tres bloques apilados */
  .planes {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    border: 0; border-radius: 0; box-shadow: none; gap: 14px;
    margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut) ;
    padding-bottom: 6px; scrollbar-width: none;
  }
  .planes::-webkit-scrollbar { display: none; }
  .plan {
    flex: 0 0 76%; scroll-snap-align: center; border: 1px solid var(--hair);
    border-radius: 16px; padding: 26px 22px; border-bottom: 1px solid var(--hair);
  }
  .plan.dest { border-color: var(--azul-prof); }
  .plan ul { margin: 18px 0 20px; }
  .plan li { font-size: 13.5px; padding: 7px 0; }
  .desliza { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
             text-transform: uppercase; color: var(--tinta-3); margin-top: 14px; text-align: center; }

  /* profesora */
  .prof { gap: 20px; }
  .prof .retrato { max-width: 130px; }
  .prof h2 { font-size: 32px; margin: 10px 0 14px; }
  .prof p { font-size: 15px; line-height: 1.7; }
  .prof .credenciales { gap: 8px 22px; margin-top: 18px; padding-top: 16px; }
  .prof .credenciales div { font-size: 8.5px; line-height: 1.6; }
  .prof .credenciales b { font-size: 12.5px; }

  /* ficha de curso */
  .ficha-hero .in { padding-block: 26px 30px; }
  .ficha-hero .volver { margin-bottom: 22px; }
  .ficha-hero h1 { font-size: clamp(30px, 9vw, 42px); }
  .ficha-hero .sub { font-size: 15.5px; margin-top: 14px; }
  .rieles { margin-top: 24px; }
  .rieles > div { padding: 13px 14px 2px 0; }
  .rieles dt { font-size: 8.5px; margin-bottom: 4px; }
  .rieles dd { font-size: 13.5px; }
  .ficha-cuerpo { padding-block: 32px 44px; gap: 30px; }
  .entrada { font-size: 16px; line-height: 1.7; }
  .entrada::first-letter { float: none; font-size: inherit; color: var(--azul); margin: 0; }
  .programa { margin-top: 34px; }
  .programa .enc { padding-bottom: 12px; }
  .programa .enc .cnt { margin-left: 0; width: 100%; margin-top: 4px; }
  .mod > button { padding: 15px 0; }
  .mod .tt { font-size: 16.5px; }
  .mod .et { font-size: 8.5px; margin-bottom: 5px; }
  .mod .det { font-size: 14.5px; line-height: 1.7; padding-bottom: 20px; }
  .mira { margin-top: 34px; padding: 26px 22px 26px 26px; font-size: 16px; }

  /* aula */
  .aula-barra { padding: 18px 0 16px; }
  .aula-barra .in { gap: 14px; }
  .aula-barra h1 { font-size: 23px; }
  .prog { min-width: 140px; flex: 1; }
  .aula-layout { padding-block: 22px 46px; gap: 26px; }
  .player-pie { font-size: 9px; line-height: 1.7; margin-top: 12px; padding-bottom: 16px; }
  .clase-txt { margin-top: 22px; }
  .clase-txt p { font-size: 15px; line-height: 1.7; }
  .clase-nav { margin-top: 22px; gap: 8px; }
  .clase-nav .btn { flex: 1; padding-inline: 10px; font-size: 9px; }
  .aula-extra { margin-top: 30px; padding-top: 26px; gap: 22px; }
  .riel { margin-bottom: 26px; }
  .clase-list button { padding: 12px 0; }
  .mat-list a { padding: 12px 0; }
  .aviso { padding: 12px 0; font-size: 13px; }

  /* cuestionario */
  .quiz-band { padding: 46px 0 52px; }
  .quiz-head { padding-bottom: 24px; }
  .quiz-head h2 { font-size: clamp(30px, 9vw, 42px); }
  .quiz-head p { font-size: 14.5px; margin-top: 16px; }
  .quiz-body { padding-top: 24px; }
  .q-prog { margin-bottom: 24px; }
  .q-text { font-size: clamp(21px, 6vw, 27px); margin-bottom: 24px; max-width: none; }
  .opt { padding: 15px 2px; font-size: 15.5px; grid-template-columns: 28px 1fr; gap: 12px; }
  .exp { margin-top: 20px; font-size: 14.5px; padding-left: 16px; }
  .score .cifra { font-size: clamp(76px, 24vw, 110px); }
  .score .msg { font-size: 15px; margin-bottom: 24px; }
  .rev { margin-top: 30px; padding-top: 24px; }
  .rev-item { padding: 12px 0; }
  .rev-item .qq { font-size: 14px; }

  /* panel */
  .admin-barra { padding: 20px 0 18px; }
  .aviso-panel { margin-top: 24px; font-size: 14.5px; padding: 12px 0 12px 18px; }
  .tabs { gap: 20px; margin: 24px 0 24px; }
  .tabs button { font-size: 9.5px; padding-bottom: 12px; }
  .panel-grid { gap: 30px; }
  .box h3 { font-size: 21px; }
  .box .bsub { margin-bottom: 18px; padding-bottom: 12px; }

  /* pie */
  footer.site { padding: 44px 0 28px; }
  footer.site .fgrid { gap: 26px; padding-bottom: 28px; }
  footer.site h3 { font-size: 27px; margin-bottom: 12px; }
  footer.site .col p { font-size: 13px; line-height: 1.7; }
  footer.site .tel { font-size: 22px; margin-bottom: 14px; }
  footer.site .pie { padding-top: 18px; font-size: 8.5px; }
}

@media (max-width: 820px) {
  .top-in { height: 58px; gap: 12px; }
  .brand { gap: 0; }
  .brand .mono { font-size: 17px; white-space: nowrap; }
  .brand .sub { display: none; }
  /* En el celular el encabezado no entra con las tres cosas: la consulta por
     WhatsApp ya está en la burbuja flotante y al pie, así que la que queda es
     la moneda, que es la que cambia los precios de toda la página. */
  .top-in > .btn-prof { display: none; }
  .moneda { margin-left: auto; }
  .moneda button { padding: 8px 11px; font-size: 9px; letter-spacing: .08em; }
  .portada .acc .btn { font-size: 9.5px; letter-spacing: .12em; }
}

/* =========================================================
   CUESTIONARIO EN POPUP (uno por clase)
   ========================================================= */
.modal.modal-quiz {
  max-width: 640px; background: var(--azul-prof); color: rgba(241,234,222,.82);
  box-shadow: 0 40px 90px -24px rgba(21,40,61,.75);
}
.quiz-pop { position: relative; }
.quiz-pop .x {
  position: absolute; top: 14px; right: 18px; z-index: 3; font-size: 24px; line-height: 1;
  color: rgba(241,234,222,.62);
}
.quiz-pop .x:hover { color: var(--oro-2); }
.qp-head { padding: 34px 34px 26px; text-align: center; border-bottom: 1px solid rgba(241,234,222,.18); }
.qp-head h3 { color: var(--papel-3); font-size: 27px; letter-spacing: -.03em; margin-top: 14px; }
.qp-sub { margin: 16px auto 0; font-size: 15px; color: rgba(241,234,222,.6); max-width: 44ch; line-height: 1.7; }
.qp-body { padding: 30px 34px 34px; }
.qp-acc { display: flex; gap: 10px; margin-top: 26px; }
.qp-acc .btn { flex: 1; }
.modal-quiz .q-text { max-width: none; font-size: clamp(21px, 3vw, 29px); margin-bottom: 26px; }
.modal-quiz .score { padding: 6px 0 4px; }
.modal-quiz .score .cifra { font-size: clamp(64px, 14vw, 92px); }
.modal-quiz .score .msg { font-size: 15.5px; margin-bottom: 6px; }
.modal-quiz .rev { margin-top: 26px; padding-top: 22px; }
.modal-quiz .opt { font-size: 16px; padding: 17px 2px; }
.modal-quiz .exp { font-size: 15px; }
@media (max-width: 560px) {
  .qp-head { padding: 26px 20px 20px; }
  .qp-body { padding: 22px 20px 26px; }
  .qp-acc { flex-direction: column; }
}

/* botón de demo bajo el reproductor */
.simular {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--azul); border: 1px dashed var(--azul); border-radius: 100px;
  padding: 5px 12px; margin-left: auto; flex: none; align-self: flex-start; transition: .22s;
}
.simular:hover { background: var(--azul); color: var(--papel-3); border-style: solid; }

/* =================== TARJETAS DE CUESTIONARIO EN EL AULA =================== */
.cuest-head { display: flex; align-items: end; gap: 34px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid rgba(241,234,222,.2); margin-bottom: 28px; }
.cuest-head h2 { color: var(--papel-3); font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.035em; margin-top: 12px; }
.cuest-sub { margin: 0 0 4px auto; max-width: 38ch; font-size: 15px; color: rgba(241,234,222,.58); line-height: 1.7; }
.cuest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cuest-card {
  display: grid; gap: 10px; text-align: left; padding: 22px 20px 20px;
  border: 1px solid rgba(241,234,222,.22); border-radius: 14px; background: rgba(241,234,222,.04);
  transition: .28s cubic-bezier(.16,.8,.24,1); align-content: start;
}
.cuest-card:hover:not(:disabled) { background: rgba(241,234,222,.09); border-color: var(--oro); transform: translateY(-3px); }
.cuest-card:disabled { opacity: .38; cursor: not-allowed; }
.cuest-card .cc-n { font-family: var(--disp); font-size: 26px; color: var(--oro); line-height: 1; }
.cuest-card .cc-t { font-family: var(--serif); font-size: 14.5px; font-weight: 600; color: var(--papel-3); line-height: 1.4; min-height: 0; }
.cuest-card .cc-e { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(241,234,222,.64); }
.cuest-card.hecho { border-color: rgba(21,122,74,.6); background: rgba(21,122,74,.12); }
.cuest-card.hecho .cc-n { color: #4fd493; }
.cuest-card.hecho .cc-e { color: #4fd493; }
@media (max-width: 880px) { .cuest-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) {
  .cuest-head { gap: 12px; padding-bottom: 14px; margin-bottom: 18px; }
  .cuest-sub { display: none; }
  .cuest-grid { gap: 10px; }
  .cuest-card { padding: 16px 14px 14px; gap: 7px; }
  .cuest-card .cc-n { font-size: 21px; }
  .cuest-card .cc-t { font-size: 13px; }
  .simular { margin-left: 0; }
}

/* =================== GENERACIÓN ASISTIDA =================== */
.ia-box { border: 1px solid var(--azul); border-radius: 16px; padding: 24px; background: rgba(26,85,128,.04); }
.ia-head { margin-bottom: 18px; }
.ia-head h4 { font-family: var(--disp); font-size: 21px; letter-spacing: -.024em; color: var(--azul-prof); margin: 10px 0 8px; }
.ia-sub { font-size: 14px; color: var(--tinta-2); line-height: 1.65; margin: 0; }
.ia-sub b { color: var(--azul); }
.ia-box textarea { font-family: var(--serif); font-size: 14px; line-height: 1.6; }
.ia-load { display: flex; align-items: center; gap: 8px; padding: 20px 0 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.ia-load span:last-child { margin-left: 6px; }
.ia-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--azul); animation: pulso 1.1s infinite ease-in-out; }
.ia-dot:nth-child(2) { animation-delay: .18s; }
.ia-dot:nth-child(3) { animation-delay: .36s; }
@keyframes pulso { 0%, 80%, 100% { opacity: .25; transform: scale(.8) } 40% { opacity: 1; transform: scale(1) } }
.ia-res { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.ia-res-t { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--azul); margin: 0 0 12px; }
.ia-item { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--hair-2); cursor: pointer; }
.ia-item:last-of-type { border-bottom: 0; }
.ia-item input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--azul); }
.ia-item .ia-q { display: block; font-size: 14.5px; color: var(--tinta); line-height: 1.5; }
.ia-item .ia-o { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: var(--tinta-3); margin-top: 5px; }
.ia-item:hover .ia-q { color: var(--azul); }
.ia-acc { display: flex; gap: 10px; margin-top: 16px; }
.ia-acc .btn { flex: 1; }
.ia-vacio { font-size: 13.5px; color: var(--tinta-2); line-height: 1.65; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--hair); }
@media (max-width: 560px) { .ia-box { padding: 18px; } .ia-acc { flex-direction: column; } }

/* nada dentro del panel puede empujar el ancho de la página */
.panel-grid > *, .box, .field, .row2 > *, .ia-box, .ia-item > span { min-width: 0; }
.field select, .field input, .field textarea { max-width: 100%; min-width: 0; }
.field select { text-overflow: ellipsis; }
.ia-item .ia-q, .ia-item .ia-o { overflow-wrap: anywhere; }

/* ---- área táctil: nada por debajo de 30px de alto en pantalla chica ---- */
@media (max-width: 820px) {
  .brand { padding-block: 8px; }
  footer.site .pie a { padding-block: 9px; }
  footer.site .col p a, footer.site .fine a, footer.site .pie a { display: inline-block; padding-block: 9px; }
  .ficha-hero .volver { padding-block: 7px; }
  table.tbl a { display: inline-block; padding-block: 7px; }
  .field label input[type=checkbox] { width: 20px; height: 20px; }
  .ia-item { padding: 15px 0; }
  .ia-item input { width: 19px; height: 19px; }
  .clase-list button, .mat-list a { min-height: 44px; }
}


/* ===================== AGREGADOS: suscripción, visor de material, panel ===================== */

/* plan contratado */
.plan.activo { background: var(--papel-3); box-shadow: inset 0 0 0 2px var(--verde); }
.plan.activo.dest { background: var(--azul-prof-2); }
.plan.activo .tag { color: var(--verde); }
.plan.activo.dest .tag { color: #8fd9ad; }

/* cursos habilitados por la suscripción */
.sub-lista { list-style: none; margin: 20px 0 0; padding: 0; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.sub-lista li { border-bottom: 1px solid var(--hair); }
.sub-lista li:last-child { border-bottom: 0; }
.sub-lista a { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 16px; background: var(--papel-3); }
.sub-lista a:hover { background: var(--papel); }
.sub-lista b { color: var(--azul-prof); font-weight: 600; font-size: 14.5px; }
.sub-lista span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--celeste-osc); white-space: nowrap; }
.sub-lista .mas { padding: 13px 16px; background: var(--papel-3); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--tinta-3); }

/* hoja de papel del visor de PDF */
.hoja { background: #fff; border: 1px solid var(--hair); border-radius: 6px; padding: 30px 28px 34px; box-shadow: 0 14px 30px -18px rgba(21,40,61,.4); }
.hoja .h-t { font-family: var(--disp); font-size: 23px; line-height: 1.2; color: var(--azul-prof); margin: 0; letter-spacing: -.02em; }
.hoja .h-s { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin: 10px 0 22px; border-bottom: 2px solid var(--oro); padding-bottom: 14px; }
.hoja .h-l { display: block; height: 9px; border-radius: 5px; background: var(--papel); margin-bottom: 11px; }
.hoja .h-l.c { width: 62%; }
.hoja .h-l.m { width: 40%; margin-bottom: 0; }

.visor-url { font-family: var(--mono); font-size: 12px; color: var(--celeste-osc); background: var(--papel); border: 1px solid var(--hair); border-radius: 8px; padding: 14px 16px; margin: 0 0 18px; word-break: break-all; }

/* exportaciones del panel */
.csv-prev { font-family: var(--mono); font-size: 11px; line-height: 1.9; color: var(--tinta-2); background: var(--papel); border: 1px solid var(--hair); border-radius: 8px; padding: 14px; margin: 0; max-height: 240px; overflow: auto; white-space: pre; }
.tel-box { width: 100%; font-family: var(--mono); font-size: 13px; line-height: 1.8; color: var(--tinta); background: var(--papel); border: 1px solid var(--hair); border-radius: 8px; padding: 14px; resize: vertical; }

/* listas de administración (archivo, avisos publicados) */
.arch-list { list-style: none; margin: 18px 0 0; padding: 0; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; }
.arch-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 15px; border-bottom: 1px solid var(--hair); background: var(--papel-3); font-size: 14px; color: var(--tinta-2); line-height: 1.6; }
.arch-list li:last-child { border-bottom: 0; }
.arch-list li b { color: var(--azul-prof); font-weight: 600; }
.arch-list button { flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--celeste-osc); border: 1px solid var(--hair); border-radius: 100px; padding: 8px 14px; background: var(--papel-2); }
.arch-list button:hover { background: var(--azul); color: var(--papel-3); border-color: var(--azul); }


/* ============ AGREGADOS: moneda, WhatsApp flotante ============ */

/* Selector de moneda del encabezado. En producción arranca según el país del visitante. */
.moneda.oculta { display: none; }

/* Utilitaria: esconde cualquier cosa. Antes sólo existía para el selector de
   moneda y para el nav, así que el link del pie al panel se veía siempre. */
.oculta { display: none !important; }
.moneda { display: flex; border: 1px solid var(--hair); border-radius: 100px; overflow: hidden; flex: none; }
.moneda button {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 13px; color: var(--tinta-3); background: var(--papel-3); white-space: nowrap; transition: background .25s, color .25s;
}
.moneda button + button { border-left: 1px solid var(--hair); }
.moneda button:hover { color: var(--azul-prof); background: var(--papel); }
.moneda button.on { background: var(--azul-prof); color: var(--papel-3); }

/* Burbuja de WhatsApp, solo en la portada */
.wa-float {
  position: fixed; right: 26px; bottom: 26px; z-index: 250;
  display: flex; align-items: center; gap: 11px;
  background: var(--verde); color: #fff; padding: 14px 20px 14px 16px; border-radius: 100px;
  box-shadow: 0 6px 16px -4px rgba(21,40,61,.3), 0 18px 40px -14px rgba(21,40,61,.55);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  transition: transform .3s cubic-bezier(.16,.8,.24,1), background .3s;
}
.wa-float:hover { background: #0f6b41; transform: translateY(-3px); color: #fff; }
.wa-float { min-width: 56px; min-height: 56px; justify-content: center; }
.wa-float .ico-wa { width: 22px; height: 22px; flex: none; }
.wa-float .ico-wa img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 820px) {
  .wa-float { right: 16px; bottom: 16px; padding: 14px; }
  /* Oculta sólo el texto del botón, no el ícono: `span` a secas también
     agarraba el <span class="ico-wa"> y dejaba la burbuja vacía en celular. */
  .wa-float > span:not(.ico-wa) { display: none; }
  .wa-float .ico-wa { width: 24px; height: 24px; }
}


/* ============ CATÁLOGO POR TEMA ============ */

/* Las dos puertas, dentro de la sección oscura del archivo */
.temas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.tema-card {
  display: block; border: 1px solid rgba(241,234,222,.2); border-radius: 18px; overflow: hidden;
  background: rgba(241,234,222,.04); transition: background .35s, border-color .35s, transform .35s cubic-bezier(.16,.8,.24,1);
}
.tema-card:hover { background: rgba(241,234,222,.09); border-color: var(--oro-2); transform: translateY(-4px); }
.tc-imgs { display: flex; gap: 2px; }
.tc-imgs .duo { flex: 1; min-width: 0; aspect-ratio: 4/3; overflow: hidden; }
.tc-imgs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-txt { display: block; padding: 28px 30px 30px; }
.tc-n { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-2); display: block; margin-bottom: 14px; }
.tc-t { font-family: var(--disp); font-weight: 700; font-size: clamp(25px, 3vw, 34px); color: var(--papel-3); letter-spacing: -.022em; line-height: 1.1; display: block; }
.tc-d { display: block; font-size: 15px; color: rgba(241,234,222,.7); line-height: 1.65; margin: 14px 0 22px; }
.tc-ver { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--celeste); display: block; }
.tema-card:hover .tc-ver { color: var(--oro-2); }
@media (max-width: 860px) { .temas { grid-template-columns: 1fr; gap: 20px; } .tc-txt { padding: 22px 22px 24px; } }

/* Cabecera de la página de cada tema */
.tema-hero { background: var(--azul-prof); color: var(--papel); padding-block: 54px 46px; }
.tema-hero .volver { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-2); display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 18px; }
.tema-hero .volver:hover { color: var(--papel-3); }
.tema-hero h1 { color: var(--papel-3); font-size: clamp(38px, 6vw, 68px); letter-spacing: -.03em; margin: 14px 0 0; }
.tema-hero .sub { font-family: var(--serif); font-size: clamp(15px, 2vw, 19px); color: rgba(241,234,222,.7); margin: 16px 0 0; max-width: 58ch; line-height: 1.6; }

.buscador { position: relative; max-width: 460px; margin: 34px 0 0; }
.buscador input {
  width: 100%; background: rgba(241,234,222,.08); border: 1px solid rgba(241,234,222,.26); border-radius: 100px;
  padding: 15px 20px 15px 48px; color: var(--papel-3); font-family: var(--serif); font-size: 15.5px;
}
.buscador input::placeholder { color: rgba(241,234,222,.5); }
.buscador input:focus { outline: none; border-color: var(--oro-2); background: rgba(241,234,222,.13); }
.buscador .lupa { position: absolute; left: 19px; top: 50%; transform: translateY(-52%); font-size: 21px; color: rgba(241,234,222,.6); pointer-events: none; }

.tema-tabs { display: flex; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.tema-tabs a {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 100px; border: 1px solid rgba(241,234,222,.26); color: rgba(241,234,222,.74);
  transition: background .25s, color .25s, border-color .25s;
}
.tema-tabs a:hover { border-color: var(--oro-2); color: var(--papel-3); }
.tema-tabs a.on { background: var(--oro); border-color: var(--oro); color: var(--azul-prof); }

.grupo-tit {
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--celeste-osc); margin: 0 0 6px; padding-top: 30px; line-height: 1.6;
}
.grupo-tit:first-child { padding-top: 0; }
.sin-result { text-align: center; padding: 60px 0 40px; font-size: 16px; color: var(--tinta-2); line-height: 2; }


/* ============ QUÉ INCLUYE (ficha del curso) ============ */
.incluye { margin: 46px 0 0; padding: 30px 32px; background: var(--papel-2); border: 1px solid var(--hair); border-radius: 14px; }
.incluye ul { list-style: none; margin: 16px 0 0; padding: 0; }
.incluye li { position: relative; padding: 9px 0 9px 28px; font-size: 15.5px; color: var(--tinta-2); line-height: 1.6; border-bottom: 1px solid var(--hair-2); }
.incluye li:last-child { border-bottom: 0; }
.incluye li::before { content: "✓"; position: absolute; left: 0; top: 9px; color: var(--verde); font-size: 14px; }
@media (max-width: 820px) { .incluye { padding: 22px 20px; margin-top: 34px; } .incluye li { font-size: 14.5px; } }

/* ============ IMÁGENES DEL PANEL ============ */
.drop-img { display: block; cursor: pointer; padding: 0; overflow: hidden; border-radius: 6px; }
.drop-img img { width: 100%; display: block; }
.drop-img:hover { border-color: var(--azul); }
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.img-slot .drop-img { border: 1px solid var(--hair); }
.img-slot .drop-img img { aspect-ratio: 1100/619; object-fit: cover; }
.is-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 0;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); line-height: 1.5;
}
.is-pie button { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--celeste-osc); text-decoration: underline; flex: none; }
.is-pie button:hover { color: var(--azul-prof); }


/* ============ MÉTRICAS Y CAMPAÑAS ============ */

.met-hero {
  display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: 28px; align-items: stretch;
}
.mh-izq {
  background: var(--azul-prof); color: var(--papel); border-radius: 16px; padding: 30px 32px 32px;
  display: flex; flex-direction: column; justify-content: center;
}
.mh-izq .lbl { color: var(--oro-2); }
.mh-cifra {
  font-family: var(--serif); font-weight: 600; font-size: clamp(38px, 4.4vw, 56px); line-height: 1.05;
  color: var(--papel-3); margin: 16px 0 0; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.mh-pie { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(241,234,222,.62); margin: 14px 0 0; line-height: 1.8; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.kpi { background: var(--papel-3); border: 1px solid var(--hair); border-radius: 14px; padding: 20px 20px 18px; display: flex; flex-direction: column; justify-content: center; }
.k-t { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); margin: 0; }
.k-v { font-family: var(--serif); font-weight: 600; font-size: 30px; color: var(--azul-prof); margin: 10px 0 0; line-height: 1; font-variant-numeric: tabular-nums; }
.k-d { font-size: 12.5px; color: var(--tinta-3); margin: 8px 0 0; line-height: 1.5; }

.graf { position: relative; margin: 22px 0 0; }
.svg-area { width: 100%; height: auto; aspect-ratio: 1000/260; display: block; overflow: visible; }
.graf .rejilla { stroke: var(--hair); stroke-width: 1; vector-effect: non-scaling-stroke; }
.graf .eje { font-family: var(--mono); font-size: 15px; fill: var(--tinta-3); letter-spacing: .06em; }
.graf .dato { font-family: var(--mono); font-size: 17px; fill: var(--azul-prof); font-weight: 500; }
.graf .zonas rect:hover { fill: rgba(26,85,128,.07); }

.barras { display: flex; flex-direction: column; gap: 4px; }
.bar-fila { display: grid; grid-template-columns: minmax(96px, 34%) 1fr auto; gap: 14px; align-items: center; padding: 7px 6px; border-radius: 8px; transition: background .2s; }
.bar-fila:hover { background: var(--papel); }
.bf-t { font-size: 13.5px; color: var(--tinta-2); line-height: 1.35; overflow-wrap: anywhere; }
.bf-pista { display: block; height: 18px; background: var(--papel); border-radius: 3px; overflow: hidden; }
.bf-bar { display: block; height: 100%; background: #1a5580; border-radius: 0 4px 4px 0; }
.bf-v { font-family: var(--mono); font-size: 12px; color: var(--tinta); font-variant-numeric: tabular-nums; text-align: right; min-width: 46px; }

.globo {
  position: absolute; z-index: 20; pointer-events: none; transform: translateX(-50%);
  background: var(--azul-prof); color: var(--papel-3); border-radius: 9px; padding: 9px 13px;
  opacity: 0; transition: opacity .16s; white-space: nowrap; box-shadow: 0 10px 26px -12px rgba(21,40,61,.6);
}
.globo.on { opacity: 1; }
.globo b { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-2); font-weight: 400; margin-bottom: 4px; }
.globo span { font-size: 13.5px; }

.tbl-num td:not(:first-child), .tbl-num th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-num tr.total td { background: var(--papel); border-top: 2px solid var(--azul-prof); }
.tbl-num tr.total b { color: var(--azul-prof); }
.ret { font-family: var(--mono); font-size: 11px; padding: 4px 10px; border-radius: 100px; display: inline-block; }
.ret.bien { color: #11653d; border: 1px solid #11653d; }
.ret.media { color: #7a580e; border: 1px solid #7a580e; }
.ret.mal { color: var(--rojo); border: 1px solid var(--rojo); }

@media (max-width: 900px) {
  .met-hero { grid-template-columns: 1fr; }
  .mh-izq { padding: 24px 22px 26px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 16px 15px 14px; }
  .k-v { font-size: 25px; }
  .graf .eje { font-size: 19px; }
  .graf .dato { font-size: 21px; }
  .bar-fila { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 4px; }
  .bf-t { grid-column: 1; font-size: 13px; }
  .bf-v { grid-column: 2; }
  .bf-pista { grid-column: 1 / -1; height: 14px; }
}


/* ============ COMBOS ============ */
.combos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 28px; }
.combo { border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; background: var(--papel-3); box-shadow: 0 2px 6px rgba(21,40,61,.06); }
.cb-imgs { display: flex; gap: 2px; }
.cb-imgs .duo { flex: 1; min-width: 0; aspect-ratio: 16/10; overflow: hidden; }
.cb-imgs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-txt { padding: 26px 28px 28px; }
.cb-txt h3 { font-size: clamp(23px, 2.6vw, 30px); letter-spacing: -.022em; margin: 12px 0 0; }
.cb-d { font-size: 15px; color: var(--tinta-2); line-height: 1.6; margin: 12px 0 0; }
.cb-lista { list-style: none; margin: 18px 0; padding: 0; border-top: 1px solid var(--hair-2); }
.cb-lista li { border-bottom: 1px solid var(--hair-2); }
.cb-lista a { display: block; padding: 10px 0 10px 26px; position: relative; font-size: 14.5px; color: var(--tinta-2); }
.cb-lista a::before { content: "+"; position: absolute; left: 4px; top: 10px; color: var(--oro); font-family: var(--mono); }
.cb-lista a:hover { color: var(--azul); }
.cb-precio { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
.cb-precio b { font-family: var(--disp); font-weight: 700; font-size: 34px; color: var(--azul); letter-spacing: -.03em; }
.cb-precio s { font-family: var(--mono); font-size: 12px; color: var(--tinta-3); }
.cb-ah { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #11653d; border: 1px solid #11653d; padding: 4px 10px; border-radius: 100px; }
@media (max-width: 820px) { .combos { grid-template-columns: 1fr; } .cb-txt { padding: 22px 20px 24px; } }

/* ============ CUPÓN EN EL CHECKOUT ============ */
.cupon { border-top: 1px dashed var(--hair); margin-top: 20px; padding-top: 18px; }
.cupon label { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 9px; }
.cp-fila { display: flex; gap: 10px; }
.cp-fila input { flex: 1; min-width: 0; text-transform: uppercase; }
.cp-fila .btn { flex: none; }
.cp-msg { min-height: 0; margin-top: 8px; }
.cp-msg.e { color: var(--rojo); }
.cp-ok { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--tinta-2); margin: 0; }
.cp-ok b { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: #11653d; border: 1px solid #11653d; padding: 4px 10px; border-radius: 100px; }
.cp-ok button { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--celeste-osc); text-decoration: underline; margin-left: auto; }
.cp-ok button:hover { color: var(--azul-prof); }
.cp-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.cp-total s { font-size: 12px; }
.cp-total b { font-family: var(--disp); font-weight: 700; font-size: 26px; letter-spacing: -.02em; color: var(--azul); text-transform: none; }

/* ============ LISTA DE TILDES DEL PANEL ============ */
.chk-lista { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--hair); border-radius: 8px; padding: 8px; max-height: 210px; overflow: auto; }
.field .chk, .chk { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 400; color: var(--tinta-2); text-transform: none; letter-spacing: 0; font-family: var(--serif); margin: 0; }
.chk-lista { max-height: 260px; }
.chk:hover { background: var(--papel); }
.chk input { width: 18px; height: 18px; flex: none; margin: 0; }
.mini-x { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--rojo); text-decoration: underline; }
.mini-x:hover { color: var(--azul-prof); }
.tbl input { width: 100%; padding: 8px 10px; font-size: 14px; }


/* ============ CLASES PARTICULARES ============ */
.part { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.part h2 { font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -.03em; margin: 14px 0 0; }
.part-d { font-size: 16.5px; color: var(--tinta-2); line-height: 1.85; margin: 20px 0 0; max-width: 56ch; }
.part-p { font-family: var(--disp); font-weight: 700; font-size: 32px; color: var(--azul); letter-spacing: -.03em; margin: 22px 0 0; }
.part-sp { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin: 22px 0 0; }
.part .btn { margin-top: 26px; }
.part-lam { aspect-ratio: 1; border-radius: 16px; position: relative; }
.part-lam::after { content: ""; position: absolute; inset: 14px; border: 1px solid var(--oro); pointer-events: none; z-index: 2; border-radius: 6px; }
@media (max-width: 860px) { .part { grid-template-columns: 1fr; gap: 28px; } .part-lam { max-width: 240px; order: -1; } }


/* ============ CONSENTIMIENTO Y LEGALES DEL CHECKOUT ============ */
.opt-in {
  display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 0; padding: 14px 15px;
  background: var(--papel); border: 1px solid var(--hair); border-radius: 10px; cursor: pointer;
  font-family: var(--serif); font-size: 13.5px; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--tinta-2); line-height: 1.6;
}
.opt-in:hover { border-color: var(--azul); }
.opt-in input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; }
.opt-in i { display: block; font-size: 12.5px; color: var(--tinta-3); margin-top: 5px; }
.legal { margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--oro); background: var(--papel); border-radius: 0 8px 8px 0; }
.legal p { margin: 0; font-size: 13px; color: var(--tinta-2); line-height: 1.65; }
.legal b { color: var(--azul-prof); }
.pill.no { color: var(--tinta-3); border-color: var(--hair); }


/* El panel de precios en el celular: áreas de toque que se puedan tocar de verdad */
.mini-x { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
/* Casilla del panel con área de toque cómoda también en el celular */
.tick { width: 26px; height: 26px; flex: none; margin: 9px 0; }
@media (max-width: 820px) { .tick { width: 30px; height: 30px; margin: 8px 0; } }
@media (max-width: 820px) {
  .tbl td, .tbl th { padding-left: 10px; padding-right: 10px; }
}


/* Confirmación de guardado, para que se vea que el clic hizo algo */
.guardado[hidden] { display: none; }
.guardado {
  margin: 12px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: #11653d; text-align: center;
}
.guardado a { color: var(--celeste-osc); text-decoration: underline; }
.guardado a:hover { color: var(--azul-prof); }


/* ============ MI CUENTA ============ */
nav.main a.oculta { display: none; }

.cuenta-hero { background: var(--azul-prof); color: var(--papel); padding-block: 46px 44px; }
.cuenta-hero .volver { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-2); display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 12px; }
.cuenta-hero .volver:hover { color: var(--papel-3); }
.cuenta-hero h1 { color: var(--papel-3); font-size: clamp(34px, 5.4vw, 60px); letter-spacing: -.03em; margin: 12px 0 0; }
.cuenta-hero .sub { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: rgba(241,234,222,.66); margin: 16px 0 0; }

.cuenta-cuerpo { display: flex; flex-direction: column; gap: 26px; }
.mc-caja { background: var(--papel-3); border: 1px solid var(--hair); border-radius: 18px; padding: 30px 32px 32px; box-shadow: 0 2px 6px rgba(21,40,61,.05); }
.mc-caja.vacia { text-align: center; padding: 48px 32px; }
.mc-caja.baja { border-color: var(--oro); }
.mc-caja h2 { font-size: clamp(25px, 3vw, 34px); letter-spacing: -.025em; margin: 12px 0 0; }
.mc-sub { font-size: 15px; color: var(--tinta-2); margin: 12px 0 0; line-height: 1.7; }

.mc-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--hair); }
.mc-prox { text-align: right; }
.mc-prox .lbl { color: var(--tinta-3); }
.mc-fecha { font-family: var(--disp); font-weight: 700; font-size: 26px; color: var(--azul); letter-spacing: -.02em; margin: 10px 0 0; }

.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 26px; }
.mc-tit { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--celeste-osc); margin: 0 0 14px; }

.mc-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.mc-lista li { border-bottom: 1px solid var(--hair); }
.mc-lista li:last-child { border-bottom: 0; }
.mc-lista a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--papel-3); }
.mc-lista a:hover { background: var(--papel); }
.mc-img { width: 64px; flex: none; aspect-ratio: 1100/619; border-radius: 4px; overflow: hidden; }
.mc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-txt { flex: 1; min-width: 0; }
.mc-txt b { display: block; font-size: 14.5px; font-weight: 600; color: var(--azul-prof); line-height: 1.35; }
.mc-txt span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin-top: 5px; }
.mc-ir { flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--celeste-osc); }

.mc-prev { list-style: none; margin: 0; padding: 0; }
.mc-prev li { position: relative; padding: 11px 0 11px 26px; border-bottom: 1px solid var(--hair-2); font-size: 14.5px; color: var(--tinta-2); line-height: 1.5; }
.mc-prev li:last-child { border-bottom: 0; }
.mc-prev li::before { content: "→"; position: absolute; left: 2px; top: 11px; color: var(--oro); font-family: var(--mono); font-size: 12px; }
.mc-prev i { font-style: normal; color: var(--tinta-3); font-size: 13px; }
.mc-todos { font-size: 14.5px; color: var(--tinta-2); line-height: 1.75; margin: 0; }

.mc-aviso { padding-top: 24px; }
.mc-aviso p { font-size: 15px; color: var(--tinta-2); line-height: 1.75; margin: 0 0 18px; }

.mc-pie { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair); }
.demo-reloj { margin-left: auto; }

.mc-hist { margin-top: 28px; padding-top: 24px; border-top: 1px dashed var(--hair); }
.mc-hist ul { list-style: none; margin: 0; padding: 0; }
.mc-hist li { display: flex; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--hair-2); font-size: 13.5px; align-items: baseline; }
.mc-hist li:last-child { border-bottom: 0; }
.mc-hist span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); flex: none; min-width: 140px; }
.mc-hist b { color: var(--tinta-2); font-weight: 400; line-height: 1.5; }

.detectado { font-size: 13px; color: var(--tinta-3); line-height: 1.6; margin: 0 0 12px; }
.detectado b { color: var(--azul-prof); }

@media (max-width: 860px) {
  .mc-grid { grid-template-columns: 1fr; gap: 30px; }
  .mc-caja { padding: 22px 20px 24px; }
  .mc-cab { flex-direction: column; gap: 16px; }
  .mc-prox { text-align: left; }
  .mc-pie .demo-reloj { margin-left: 0; }
  .mc-hist li { flex-direction: column; gap: 4px; }
  .mc-hist span { min-width: 0; }
}


/* ===== Entrar / crear cuenta ===== */
.form-entrar .field { display:block; margin-bottom:16px }
.form-entrar .field > span { display:block; font:500 11px/1 var(--mono);
  letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:7px }
.form-entrar input[type=text], .form-entrar input[type=email],
.form-entrar input[type=password], .form-entrar input[type=tel] {
  width:100%; padding:13px 14px; font:400 16px/1.3 var(--texto);
  color:var(--tinta); background:#fff; border:1px solid var(--hair);
  border-radius:3px; -webkit-appearance:none }
.form-entrar input:focus { outline:2px solid var(--azul); outline-offset:1px; border-color:transparent }
.form-entrar .opt-in { margin-top:14px }

.o-bien { display:flex; align-items:center; gap:14px; margin:26px 0 18px;
  font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-3) }
.o-bien::before, .o-bien::after { content:""; flex:1; height:1px; background:var(--hair) }

.btn-google { display:block; width:100%; text-align:center; background:#fff;
  color:var(--tinta); border:1px solid var(--hair) }
.btn-google:hover { background:var(--papel-2) }

.aviso-mal { margin:0 0 18px; padding:12px 14px; border-radius:3px;
  background:#fdeceb; border:1px solid #f2c4c0; color:#8c2a20;
  font:400 14px/1.45 var(--texto) }

/* Quitar material o pregunta: dos clics, para que un clic de más no borre nada. */
.mat-list li { display: flex; align-items: center; gap: 10px; }
.mat-list li > a { flex: 1; min-width: 0; }
.quitar {
  background: transparent; border: 1px solid var(--hair); border-radius: 100px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3); padding: 6px 12px; cursor: pointer; white-space: nowrap; transition: .2s;
}
.quitar:hover { border-color: var(--rojo); color: var(--rojo); }
.quitar.si { border-color: var(--rojo); color: var(--rojo); }
.quitar.si:hover { background: var(--rojo); color: #fff; }
.quitar-conf { display: inline-flex; gap: 6px; }
@media (max-width: 820px) { .quitar { min-height: 36px; } }

/* Material cargado en la ficha pero sin archivo todavía: se ve, no se clickea. */
.mat-list li.pendiente > span { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 15px 0; align-items: start; flex: 1; opacity: .55; }
.mat-list li.pendiente .tx { color: var(--tinta-2); }