:root {
  --bg: #0b0c0f;
  --bg-alt: #0f1115;
  --surface: #191c22;
  --surface-2: #22262d;
  --ink: #f2eee7;
  --ink-2: #e6e2db;
  --ink-3: #c2c0bb;
  --line: #30353e;
  --accent: #ff8a1f;
  --accent-2: #ffb455;
  --accent-ink: #1a0e02;
  --lince: #07080a;
  --radius: 16px;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.08; margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
h1 em, h2 em { color: var(--accent); }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.estrecho { max-width: 720px; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- Lince ---------- */
.lince { display: block; overflow: visible; }
.lince-silueta { fill: var(--lince); stroke-width: 1.4; stroke-linejoin: round; }
.lince-pincel path { stroke: var(--lince); stroke-width: 3.2; stroke-linecap: round; fill: none; }
.lince-pincel { transform-box: fill-box; }
.lince-pincel-i { transform-origin: 100% 100%; }
.lince-pincel-d { transform-origin: 0% 100%; }
.lince-rasgos path { fill: none; stroke: #16191e; stroke-width: 1.3; stroke-linecap: round; }
.lince-rasgos .lince-ceno { stroke: #1d2127; stroke-width: 2.4; }
.lince-rasgos .lince-lagrima { stroke: #1a1d22; stroke-width: 2.2; }
.lince-nariz { fill: #121418; }
.lince-pupila { fill: #050505; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.lince-ojo { transform-box: fill-box; transform-origin: center; }
.lince-halo { transform-box: fill-box; transform-origin: center; animation: halo 9s ease-in-out infinite; }
.lince-cabeza { transform-origin: 100px 190px; animation: respira 7.5s ease-in-out infinite; }
.lince.parpadea .lince-ojo { animation: parpadeo .22s ease-in-out; }
.lince.parpadea-doble .lince-ojo { animation: parpadeo .22s ease-in-out 2; }
.lince.oreja .lince-pincel-i { animation: oreja-i .5s ease-in-out; }
.lince.oreja .lince-pincel-d { animation: oreja-d .5s ease-in-out .08s; }
.lince-ojos { animation: brillo 5s ease-in-out infinite; }

@keyframes respira { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.4px) scale(1.006); } }
@keyframes halo { 0%, 100% { opacity: .7; transform: scale(1) translate(0, 0); } 33% { opacity: 1; transform: scale(1.04) translate(2px, -1px); } 66% { opacity: .8; transform: scale(.98) translate(-2px, 1px); } }
@keyframes parpadeo { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.06); } }
@keyframes brillo { 0%, 100% { opacity: .92; } 50% { opacity: 1; } }
@keyframes oreja-i { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-7deg); } }
@keyframes oreja-d { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) {
  .lince-cabeza, .lince-halo, .lince-ojos { animation: none; }
}

.lince-mini { width: 38px; height: 38px; }
.lince-mini .lince-halo { display: none; }
.lince-mini .lince-silueta { fill: #1b1e24; stroke: #4a505b; stroke-width: 5; }
.lince-mini .lince-pincel path { stroke: #4a505b; stroke-width: 5; }
.lince-mini .lince-rasgos, .lince-mini .lince-nariz { display: none; }
.lince-grande { width: min(340px, 70vw); height: auto; }
.lince-medio { width: 150px; height: 150px; margin: 0 auto 12px; }

/* ---------- Marca ---------- */
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-texto { font-weight: 800; font-size: 21px; letter-spacing: -0.045em; text-transform: lowercase; }
.ia { color: var(--accent); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.nav nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.nav nav a:not(.btn) { text-decoration: none; color: var(--ink-2); }
.nav nav a:not(.btn):hover { color: var(--ink); }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-ink); font: 700 16px var(--sans); text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .2s; box-shadow: 0 0 0 0 rgba(255,138,31,0); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 30px -8px rgba(255,138,31,.55); }
.btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.nav nav a.nav-acceso { font-weight: 600; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.btn-full { width: 100%; }

/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 88px); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; background: radial-gradient(closest-side, rgba(255,138,31,.07), transparent); pointer-events: none; }
.hero-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.hero-logo { display: flex; flex-direction: column; align-items: center; }
.hero-marca { margin: -6px 0 0; font-weight: 800; font-size: clamp(40px, 6vw, 64px); letter-spacing: -0.06em; line-height: 1; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin: 0 0 18px; }
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { color: var(--ink); }
.hero h1 { font-size: clamp(48px, 7vw, 100px); }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); max-width: 60ch; margin: 24px 0 0; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.confian { margin-top: clamp(40px, 6vw, 72px); padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; }
.confian span { font-size: 13px; color: var(--ink-3); }
.confian ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 600; color: var(--ink-2); }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(64px, 9vw, 120px) 0; }
.seccion-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.seccion h2 { font-size: clamp(38px, 5vw, 62px); max-width: 22ch; }
.sub { color: var(--ink-2); margin: 16px 0 0; max-width: 62ch; }

.servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 48px; }
.servicio { background: var(--bg); padding: 30px 26px 34px; transition: background .2s; }
.servicio:hover { background: var(--surface); }
.servicio .num { font: 400 22px var(--serif); color: var(--accent); }
.servicio h3 { font-size: 20px; margin: 30px 0 10px; letter-spacing: -0.01em; }
.servicio p { color: var(--ink-2); font-size: 15.5px; margin: 0; }

/* ---------- Proyectos ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 28px; }
.filtro { font: 500 14px var(--sans); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.filtro.activo { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.proyectos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.proyecto { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; position: relative; overflow: hidden; }
.proyecto::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c); }
.proyecto[hidden] { display: none; }
.proyecto-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.proyecto-ini { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, var(--surface)); color: color-mix(in srgb, var(--c) 45%, white); font: 400 26px var(--serif); }
.estado { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.estado::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3ecf8e; margin-right: 6px; vertical-align: middle; }
.proyecto h3 { font-size: 22px; letter-spacing: -0.02em; }
.cliente { font-size: 13.5px; color: var(--ink-3); margin: 4px 0 14px; }
.resumen { margin: 0 0 14px; font-size: 15.5px; }
.puntos { margin: 0 0 20px; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-2); }
.puntos li { padding-left: 18px; position: relative; margin: 6px 0; }
.puntos li::before { content: "—"; position: absolute; left: 0; color: color-mix(in srgb, var(--c) 55%, white); }
.pie-proyecto { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.tec, .tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tec li { font-size: 12px; padding: 3px 9px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); }
.ver { font-weight: 600; font-size: 14.5px; text-decoration: none; color: color-mix(in srgb, var(--c) 50%, white); }
.ver:hover { text-decoration: underline; }

/* ---------- Cursos ---------- */
.cursos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.curso { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--radius); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, var(--surface)), var(--surface) 60%); border: 1px solid var(--line); text-decoration: none; transition: transform .2s, border-color .2s; }
.curso:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 50%, var(--line)); }
.curso h3 { font: 400 30px/1.1 var(--serif); }
.curso p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.curso .precio { margin-top: auto; padding-top: 12px; font-weight: 800; font-size: 22px; color: var(--c); }
.curso .precio small, .precio-grande small { font-size: .5em; font-weight: 600; color: var(--ink-2); }
.precio-iva { font-size: 13px; color: var(--ink-3); }
.precio-total { font-size: 15px; color: var(--ink-2); }
.btn-off { background: var(--surface-2); color: var(--ink-3); cursor: default; box-shadow: none; }
.btn-off:hover { transform: none; box-shadow: none; }
.ya-alumno { margin-top: 40px; color: var(--ink-3); }

.curso-hero { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.curso-hero h1 { font-size: clamp(44px, 6vw, 80px); }
.instructores { color: var(--ink-3); margin-top: 20px; }
.compra { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--c) 60%, transparent); }
.precio-grande { font-weight: 800; font-size: 48px; letter-spacing: -0.03em; }
.precio-nota { font-size: 13.5px; color: var(--ink-3); }
.curso-cuerpo { max-width: 760px; }
.curso-cuerpo section { margin-top: 48px; }
.curso-cuerpo h2 { font-size: 36px; margin-bottom: 18px; }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { position: relative; padding-left: 30px; margin: 10px 0; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.temario { padding-left: 22px; }
.temario > li { margin: 14px 0; }
.temario ul { color: var(--ink-2); margin: 6px 0 0; padding-left: 18px; }
details { border-bottom: 1px solid var(--line); padding: 14px 0; }
summary { cursor: pointer; font-weight: 600; }
details p { color: var(--ink-2); margin: 10px 0 0; }
.compra-final { margin-top: 48px; }
.legal-mini { font-size: 13px; color: var(--ink-3); }

/* ---------- Equipo ---------- */
.equipo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 40px; }
.persona { display: flex; align-items: center; gap: 20px; padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color .2s; }
.persona:hover { border-color: var(--ink-3); }
.persona-txt { display: flex; flex-direction: column; gap: 3px; font-size: 15px; color: var(--ink-2); }
.persona-txt strong { font-size: 20px; color: var(--ink); }
.cargo { color: var(--accent); font-weight: 600; font-size: 14px; }
.flecha { margin-left: auto; font-size: 22px; color: var(--ink-3); }
.avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); font: 400 28px var(--serif); color: var(--accent); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xl { width: 220px; height: 220px; font-size: 80px; }
.persona-grid { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; }
.persona-pagina h1 { font-size: clamp(48px, 7vw, 88px); }
.cargo-xl { font-size: 17px; margin: 8px 0 26px; }
.bio { font-size: 18.5px; color: var(--ink-2); max-width: 62ch; }
.tags { margin: 26px 0; }
.tags li { font-size: 13.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.enlaces a { font-weight: 600; margin-right: 18px; }

/* ---------- Testimonios ---------- */
.testimonios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 40px; }
.testimonio { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.testimonio blockquote { margin: 0 0 20px; font: 400 24px/1.35 var(--serif); }
.testimonio figcaption { display: flex; flex-direction: column; font-size: 14px; }
.testimonio figcaption span { color: var(--ink-3); }

/* ---------- Contacto y formularios ---------- */
.contacto { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; }
.directo { color: var(--ink-3); margin-top: 24px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-simple { grid-template-columns: 1fr; text-align: left; margin-top: 28px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); }
.form .full { grid-column: 1 / -1; }
.opc { color: var(--ink-3); }
.form input, .form select, .form textarea { font: 16px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%; }
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.form .check { flex-direction: row; align-items: center; gap: 10px; }
.form .check input { width: 18px; height: 18px; accent-color: var(--accent); }
.hp { position: absolute; left: -9999px; }
.envio { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.estado-form { margin: 0; font-size: 15px; }
.estado-form.ok { color: #6fd3a0; }
.estado-form.error { color: #ff9b8a; }
.tema-claro .estado-form.error { color: #b4362c; font-weight: 600; }
.tema-claro .estado-form.ok { color: #1f7a4d; font-weight: 600; }

/* ---------- Páginas interiores ---------- */
.pagina { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 9vw, 120px); }
.pagina h1 { font-size: clamp(44px, 6vw, 76px); }
.centro { text-align: center; }
.centro .lead { margin-inline: auto; }
.centro .btn { margin-top: 20px; }
.legal h2 { font-size: 28px; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--ink-2); }

/* ---------- Aula ---------- */
.aula-grid { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
.aula-menu { position: sticky; top: 96px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; font-size: 14.5px; }
.aula-menu h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin: 14px 0 6px; }
.aula-menu a { display: block; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--ink-2); }
.aula-menu a.actual { background: var(--surface-2); color: var(--ink); }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--line); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.leccion-txt { margin-top: 28px; color: var(--ink-2); font-size: 17.5px; max-width: 70ch; }
.leccion-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; }
.mis-cursos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--line); padding: 36px 0; font-size: 14px; color: var(--ink-3); }
.pie-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.pie-in p { margin: 0; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-left: auto; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--ink); }
.pie .copy { width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero-in { grid-template-columns: 1fr; text-align: center; }
  .hero-txt .lead { margin-inline: auto; }
  .cta { justify-content: center; }
  .servicios, .proyectos, .cursos { grid-template-columns: repeat(2, 1fr); }
  .contacto, .curso-hero, .aula-grid { grid-template-columns: 1fr; gap: 40px; }
  .compra, .aula-menu { position: static; }
  .persona-grid { grid-template-columns: 1fr; gap: 28px; }
  .avatar-xl { width: 140px; height: 140px; font-size: 52px; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .nav nav a:not(.btn):not(.nav-acceso) { display: none; }
  .servicios, .proyectos, .cursos, .testimonios, .form, .equipo, .mis-cursos { grid-template-columns: 1fr; }
  .persona { align-items: flex-start; }
  .flecha { display: none; }
  .pie nav { margin-left: 0; }
}

/* ---------- Estructura v0.4: tarjetas de proyecto, servicios con página, detalle ---------- */
a.servicio { display: flex; flex-direction: column; text-decoration: none; }
.servicio .mas { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 600; color: var(--accent); opacity: 0; transition: opacity .2s; }
.servicio:hover .mas { opacity: 1; }
.servicios-pagina { margin-top: 40px; }
.servicios-pagina .mas { opacity: 1; }

.proyectos { grid-template-columns: repeat(3, 1fr); }
.tproyecto { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; text-decoration: none; transition: transform .2s, border-color .2s; }
.tproyecto:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.tproyecto-img { aspect-ratio: 16 / 10; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--c) 30%, var(--surface-2)), var(--surface-2) 70%); display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.tproyecto-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tproyecto-img.vertical img { width: auto; height: 92%; object-fit: contain; margin-top: 8%; border-radius: 12px 12px 0 0; box-shadow: 0 10px 40px -10px rgba(0,0,0,.6); }
.tproyecto-ini { font: 400 64px var(--serif); color: color-mix(in srgb, var(--c) 55%, white); }
.tproyecto-txt { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; font-size: 15px; color: var(--ink-2); }
.tproyecto-txt strong { font-size: 21px; color: var(--ink); letter-spacing: -0.02em; }
.tproyecto-tipo { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 50%, white); }

.lema { font-size: clamp(18px, 2vw, 22px); color: var(--accent); margin: 14px 0 0; font-weight: 500; }
.proyecto-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 28px 0 8px; }
.proyecto-meta .cta { margin: 0; }
.captura { margin: 40px 0 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.captura img { width: 100%; }
.captura.vertical { max-width: 420px; }
.detalle { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; margin-top: 48px; align-items: start; }
.detalle-txt p { color: var(--ink-2); font-size: 17.5px; max-width: 68ch; }
.detalle-txt .lead { margin-top: 0; }
.detalle-lista { position: sticky; top: 96px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.detalle-lista h2 { font-size: 28px; margin-bottom: 14px; }
.detalle-lista h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin: 24px 0 10px; }
.detalle-lista .btn { margin-top: 20px; }
.checks li { color: var(--ink-2); font-size: 15.5px; }
.subseccion { margin-top: 48px; }
.subseccion h2 { font-size: clamp(30px, 3.4vw, 40px); margin-bottom: 18px; }
.subseccion .cursos { margin-top: 24px; }
.relacionados { margin-top: 72px; }
.relacionados h2 { font-size: 36px; margin-bottom: 24px; }
.curso .etiqueta { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.curso.presencial { --c: #7aa7ff; }
.cta-final { padding: clamp(56px, 8vw, 100px) 0; border-top: 1px solid var(--line); background: radial-gradient(ellipse at 50% 0%, rgba(255,138,31,.08), transparent 60%); }
.cta-final-in { text-align: center; }
.cta-final h2 { font-size: clamp(36px, 5vw, 56px); margin-inline: auto; }
.cta-final .lead { margin-inline: auto; }
.cta-final .btn { margin-top: 28px; }
@media (max-width: 1000px) {
  .proyectos { grid-template-columns: repeat(2, 1fr); }
  .detalle { grid-template-columns: 1fr; gap: 32px; }
  .detalle-lista { position: static; }
}
@media (max-width: 680px) { .proyectos { grid-template-columns: 1fr; } }

/* Página de proyecto: rejilla desde arriba, "Qué hace" alineado con el primer texto */
.detalle-proyecto { margin-top: 32px; }
.detalle-proyecto .lead { margin-top: 0; }
.detalle-proyecto .proyecto-meta { margin: 24px 0 0; }
.detalle-proyecto .captura { margin: 28px 0; }
.detalle-proyecto .captura.vertical { max-width: 340px; }

.compra-presencial { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.compra-presencial strong { color: var(--ink); font-size: 15px; }
.compra-presencial .btn { margin-top: 8px; }
.compra-final { display: flex; flex-wrap: wrap; gap: 12px; }

/* Página de curso: título y contenido a la izquierda, compra fija a la derecha (sin hueco bajo la cabecera) */
.curso-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; }
.curso-grid .compra { position: sticky; top: 96px; }
.curso-principal .curso-cuerpo section:first-child { margin-top: 40px; }
@media (max-width: 1000px) {
  .curso-grid { grid-template-columns: 1fr; gap: 32px; }
  .curso-grid .compra { position: static; }
}
.temario { list-style: none; padding-left: 0; }
.temario > li > strong { font-size: 17px; }

/* Curso: portada, datos destacados y galería de diapositivas */
.curso-portada { margin: 32px 0 0; }
.destacados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.destacado { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.destacado strong { font: 400 40px/1 var(--serif); color: var(--accent); }
.destacado span { font-size: 14.5px; color: var(--ink-2); }
.destacado small { font-size: 12px; color: var(--ink-3); margin-top: auto; }
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.galeria figure { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.galeria figcaption { padding: 10px 14px; font-size: 13.5px; color: var(--ink-3); }
.galeria figure:first-child { grid-column: 1 / -1; }
.bloque-presencial { padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.bloque-presencial h2 { margin-bottom: 10px; }
.bloque-presencial p { color: var(--ink-2); }
.curso.con-imagen { padding-top: 0; overflow: hidden; }
.curso-img { max-width: none; width: calc(100% + 56px); margin: 0 -28px 8px; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--line); }
@media (max-width: 680px) { .destacados, .galeria { grid-template-columns: 1fr; } }

.bloque-resultado { padding: 26px; border-radius: var(--radius); background: linear-gradient(160deg, rgba(255,138,31,.12), var(--surface) 60%); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.bloque-resultado h2 { margin-bottom: 12px; }

/* Reseñas de clientes y alumnos (se escriben en el panel) */
.resenas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 28px; }
.resena { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.resena .estrellas { color: var(--accent); letter-spacing: .12em; font-size: 15px; }
.resena blockquote { margin: 0; color: var(--ink); font-size: 16.5px; }
.resena blockquote p { margin: 0 0 10px; }
.resena blockquote p:last-child { margin-bottom: 0; }
.resena blockquote::before { content: "“"; font: 400 46px/0 var(--serif); color: var(--accent); vertical-align: -10px; margin-right: 4px; }
.resena figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.resena figcaption > span:last-child { display: flex; flex-direction: column; }
.resena figcaption strong { font-size: 15px; }
.resena figcaption span span { font-size: 13.5px; color: var(--ink-3); }
.resena-avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); font-weight: 700; font-size: 15px; }
.resena-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bloque-resenas { margin-top: 48px; }
.bloque-resenas h2 { font-size: 32px; }

/* Blog */
.articulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin-top: 36px; }
.articulo { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; overflow: hidden; transition: transform .2s, border-color .2s; }
.articulo:hover { transform: translateY(-3px); border-color: var(--ink-3); }
.articulo-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--line); }
.articulo-txt { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.articulo h3 { font: 400 26px/1.15 var(--serif); }
.articulo p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.articulo .mas { margin-top: auto; padding-top: 6px; font-weight: 600; font-size: 14.5px; color: var(--accent); }
.articulo-pagina h1 { font-size: clamp(38px, 5vw, 62px); }
.articulo-meta { color: var(--ink-3); font-size: 14.5px; margin: 18px 0 28px; }
.articulo-meta a { color: var(--ink-2); }

/* Texto con formato escrito desde el panel (artículos y lecciones) */
.texto-largo { max-width: 720px; }
.texto-largo h2 { font-size: 32px; margin: 44px 0 14px; }
.texto-largo h3 { font-size: 22px; margin: 32px 0 10px; }
.texto-largo p { color: var(--ink-2); }
.texto-largo ul, .texto-largo ol { color: var(--ink-2); }
.texto-largo blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--accent); }
.texto-largo blockquote p { color: var(--ink); font-size: 19px; }
.texto-largo code { background: var(--surface-2); padding: 2px 6px; border-radius: 5px; font-size: .92em; }
.texto-largo hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.texto-largo img { border-radius: 12px; }
.texto-largo figcaption { font-size: 13.5px; color: var(--ink-3); margin-top: 8px; }


/* Reseña que deja el alumno al terminar el curso */
.pide-resena { margin-top: 48px; padding: 30px; border-radius: var(--radius); background: linear-gradient(160deg, rgba(255,138,31,.1), var(--surface) 65%); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.pide-resena h2 { font-size: 30px; }
.pide-resena .lead { margin-top: 12px; font-size: 17px; }
.pide-resena .form { margin-top: 22px; }
.pide-resena .campo-corto { max-width: 260px; }

/* Reseñas que son una captura de pantalla (WhatsApp, email, comentario) */
.resena-captura { padding: 14px; }
.captura-resena { width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.resena-captura figcaption { padding: 4px 8px 6px; }

/* ---------- Ofertas: landings de captación (labestia.net/redes) ---------- */
.oferta-hero { padding: clamp(36px, 6vw, 88px) 0 clamp(48px, 7vw, 96px); position: relative; overflow: hidden; }
.oferta-hero::before { content: ""; position: absolute; inset: -30% -20% auto auto; width: 80vw; height: 80vw; background: radial-gradient(closest-side, rgba(255,138,31,.09), transparent); pointer-events: none; }
.oferta-hero-in { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.oferta-hero h1 { font-size: clamp(42px, 6.2vw, 84px); }
.oferta-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.btn-grande { padding: 18px 32px; font-size: 18px; }
.oferta-precio { color: var(--ink-2); font-size: 16px; }
.oferta-precio strong { color: var(--ink); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.oferta-precio small { display: block; font-size: 13px; color: var(--ink-3); }
.sellos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 8px; }
.sellos li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: 15px; }
.sellos li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(111,211,160,.14); color: #6fd3a0; font-size: 12px; font-weight: 800; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.duo figure { margin: 0; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.duo figure:nth-child(2) { margin-top: 48px; }
.duo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.duo figcaption { padding: 12px 14px 14px; font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.duo figcaption strong { display: block; color: var(--ink); font-size: 15px; }
.oferta-foto { border-radius: 22px; border: 1px solid var(--line); }

.oferta-seccion { padding: clamp(56px, 8vw, 104px) 0; }
.oferta-h2 { font-size: clamp(34px, 4.6vw, 58px); max-width: 22ch; margin-bottom: 26px; }
.oferta-h3 { font-size: 22px; margin: 56px 0 20px; }
.oferta-intro { margin: 0 0 36px; }
.oferta-problema { max-width: 68ch; font-size: 19px; }
.oferta-problema p { color: var(--ink-2); }
.oferta-problema strong { color: var(--ink); }
.oferta-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.dato { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.dato strong { font: 400 clamp(46px, 4.6vw, 60px)/1 var(--serif); color: var(--accent); }
.dato span { color: var(--ink-2); font-size: 15px; }
.dato small, .fuente { font-size: 12px; color: var(--ink-3); margin: auto 0 0; }
.dato small a, .fuente a { color: var(--ink-3); }

.graficos { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
.grafico { margin: 0; padding: 28px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.grafico figcaption strong { display: block; font: 400 26px/1.15 var(--serif); }
.leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.ley-a, .barra.a > span { background: var(--surface-2) !important; box-shadow: inset 0 0 0 1px #2c313a; }
.ley-b { background: var(--accent); }
.barras { display: grid; gap: 14px; }
.barra-fila { display: grid; gap: 6px; }
.barra-etiqueta { font-size: 14.5px; color: var(--ink-2); }
.barra-par { display: grid; gap: 5px; }
.barra { position: relative; display: flex; align-items: center; gap: 10px; }
.barra > span { display: block; height: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: left; animation: crecer 1.1s cubic-bezier(.2,.7,.2,1) both; }
.barra b { font-size: 14px; font-weight: 700; white-space: nowrap; }
.grafico-nota { margin: 0; font-size: 13.5px; color: var(--ink-3); }
@keyframes crecer { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .barra > span { animation: none; } }

.comparativa { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.comp-cab, .comp-fila { display: grid; grid-template-columns: 1fr 1fr; }
.comp-cab span { padding: 16px 22px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); background: var(--surface); }
.comp-cab span + span { color: var(--accent); }
.comp-fila span { padding: 18px 22px; border-top: 1px solid var(--line); font-size: 16px; }
.comp-sin { color: var(--ink-3); position: relative; padding-left: 50px !important; }
.comp-sin::before { content: "✕"; position: absolute; left: 22px; color: #e0705a; font-weight: 800; }
.comp-con { background: linear-gradient(90deg, rgba(255,138,31,.07), transparent); position: relative; padding-left: 50px !important; }
.comp-con::before { content: "✓"; position: absolute; left: 22px; color: var(--accent); font-weight: 800; }

.oferta-incluye { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.oferta-incluye .checks li { font-size: 17px; margin: 14px 0; }
.oferta-incluye .checks strong { color: var(--ink); }
.caja-precio { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: var(--radius); background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: 0 30px 80px -40px rgba(255,138,31,.6); }
.caja-precio-nombre { font-weight: 700; }
.caja-precio .oferta-precio strong { font-size: 44px; }
.caja-garantia { font-size: 14px; color: #6fd3a0; }

.oferta-servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.oferta-servicio { background: var(--bg); padding: 28px 26px 32px; position: relative; }
.oferta-servicio .num { font: 400 15px var(--serif); color: var(--accent); }
.oferta-servicio h3 { font-size: 19px; margin: 12px 0 10px; }
.oferta-servicio p { color: var(--ink-2); font-size: 15px; margin: 0; }
.servicio-fin { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: linear-gradient(160deg, rgba(255,138,31,.12), var(--bg) 70%); }
.servicio-fin .btn { margin-top: 16px; }
.servicio-fin.r3-1 { grid-column: span 2; }
.servicio-fin.r3-2 { grid-column: span 3; }
.etiqueta-s { position: absolute; top: 24px; right: 22px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 4px 9px; border-radius: 999px; }

/* Recorrido de pasos: línea con hitos (horizontal en escritorio, vertical en móvil) */
.recorrido { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.recorrido::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 40px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2) 60%, #6fd3a0); opacity: .55; }
.recorrido li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.hito { position: relative; z-index: 1; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); box-shadow: 0 0 0 8px var(--bg-alt), 0 18px 40px -18px rgba(255,138,31,.8); color: var(--accent); }
.hito svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hito-num { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 800; }
.recorrido li:last-child .hito { border-color: #6fd3a0; color: #6fd3a0; }
.recorrido li:last-child .hito-num { background: #6fd3a0; }
.recorrido h3 { font-size: 19px; margin: 0 0 8px; }
.recorrido p { color: var(--ink-2); font-size: 15px; margin: 0; }
.centro-btn { text-align: center; margin: 40px 0 0; }

.oferta-equipo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.oferta-persona { display: flex; gap: 22px; align-items: flex-start; padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.avatar-l { width: 112px; height: 112px; }
.oferta-persona h3 { font: 400 30px/1.1 var(--serif); }
.oferta-persona .cargo { margin: 6px 0 12px; color: var(--accent); font-size: 14px; font-weight: 600; }
.oferta-persona p { color: var(--ink-2); font-size: 15.5px; }

.garantia { display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(32px, 5vw, 60px); border-radius: 28px; border: 1px solid rgba(111,211,160,.35); background: radial-gradient(ellipse at 15% 50%, rgba(111,211,160,.14), transparent 60%), var(--surface); }
.garantia-sello svg { width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(63,168,119,.35)); animation: flotar 6s ease-in-out infinite; }
.garantia .oferta-h2 { margin-bottom: 14px; }
.garantia .eyebrow { color: #6fd3a0; }
.garantia-flujo { list-style: none; counter-reset: g; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.garantia-flujo li { counter-increment: g; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.garantia-flujo li::before { content: counter(g); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(111,211,160,.16); color: #6fd3a0; font-weight: 800; font-size: 13px; }
.garantia-flujo li:last-child { border-color: rgba(111,211,160,.5); }
.garantia-flujo b { color: #8be3b5; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Portada: el móvil del cliente (ilustración CSS) */
.movil-escena { position: relative; margin: 0 auto; width: min(100%, 420px); padding: 20px 50px 0; }
.movil { position: relative; width: 100%; max-width: 290px; margin: 0 auto; aspect-ratio: 9 / 18.5; border-radius: 42px; padding: 18px 14px; background: #0d0f13; border: 1px solid #2c313a; box-shadow: inset 0 0 0 6px #050608, 0 50px 90px -40px rgba(255,138,31,.55), 0 30px 60px -30px #000; overflow: hidden; transform: rotate(-3deg); }
.movil-notch { width: 90px; height: 22px; border-radius: 999px; background: #050608; margin: 0 auto 18px; }
.movil-perfil { display: flex; gap: 12px; align-items: center; padding: 0 6px; }
.movil-avatar { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--surface-2); box-shadow: 0 0 0 2px #0d0f13, 0 0 0 4px var(--accent); }
.movil-avatar .lince-mini { width: 36px; height: 36px; }
.movil-perfil div { flex: 1; display: grid; gap: 6px; }
.movil-perfil b { font-size: 14px; }
.movil-perfil i { display: block; height: 7px; border-radius: 4px; background: #262a31; }
.movil-perfil i.corta { width: 60%; }
.movil-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 6px; }
.movil-botones span { text-align: center; font-size: 12px; font-weight: 700; padding: 7px 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink); }
.movil-botones span + span { background: #22262d; color: var(--ink); }
.movil-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0 -14px; }
.movil-rejilla span { aspect-ratio: 1; }
.movil-rejilla .t0 { background: linear-gradient(135deg, #ff8a1f, #ffcf8a); }
.movil-rejilla .t1 { background: radial-gradient(circle at 40% 40%, #f2eee7 0 18%, #3a2b20 19%); }
.movil-rejilla .t2 { background: linear-gradient(160deg, #1f3a33, #6fd3a0); }
.movil-rejilla .t3 { background: linear-gradient(200deg, #2a2f38, #7d828b); }
.movil-rejilla .t4 { background: radial-gradient(circle at 50% 60%, #ffb455 0 22%, #40281a 23%); }
.movil-rejilla .t5 { background: linear-gradient(135deg, #e0705a, #ffb455); }
.movil-rejilla .t6 { background: linear-gradient(45deg, #14161b, #3a3f49); }
.movil-rejilla .t7 { background: linear-gradient(135deg, #ffcf8a, #ff8a1f 60%, #7a3a0a); }
.movil-rejilla .t8 { background: radial-gradient(circle at 60% 40%, #8be3b5 0 20%, #1c2a26 21%); }
.flota { position: absolute; display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 16px; background: rgba(20,22,27,.92); border: 1px solid #2c313a; box-shadow: 0 20px 40px -18px #000; backdrop-filter: blur(8px); animation: flotar 6s ease-in-out infinite; }
.flota b { display: block; font-size: 13.5px; line-height: 1.25; }
.flota small { display: block; font-size: 12px; color: var(--ink-3); }
.flota-google { left: 0; top: 46%; animation-delay: -2s; }
.flota-google .g { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #f2eee7; color: #4285f4; font-weight: 800; }
.estrellas { display: block; color: #fbbc04; font-size: 13px; letter-spacing: 1px; }
.flota-resena { right: -10px; top: 3%; animation-delay: -4s; }
.flota-resena .ok { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(111,211,160,.16); color: #6fd3a0; font-weight: 800; }
.flota-post { right: 6px; bottom: 18%; padding: 8px 12px; }
.flota-post .punto { width: 9px; height: 9px; border-radius: 50%; background: #6fd3a0; box-shadow: 0 0 0 4px rgba(111,211,160,.2); }
.movil-escena figcaption { text-align: center; margin-top: 22px; font: 400 24px/1.2 var(--serif); color: var(--ink-2); }
.movil-escena figcaption em { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .flota, .garantia-sello svg { animation: none; } }

/* Comparativa: dos móviles (descuidado / cuidado) */
.dos-moviles { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(8px, 3vw, 40px); max-width: 820px; margin: 10px auto 48px; }
.dos-moviles .vs { font-size: 34px; color: var(--accent); }
.movil-par { position: relative; margin: 0; padding: 0 30px; }
.movil-par .movil { max-width: 250px; transform: none; }
.movil-par figcaption { text-align: center; margin-top: 18px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.movil-par.sin figcaption { color: #e0705a; }
.movil-par.con figcaption { color: var(--accent); }
.movil-par.sin .movil { box-shadow: inset 0 0 0 6px #050608, 0 30px 60px -30px #000; filter: saturate(.35); }
.movil-par.sin .movil-avatar { box-shadow: 0 0 0 2px #0d0f13, 0 0 0 4px #3a3f49; color: var(--ink-3); font-weight: 800; font-size: 22px; }
.movil-par.sin .movil-botones { grid-template-columns: 1fr; }
.movil-par.sin .movil-botones .solo { background: #22262d; color: var(--ink-3); }
.movil-par.sin .movil-rejilla span { filter: blur(3px) grayscale(.6) brightness(.6); }
.movil-par.sin .movil-rejilla .t1, .movil-par.sin .movil-rejilla .t4, .movil-par.sin .movil-rejilla .t6, .movil-par.sin .movil-rejilla .t7, .movil-par.sin .movil-rejilla .t8 { background: #14161b; filter: none; }
.movil-par.sin .movil-rejilla .t0 { transform: rotate(7deg) scale(.9); }
.movil-par .flota { padding: 8px 11px; border-radius: 13px; }
.movil-par .flota b { font-size: 12px; }
.movil-par .flota small { font-size: 11px; }
.movil-par .f1 { right: 0; top: 18%; animation-delay: -1s; }
.movil-par .f2 { left: 0; top: 50%; animation-delay: -3s; }
.movil-par .f3 { right: 8px; bottom: 16%; padding: 7px 10px; animation-delay: -5s; }
.movil-par .g { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #f2eee7; color: #4285f4; font-weight: 800; font-size: 13px; }
.movil-par .ok, .movil-par .ko { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; font-size: 13px; }
.movil-par .ok { background: rgba(111,211,160,.16); color: #6fd3a0; }
.movil-par .ko { background: rgba(224,112,90,.16); color: #e0705a; }
.movil-par .punto { width: 8px; height: 8px; border-radius: 50%; background: #6fd3a0; box-shadow: 0 0 0 4px rgba(111,211,160,.2); }
.movil-par.sin .punto { background: #e0705a; box-shadow: 0 0 0 4px rgba(224,112,90,.2); }
.movil-par.sin .flota { animation: none; }
@media (max-width: 680px) {
  .dos-moviles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dos-moviles .vs { display: none; }
  .dos-moviles { align-items: start; }
  .movil-par { padding: 0; display: flex; flex-direction: column; }
  .movil-par figcaption { order: -1; margin: 0 0 10px; }
  .movil-par .flota { position: static; margin-top: 8px; animation: none; }
  .movil-par .movil { border-radius: 28px; padding: 12px 9px; }
  .movil-par .movil-avatar { width: 40px; height: 40px; }
  .movil-par .movil-perfil b { font-size: 11px; }
  .movil-par .movil-rejilla { margin: 0 -9px; }
}

/* Datos con anillo de porcentaje */
.anillo { --p: 50; display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), #262a31 0); position: relative; }
.anillo::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--surface); }
.anillo strong { position: relative; font-size: 34px !important; }
.cta-final .oferta-precio { display: block; margin-top: 14px; }

.oferta-barra { display: none; }
@media (max-width: 1000px) {
  .oferta-hero-in, .oferta-incluye, .graficos { grid-template-columns: 1fr; }
  .oferta-hero-img { max-width: 520px; }
  .oferta-datos { grid-template-columns: repeat(2, 1fr); }
  .recorrido { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .recorrido::before { display: none; }
  .garantia { grid-template-columns: 1fr; text-align: center; }
  .garantia-sello { width: 200px; margin: 0 auto; }
  .garantia-flujo { justify-content: center; }
  .oferta-servicios { grid-template-columns: repeat(2, 1fr); }
  .servicio-fin.r3-1, .servicio-fin.r3-2 { grid-column: auto; }
  .servicio-fin.r2-1 { grid-column: span 2; }
  .oferta-equipo { grid-template-columns: 1fr; }
  .caja-precio { position: static; }
}
@media (max-width: 680px) {
  .oferta-datos, .oferta-servicios { grid-template-columns: 1fr; }
  .recorrido { grid-template-columns: 1fr; gap: 28px; }
  .recorrido::before { display: block; left: 39px; right: auto; top: 40px; bottom: 40px; width: 2px; height: auto; background: linear-gradient(180deg, var(--accent), #6fd3a0); }
  .recorrido li { flex-direction: row; align-items: flex-start; text-align: left; }
  .hito { flex: none; }
  .garantia-flujo li { width: 100%; }
  .movil-escena { padding: 20px 10px 0; }
  .flota-google { left: -4px; }
  .flota-resena { right: -4px; }
  .servicio-fin.r2-1 { grid-column: auto; }
  .comp-cab { display: none; }
  .comp-fila { grid-template-columns: 1fr; }
  .comp-fila span + span { border-top: 0; }
  .oferta-persona { flex-direction: column; }
  .btn-grande { width: 100%; }
  /* Botón de compra siempre a mano en el móvil */
  .con-barra .oferta-barra { display: flex; position: fixed; inset: auto 0 0 0; z-index: 30; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(11,12,15,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
  .con-barra .oferta-barra .oferta-precio strong { font-size: 20px; }
  .con-barra .pie { padding-bottom: 96px; }
}

/* ---------- Zona de clientes (/cliente) ---------- */
.zona-cliente h1 { font-size: clamp(40px, 5vw, 64px); }
.aviso-cliente { padding: 14px 18px; border-radius: 12px; background: rgba(111,211,160,.1); border: 1px solid rgba(111,211,160,.35); color: #b9ecd3; }
.otros-pedidos { display: flex; flex-wrap: wrap; gap: 8px; }
.otros-pedidos a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-size: 14px; }
.otros-pedidos a[aria-current] { border-color: var(--accent); color: var(--accent); }
.progreso { list-style: none; padding: 0; margin: 32px 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.progreso li { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--ink-3); padding-top: 12px; border-top: 3px solid var(--line); }
.progreso li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); font-size: 13px; font-weight: 800; }
.progreso li.hecho { color: var(--ink); border-top-color: var(--accent); }
.progreso li.hecho span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.siguiente { padding: clamp(24px, 4vw, 36px); border-radius: var(--radius); background: linear-gradient(160deg, rgba(255,138,31,.13), var(--surface) 65%); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
.siguiente h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 10px; }
.siguiente p { color: var(--ink-2); margin: 8px 0 0; }
.siguiente .btn { margin-top: 12px; }
.botones { display: flex; flex-wrap: wrap; gap: 10px; }
.cliente-grid { display: grid; grid-template-columns: 1fr 320px; gap: 40px; margin-top: 48px; align-items: start; }
.h-seccion { font-size: 32px; margin-bottom: 18px; }
.entrega { padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); margin-bottom: 16px; }
.entrega h3 { font-size: 21px; margin: 6px 0 10px; }
.entrega-meta { margin: 0; font-size: 13px; color: var(--ink-3); }
.pastilla-c { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(255,138,31,.14); color: var(--accent); font-weight: 700; font-size: 12px; text-transform: none; margin-right: 6px; }
.archivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.archivo-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.archivo { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; text-decoration: none; word-break: break-word; }
.archivo small { color: var(--ink-3); }
.vacio-c { color: var(--ink-3); padding: 24px; border: 1px dashed var(--line); border-radius: var(--radius); }
.cliente-lado { display: grid; gap: 14px; }
.tarjeta-c { padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.tarjeta-c h3 { font-size: 17px; margin-bottom: 8px; }
.tarjeta-c p { color: var(--ink-2); font-size: 15px; margin: 6px 0; }
.tarjeta-c .mini { font-size: 13px; color: var(--ink-3); }
.ficha-form { max-width: 860px; margin-top: 28px; }
.ficha-form label small { color: var(--ink-3); font-size: 13px; font-weight: 400; }
.dias-cita { display: grid; gap: 14px; margin: 28px 0; }
.dia-cita { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 18px; margin: 0; }
.dia-cita legend { padding: 0 8px; font-weight: 700; }
.huecos { display: flex; flex-wrap: wrap; gap: 8px; }
.hueco { font: 600 15px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: border-color .15s, background .15s; }
.hueco:hover, .hueco:focus-visible { border-color: var(--accent); background: rgba(255,138,31,.12); outline: none; }
@media (max-width: 1000px) {
  .cliente-grid { grid-template-columns: 1fr; }
  .progreso { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
}

/* ---------- Contratar: datos → contrato y firma → pago ---------- */
.contratar h1 { font-size: clamp(36px, 5vw, 54px); }
.pasos-contrato { list-style: none; counter-reset: pc; display: flex; gap: 8px; padding: 0; margin: 8px 0 32px; }
.pasos-contrato li { counter-increment: pc; flex: 1; padding-top: 10px; border-top: 3px solid var(--line); font-size: 14px; color: var(--ink-3); }
.pasos-contrato li::before { content: counter(pc) " · "; }
.pasos-contrato li.actual { border-top-color: var(--accent); color: var(--ink); font-weight: 700; }
.pasos-contrato li.hecho { border-top-color: var(--accent); }
.form label small { color: var(--ink-3); font-size: 13px; font-weight: 400; }
.contrato-caja { max-height: 60vh; overflow: auto; margin: 24px 0; padding: 28px clamp(18px, 4vw, 40px); border-radius: var(--radius); background: #fbfaf7; color: #1b1b1b; font: 16px/1.6 Georgia, "Times New Roman", serif; }
.contrato-caja h1 { font: 700 24px/1.2 Georgia, serif; color: #111; margin-bottom: 14px; }
.contrato-caja h2 { font: 700 18px/1.3 Georgia, serif; color: #111; margin: 26px 0 8px; }
.contrato-caja p, .contrato-caja li { color: #1b1b1b; }
.contrato-caja .checks li::before { color: #1b1b1b; content: "–"; }
.contrato-entero { max-height: none; }
.contrato-firma { margin: 18px 0 6px; }
.contrato-firma img { max-width: 320px; border: 1px solid #ddd; background: #fff; border-radius: 6px; }
.contrato-firma figcaption, .contrato-prueba { font-size: 12.5px; color: #666; }
.firma-zona { display: grid; gap: 8px; }
.firma-cab { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.enlace-boton { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }
.aviso-fiscal { margin: 0; padding: 12px 16px; border-radius: 12px; background: rgba(255,190,70,.1); border: 1px solid rgba(255,190,70,.4); font-size: 14.5px; }
.aviso-fiscal[hidden] { display: none; }
#firma-pad { width: 100%; height: 190px; border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; border: 1px solid var(--line); }

/* ---------- Aviso de cookies (solo si hay píxel de Meta) ---------- */
.aviso-cookies { position: fixed; z-index: 50; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-inline: auto; display: grid; gap: 12px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); }
.aviso-cookies[hidden] { display: none; }
.aviso-cookies p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.aviso-cookies-botones { display: flex; gap: 10px; justify-content: flex-end; }
.aviso-cookies-botones .btn { flex: 1; max-width: 160px; }
.enlace-cookies { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; }
@media (max-width: 680px) { .con-barra .aviso-cookies { bottom: 92px; } }
.oferta-video h2 { font-size: clamp(30px, 4vw, 46px); text-align: center; margin-bottom: 26px; }
.oferta-video .video { box-shadow: 0 40px 100px -40px rgba(255,138,31,.45); }

/* Casilla «Mantener la sesión» al entrar al panel */
.recordar { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 15px; cursor: pointer; }
.recordar input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- Landing de oferta: precio con lo que incluye, plan, equipo compacto ---------- */
.oferta-precio .precio-etq { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.oferta-precio small { color: var(--ink-2); }
.oferta-barra .oferta-precio .precio-etq { font-size: 11px; margin: 0; }
.oferta-plan { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.oferta-plan summary { cursor: pointer; padding: 18px 22px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.oferta-plan summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; }
.oferta-plan[open] summary::after { content: "–"; }
.oferta-plan summary span { color: var(--ink-3); font-weight: 500; margin-left: auto; }
.plan-lista { list-style: none; margin: 0; padding: 0 22px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.plan-lista li { display: flex; flex-direction: column; gap: 3px; padding-top: 14px; border-top: 1px solid var(--line); }
.plan-lista li span:last-child { color: var(--ink-2); font-size: 15px; }
.plan-lista .etiqueta-s { align-self: flex-start; }
.oferta-equipo.compacto .oferta-persona { padding: 18px; gap: 16px; align-items: center; flex-direction: row; }
.oferta-equipo.compacto .avatar { width: 72px; height: 72px; flex: none; }
.oferta-equipo.compacto h3 { font-size: 24px; }
.oferta-equipo.compacto .cargo { margin: 2px 0 6px; }
.oferta-equipo.compacto p { font-size: 15px; margin: 0 0 6px; }

/* ---------- Ejemplos de redes (maquetas de Instagram, Google y reel; negocios ficticios) ---------- */
.ejemplos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.ej { margin: 0; }
.ej figcaption { text-align: center; margin-top: 14px; color: var(--ink-2); font-size: 15px; }
.ej figcaption b { color: var(--ink); }
.ej-nota { margin-top: 22px; font-size: 13px; color: var(--ink-3); text-align: center; }
.tel { width: min(100%, 320px); margin: 0 auto; border-radius: 40px; padding: 10px; background: #1c1f25; border: 1px solid #2c3038; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.tel-pant { border-radius: 31px; overflow: hidden; background: #000; color: #f5f5f5; font: 13px/1.35 -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; height: 600px; position: relative; }
.tel svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Instagram (perfil, tema oscuro) */
.ig-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 14px 8px; }
.ig-usuario { font-weight: 700; font-size: 16px; }
.ig-usuario .verif { display: none; }
.ig-cab { display: flex; align-items: center; gap: 16px; padding: 6px 14px; }
.ig-avatar { width: 76px; height: 76px; border-radius: 50%; padding: 3px; background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); flex: none; }
.ig-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #000; }
.ig-stats { flex: 1; }
.ig-stats > div { display: flex; justify-content: space-between; gap: 6px; margin-top: 4px; }
.ig-stats span { display: flex; flex-direction: column; font-size: 12px; color: #f5f5f5; }
.ig-stats span b { font-size: 15px; }
.ig-nombre-c { font-size: 13px; }
.ig-bio { padding: 6px 14px 0; display: flex; flex-direction: column; font-size: 12.5px; }
.ig-bio a { color: #a7c7ff; }
.ig-botones { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 10px 14px; }
.ig-botones span { background: #363636; border-radius: 8px; text-align: center; padding: 7px 0; font-weight: 600; font-size: 13px; }
.ig-botones .azul { background: #0095f6; }
.ig-dest { display: flex; gap: 12px; padding: 4px 14px 10px; overflow: hidden; }
.ig-dest span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; flex: none; width: 54px; }
.ig-dest i { width: 54px; height: 54px; border-radius: 50%; border: 2px solid #363636; background-size: cover; background-position: center; outline: 2px solid #000; outline-offset: -4px; }
.ig-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #262626; }
.ig-tabs span { display: grid; place-items: center; padding: 8px 0; color: #8e8e8e; }
.ig-tabs .on { color: #f5f5f5; border-bottom: 1.5px solid #f5f5f5; }
.ig-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig-rejilla img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* Google (ficha en el móvil, tema claro) */
.tel-claro .tel-pant { background: #fff; color: #202124; font-family: Roboto, Arial, sans-serif; }
.g-buscar { margin: 16px 12px 10px; border-radius: 24px; background: #f1f3f4; padding: 9px 14px; display: flex; gap: 10px; align-items: center; color: #3c4043; }
.g-logo b { font-size: 16px; }
.g-fotos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; height: 150px; }
.g-fotos img { width: 100%; height: 100%; object-fit: cover; }
.g-fotos img:first-child { grid-row: span 2; }
.g-ficha { padding: 10px 14px; }
.g-ficha h4 { font: 400 21px/1.2 "Google Sans", Roboto, Arial, sans-serif; margin: 0 0 4px; color: #202124; }
.g-nota { margin: 0; color: #70757a; display: flex; align-items: center; gap: 4px; }
.g-nota b { color: #202124; font-weight: 500; }
.g-estrellas { color: #fbbc04; letter-spacing: 1px; font-size: 13px; }
.g-tipo { margin: 2px 0 10px; color: #70757a; font-size: 12.5px; }
.g-tipo .abierto { color: #188038; }
.g-acciones { display: flex; gap: 6px; overflow: hidden; margin-bottom: 10px; }
.g-acciones span { border: 1px solid #dadce0; border-radius: 18px; padding: 5px 11px; color: #0b57d0; font-weight: 500; white-space: nowrap; font-size: 12.5px; }
.g-acciones span:first-child { background: #0b57d0; color: #fff; border-color: #0b57d0; }
.g-pestanas { display: flex; gap: 16px; border-bottom: 1px solid #e8eaed; margin: 0 -14px 10px; padding: 0 14px; color: #5f6368; font-weight: 500; }
.g-pestanas span { padding: 8px 0; }
.g-pestanas .on { color: #0b57d0; border-bottom: 3px solid #0b57d0; }
.g-resena { padding: 6px 0 10px; border-bottom: 1px solid #e8eaed; font-size: 12.5px; }
.g-resena p { margin: 4px 0; }
.g-autor { display: flex; gap: 10px; align-items: center; }
.g-autor i { width: 30px; height: 30px; border-radius: 50%; background: #7e57c2; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 500; }
.g-resena:nth-of-type(2) .g-autor i { background: #00897b; }
.g-autor b { display: block; font-weight: 500; }
.g-autor small { color: #70757a; }
.g-cuando span { color: #70757a; margin-left: 6px; }
.g-resp { background: #f1f3f4; border-radius: 8px; padding: 8px 10px; margin-top: 6px; }
.g-resp b { font-weight: 500; font-size: 12px; }
/* Reel */
.reel-pant { background-size: cover; background-position: center; }
.reel-pant::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 20%, transparent 55%, rgba(0,0,0,.7)); }
.reel-pant > * { position: relative; z-index: 1; }
.reel-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 16px; font-size: 20px; }
.reel-rotulo { position: absolute; top: 34%; left: 0; right: 0; text-align: center; font: 800 19px/1.25 -apple-system, "Helvetica Neue", Arial, sans-serif; text-shadow: 0 2px 10px rgba(0,0,0,.6); padding: 0 20px; }
.reel-lado { position: absolute; right: 10px; bottom: 120px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.reel-lado span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; }
.reel-lado svg { width: 28px; height: 28px; }
.reel-pie { position: absolute; left: 0; right: 56px; bottom: 0; padding: 0 14px 18px; font-size: 12.5px; }
.reel-autor { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.reel-autor i { width: 30px; height: 30px; border-radius: 50%; background-size: cover; background-position: center; border: 1px solid #fff; }
.reel-autor span { border: 1px solid rgba(255,255,255,.8); border-radius: 8px; padding: 2px 9px; font-weight: 600; }
.reel-pie p { margin: 0 0 6px; }
.reel-audio { display: flex; align-items: center; gap: 6px; }
.reel-audio svg { width: 14px; height: 14px; }
@media (max-width: 1000px) {
  .ejemplos { grid-template-columns: 1fr; gap: 40px; }
  .plan-lista { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .oferta-hero-img { display: none; }
  .oferta-equipo.compacto .oferta-persona { flex-direction: row; align-items: flex-start; }
  .tel-pant { height: 560px; }
}
/* Ajustes de las maquetas y de la barra fija */
.g-resena .g-estrellas, .g-nota .g-estrellas { color: #fbbc04; }
.reel-rotulo { padding: 0 60px 0 20px; }
.ig-cab { gap: 12px; }
.ig-avatar { width: 68px; height: 68px; }
.ig-stats span { font-size: 11px; }
.ig-stats span b { font-size: 14px; }
.ej-desliza { display: none; }
@media (max-width: 680px) {
  .con-barra .oferta-barra .oferta-precio .precio-etq { display: inline; margin-right: 6px; }
  .con-barra .oferta-barra .oferta-precio { white-space: nowrap; }
  .con-barra .oferta-barra .oferta-precio strong { font-size: 18px; }
  .ejemplos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .ejemplos::-webkit-scrollbar { display: none; }
  .ej { flex: 0 0 84%; scroll-snap-align: center; }
  .ej-desliza { display: block; text-align: center; color: var(--ink-3); font-size: 14px; margin: 0 0 14px; }
}
@media (max-width: 680px) {
  .con-barra .oferta-barra .btn { white-space: nowrap; padding-inline: 18px; }
  .con-barra .oferta-barra .oferta-precio .precio-etq { font-size: 10px; }
}
.plan-lista.oferta-plan { padding: 4px 22px 22px; }
.oferta .dato small { color: var(--ink-3); }
.antes-despues { margin: 8px auto 36px; max-width: 760px; }
.antes-despues img { width: 100%; height: auto; border-radius: var(--radius); }
.antes-despues figcaption { text-align: center; color: var(--ink-3); font-size: 13px; margin-top: 10px; }

/* ---------- Área de cliente por bloques ---------- */
.area-quien { margin-bottom: 14px; }
.area-nav { display: flex; gap: 4px; overflow-x: auto; padding: 6px; margin-bottom: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; scrollbar-width: none; }
.area-nav::-webkit-scrollbar { display: none; }
.area-nav a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-size: 14.5px; font-weight: 600; border: 1px solid transparent; }
.area-nav a:hover { color: var(--ink); background: var(--surface-2); }
.area-nav a[aria-current="page"] { color: #fff; background: var(--accent); border-color: transparent; }
.area-num { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--surface-2); color: var(--ink-2); }
.area-nav a[aria-current="page"] .area-num { background: var(--accent); color: var(--accent-ink); }
.area-punto { background: var(--accent); color: #fff; border-radius: 999px; font-size: 11.5px; padding: 1px 7px; font-weight: 800; }
.area-punto.rojo { background: #d64545; color: #fff; }
.area-nav a[aria-current="page"] .area-punto { background: #fff; color: var(--accent); }
.area-nav a[aria-current="page"] .area-punto.rojo { background: #fff; color: #d64545; }
/* Área de cliente en claro (como el panel): fondo claro, tarjetas blancas */
body.area-cliente { --bg: #f6f3ee; --bg-alt: #efeae1; --surface: #ffffff; --surface-2: #f1ede6; --ink: #1b1b1b; --ink-2: #38342d; --ink-3: #6b655b; --line: #e2dcd0; --lince: #07080a; color-scheme: light; }
body.area-cliente .nav { background: color-mix(in srgb, var(--bg) 92%, transparent); }
body.area-cliente .btn { color: #fff; }
body.area-cliente .btn-ghost, body.area-cliente .btn.btn-ghost { color: var(--ink); }
body.area-cliente .aviso-cliente { background: #e9f6ee; color: #1d5b37; border-color: #bfe3cd; }
.pendiente-c { margin: 0 0 22px; padding: 20px 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.pendiente-c h2 { font-size: 26px; margin: 0 0 12px; }
.pendiente-c h2 small { color: var(--ink-3); font: 600 14px var(--sans); margin-left: 8px; }
.pendiente-c ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pendiente-c li a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); text-decoration: none; color: var(--ink); border: 1px solid transparent; }
.pendiente-c li a:hover { border-color: var(--accent); }
.pendiente-c li small { display: block; color: var(--ink-3); font-size: 13.5px; }
.pendiente-c .marca-estado { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #d64545; }
.pendiente-c .marca-estado.ambar { background: var(--accent); }
.estado-c { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0 0 24px; }
.estado-c a, .estado-c div { padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.estado-c b { display: block; margin-bottom: 4px; }
.estado-c small { color: var(--ink-3); font-size: 13.5px; }
.barra-completa { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); margin: 0 0 22px; }
.barra-completa .barra { flex: 1; height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.barra-completa .barra i { display: block; height: 100%; background: #2fa36b; border-radius: 6px; }
.barra-completa.baja .barra i { background: #d64545; }
.barra-completa.media .barra i { background: var(--accent); }
.barra-completa b { font-size: 20px; }
.barra-completa.baja b { color: #d64545; }
.negocio-edicion { max-width: 860px; }
.negocio-edicion fieldset.seccion { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 18px 22px 8px; margin: 0 0 18px; }
.negocio-edicion fieldset.seccion legend { font: 400 26px/1.1 var(--serif); padding: 0 6px; }
.negocio-edicion .pregunta-campo input, .negocio-edicion .pregunta-campo textarea { font-size: 16.5px; }
.pdf-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.bloques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.bloque-c { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 6px 14px; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.bloque-c:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-1px); }
.bloque-num { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 800 18px/1 var(--sans); background: var(--surface-2); color: var(--ink-2); }
.bloque-c.pendiente .bloque-num { background: var(--accent); color: var(--accent-ink); }
.bloque-c.hecho .bloque-num { background: rgba(111,211,160,.16); color: #6fd3a0; }
.bloque-txt b { display: block; font-size: 17px; }
.bloque-txt small { display: block; color: var(--ink-3); font-size: 14px; line-height: 1.45; margin-top: 3px; }
.bloque-est { grid-column: 2; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.bloque-c.pendiente .bloque-est { color: var(--accent); }
.bloque-c.hecho .bloque-est { color: #6fd3a0; }
.bloque-c.espera { opacity: .78; }

/* Asistente del bloque 1 (una pregunta por pantalla) */
.asistente { max-width: 760px; }
.asistente .pregunta { padding: 8px 0 20px; }
.asistente.con-pasos .pregunta { min-height: 300px; }
.pregunta-num { color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px; }
.pregunta h1, .pregunta h2 { font: 400 clamp(30px, 4.4vw, 46px)/1.12 var(--serif); margin: 0 0 18px; }
.pregunta-ayuda { color: var(--ink-2); }
/* Cómo funciona el mes, en tres pasos: antes era un párrafo largo que nadie se leía. */
.pasos-mes { list-style: none; counter-reset: paso; margin: 18px 0 10px; padding: 0; display: grid; gap: 12px; }
.pasos-mes li { counter-increment: paso; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: start; }
.pasos-mes li::before { content: counter(paso); grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; }
.pasos-mes b { display: block; font-size: 17px; }
.pasos-mes span { display: block; color: var(--ink-2); }
.acciones-mes { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.casilla-c { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.casilla-c input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.pregunta-campo { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; font-weight: 600; color: var(--ink-2); }
.pregunta-campo input, .pregunta-campo textarea, .nota-marca textarea, .chat-form textarea, .whatsapp-cita input { width: 100%; font: 400 19px/1.45 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.pregunta-campo input:focus, .pregunta-campo textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.pregunta-campo small { font-weight: 400; color: var(--ink-3); font-size: 14px; }
.redes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.redes-grid .pregunta-campo input { font-size: 16px; padding: 11px 14px; }
.chips { border: 0; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.chips legend { font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 15.5px; }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.asistente-barra { position: sticky; bottom: 0; padding: 14px 0 18px; background: linear-gradient(transparent, var(--bg) 30%); }
.asistente-progreso { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 14px; }
.asistente-progreso span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.asistente-botones { display: flex; gap: 10px; justify-content: flex-end; }
.asistente:not(.con-pasos) .asistente-progreso, .asistente:not(.con-pasos) [data-siguiente], .asistente:not(.con-pasos) [data-atras] { display: none; }

/* Bloque 2: marca */
.marca-form { display: flex; flex-direction: column; gap: 18px; max-width: 860px; }
.marca-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 20px 22px; margin: 0; }
.marca-item legend { font: 400 26px/1.1 var(--serif); padding: 0 6px; }
.marca-opciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.marca-opciones .chip span { font-size: 14px; padding: 8px 13px; }
.idea-c { display: block; margin-top: 12px; }
.idea-c textarea { display: block; width: 100%; box-sizing: border-box; min-height: 160px; padding: 14px 16px; font: inherit; line-height: 1.5; resize: vertical; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; margin-top: 6px; }
.soltar { position: relative; border: 1.5px dashed var(--line); border-radius: 12px; padding: 16px; text-align: center; transition: border-color .15s, background .15s; }
.soltar.encima { border-color: var(--accent); background: rgba(255,138,31,.06); }
.soltar input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.soltar label { cursor: pointer; display: block; color: var(--ink-2); }
.soltar label b { color: var(--ink); }
.soltar label small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.subidos { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px; text-align: left; }
.subidos li { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 10px; padding: 6px 8px; font-size: 13.5px; max-width: 100%; }
.subidos img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.subidos a { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.subidos .quitar { background: none; border: 0; color: var(--ink-3); font-size: 18px; cursor: pointer; }
.subidos .error { color: #e4685a; }
.subidos .subiendo { color: var(--ink-3); }
.nota-marca { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 14px; color: var(--ink-3); }
.nota-marca textarea { font-size: 15.5px; padding: 10px 12px; }
.enlace-suave { color: var(--ink-3); margin-left: 14px; }

/* Bloque 3: canal de la cita */
.canal-cita { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px 20px; margin: 0 0 22px; display: grid; gap: 10px; }
.canal-cita legend { font-weight: 700; padding: 0 6px; }
.opcion-canal { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.opcion-canal input { margin-top: 5px; accent-color: var(--accent); }
.opcion-canal small { display: block; color: var(--ink-3); font-size: 14px; }
.whatsapp-cita { display: flex; flex-direction: column; gap: 6px; max-width: 320px; font-size: 14px; color: var(--ink-2); }
.whatsapp-cita input { font-size: 17px; padding: 11px 14px; }
.elige-hueco { font-weight: 700; margin: 0 0 10px; }

/* Bloque 5: piezas y chat */
.piezas-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }
.chat { position: sticky; top: 90px; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.chat-hilo { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 14px; }
.msg p { margin: 0; }
.msg small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.msg.suyo { background: var(--surface-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.mio { background: rgba(255,138,31,.16); align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-form { display: flex; flex-direction: column; gap: 10px; }
.chat-form textarea { font-size: 16px; }
.sr { display: block; }
.sr > :not(textarea) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Bloque 6: calendario */
.cartel-extra { padding: 20px 22px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: linear-gradient(160deg, rgba(255,138,31,.12), var(--surface) 70%); margin-bottom: 22px; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cartel-extra p { margin: 0; flex: 1 1 380px; color: var(--ink-2); }
.cartel-extra b { color: var(--ink); }
.cal { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; }
.cal-gris { filter: grayscale(1); opacity: .45; pointer-events: none; user-select: none; }
.cal-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cal-cab a { text-decoration: none; font-size: 20px; padding: 2px 10px; }
.cal-sem, .cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-sem span { text-align: center; font-size: 12px; color: var(--ink-3); font-weight: 700; }
.cal-dia { min-height: 84px; border-radius: 8px; background: var(--surface-2); padding: 6px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-dia.vacio { background: transparent; }
.cal-dia.hoy { outline: 1.5px solid var(--accent); }
.cal-n { font-size: 12px; color: var(--ink-3); }
.cal-pub { font-size: 11.5px; line-height: 1.3; padding: 3px 5px; border-radius: 5px; background: rgba(120,160,255,.16); }
.cal-pub.publicada { background: rgba(111,211,160,.18); }
.cal-pub.pendiente { background: rgba(255,138,31,.2); }
.cal-pub.cambios, .cal-pub.pendiente { background: rgba(255,138,31,.2); }
/* bloque 6: redes y piezas para revisar */
.redes-c, .revisar-c { margin: 30px 0 34px; }
.nota-redes { color: var(--ink-2); max-width: 720px; }
.redes-lista { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.redes-lista li { padding: 14px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.red-cab { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.red-cab small { color: var(--ink-3); }
.pastilla-c.ok { background: rgba(111,211,160,.16); color: #6fd3a0; }
.pastilla-c.falta { background: rgba(255,138,31,.14); color: var(--accent); }
.red-guia { margin-top: 10px; border: 0; padding: 0; }
.red-guia summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.red-guia p { color: var(--ink-2); margin: 10px 0 12px; }
.conectar-redes { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.conectar-redes small { color: var(--ink-3); flex: 1 1 320px; }
.vacio-c { color: var(--ink-2); }
.piezas-revisar { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.pieza-r { padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pieza-r h3 { font-size: 19px; margin: 0; }
.pieza-medios { display: grid; gap: 6px; border-radius: 10px; overflow: hidden; }
.pieza-medios.varios { grid-template-columns: repeat(2, 1fr); }
.pieza-medios img, .pieza-medios video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: #000; border-radius: 8px; }
.pieza-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: auto; }
.pieza-acciones form { margin: 0; }
.pieza-acciones details { flex: 0 0 auto; border: 0; padding: 0; margin: 0; }
.pieza-acciones details[open] { flex: 1 1 100%; }
.pieza-acciones details summary { list-style: none; display: inline-block; cursor: pointer; }
.pieza-acciones details summary::-webkit-details-marker { display: none; }
.pieza-acciones details form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pieza-acciones textarea { width: 100%; box-sizing: border-box; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }
.cambios-pedidos { padding: 10px 12px; border-radius: 10px; background: rgba(214,92,200,.12); margin: 0; }
.cal-ley { display: flex; gap: 8px; margin: 12px 0 0; flex-wrap: wrap; }

/* Ajustes */
.ajustes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cuota, .facturas, .extras-lista { list-style: none; padding: 0; margin: 0; }
.cuota li, .facturas li, .extras-lista li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cuota li.total { border-bottom: 0; font-size: 16.5px; }
.cuota small { color: var(--ink-3); font-weight: 400; }
.extras-lista small { display: block; color: var(--ink-3); }
.facturas a { white-space: nowrap; }
.aviso-baja { color: var(--accent); font-weight: 700; }

/* Bloque 4: el plan */
.plan-doc { max-width: 880px; }
.plan-cab h1 { margin-bottom: 10px; }
.plan-sec { margin-top: 34px; }
.plan-sec h2 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 14px; }
.plan-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plan-caja { padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.plan-caja h3 { font-size: 17px; margin-bottom: 8px; }
.plan-caja ul { margin: 0; padding-left: 20px; color: var(--ink-2); }
.plan-caja.bien { border-left: 3px solid #6fd3a0; }
.plan-caja.mejorar { border-left: 3px solid var(--accent); }
.plan-caja.incluido { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.plan-marca { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.plan-marca li { padding: 12px 14px; background: var(--surface); border-radius: 12px; border: 1px solid var(--line); display: flex; flex-direction: column; }
.plan-marca span { color: var(--ink-3); font-size: 14px; }
.plan-h3 { margin: 24px 0 10px; font-size: 18px; }
.plan-extras { display: flex; flex-direction: column; gap: 10px; }
.plan-extra { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.plan-extra p { margin: 4px 0 0; color: var(--ink-3); font-size: 14.5px; }
.plan-extra-precio { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; white-space: nowrap; font-weight: 700; }
.plan-extra.activo { border-color: rgba(111,211,160,.5); }
.plan-total { margin-top: 18px; padding: 18px 20px; border-radius: var(--radius); background: linear-gradient(160deg, rgba(255,138,31,.13), var(--surface) 70%); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.plan-total b { font-size: 24px; }
.plan-total small { flex-basis: 100%; color: var(--ink-2); }
.plan-pasos { padding-left: 22px; color: var(--ink-2); }
.plan-pasos li { margin-bottom: 8px; }
.plan-pie { margin-top: 30px; color: var(--ink-3); font-size: 14px; }

@media (max-width: 900px) {
  .bloques, .ajustes-grid, .piezas-grid, .plan-dos { grid-template-columns: 1fr; }
  .chat { position: static; }
}
@media (max-width: 560px) {
  .redes-grid { grid-template-columns: 1fr; }
  .cal-dia { min-height: 58px; padding: 4px; }
  .cal-pub { font-size: 10px; }
  .plan-extra { flex-direction: column; align-items: flex-start; }
  .plan-extra-precio { align-items: flex-start; }
}

.asistente [hidden], .zona-cliente [hidden] { display: none !important; }

.consultar-txt { margin-top: 16px; }
.consultar-botones { display: flex; flex-wrap: wrap; gap: 8px; }



/* ---------- cursos con sesión 1:1, aula y preguntas ---------- */
.opcion-compra { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: calc(var(--radius) - 6px); border: 1px solid var(--line); }
.opcion-compra.destacada { border-color: var(--accent); background: rgba(255,138,31,.07); }
.opcion-compra .precio-grande { font-size: 38px; }
.opcion-nombre { font-weight: 700; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pastilla-rec { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #1a0e02; }
.bloque-sesion { padding: 28px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: linear-gradient(160deg, rgba(255,138,31,.08), var(--surface) 70%); }
.upsell { text-align: left; }
.upsell h1 { font-size: clamp(30px, 5vw, 44px); }
.upsell .checks { margin: 22px 0; }
.upsell-nota { color: var(--ink-2); }
.upsell-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin: 26px 0 18px; }
.btn-grande { font-size: 18px; padding: 18px 30px; }
.no-gracias { color: var(--ink-3); font-size: 14px; }
.btn-mini { font-size: 14px; padding: 9px 16px; }
.aviso-ok { padding: 12px 16px; border-radius: 12px; background: rgba(80,200,120,.12); border: 1px solid rgba(80,200,120,.35); }
.aviso-voz { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); }
.oferta-leccion { margin: 36px 0; padding: 26px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: linear-gradient(160deg, rgba(255,138,31,.09), var(--surface) 70%); }
.oferta-leccion h2 { font-size: 26px; margin: 4px 0 10px; }
.seguir-juntos { margin-top: 48px; padding: 30px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.aula-menu .menu-sesion { margin-top: 14px; border: 1px dashed color-mix(in srgb, var(--accent) 60%, var(--line)); color: var(--ink); font-weight: 600; }
.aula-sesion .form, .ficha-sesion { margin: 24px 0; }
.ficha-sesion textarea { width: 100%; }
.preguntas { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.preguntas h2 { font-size: 28px; }
.ayuda-preguntas { color: var(--ink-2); margin: 8px 0 18px; }
.nueva-pregunta { margin-bottom: 28px; }
.nueva-pregunta textarea, .responder textarea { width: 100%; }
.hilo { padding: 18px 0; border-bottom: 1px solid var(--line); }
.mensaje-autor { margin: 0 0 6px; font-size: 14.5px; }
.mensaje-autor small { color: var(--ink-3); }
.mensaje-texto p { margin: 0 0 8px; }
.respuestas { margin: 12px 0 0 22px; padding-left: 16px; border-left: 2px solid var(--line); display: grid; gap: 14px; }
.mensaje.del-equipo .mensaje-autor strong { color: var(--accent); }
.responder summary { cursor: pointer; color: var(--ink-3); font-size: 14px; margin-top: 8px; }
.responder .form { margin-top: 10px; }
.moderar { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--ink-3); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.pastilla-oculta { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(255,138,31,.15); color: var(--accent); }

/* ---------- workbooks interactivos ---------- */
.wb-tarjeta { margin: 40px 0; padding: 26px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: linear-gradient(150deg, rgba(255,138,31,.12), var(--surface) 65%); }
.wb-tarjeta h2 { font-size: 28px; margin: 4px 0 8px; }
.wb-tarjeta.hecho { border-color: rgba(80,200,120,.5); background: linear-gradient(150deg, rgba(80,200,120,.1), var(--surface) 65%); }
.wb-meta { color: var(--ink-2); font-size: 14.5px; }
.wb-barra { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 14px 0 8px; }
.wb-barra.grande { height: 12px; margin: 18px 0 28px; }
.wb-barra span { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s; }
.wb-logro-mini { font-size: 17px; }
.aula-menu .menu-logros { margin-bottom: 10px; font-weight: 700; color: var(--ink); background: rgba(255,138,31,.1); }
.wb .eyebrow a { color: inherit; }
.wb h1 { font-size: clamp(30px, 5vw, 42px); }
.wb-sub { display: block; font-size: 16px; color: var(--ink-3); font-weight: 500; letter-spacing: 0; margin-top: 6px; }
.wb-indice { margin: 22px 0; padding-left: 22px; display: grid; gap: 8px; }
.wb-indice li.hecha::marker { content: "✓  "; color: var(--accent); }
.wb-pasos { display: flex; gap: 6px; margin: 4px 0 22px; }
.wb-pasos span { flex: 1; height: 6px; border-radius: 99px; background: var(--line); }
.wb-pasos span.hecho { background: var(--accent); }
.wb-pasos span.actual { background: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.wb-num-pantalla { color: var(--ink-3); font-size: 14px; margin: 0; }
.wb-intro { color: var(--ink-2); margin: 10px 0 22px; }
.wb-form { display: grid; gap: 22px; }
.wb-campo { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.wb-campo legend { padding: 0; margin-bottom: 8px; }
.wb-etiqueta { font-weight: 700; color: var(--ink); }
.wb-ayuda { display: block; color: var(--ink-3); font-size: 13.5px; font-weight: 400; }
.wb-campo input:not([type]), .wb-campo input[type="text"], .wb-campo textarea, .wb-lista input, .wb-tabla input:not([type="checkbox"]) { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.wb-campo textarea { resize: vertical; min-height: 90px; }
.wb-con-voz { position: relative; display: block; }
.wb-con-voz textarea, .wb-con-voz input { padding-right: 52px !important; }
.wb-voz { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg, #0b0c0f); cursor: pointer; font-size: 16px; }
.wb-voz.grabando { background: #e5484d; border-color: #e5484d; animation: wb-latido 1s infinite; }
@keyframes wb-latido { 50% { box-shadow: 0 0 0 8px rgba(229,72,77,.25); } }
.wb-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.wb-grupo { padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.wb-grupo-tit { font-weight: 700; margin: 0 0 8px; }
.wb-check { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.wb-check input { margin-top: 4px; accent-color: var(--accent); width: 18px; height: 18px; }
.wb-check input:checked + span { color: var(--ink); }
.wb-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.wb-opcion { display: flex; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.wb-opcion:has(input:checked) { border-color: var(--accent); background: rgba(255,138,31,.1); }
.wb-opcion input { accent-color: var(--accent); }
.wb-opcion small { display: block; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.wb-escala-fila { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 12px; align-items: center; padding: 6px 0; }
.wb-escala-fila span:last-child { text-align: right; }
.wb-escala-fila input { accent-color: var(--accent); }
.wb-lista { gap: 8px; }
.wb-lista-fila { display: flex; gap: 8px; align-items: center; }
.wb-lista-fila input.corta { max-width: 34%; }
.wb-num { width: 24px; flex: none; color: var(--ink-3); font-weight: 700; text-align: right; }
.wb-tabla-scroll { overflow-x: auto; }
.wb-tabla table { border-collapse: collapse; width: 100%; min-width: 520px; }
.wb-tabla th, .wb-tabla td { padding: 6px; text-align: left; font-size: 14px; }
.wb-tabla thead th { color: var(--ink-3); font-weight: 600; }
.wb-tabla input:not([type="checkbox"]) { padding: 8px 10px; }
.wb-tabla .wb-si { text-align: center; }
.wb-tabla .wb-si input { width: 20px; height: 20px; accent-color: var(--accent); }
.wb-tabla output { font-weight: 700; }
.wb-info { padding: 16px 18px; border-radius: 14px; border-left: 4px solid var(--accent); background: var(--surface); }
.wb-info.truco { border-left-color: #f5c518; }
.wb-info.aviso { border-left-color: #e5484d; }
.wb-info-tit { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; font-weight: 700; }
.wb-info p { margin: 0 0 6px; }
.wb-prompt { padding: 16px 18px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--accent) 60%, var(--line)); }
.wb-prompt pre { white-space: pre-wrap; font: 14.5px/1.55 var(--sans); margin: 0 0 12px; color: var(--ink); }
.wb-saltar { margin: 14px 0 0; text-align: right; }
.wb-saltar button { background: none; border: 0; padding: 0; font: inherit; font-size: 14.5px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wb-saltar button:hover { color: var(--ink); }
.wb-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.wb-guardado { color: var(--ink-3); font-size: 13px; }
.wb-pensando { color: var(--accent); font-weight: 600; animation: wb-latido-txt 1.2s infinite; }
@keyframes wb-latido-txt { 50% { opacity: .45; } }
.wb-valoracion { padding: 18px 20px; border-radius: 14px; background: rgba(255,138,31,.1); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); margin: 0 0 22px; }
.wb-valoracion-tit { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; font-weight: 700; }
.wb-valoracion p:last-child { margin: 0; }
.wb-celebra { position: relative; text-align: center; padding: 34px 20px; margin-bottom: 24px; border-radius: var(--radius); background: radial-gradient(circle at 50% 0%, rgba(255,138,31,.25), transparent 70%); overflow: hidden; }
.wb-trofeo { font-size: 64px; margin: 0; animation: wb-salto .8s ease-out; }
@keyframes wb-salto { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
.wb-confeti i { position: absolute; top: -12px; width: 8px; height: 14px; background: var(--accent); opacity: .9; animation: wb-cae 2.6s ease-in forwards; }
.wb-confeti i:nth-child(3n) { background: #f5c518; } .wb-confeti i:nth-child(4n) { background: #f2eee7; }
.wb-confeti i:nth-child(1) { left: 4%; animation-delay: .1s } .wb-confeti i:nth-child(2) { left: 8%; animation-delay: .5s } .wb-confeti i:nth-child(3) { left: 12%; animation-delay: .2s } .wb-confeti i:nth-child(4) { left: 16%; animation-delay: .7s } .wb-confeti i:nth-child(5) { left: 20%; animation-delay: .3s } .wb-confeti i:nth-child(6) { left: 24%; animation-delay: .9s } .wb-confeti i:nth-child(7) { left: 28%; animation-delay: 0s } .wb-confeti i:nth-child(8) { left: 32%; animation-delay: .6s } .wb-confeti i:nth-child(9) { left: 36%; animation-delay: .4s } .wb-confeti i:nth-child(10) { left: 40%; animation-delay: .8s } .wb-confeti i:nth-child(11) { left: 44%; animation-delay: .2s } .wb-confeti i:nth-child(12) { left: 48%; animation-delay: .5s } .wb-confeti i:nth-child(13) { left: 52%; animation-delay: .1s } .wb-confeti i:nth-child(14) { left: 56%; animation-delay: .7s } .wb-confeti i:nth-child(15) { left: 60%; animation-delay: .3s } .wb-confeti i:nth-child(16) { left: 64%; animation-delay: .9s } .wb-confeti i:nth-child(17) { left: 68%; animation-delay: .4s } .wb-confeti i:nth-child(18) { left: 72%; animation-delay: 0s } .wb-confeti i:nth-child(19) { left: 76%; animation-delay: .6s } .wb-confeti i:nth-child(20) { left: 80%; animation-delay: .2s } .wb-confeti i:nth-child(21) { left: 84%; animation-delay: .8s } .wb-confeti i:nth-child(22) { left: 88%; animation-delay: .3s } .wb-confeti i:nth-child(23) { left: 92%; animation-delay: .5s } .wb-confeti i:nth-child(24) { left: 96%; animation-delay: .1s }
@keyframes wb-cae { to { transform: translateY(320px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wb-confeti, .wb-trofeo, .wb-voz.grabando, .wb-pensando { animation: none; } .wb-confeti { display: none; } }
.wb-entregable-bloque { padding: 22px 0; border-bottom: 1px solid var(--line); }
.wb-entregable-bloque h2 { font-size: 24px; margin-bottom: 12px; }
.wb-respuesta { margin-bottom: 14px; }
.wb-respuesta .wb-etiqueta { margin: 0 0 4px; font-size: 14px; color: var(--ink-3); }
.wb-acciones { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.wb-siguiente { margin-top: 18px; color: var(--ink-2); }
.wb-logros { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.wb-logro { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); filter: grayscale(1); opacity: .75; }
.wb-logro.conseguido { filter: none; opacity: 1; border-color: var(--accent); background: rgba(255,138,31,.08); color: var(--ink); }
.wb-logro-ico { font-size: 30px; }
.wb-logro small { color: var(--ink-3); }
@media print {
  header, footer, .no-imprimir, .aula-menu { display: none !important; }
  body { background: #fff !important; color: #111 !important; }
  .wb-entregable * { color: #111 !important; }
  .wb-valoracion, .wb-prompt, .wb-celebra { background: none !important; border-color: #bbb !important; }
}
@media (max-width: 640px) {
  .wb-escala-fila { grid-template-columns: 1fr 1fr; }
  .wb-escala-fila input { grid-column: 1 / -1; grid-row: 2; }
  .wb-lista-fila { flex-wrap: wrap; padding-left: 32px; position: relative; }
  .wb-lista-fila .wb-num { position: absolute; left: 0; top: 12px; }
  .wb-lista-fila input.corta { max-width: none; }
}

/* ---------- landing de curso en modo venta ---------- */
.bloque-resultado.venta { padding: 28px; border-radius: var(--radius); background: linear-gradient(160deg, color-mix(in srgb, var(--c, var(--accent)) 16%, transparent), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 45%, var(--line)); }
.bloque-resultado.venta .checks li { font-size: 18px; color: var(--ink); margin: 14px 0; }
.dolores-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.dolor { padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.dolor strong { display: block; font-size: 18px; margin-bottom: 6px; color: var(--ink); }
.dolor p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.dolores-cierre { margin-top: 18px; font-size: 19px; color: var(--ink); font-weight: 600; }
.cta-medio { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0; }
.cta-medio span { color: var(--ink-2); }
.practica-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 18px; }
.practica figure { margin: 0; }
.practica img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 24px 60px -30px rgba(0,0,0,.8); }
.practica figcaption { margin-top: 10px; color: var(--ink-2); font-size: 15px; }
.temario-plegado details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.temario-plegado summary { cursor: pointer; font-weight: 700; }
.temario-plegado ul { margin: 10px 0 0; color: var(--ink-2); }
.todo-aprendes { margin-top: 18px; }
.todo-aprendes summary { cursor: pointer; color: var(--ink-2); }
.practica-grid figure:first-child { grid-column: 1 / -1; }

/* ---------- landing de venta (a todo el ancho, por bandas) ---------- */
body.tema-claro { --bg: #efe6d6; --bg-alt: #e7dcc7; --surface: #f8f2e7; --surface-2: #fffaf1; --ink: #15130f; --ink-2: #2d2923; --ink-3: #5f584d; --line: #d6c9b1; --amarillo: #f5c518; }
body.tema-claro .nav { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.venta { --amarillo: #f5c518; overflow: hidden; }
.venta .wrap { max-width: 1240px; }
.venta h2 { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.02; margin: 0 0 28px; }
.v-centro { text-align: center; }
.v-estrecho { max-width: 760px; margin-left: auto; margin-right: auto; }
.v-eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px; }
.v-eyebrow a { color: inherit; } .v-eyebrow b { color: var(--accent); }
.v-lead { font-size: 20px; line-height: 1.5; color: var(--ink-2); }
.v-nota { font-size: 14px; color: var(--ink-3); margin-top: 16px; }
.v-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.v-botones.v-centro { justify-content: center; }
.v-hero { padding: 56px 0 72px; }
.v-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.v-hero h1 { font-size: clamp(44px, 5.6vw, 82px); line-height: .98; letter-spacing: -0.02em; margin: 0 0 22px; }
.v-hero-img { margin: 0; }
.v-hero-img img { width: 100%; height: auto; border-radius: 24px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.55); transform: rotate(1.2deg); }
.v-banda { padding: 88px 0; }
.v-oscura { background: #0f1115; color: #f2eee7; --ink: #f2eee7; --ink-2: #e2ddd3; --ink-3: #b9b4aa; --line: #2c3038; --surface: #1a1d23; }
.v-color { background: var(--accent); color: #1a0e02; --ink: #1a0e02; --ink-2: #2a1704; --ink-3: #4b2a08; --line: rgba(0,0,0,.18); --surface: rgba(255,255,255,.22); }
.v-amarilla { background: var(--amarillo); color: #15130f; --ink: #15130f; --ink-2: #26221b; --ink-3: #4a4235; --line: rgba(0,0,0,.18); --surface: rgba(255,255,255,.4); }
.v-amarilla .checks li::before, .v-color .checks li::before { color: #15130f; }
.v-resultados, .v-dolores, .v-pasos, .v-equipo, .v-precios { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; }
.v-resultados li { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px 22px; font-size: 18px; line-height: 1.4; color: var(--ink); }
.v-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #1a0e02; font-weight: 800; margin-bottom: 14px; }
.v-dolor { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 30px 24px 24px; }
.v-comilla { position: absolute; top: -6px; left: 18px; font: 400 90px/1 var(--serif); color: var(--accent); }
.v-dolor strong { display: block; font-size: 20px; line-height: 1.25; margin: 22px 0 10px; color: var(--ink); }
.v-dolor p { margin: 0; color: var(--ink-2); }
.v-giro { margin: 44px auto 0; max-width: 820px; text-align: center; font: 400 clamp(26px, 3vw, 38px)/1.2 var(--serif); color: var(--ink); }
.v-pasos li { background: var(--surface); border-radius: 22px; padding: 28px 24px; }
.v-paso-num { display: block; font: 400 64px/1 var(--serif); }
.v-pasos strong { display: block; font-size: 21px; margin: 10px 0 8px; }
.v-pasos p { margin: 0; }
.v-zigzag { display: grid; gap: 64px; margin-top: 48px; }
.v-zz { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.v-zz.inverso { grid-template-columns: 1fr 1.25fr; }
.v-zz.inverso figure { order: 2; }
.v-zz figure { margin: 0; }
.v-zz img { width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 34px 80px -36px rgba(0,0,0,.6); }
.v-zz h3 { font: 400 clamp(30px, 3vw, 42px)/1.05 var(--serif); margin: 0 0 14px; }
.v-zz p { font-size: 19px; color: var(--ink-2); }
.v-sesion { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.v-sesion-caja { background: var(--surface); border-radius: 22px; padding: 28px; }
.v-precios { max-width: 1080px; margin: 0 auto; align-items: stretch; }
.v-precio { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 32px; }
.v-precio .btn { margin-top: auto; }
.v-precio.destacado { border: 2px solid var(--accent); box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--accent) 70%, transparent); transform: translateY(-8px); }
.v-precio.gris { opacity: .85; }
.v-precio-nombre { font-weight: 700; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v-cifra { font: 800 54px/1 var(--sans); letter-spacing: -0.03em; margin: 0; color: var(--ink); }
.v-cifra small { font-size: 16px; font-weight: 600; color: var(--ink-3); }
.v-cifra-texto { font: 400 40px/1.05 var(--serif); letter-spacing: 0; }
.v-precio .checks li { font-size: 15.5px; margin: 8px 0; }
.v-temario-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
.v-modulos details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.v-modulos summary { cursor: pointer; font-weight: 700; font-size: 18px; color: var(--ink); }
.v-modulos ul { margin: 12px 0 0; color: var(--ink-2); }
.v-todo { margin-top: 22px; } .v-todo summary { cursor: pointer; color: var(--ink-3); }
.v-persona { display: grid; grid-template-columns: 120px 1fr; grid-template-rows: auto auto 1fr; column-gap: 22px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 24px; }
.v-persona img { grid-row: 1 / 4; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.v-persona strong { font-size: 22px; } .v-persona span { color: var(--accent); font-size: 14.5px; } .v-persona p { color: var(--ink-2); margin: 8px 0 0; }
.v-para-quien { max-width: 860px; margin: 40px auto 0; text-align: center; font-size: 18px; color: var(--ink-2); }
.v-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; max-width: 1100px; margin: 0 auto; }
.v-faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.v-faq summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.v-faq p { color: var(--ink-2); margin: 10px 0 0; }
.v-final { background: #0f1115; color: #f2eee7; }
.v-final h2 { color: #f2eee7; }
.v-final .btn-ghost { color: #f2eee7; border-color: #f2eee7; }
.v-barra-movil { display: none; }
.v-confianza { padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.v-confianza span { display: block; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.v-confianza p { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font: 400 clamp(19px, 2vw, 24px)/1.3 var(--serif); color: var(--ink); }
.v-confianza b { font-weight: 400; } .v-confianza i { font-style: normal; color: var(--accent); }
.v-giro-banda { background: var(--amarillo); color: #15130f; --ink: #15130f; --ink-2: #26221b; }
.v-giro-banda h2 { font: 400 clamp(34px, 4.4vw, 58px)/1.05 var(--serif); margin: 0 0 18px; }
.v-estrecho { max-width: 820px; margin-left: auto; margin-right: auto; }
.btn-oscuro { background: #15130f; color: #f2eee7; border-color: #15130f; }
.v-ia { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.v-ia-tarjeta { border: 1px solid var(--line); border-radius: 20px; padding: 24px 22px; }
.v-ia-tarjeta strong { display: block; font: 400 26px/1.1 var(--serif); color: var(--accent); margin-bottom: 8px; }
.v-ia-tarjeta p { margin: 0; color: var(--ink-2); }
.v-prompt { max-width: 860px; margin: 36px auto 0; }
.v-prompt figcaption { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.v-prompt pre { white-space: pre-wrap; margin: 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.v-sino { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin: 44px auto 0; }
.v-sino h3 { font: 400 28px/1.1 var(--serif); margin: 0 0 12px; }
.v-si, .v-no { list-style: none; padding: 0; margin: 0; }
.v-si li, .v-no li { position: relative; padding-left: 30px; margin: 10px 0; color: var(--ink-2); }
.v-si li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.v-no li::before { content: "✕"; position: absolute; left: 0; color: var(--ink-3); font-weight: 800; }
@media (max-width: 980px) {
  .v-hero-grid, .v-zz, .v-zz.inverso, .v-sesion, .v-temario-grid { grid-template-columns: 1fr; gap: 32px; }
  .v-zz.inverso figure { order: 0; }
  .v-resultados, .v-dolores, .v-pasos, .v-equipo, .v-precios { grid-template-columns: repeat(min(var(--cols, 2), 2), minmax(0, 1fr)); }
  .v-faq { grid-template-columns: 1fr; }
  .v-ia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .v-banda { padding: 60px 0; }
  .v-hero { padding: 28px 0 48px; }
  .v-resultados, .v-dolores, .v-pasos, .v-equipo, .v-precios { grid-template-columns: 1fr; }
  .v-precio.destacado { order: -1; transform: none; }
  .v-persona { grid-template-columns: 80px 1fr; } .v-persona img { width: 80px; height: 80px; }
  .v-botones .btn { width: 100%; }
  .v-ia, .v-sino { grid-template-columns: 1fr; }
  .v-barra-movil { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .venta { padding-bottom: 76px; }
}
.v-hero-img.recorte img { border-radius: 0; box-shadow: none; transform: none; filter: drop-shadow(0 30px 40px rgba(0,0,0,.18)); }

/* Resultados reales de campañas (lib/casos.mjs) */
.v-casos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.v-caso { border: 1px solid var(--line); border-radius: 20px; padding: 22px 20px; background: var(--surface); }
.v-caso-tipo { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.v-caso-cifra { margin: 0; font-size: 18px; color: var(--ink-2); } .v-caso-cifra b { font: 400 60px/1 var(--serif); color: var(--accent); margin-right: 6px; }
.v-caso-coste { margin: 6px 0 14px; font-weight: 700; color: var(--ink); }
.v-caso dl, .v-glosario dl { margin: 0; display: grid; gap: 6px; } .v-caso dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; border-top: 1px solid var(--line); padding-top: 6px; }
.v-caso dt { color: var(--ink-3); } .v-caso dd { margin: 0; color: var(--ink); }
.v-caso-nota { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; }
.v-casos-total { text-align: center; margin: 28px auto 0; font-size: 18px; color: var(--ink-2); } .v-casos-total b { color: var(--ink); }
.v-glosario { max-width: 860px; margin: 20px auto 0; border-top: 1px solid var(--line); padding-top: 14px; }
.v-glosario summary { cursor: pointer; font-weight: 700; color: var(--ink); text-align: center; }
.v-glosario dl { margin-top: 14px; } .v-glosario dt { font-weight: 700; color: var(--ink); } .v-glosario dd { margin: 0 0 8px; color: var(--ink-2); }
@media (max-width: 980px) { .v-casos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .v-casos { grid-template-columns: 1fr; } }

.v-equipo[style*="--cols:1"] { max-width: 680px; margin: 0 auto; }

/* Datos destacados de un curso (cifra grande + fuente) */
.v-cifras { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; }
.v-cifra-dato { border: 1px solid var(--line); border-radius: 22px; padding: 28px 24px; background: var(--surface); }
.v-cifra-dato strong { display: block; font: 400 clamp(44px, 4.2vw, 64px)/1 var(--serif); color: var(--accent); margin-bottom: 14px; }
.v-cifra-dato p { margin: 0; font-size: 18px; color: var(--ink-2); }
.v-cifra-dato small { display: block; margin-top: 14px; font-size: 13px; color: var(--ink-3); }
@media (max-width: 640px) { .v-cifras { grid-template-columns: 1fr; } }

/* Ejercicios, logros y sesión dentro del aula, con la columna de lecciones */
.aula-grid > article { min-width: 0; }
.aula-grid > article.wb, .aula-grid > article.aula-sesion { max-width: 820px; }
.aula-menu a.menu-logros.actual, .aula-menu a.menu-sesion.actual { outline: 2px solid var(--accent); }
@media print { .aula-menu, #lb-barra { display: none !important; } .aula-grid { display: block; } }

/* ---------- Aula en claro: beige de la landing con acentos pastel ---------- */
body.aula { --surface: #fffaf1; --surface-2: #f6ecdb; --accent-ink: #1a0e02; }
body.aula .aula-menu { background: #fffaf1; box-shadow: 0 10px 30px -22px rgba(60,40,10,.35); }
body.aula .aula-menu a { color: var(--ink-2); }
body.aula .aula-menu a:hover { background: #fbeedd; }
body.aula .aula-menu a.actual { background: #ffe1c2; color: #3a1d02; font-weight: 600; }
body.aula .aula-menu .menu-logros { background: #fdeab3; color: #3b2c00; }
body.aula .aula-menu .menu-sesion { background: #e8e1fb; border-color: #c9bdf2; color: #2a2160; }
body.aula .aula-grid > article h1 { color: #15130f; }
body.aula .video { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(40,25,5,.55); }
body.aula .aviso-voz { background: #eef3fb; color: #2e3b52; display: inline-block; padding: 6px 12px; border-radius: 999px; }
body.aula .wb-tarjeta { background: linear-gradient(150deg, #ffe7cf, #fffaf1 70%); border-color: #f4c79c; }
body.aula .wb-tarjeta.hecho { background: linear-gradient(150deg, #dcf3e3, #fffaf1 70%); border-color: #a9dbb8; }
body.aula .wb-info { background: #fff4e3; }
body.aula .wb-info.truco { background: #fff7d6; }
body.aula .wb-info.aviso { background: #fde8e8; }
body.aula .wb-prompt pre { background: #f3eee6; color: #15130f; }
body.aula .aviso-ok { background: #e3f4e8; border-color: #a9dbb8; color: #17361f; }
body.aula .seguir-juntos { background: #e8e1fb; border-radius: 22px; padding: 28px; }
body.aula .preguntas { background: #fffaf1; border-radius: 22px; padding: 28px; border-top: 0; }

/* Testimonio del alumno (texto, voz o vídeo) */
.aula-menu .menu-testimonio { margin-top: 8px; background: #dff1f5; color: #0f3a44; font-weight: 600; }
.testimonio-cta { background: linear-gradient(150deg, #dff1f5, #fffaf1 70%); border-radius: 22px; padding: 28px; margin-top: 40px; }
.testimonio-modos { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 18px; } .testimonio-modos span { background: #fffaf1; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 600; }
.testimonio-guia { background: #fff7d6; border-radius: 16px; padding: 14px 18px; margin: 18px 0; } .testimonio-guia ul { margin: 6px 0 0; }
.testimonio .testimonio-tabs { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.testimonio-tabs button { font: inherit; font-weight: 700; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fffaf1; color: var(--ink); cursor: pointer; }
.testimonio-tabs button[aria-selected="true"] { background: #ffe1c2; border-color: #f4c79c; }
.testimonio-grabar { grid-column: 1 / -1; background: #fffaf1; border: 1px dashed var(--line); border-radius: 18px; padding: 18px; }
.testimonio-vista, .testimonio-resultado video { width: 100%; max-width: 520px; border-radius: 14px; background: #000; display: block; margin-bottom: 12px; }
.testimonio-controles { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .testimonio-tiempo { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.testimonio-resultado { margin-top: 14px; } .testimonio-resultado audio { width: 100%; max-width: 520px; }
.testimonio .enlace { color: var(--accent); text-decoration: underline; cursor: pointer; }
.testimonio-medio { width: 100%; border-radius: 12px; margin: 6px 0 10px; } video.testimonio-medio { background: #000; max-height: 420px; }
.aviso-error { background: #fde8e8; border: 1px solid #f3b4b4; color: #5a1414; padding: 10px 14px; border-radius: 12px; }

/* Acceso directo al ejercicio del módulo, bajo el vídeo */
.ir-ejercicio { margin: 14px 0 6px; }
body.aula .ir-ejercicio .btn { background: #ffe1c2; border-color: #f4c79c; color: #3a1d02; }
#ejercicio { scroll-margin-top: 90px; }
.nav-pendiente { color: var(--ink-3); font-size: 14.5px; align-self: center; }
.wb-siguiente .btn { margin-top: 10px; }

/* Casillas guiadas de los ejercicios: dónde está, abrirlo y captura */
.wb-check-fila { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.wb-check-fila:last-child { border-bottom: 0; }
.wb-check-fila .wb-check { padding: 0; font-weight: 600; }
.wb-guia { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 6px 0 0 28px; font-size: 13.5px; }
.wb-donde { color: var(--ink-2); }
.wb-como { flex-basis: 100%; color: var(--ink-3); }
.wb-abrir { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #e7f0ff; color: #12366b; text-decoration: none; font-weight: 600; border: 1px solid #c7dafa; }
.wb-abrir:hover { background: #d6e6ff; }
.wb-captura { flex-basis: 100%; }
.wb-captura summary { cursor: pointer; color: var(--accent); font-weight: 600; width: max-content; }
.wb-captura img { display: block; width: 100%; max-width: 640px; border-radius: 10px; border: 1px solid var(--line); margin-top: 8px; }
.wb-grupos:has(.wb-check-fila) { grid-template-columns: 1fr; }
.wb-grupo-tit .wb-cuenta { float: right; font-weight: 600; color: var(--ink-3); font-size: 13px; }
.wb-grupo.completo { background: #e9f6ee; border-color: #a9dbb8; }
.wb-info .captura img, .wb-info figure img { border-radius: 10px; border: 1px solid var(--line); max-width: 100%; }

.hazlo-por-mi { margin-top: 28px; font-size: 14px; }
.hazlo-por-mi > summary { cursor: pointer; color: var(--muted, #6b6459); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.hazlo-por-mi > summary::-webkit-details-marker { display: none; }
.hazlo-por-mi[open] > summary { margin-bottom: 14px; }
.hazlo-por-mi textarea { width: 100%; }

.aula-menu a.menu-ejercicio { margin-left: 14px; padding: 5px 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); background: rgba(255,138,31,.10); border-left: 3px solid var(--accent); border-radius: 6px; }
.aula-menu a.menu-ejercicio.hecho { background: rgba(60,160,90,.12); border-left-color: #3ca05a; }
.aula-menu a.menu-ejercicio.actual { outline: 2px solid var(--accent); }

/* ---------- Landing de oferta (/redes) con el lenguaje de la landing de venta ---------- */
.v-alt { background: var(--bg-alt); }
.oferta-venta h1 { font-size: clamp(44px, 5.6vw, 82px); }
.oferta-venta h1 em, .oferta-venta h2 em { color: var(--accent); }
.oferta-venta .oferta-hero-img { max-width: 560px; justify-self: center; }
.v-sellos { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v-sellos li { font-size: 14px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 30px; position: relative; }
.v-sellos li::before { content: "✓"; position: absolute; left: 12px; color: var(--accent); font-weight: 800; }
.v-problema { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.v-problema h2 { margin: 0; }
.oferta-venta .oferta-problema { font-size: 19px; max-width: none; }
.oferta-venta .oferta-datos { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.oferta-venta .dato { padding: 28px 24px; border-radius: 22px; }
.oferta-venta .anillo { background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0); }
.oferta-venta .dato span { font-size: 16.5px; }
.v-comparar { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; margin-top: 12px; }
.v-comparar .antes-despues { margin: 0; max-width: none; }
.oferta-venta .comp-fila span { font-size: 15.5px; padding-top: 14px; padding-bottom: 14px; }
.oferta-venta .v-color .centro-btn { margin-top: 44px; }
.oferta-venta .v-pasos li { background: rgba(255,255,255,.28); }
.v-ejemplos { background: var(--bg-alt); }
.v-ejemplos .ej-nota { text-align: center; color: var(--ink-3); font-size: 13px; margin-top: 18px; }
.v-garantia { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: center; }
.v-garantia h2 { margin-bottom: 14px; }
.v-garantia .v-eyebrow { color: #4a4235; }
.v-sello { display: grid; place-items: center; align-content: center; width: 220px; height: 220px; border-radius: 50%; background: #15130f; color: var(--amarillo); text-align: center; transform: rotate(-8deg); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.v-sello b { font: 400 64px/1 var(--serif); }
.v-sello span { font-size: 14px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; margin-top: 6px; }
.v-amarilla .garantia-flujo li { background: rgba(255,255,255,.45); border-color: rgba(0,0,0,.12); color: #15130f; }
.v-amarilla .garantia-flujo li::before { background: #15130f; color: var(--amarillo); }
.v-amarilla .garantia-flujo li:last-child { border-color: #15130f; }
.v-amarilla .garantia-flujo b { color: #15130f; }
.v-precio-oferta { max-width: 640px; margin: 8px auto 0; transform: none; }
.v-precio-oferta .oferta-precio strong { font-size: 54px; }
.v-precio-oferta .checks li { font-size: 16px; margin: 10px 0; }
.v-precio-oferta .checks strong { color: var(--ink); }
.v-precio-oferta .v-nota { text-align: center; margin: 0; }
.v-extras { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.v-extra { border: 1px solid var(--line); border-radius: 22px; padding: 26px 24px; background: var(--surface); }
.v-extra-etq { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.v-extra strong { display: block; font: 400 26px/1.1 var(--serif); color: var(--ink); margin-bottom: 10px; }
.v-extra p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
div.v-persona { cursor: default; }
.v-final .oferta-precio { display: block; margin-top: 14px; color: #c9c3b8; }
.v-final .oferta-precio strong { color: #f2eee7; }
.v-final .oferta-precio small { color: #b9b4aa; }
.v-final .legal-mini { color: #b9b4aa; margin-top: 22px; font-size: 13px; }
.v-final .legal-mini a { color: #e2ddd3; }
.oferta-venta .oferta-video .video { box-shadow: 0 40px 100px -40px rgba(255,138,31,.45); }
@media (max-width: 980px) {
  .v-problema, .v-comparar, .v-garantia { grid-template-columns: 1fr; gap: 32px; }
  .v-garantia { text-align: center; } .v-sello { margin: 0 auto; width: 180px; height: 180px; } .v-garantia .garantia-flujo { justify-content: center; }
  .oferta-venta .oferta-datos, .v-extras { grid-template-columns: repeat(min(var(--cols, 2), 3), minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .oferta-venta .oferta-datos, .v-extras { grid-template-columns: 1fr; }
  body.tema-claro.con-barra .oferta-barra { background: color-mix(in srgb, var(--bg) 94%, transparent); }
  .oferta-venta .oferta-cta .btn { width: 100%; }
}
.v-final { --ink: #f2eee7; --ink-2: #e2ddd3; --ink-3: #b9b4aa; --line: #2c3038; }
.oferta-venta .movil-escena { --ink: #f2eee7; --ink-2: #e2ddd3; --ink-3: #b9b4aa; --line: #2c3038; --surface: #1a1d23; --surface-2: #22262d; --bg: #0f1115; color: var(--ink); }
.oferta-venta .movil-escena figcaption { color: #2d2923; }
.v-precio-oferta .checks strong { display: block; font: 700 16.5px/1.35 var(--sans); color: var(--ink); margin-bottom: 2px; }
@media (max-width: 680px) {
  .con-barra .oferta-barra > span { min-width: 0; }
  .con-barra .oferta-barra .oferta-precio { white-space: normal; line-height: 1.15; }
  .con-barra .oferta-barra .oferta-precio .precio-etq { display: block; margin: 0 0 2px; }
  .con-barra .oferta-barra .btn { flex: none; }
}

/* Aula en el móvil: primero la lección o el ejercicio; el índice del curso, al final (con enlace arriba). */
.ir-indice { display: none; }
.aula-grid article h1 { text-wrap: balance; }
/* Título de la lección: a lo ancho, en una línea siempre que quepa, y con aire antes del vídeo. */
.aula-grid > article > h1 { font-size: clamp(30px, 3.3vw, 42px); margin: 8px 0 28px; }
@media (max-width: 1000px) {
  .aula-grid { display: flex; flex-direction: column; }
  .aula-grid > article { order: 1; }
  .aula-grid > .aula-menu { order: 2; scroll-margin-top: 80px; }
  .ir-indice { display: inline-block; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
}

/* ---------- CV del alumno (entregable del workbook de CV) y subida de foto ---------- */
.wb-foto-zona { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.wb-foto-zona img { width: 120px; height: 120px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.wb-foto-zona small { display: block; margin-top: 6px; }
.wb-foto-final { width: 160px; height: 160px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }
.cv { background: #fff; color: #1b1b1b; max-width: 794px; margin: 18px auto; padding: 44px 52px; border: 1px solid var(--line); border-radius: 6px; font: 15px/1.5 Arial, Helvetica, sans-serif; box-shadow: 0 18px 40px -28px rgba(0,0,0,.4); }
.cv * { color: #1b1b1b; }
.cv-cabecera { display: flex; gap: 22px; align-items: center; border-bottom: 2px solid #1b1b1b; padding-bottom: 14px; margin-bottom: 6px; }
.cv-foto { width: 104px; height: 104px; object-fit: cover; border-radius: 50%; flex: none; }
.cv-cabecera h1 { font: 700 28px/1.15 Arial, Helvetica, sans-serif; margin: 0 0 4px; }
.cv-titular { font-size: 16px; margin: 0 0 6px; font-weight: 600; }
.cv-contacto { margin: 0; font-size: 13.5px; }
.cv section { margin-top: 16px; }
.cv h2 { font: 700 13px/1 Arial, Helvetica, sans-serif; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid #bbb; }
.cv p { margin: 0 0 5px; }
.cv ul { margin: 3px 0 0; padding-left: 18px; }
.cv li { margin: 0 0 2px; }
.cv-item { margin-bottom: 9px; break-inside: avoid; }
.cv-cab { display: flex; justify-content: space-between; gap: 12px; }
.cv-fechas { font-size: 13px; white-space: nowrap; }
@media (max-width: 640px) { .cv { padding: 24px 18px; } .cv-cabecera { flex-direction: column; align-items: flex-start; } .cv-cab { flex-direction: column; gap: 0; } }
@media print {
  @page { size: A4; margin: 14mm; }
  .eyebrow, .ir-indice, .wb-sub { display: none !important; }
  .cv { border: 0; box-shadow: none; margin: 0; padding: 0; max-width: none; font-size: 11pt; }
  .cv h1 { font-size: 22pt; }
}
.wb-lista-fila { flex-wrap: wrap; }
.wb-lista-fila textarea.largo { flex: 1 1 100%; min-height: 76px; }

/* Tráiler del curso: cabecera de la página de venta y portada */
.v-hero-video { margin: 0; }
.v-hero-video .video { border-radius: 20px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.6); }
.seccion-trailer .trailer-in { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: center; }
.seccion-trailer .trailer-txt h2 { margin: 0 0 14px; }
.seccion-trailer .video { box-shadow: 0 40px 100px -40px rgba(255,138,31,.45); }
@media (max-width: 860px) { .seccion-trailer .trailer-in { grid-template-columns: 1fr; gap: 28px; } }

.mis-cursos .curso-entrar { margin: 14px 0 0; font-weight: 700; color: var(--accent); }
.mas-cursos { margin-top: 28px; color: var(--ink-3); }

/* Mi cuenta */
.cuenta-bloque { margin-top: 40px; }
.cuenta-bloque h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 14px; }
.cuenta-fila { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--line); }
.cuenta-fila h3 { font: 600 17px/1.3 var(--sans); margin: 0 0 4px; }
.cuenta-fila p { margin: 0; color: var(--ink-3); font-size: 14.5px; }
.cuenta-fila .cuenta-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.cuenta-datos { display: grid; gap: 14px; max-width: 520px; }
.aviso-ok { background: #e6f4ea; color: #1d4d2b; padding: 10px 14px; border-radius: 10px; margin: 12px 0; }

/* Tarjetas de «Mis cursos» y «Mi cuenta» */
.mis-cursos { gap: 24px; }
.curso-mio { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit; background: #fffaf2; border: 1px solid #f0dfc6; box-shadow: 0 18px 40px -28px rgba(70,40,5,.5); transition: transform .18s ease, box-shadow .18s ease; }
.curso-mio:hover { transform: translateY(-3px); box-shadow: 0 26px 48px -26px rgba(70,40,5,.55); }
.curso-mio img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #f3e6d2; }
.curso-mio-sin { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 18px; text-align: center; font: 400 22px/1.15 var(--serif); color: #3a1d02; background: linear-gradient(150deg, #ffe1c2, #fff3df); }
.curso-mio-cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.curso-mio-cuerpo h3 { font: 400 clamp(21px, 2.2vw, 25px)/1.15 var(--serif); margin: 0; color: #15130f; }
.curso-mio-cuerpo p { margin: 0; color: var(--ink-3); font-size: 14.5px; }
.curso-mio .curso-entrar { margin-top: 8px; font-weight: 700; color: var(--accent); }
.cuenta-bloque h2 { padding-bottom: 6px; }
.cuenta-tarjeta { padding: 18px 22px; margin-top: 12px; border: 1px solid #f0dfc6; border-radius: 18px; background: #fffaf2; }
.cuenta-bloque .cuenta-fila:not(.cuenta-tarjeta) { padding: 14px 4px; }
.cuenta-datos { padding: 22px; border: 1px solid #f0dfc6; border-radius: 18px; background: #fffaf2; max-width: none; }

.cuenta-nota { margin: 0 0 14px; color: var(--ink-3); }
.confirma-compra { display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: 24px; align-items: center; margin: 24px 0; padding: 20px; border: 1px solid #f0dfc6; border-radius: 20px; background: #fffaf2; }
.confirma-compra img { width: 100%; border-radius: 14px; aspect-ratio: 16 / 9; object-fit: cover; }
.confirma-compra h2 { font: 400 26px/1.15 var(--serif); margin: 0 0 8px; }
.confirma-precio { font: 700 26px/1 var(--sans); margin: 0 0 12px; } .confirma-precio small { font-size: 14px; font-weight: 400; color: var(--ink-3); }
.aviso-error { background: #fdecea; color: #7a1d14; padding: 10px 14px; border-radius: 10px; }
@media (max-width: 640px) { .confirma-compra { grid-template-columns: 1fr; } }

/* Ciclo mensual de redes: estrategia, casillas y material en bruto */
.ciclo-c { margin: 30px 0 34px; }
.ciclo-otros { color: var(--ink-3); font-size: 14px; margin: -8px 0 14px; }
.ciclo-caja { background: var(--surface-2); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; }
.ciclo-caja h3 { margin: 0 0 8px; font-size: 18px; }
.ciclo-caja h3 small { color: var(--ink-3); font-weight: 400; }
.ciclo-cuenta { margin: 0 0 12px; }
.ciclo-grupos { display: grid; gap: 10px; }
.ciclo-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ciclo-tipo { min-width: 150px; font-weight: 600; }
.ciclo-ticks { display: inline-flex; align-items: center; gap: 6px; }
.ciclo-ticks small { color: var(--ink-3); }
.tick { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; border: 1.5px solid var(--line); font-size: 15px; font-weight: 700; line-height: 1; }
.tick.hecha { background: #2fa36b; border-color: #2fa36b; color: #fff; }
.tick.camino { border-color: var(--accent); color: var(--accent); }
.ciclo-nota { color: var(--ink-3); font-size: 13.5px; margin: 12px 0 0; }

/* Chat con archivos */
.msg-adj { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.msg-adj img, .msg-adj video { max-width: 260px; max-height: 260px; border-radius: 10px; display: block; background: #000; }
.msg-adj .adj-doc { display: inline-block; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.06); color: var(--ink); }
.chat-form.encima { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: 12px; }
.chat-adj { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chat-adj li { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 10px; padding: 6px 10px; font-size: 14px; }
.chat-adj .subiendo { color: var(--ink-3); }
.chat-adj .error { color: #e4685a; }
.chat-adj .quitar { background: none; border: 0; color: var(--ink-3); font-size: 18px; cursor: pointer; }
.chat-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.chat-archivos { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chat-clip { cursor: pointer; }
/* «Tus reportes»: el informe de cada mes, plegado como una ficha. */
.rep-caja { border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin-bottom: 14px; background: var(--surface); }
.rep-caja > summary { cursor: pointer; font-size: 17px; }
.doc-reporte h2 { font-size: 20px; margin: 22px 0 8px; }
.doc-reporte p, .doc-reporte li { line-height: 1.6; }
.doc-reporte .eyebrow { margin-top: 10px; }
.cal-pub.espera { background: rgba(255,186,73,.3); }
.cal-pub.suya { background: rgba(120,160,255,.22); }
.story-descarga .btn { margin-top: 6px; }
.cal-pub.caducada { background: rgba(214,92,60,.22); }
.confirmar-pieza.caducada .reprogramar { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.confirmar-pieza.caducada .reprogramar label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.confirmar-pieza.caducada .reprogramar input, .confirmar-pieza.caducada .reprogramar select { font: inherit; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; }
.cal-pub.plan { background: transparent; border: 1px dashed var(--ink-3); color: var(--ink-3); }
.tick.plan { border-style: dashed; border-color: var(--ink-3); }
.preparar-c { margin: 30px 0 34px; }
.checklist { background: var(--surface-2); border-radius: 16px; padding: 18px 22px; margin: 0 0 26px; }
.checklist h2 { font-size: 22px; margin: 0 0 10px; }
.checklist h2 small { color: var(--ink-3); font-weight: 400; font-size: 15px; margin-left: 6px; }
.checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.checklist a { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--ink); text-decoration: none; }
.checklist small { display: block; color: var(--ink-3); font-size: 13.5px; }
.check-caja { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.checklist li.hecho .check-caja { background: #2fa36b; border-color: #2fa36b; color: #fff; }
.checklist li.hecho b { color: var(--ink-3); text-decoration: line-through; }

.mensajes-solo { display: flex; flex-direction: column-reverse; gap: 30px; max-width: 820px; }
.mensajes-solo .chat { position: static; }

/* Mensajes: el chat ocupa todo el ancho (con las entregas a un lado si las hay) */
.mensajes-solo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: none; align-items: start; }
.mensajes-solo.con-entregas { grid-template-columns: minmax(0, 1fr) 360px; }
.mensajes-solo > .chat { order: 1; }
.mensajes-solo > section:not(.chat) { order: 2; }
body.area-cliente .chat { position: static; padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 560px; border-radius: 20px; box-shadow: 0 8px 30px rgba(60, 45, 20, .07); }
body.area-cliente .chat-hilo { flex: 1; max-height: 58vh; min-height: 320px; padding: 26px 28px; gap: 14px; background: var(--surface-2); margin: 0; }
body.area-cliente .msg { max-width: 68%; padding: 12px 16px; font-size: 16.5px; line-height: 1.5; box-shadow: 0 1px 2px rgba(60, 45, 20, .06); }
body.area-cliente .msg.suyo { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
body.area-cliente .msg.mio { background: #ffe3c4; border-bottom-right-radius: 5px; }
body.area-cliente .msg small { color: var(--ink-3); }
.chat-vacio { margin: auto; text-align: center; max-width: 460px; color: var(--ink-3); }
body.area-cliente .chat-form { padding: 16px 24px 18px; background: var(--surface); border-top: 1px solid var(--line); gap: 12px; }
body.area-cliente .chat-form textarea { border-radius: 14px; background: var(--surface-2); min-height: 76px; resize: vertical; }
body.area-cliente .chat-form .mini { margin: 0; font-size: 13px; color: var(--ink-3); }
body.area-cliente .chat-hilo .msg-adj img, body.area-cliente .chat-hilo .msg-adj video { max-width: 320px; max-height: 300px; }
@media (max-width: 900px) { .mensajes-solo.con-entregas { grid-template-columns: 1fr; } body.area-cliente .msg { max-width: 88%; } }
.aviso-vista { margin: 0 0 14px; padding: 10px 16px; border-radius: 12px; background: #fff3d6; color: #6a4a00; border: 1px solid #f0d58a; font-size: 14.5px; }
.aviso-vista a { color: #6a4a00; font-weight: 700; }

/* Guion de una pieza: cortes, pantalla y lo que nos tiene que mandar */
.guion-c .g-desc { color: var(--ink-2); margin: 0 0 8px; }
.guion-c .g-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 22px; }
.guion-c .g-col h4 { margin: 8px 0 4px; font: 800 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.guion-c ol, .guion-c ul { margin: 0; padding-left: 18px; }
.guion-c .g-cortes { list-style: none; padding: 0; }
.guion-c .g-cortes li { margin: 0 0 6px; }
.guion-c .g-pide { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 12px; padding: 4px 14px 8px; }

/* Materiales del mes: guion a un lado, subida al otro */
.material-seccion { margin: 30px 0; }
.material-c { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 24px; padding: 20px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); margin: 0 0 16px; }
.material-c.hecho { border-color: #2fa36b; }
.material-c h3 { font-size: 24px; margin: 4px 0 10px; font-family: var(--serif); font-weight: 400; }
.material-estado { margin: 0 0 8px; font-weight: 800; color: #d64545; }
.material-c.hecho .material-estado { color: #2fa36b; }
.material-subir .marca-form { margin: 0; }
.previo-c { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 14px; padding: 8px 18px; margin: 0 0 16px; }
.guion-c .g-tabla { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 15.5px; }
.guion-c .g-tabla th { text-align: left; font: 800 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); padding: 6px 8px; border-bottom: 2px solid var(--accent); }
.guion-c .g-tabla td { vertical-align: top; padding: 9px 8px; border-bottom: 1px solid var(--line); }
.guion-c .g-tabla .g-n { font-weight: 800; white-space: nowrap; width: 74px; }
.material-c.revisada { background: color-mix(in srgb, #2fa36b 6%, var(--surface)); }
.rev-intro { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 14px; padding: 12px 18px; margin: 0 0 18px; } .rev-cuenta { display: inline-block; margin-left: 6px; font-weight: 800; color: var(--accent); }
.revision { margin-top: 14px; display: grid; gap: 10px; } .rev-nota span { display: block; font-weight: 700; font-size: 14px; margin: 0 0 4px; } .rev-nota textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg, #fff); resize: vertical; }
.rev-ok { display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; align-items: start; cursor: pointer; } .rev-ok input { width: 20px; height: 20px; margin-top: 2px; accent-color: #2fa36b; } .rev-ok small { grid-column: 2; color: var(--muted, #6b6670); }
.rev-pie { margin: 0; display: flex; align-items: center; gap: 12px; } .rev-estado { font-weight: 700; font-size: 14px; }
@media (max-width: 900px) { .material-c { grid-template-columns: 1fr; } }


/* vista previa de publicaciones (lib/vista-previa.mjs) */
.vp{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px;align-items:flex-start}
.vp-card{flex:0 0 240px;margin:0;background:#fff;color:#111;border:1px solid #dcdcdc;border-radius:12px;overflow:hidden;font:13px/1.35 system-ui,sans-serif}
.vp-card figcaption{background:#f3f3f3;color:#555;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px}
.vp-cab{display:flex;align-items:center;gap:8px;padding:8px 10px}
.vp-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#ff7a00,#c0392b);flex:none}
.vp-medio{position:relative;background:#e9e9e9;aspect-ratio:1/1;overflow:hidden}
.vp-medio.ig{aspect-ratio:4/5}.vp-medio.v{aspect-ratio:9/16}
.vp-medio img,.vp-medio video{width:100%;height:100%;object-fit:cover;display:block}
.vp-vacio{display:grid;place-items:center;height:100%;color:#888}
.vp-n,.vp-etq{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;border-radius:10px;padding:1px 8px;font-size:11px}
.vp-etq{right:auto;left:8px}
.vp-acc{padding:6px 10px 0;letter-spacing:.3em}
.vp-txt{margin:0;padding:6px 10px 10px;white-space:pre-wrap;word-break:break-word}
.vp-mas{color:#777}
.vp-tt{position:relative;background:#000}
.vp-sobre{position:absolute;left:0;right:0;bottom:0;padding:10px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.vp-sobre p{margin:4px 0 0}
.vp-aviso{display:block;color:#b00020;padding:0 10px 8px}
.vp-nota{font-size:12px;opacity:.7;margin:2px 0 8px}
.cal-pub.borrador { background: rgba(160,160,160,.2); }
.vp-slides{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.vp-slides::-webkit-scrollbar{display:none}
.vp-slide{flex:0 0 100%;height:100%;scroll-snap-align:center}
.vp-flecha{position:absolute;top:50%;left:6px;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:20px;line-height:1;cursor:pointer;padding:0}.vp-flecha.der{left:auto;right:6px}
.vp-medio.v{background:#000}.vp-medio.v img,.vp-medio.v video{object-fit:contain}
.mis-contenidos .filtros{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.mis-contenidos .filtros button{border:1px solid var(--line,#ccc);background:transparent;border-radius:999px;padding:6px 14px;font:inherit;cursor:pointer;color:inherit}.mis-contenidos .filtros button.on{background:var(--accent,#ff8a1f);border-color:transparent;color:#fff}

/* Feed de Instagram (calendario del cliente) */
.feed-ig { margin: 0 0 16px; }
.btn-feed { display: inline-block; cursor: pointer; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--ink-3); font-weight: 700; font-size: 14px; list-style: none; }
.btn-feed::-webkit-details-marker { display: none; }
.fig-marco { max-width: 480px; flex: 1 1 340px; margin: 12px 0 0; background: #fff; color: #222; border-radius: 14px; padding: 14px; }
.fig-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fig-cab small { display: block; color: #777; font-size: 12px; }
.fig-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); color: #fff; font-weight: 800; display: grid; place-items: center; }
.fig-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }
.fig-celda.hueco { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #f4f4f4 0 8px, #ececec 8px 16px); outline: 1px dashed var(--line); outline-offset: -3px; }
.fig-celda { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #ececec; }
.fig-celda img, .fig-celda video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fig-texto { display: grid; place-items: center; height: 100%; padding: 8px; font-size: 11px; text-align: center; color: #555; }
.fig-tipo { position: absolute; top: 4px; right: 6px; color: #fff; font-style: normal; font-size: 14px; text-shadow: 0 0 3px rgba(0,0,0,.7); }
.fig-pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; font-size: 10px; background: rgba(0,0,0,.55); color: #fff; }
.fig-celda.publicada .fig-pie { background: rgba(11,94,59,.8); }
.fig-celda.programada .fig-pie { background: rgba(29,63,134,.85); }
.fig-celda.error .fig-pie { background: rgba(156,36,27,.85); }
.fig-celda.plan { opacity: .7; outline: 1px dashed #999; outline-offset: -3px; }
.fig-nota, .fig-vacio { font-size: 12px; color: #777; margin: 10px 0 0; }

.fig-doble { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.fig-doble .fig-marco { margin-top: 12px; }
.fig-doble .fig-stories { max-width: 260px; flex: 0 1 260px; }
.fig-rejilla-s { grid-template-columns: repeat(2, 1fr); gap: 4px; }
.fig-rejilla-s .fig-celda { aspect-ratio: 9 / 16; }
.fig-celda.plan { opacity: 1; background: repeating-linear-gradient(45deg, #f3f3f3, #f3f3f3 8px, #ececec 8px, #ececec 16px); }
.fig-texto b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #999; margin-bottom: 4px; }
.fig-redes { position: absolute; left: 4px; bottom: 20px; display: flex; gap: 3px; }
.fig-red { font-style: normal; font-weight: 800; font-size: 9px; line-height: 1; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.8); }
.fig-red-facebook { background: #1877f2; }
.fig-red-tiktok { background: #111; }
.fig-red-linkedin { background: #0a66c2; border-radius: 4px; }
.fig-red-google { background: #ea4335; }

/* Pieza del calendario en ventana (área del cliente) */
.cal-pub[data-abrir] { cursor: pointer; }
.cal-pub[data-abrir]:hover { filter: brightness(1.15); }
dialog.modal-pieza { width: min(760px, 94vw); max-height: 92vh; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); overflow: hidden; }
dialog.modal-pieza[open] { display: flex; flex-direction: column; }
dialog.modal-pieza::backdrop { background: rgba(0, 0, 0, .55); }
.modal-pieza-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 22px 12px; border-bottom: 1px solid var(--line); }
.modal-pieza-cab h2 { margin: 6px 0 0; font-size: 22px; }
.modal-pieza-cuerpo { flex: 1 1 auto; min-height: 0; padding: 18px 22px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.confirmar-pieza { margin: 0; padding: 14px 16px; border: 2px solid var(--accent, #ff8a1f); border-radius: 12px; }
.confirmar-pieza label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.confirmar-pieza input[type=checkbox] { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--accent, #ff8a1f); }
.confirmar-estado { margin: 6px 0 0; font-weight: 600; }
.confirmar-estado:empty { display: none; }
/* El resultado de confirmar se ve: ni letra pequeña ni un gris que se pierda. El error se queda. */
.confirmar-estado.bien, .confirmar-estado.mal { font-size: 15px; line-height: 1.4; padding: 10px 12px; border-radius: 10px; }
.confirmar-estado.bien { background: #e8f5ec; color: #0b5e3b; }
.confirmar-estado.mal { background: #fdecea; color: #9c241b; }
/* Preguntar y avisar dentro de la página, nunca con los diálogos del navegador. */
.ok-inline, .aviso-inline { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2, #f4f4f2); border: 1px solid var(--line); }
.ok-inline p, .aviso-inline p { margin: 0 0 10px; font-weight: 600; }
.ok-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.aviso-inline { position: relative; background: #fdecea; border-color: #f0c8c2; color: #9c241b; }
.aviso-inline p { margin: 0; padding-right: 24px; }
.aviso-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 16px; cursor: pointer; color: inherit; }
.modal-pieza-pie { flex: none; padding: 8px 18px 10px; border-top: 1px solid var(--line); background: var(--surface); max-height: 20vh; overflow-y: auto; }
.modal-pieza-pie .ciclo-nota { margin: 0; font-size: 13px; }
.modal-pieza-pie .confirmar-pieza { padding: 8px 10px; border-width: 1px; border-radius: 10px; font-size: 14px; line-height: 1.3; }
.modal-pieza-pie .confirmar-pieza label { gap: 8px; }
.modal-pieza-pie .confirmar-pieza input[type=checkbox] { width: 20px; height: 20px; }
.modal-pieza-pie .confirmar-estado { margin: 4px 0 0; font-size: 13px; }
/* «Pedir un cambio»: plegado en el pie de la ventana, un hueco por imagen del carrusel. */
.pedir-cambios { margin-top: 8px; font-size: 14px; }
.pedir-cambios > summary { cursor: pointer; color: var(--suave); text-decoration: underline; }
.pedir-cambios form { margin-top: 8px; display: grid; gap: 8px; }
.pedir-cambios .campos-slide { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pedir-cambios .campo-slide { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 8px; font-size: 13px; }
.pedir-cambios .campo-slide input, .pedir-cambios textarea { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; }
.pedir-cambios .ayuda { margin: 0; }
.pedir-cambios .cambios-estado { font-size: 13px; }

.modal-pieza-cab { padding: 12px 16px 8px; }
.modal-pieza-cab h2 { font-size: 19px; margin-top: 4px; }
.modal-pieza-cuerpo { padding: 12px 16px; }
dialog.modal-pieza { max-height: 96dvh; width: min(760px, 96vw); }
.modal-pieza-cab { align-items: center; padding: 8px 12px 8px 16px; }
.modal-pieza-cab .entrega-meta { margin: 0; }
.modal-pieza-x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.modal-pieza .vp { flex-direction: column; align-items: center; overflow: visible; padding: 0; }
.modal-pieza .vp-card { flex: none; width: 100%; max-width: 400px; }
.modal-pieza .vp-nota { display: none; }
.modal-pieza-pie { max-height: none; padding: 8px 16px 10px; }
.modal-pieza-pie .confirmar-pieza { padding: 8px 12px; }

/* Planes de la oferta de redes (landing) y su elección al contratar */
.niveles-cols { max-width: 1120px; }
.niveles-cols .v-precio { padding: 30px 26px; }
.nivel-lema { margin: -6px 0 0; color: var(--ink-3); font-size: 14.5px; }
.nivel-recomendado { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--accent); color: #15130f; border-radius: 999px; padding: 3px 10px; }
.niveles-comun { max-width: 760px; margin: 44px auto 0; }
.niveles-comun h3 { text-align: center; font-size: 20px; margin-bottom: 10px; }

/* Alta por planes: página ancha, fondo claro, tres columnas con aire */
.contratar-planes .ancho-planes { max-width: 1120px; padding-bottom: 40px; }
.contratar-planes .pasos-contrato, .contratar-planes .eyebrow { max-width: 760px; margin-inline: auto; }
.contratar-planes h1, .contratar-planes .lead { text-align: center; max-width: 760px; margin-inline: auto; }
.contratar-planes .lead { margin-bottom: 40px; }
.contratar-planes .form-planes { display: block; }
.contratar-planes .datos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; max-width: 760px; margin: 0 auto; }
.contratar-planes .datos-grid .full, .contratar-planes .form-planes .envio { grid-column: 1 / -1; }
.contratar-planes .form-planes .envio { max-width: 760px; margin: 22px auto 0; }
.contratar-planes .form-planes .envio .btn { width: 100%; justify-content: center; font-size: 18px; padding-block: 16px; }
.contratar-planes .legal-mini { max-width: 760px; margin: 22px auto 0; text-align: center; }
.paso-planes { margin: 0 0 48px; }
.paso-planes h2, .paso-titulo-datos { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font: 700 24px/1.2 var(--sans); letter-spacing: -.01em; margin: 0 0 22px; color: var(--ink); }
.paso-planes h2 small { flex-basis: 100%; margin-left: 46px; font-size: 14.5px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.paso-planes h2 span, .paso-titulo-datos span { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 800; flex: none; }
.paso-titulo-datos { max-width: 760px; margin: 0 auto 22px; }

.niveles-elegir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; padding-top: 14px; }
.form .nivel-op { position: relative; display: flex; flex-direction: column; gap: 0; padding: 32px 28px 28px; border: 2px solid var(--line); border-radius: 24px; background: var(--surface-2); cursor: pointer; color: var(--ink); font-size: 16px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.form .nivel-op:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.form .nivel-op:has(input:checked) { border-color: var(--accent); box-shadow: 0 24px 60px -34px var(--accent); }
.form .nivel-op.recomendado { padding-top: 38px; }
.form .nivel-op input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; }
.form .nivel-op:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.nivel-op-sello { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #15130f; background: var(--accent); border-radius: 999px; padding: 5px 14px; white-space: nowrap; }
.nivel-op-nombre { font: 400 34px/1.05 var(--serif); }
.nivel-op-lema { margin-top: 6px; font-size: 14.5px; color: var(--ink-3); min-height: 2.6em; }
.nivel-op-precio { margin: 14px 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nivel-op-precio small { font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.nivel-lista { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 13px; flex: 1; }
.nivel-lista li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.4; color: var(--ink-2); }
.nivel-lista li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }
.nivel-op-boton { display: block; text-align: center; border-radius: 999px; padding: 13px 18px; font-weight: 700; font-size: 15px; border: 2px solid var(--ink); color: var(--ink); }
.nivel-op-boton .si-elegido { display: none; }
.form .nivel-op:has(input:checked) .nivel-op-boton { background: var(--ink); color: var(--bg); }
.form .nivel-op:has(input:checked) .si-elegido { display: inline; }
.form .nivel-op:has(input:checked) .no-elegido { display: none; }

.extras-elegir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form .extra-op { flex-direction: row; align-items: flex-start; gap: 16px; padding: 20px 22px; border: 2px solid var(--line); border-radius: 18px; background: var(--surface-2); cursor: pointer; color: var(--ink); font-size: 16px; }
.form .extra-op:has(input:checked) { border-color: var(--accent); }
.form .extra-op input { width: 22px; height: 22px; margin-top: 2px; padding: 0; accent-color: var(--accent); flex: none; }
.extra-op-texto { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.extra-op-texto b { font-size: 17px; }
.extra-op-texto small { font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.extra-op-precio { font-size: 14px; font-weight: 700; color: var(--ink); text-align: right; max-width: 9em; }
.resumen-pago { margin: 0 auto 52px; max-width: 760px; padding: 18px 22px; border-radius: 16px; background: var(--ink); color: var(--bg); font-size: 17px; text-align: center; }
.resumen-pago strong { color: var(--accent); }
@media (max-width: 900px) {
  .niveles-elegir { grid-template-columns: 1fr; gap: 28px; }
  .extras-elegir { grid-template-columns: 1fr; }
  .nivel-op-lema { min-height: 0; }
  .contratar-planes .datos-grid { grid-template-columns: 1fr; }
  .paso-planes h2 small { margin-left: 0; }
  .niveles-cols { --cols: 1 !important; } .niveles-cols .v-precio.destacado { transform: none; }
}
.form .extra-op input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border: 2px solid var(--ink-3); border-radius: 7px; background: #fff; display: grid; place-items: center; cursor: pointer; }
.form .extra-op input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.form .extra-op input[type="checkbox"]:checked::after { content: "✓"; color: #15130f; font-weight: 800; font-size: 15px; line-height: 1; }
.form .extra-op input[type="checkbox"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Calendario del área de cliente: mismo aspecto que el del panel (celdas con borde, etiquetas de estado, cabecera con el mes). */
.area-cliente .cal-cab { margin: 6px 0 14px; }
.area-cliente .cal-cab h2 { margin: 0; font-size: 22px; }
.area-cliente .cal-sem, .area-cliente .cal-rejilla { gap: 6px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.area-cliente .cal-sem span { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.area-cliente .cal-dia { min-height: 96px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 6px; gap: 4px; }
.area-cliente .cal-dia.vacio { background: transparent; border-color: transparent; }
.area-cliente .cal-dia.hoy { outline: 0; box-shadow: inset 0 0 0 2px var(--accent); }
.area-cliente .cal-n { font-weight: 700; }
.area-cliente .cal-pub { display: block; font-size: 12px; padding: 3px 6px; border-radius: 6px; background: #dbe7ff; color: #1d3f86; }
.area-cliente .cal-pub.publicada { background: #d9f2e5; color: #0b5e3b; }
.area-cliente .cal-pub.caducada { background: rgba(214,92,60,.22); color: #8a3a22; }
.area-cliente .cal-pub.pendiente, .area-cliente .cal-pub.cambios, .area-cliente .cal-pub.espera { background: #fde6cf; color: #8a4205; }
.area-cliente .cal-pub.borrador { background: #ececec; color: #4a4a4a; }
.area-cliente .cal-pub.plan { background: transparent; border: 1px dashed var(--ink-3); color: var(--ink-3); }
.area-cliente .cal-ley { margin-top: 14px; }
.area-cliente .cal-ley .cal-pub { display: inline-block; }
@media (max-width: 800px) { .area-cliente .cal-dia { min-height: 64px; } .area-cliente .cal-pub { font-size: 10px; } }
.area-cliente .btn-ghost-mini { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; }
.area-cliente .btn-ghost-mini:hover { border-color: var(--accent); }