/* ============================================================
   DE EXPERTO A CONSULTOR · Componentes · recorte para deac-prtp
   Copiado desde deac-web/componentes.css v2 (septiembre 2026),
   SOLO la mitad de sistema impreso (compartida por las tres guías).
   Todo lo que en el original vive bajo el comentario "AÑADIDO EN LA
   WEB · APLICACIÓN — encargo 01" queda fuera a propósito: es la
   mecánica del prototipo de tutor IA de deac-web (SPA con
   coreografía de animación, lectura invertida a fondo oscuro,
   cajón de tutor, mecánica de listas) — premisas opuestas a las de
   este proyecto. Ver PLAN.md §5 para la lista exacta de qué entra y
   qué queda fuera, y por qué.

   Excepción: .sr-solo SÍ entra (línea de abajo) — nació en el
   archivo excluido pero es utilidad de accesibilidad pura, sin
   relación con el tutor ni con la coreografía.

   Requiere tokens.css.
   ============================================================ */

/* ---------- SUPERFICIES ----------
   Regla: nunca dos superficies en la misma página.
   El cambio ocurre entre páginas, nunca dentro.
   Tres variantes: .osc (portada), .osc.interior (aperturas de
   módulo y cierre — viñeta invertida), .clr (lectura). */
.osc{background:var(--campo-oscuro);color:var(--blanco)}
.osc.interior{background:linear-gradient(180deg,var(--azul-600) 0%,var(--azul-centro) 48%,var(--azul-centro) 55%,var(--azul-600) 100%)}
.osc.interior .run,.osc.interior .foot,.osc.interior .marca span{color:var(--acero-interior)}
.osc.interior .run{border-bottom-color:var(--azul-600)}
.osc.interior .foot{border-top-color:var(--azul-600)}
.clr{background:var(--papel);color:var(--tinta-cuerpo)}

/* ---------- marca · barra ámbar + nombre ---------- */
.marca{display:flex;align-items:center;gap:2cqw}
.marca i{width:1.3cqw;height:4.4cqw;background:var(--ambar);display:block;flex:none}
.marca span{font-family:var(--display);font-weight:700;font-size:1.9cqw;
            letter-spacing:.3em;text-transform:uppercase;color:var(--acero)}
.clr .marca span{color:var(--tinta-2)}

/* ---------- run · encabezado corrido ---------- */
.run{display:flex;justify-content:space-between;align-items:baseline;
     font-family:var(--display);font-weight:700;font-size:1.55cqw;
     letter-spacing:.19em;text-transform:uppercase;padding-bottom:1.9cqw}
.clr .run{color:var(--tinta-2);border-bottom:1px solid var(--papel-linea)}
.osc .run{color:var(--acero);border-bottom:1px solid var(--azul-linea)}

/* ---------- foot · pie corrido ---------- */
.foot{margin-top:auto;padding-top:2.1cqw;display:flex;justify-content:space-between;
      align-items:baseline;font-family:var(--display);font-weight:700;font-size:1.5cqw;
      letter-spacing:.19em;text-transform:uppercase}
.clr .foot{border-top:1px solid var(--papel-linea);color:var(--tinta-2)}
.osc .foot{border-top:1px solid var(--azul-linea);color:var(--acero)}
.foot .pg{color:var(--ambar-osc)}
.osc .foot .pg{color:var(--ambar)}

/* ---------- etq · etiqueta de sección ---------- */
.etq{font-family:var(--display);font-weight:700;font-size:1.75cqw;
     letter-spacing:.22em;text-transform:uppercase;color:var(--ambar-osc)}
.osc .etq{color:var(--ambar)}

/* ---------- tt · titular de portada ----------
   REGLA FIJA: primera línea en hueso, segunda en ámbar. */
.tt{font-family:var(--display);font-weight:900;font-size:11.2cqw;
    line-height:1.02;letter-spacing:-.026em}
.tt .l1{display:block;color:var(--blanco)}
.tt .l2{display:block;color:var(--ambar)}

/* ---------- tt-mod · titular de apertura de módulo ---------- */
.tt-mod{font-family:var(--display);font-weight:900;font-size:9.6cqw;
        line-height:1.03;letter-spacing:-.024em}
.tt-mod .l1{display:block;color:var(--blanco)}
.tt-mod .l2{display:block;color:var(--ambar)}

/* ---------- filete · línea ámbar divisoria ----------
   Sin uso en la guía 1. Se mantiene definida para láminas de redes
   en las guías 2/3, donde el titular es de una sola línea. */
.filete{height:2px;background:var(--filete-ambar);margin:2.6cqw 0;
        filter:drop-shadow(0 0 6px rgba(242,180,65,.45))}

/* ---------- titulares y texto ---------- */
h3{font-family:var(--display);font-weight:800;font-size:5.1cqw;line-height:1.10;
   letter-spacing:-.018em;color:var(--tinta);margin:1.2cqw 0 2.6cqw;max-width:23ch}
.osc h3{color:var(--blanco)}
h4{font-family:var(--display);font-weight:800;font-size:2.9cqw;
   color:var(--tinta);margin:3.6cqw 0 1.3cqw}
.osc h4{color:var(--blanco)}

p{font-family:var(--lectura);font-size:2.55cqw;line-height:1.58;margin-bottom:1.8cqw;text-wrap:pretty}
p b{font-weight:600;color:var(--tinta)}
.osc p{color:var(--acero-claro)}
.osc p b{color:var(--blanco)}

/* ---------- dek · entradilla ---------- */
.dek{font-family:var(--lectura);font-size:3.2cqw;line-height:1.45;
     color:var(--acero-claro);max-width:40ch;margin-top:3.3cqw}

/* ---------- gancho · frase de apertura de lección ---------- */
.gancho{font-family:var(--display);font-weight:600;font-size:3.15cqw;line-height:1.37;
        color:var(--tinta);border-left:2.5px solid var(--ambar-osc);
        padding-left:2.7cqw;max-width:46ch;margin-bottom:3.1cqw}

/* ---------- nota ---------- */
.nota{font-family:var(--lectura);font-size:2.15cqw;font-style:italic;
      color:var(--tinta-2);max-width:62ch}
/* remate — cierre de frase que se ilumina en ámbar. Máximo uno por
   bloque; nunca en portada ni en la entradilla de apertura de módulo. */
.remate{color:var(--ambar-osc);font-weight:700}
.osc .remate{color:var(--ambar)}

/* ---------- listas · guion ámbar, nunca viñeta redonda ---------- */
ul,ol{list-style:none;margin-bottom:1.8cqw}
li{font-family:var(--lectura);position:relative;padding-left:4cqw;
   font-size:2.55cqw;line-height:1.55;margin-bottom:1.3cqw;text-wrap:pretty}
li::before{content:"";position:absolute;left:0;top:1.6cqw;width:2.1cqw;
           height:1.6px;background:var(--ambar-osc)}
.osc li{color:var(--acero-claro)}
.osc li::before{background:var(--ambar)}
li b{font-weight:600;color:var(--tinta)}
.osc li b{color:var(--blanco)}
ol{counter-reset:n}
ol li{counter-increment:n;padding-left:4.6cqw}
ol li::before{content:counter(n);font-family:var(--display);font-weight:800;
              font-size:2.05cqw;color:var(--ambar-osc);background:none;
              width:auto;height:auto;top:.4cqw}
.osc ol li::before{color:var(--ambar)}

/* ---------- caja · inserto que no se escribe ---------- */
.caja{background:var(--papel-panel);border-left:3px solid var(--tinta);
      padding:2.8cqw 3.2cqw;margin:2.9cqw 0}
.osc .caja{background:rgba(255,255,255,.06);border-left-color:var(--ambar)}
.caja .t{font-family:var(--display);font-size:1.65cqw;letter-spacing:.19em;
         text-transform:uppercase;font-weight:800;color:var(--tinta-2);margin-bottom:1.2cqw}
.osc .caja .t{color:var(--acero)}
.caja p{font-size:2.45cqw}

/* ---------- formula · plantilla de frase para completar ----------
   Va dentro de una .caja. Centrada porque es un esquema para copiar,
   no prosa: única excepción a la alineación izquierda del sistema. */
.formula{font-family:var(--display);font-weight:700;font-size:2.9cqw;line-height:1.45;
         color:var(--tinta);text-align:center}
.formula b{color:var(--ambar-osc)}
.caja p:last-child,.caja ol:last-child,.caja ul:last-child{margin-bottom:0}

/* ---------- turno · contenedor de la consigna de ejercicio ----------
   En deac-prtp SOLO envuelve el texto de instrucción ("Tu turno · N
   minutos" + la consigna en prosa). El campo donde se escribe de
   verdad (input, lista, escala…) es un componente nuevo, propio de
   app.css — no viene de acá. El .lineas del PDF (rayas para escribir
   a mano) queda fuera por completo: no se porta a web. */
.turno{border:1.6px solid var(--ambar-osc);border-radius:1.4cqw;background:#fff;
       color:var(--tinta-cuerpo);padding:3.1cqw 3.3cqw;margin-top:3.1cqw}
.turno .t{font-family:var(--display);font-size:1.65cqw;letter-spacing:.19em;
          text-transform:uppercase;font-weight:800;color:var(--ambar-osc);margin-bottom:1.3cqw}
.turno p:last-child,.turno ol:last-child{margin-bottom:0}

/* ---------- tabla ---------- */
table{width:100%;border-collapse:collapse;font-family:var(--lectura);
      font-size:2.45cqw;margin:1.7cqw 0 0}
th{text-align:left;font-family:var(--display);font-size:1.65cqw;letter-spacing:.15em;
   text-transform:uppercase;color:var(--tinta-2);font-weight:800;
   padding:0 2cqw 1.2cqw 0;border-bottom:1.5px solid var(--tinta)}
td{padding:1.5cqw 2cqw 1.5cqw 0;border-bottom:1px solid var(--papel-linea);
   vertical-align:top;line-height:1.45}
td:first-child{font-family:var(--display);font-weight:700;color:var(--tinta);
               white-space:nowrap;width:24%}

/* ============================================================
   BOTONES
   El botón principal es la única superficie ámbar grande del
   sistema. Es la excepción a la regla del aplique, y se
   justifica porque es la acción.
   ============================================================ */
.btn{display:inline-block;font-family:var(--display);font-weight:800;font-size:15px;
     letter-spacing:.04em;padding:16px 34px;border-radius:var(--r-pill);
     background:var(--ambar);color:var(--azul-800);text-decoration:none;
     border:none;cursor:pointer;
     transition:transform var(--mov-rapido) var(--curva-entra),
                background var(--mov-rapido) var(--curva-entra)}
.btn:hover{background:var(--ambar-cl);transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--ambar-cl);outline-offset:3px}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.btn.sec{background:transparent;color:var(--ambar);border:1.5px solid var(--ambar)}
.btn.sec:hover{background:rgba(242,180,65,.12);color:var(--ambar-cl)}
/* PROHIBIDO: texto blanco sobre ámbar. Contraste 1,85 — ilegible. */

/* ============================================================
   componentes de la guía impresa · V5 y PARTE 2
   ============================================================ */

/* ---------- logo y sello · marca gráfica en superficies oscuras ---------- */
.page>*{position:relative;z-index:2}
.page>.sello,.page>.cifra{position:absolute;z-index:1}
.logo{height:4.6cqw;width:auto;flex:none;align-self:flex-start}
.sello{right:3cqw;bottom:9cqw;width:50cqw;height:auto;opacity:.06;
       pointer-events:none;user-select:none;transform:rotate(-10.2deg)}
.sello.chico{width:38cqw}

/* ---------- cifra · número fantasma de apertura de módulo ---------- */
.cifra{right:5.2cqw;bottom:6.5cqw;pointer-events:none;user-select:none;text-align:center}
.cifra b{display:block;font-family:var(--display);font-weight:900;font-size:34cqw;
         line-height:.74;letter-spacing:-.05em;color:rgba(255,255,255,.07)}
.cifra span{display:block;font-family:var(--display);font-weight:800;font-size:3.5cqw;
            text-transform:uppercase;text-align:justify;text-align-last:justify;
            color:rgba(255,255,255,.16);margin-bottom:.2cqw;margin-left:.91cqw}

/* ---------- clave · remate conceptual de lección ---------- */
.clave{background:var(--papel-panel);border-left:3px solid var(--ambar-osc);
       padding:2.4cqw 3.0cqw;margin:2.9cqw 0 0}
.clave .t{font-family:var(--display);font-size:1.65cqw;letter-spacing:.19em;
          text-transform:uppercase;font-weight:800;color:var(--tinta-2);margin-bottom:1.0cqw}
.clave p{margin-bottom:0}

/* ---------- índices de una columna · mitos, módulos, plazos ---------- */
.mitos,.modulos,.plazos{border-top:1px solid var(--papel-linea)}
.mitos div,.modulos div,.plazos div{display:flex;border-bottom:1px solid var(--papel-linea)}
.mitos{margin:3.2cqw 0 3.2cqw}
.mitos div{align-items:center;gap:3.4cqw;padding:2.5cqw 0}
.mitos b{font-family:var(--display);font-weight:900;font-size:6.2cqw;line-height:.9;
         letter-spacing:-.03em;color:var(--ambar-osc);flex:none;width:9cqw}
.mitos span{font-family:var(--display);font-weight:600;font-size:3.3cqw;
            line-height:1.25;color:var(--tinta)}
.modulos{margin-top:4.2cqw}
.modulos div{align-items:flex-start;gap:5.2cqw;padding:2.9cqw 0}
.modulos b{font-family:var(--display);font-weight:900;font-size:6.2cqw;line-height:.9;
           letter-spacing:-.03em;color:var(--ambar-osc);flex:none;width:11cqw}
.plazos{margin-top:2.2cqw}
.plazos div{align-items:baseline;gap:3.4cqw;padding:2.2cqw 0}
.plazos b{font-family:var(--display);font-weight:800;font-size:3.0cqw;line-height:1.1;
          letter-spacing:-.01em;color:var(--ambar-osc);flex:none;width:16cqw}
.modulos p,.plazos p{margin-bottom:0}
.rotulo{padding-bottom:1.2cqw;font-family:var(--display);font-weight:700;
        font-size:1.65cqw;letter-spacing:.19em;text-transform:uppercase;color:var(--tinta-2)}

/* ---------- cuadrantes · plano cartesiano (versión impresa) ---------- */
.cuadrantes{display:grid;grid-template-columns:1fr 1fr;position:relative;
            width:60cqw;align-self:center;margin:3.2cqw 0 0}
.cuadrantes div{background:var(--papel-panel);aspect-ratio:1;display:flex;
                flex-direction:column;align-items:center;justify-content:center;
                text-align:center;padding:2cqw}
.cuadrantes::before{content:'';position:absolute;left:50%;top:-2.4%;bottom:-2.4%;
            width:1.6px;margin-left:-.8px;background:var(--tinta)}
.cuadrantes::after{content:'';position:absolute;top:50%;left:-2.4%;right:-2.4%;
            height:1.6px;margin-top:-.8px;background:var(--tinta)}
.cuadrantes b{display:block;font-family:var(--display);font-weight:700;font-size:1.65cqw;
              letter-spacing:.19em;text-transform:uppercase;color:var(--tinta);
              margin-bottom:1.1cqw}
.cuadrantes span{display:block;font-family:var(--display);font-weight:800;
                 font-size:3.4cqw;letter-spacing:-.01em;color:var(--ambar-osc)}

/* ---------- venn · diagrama de intersección ---------- */
.venn{display:block;width:70cqw;align-self:center;margin:auto 0 0}

/* ---------- msj · mensaje destacado dentro de una caja ---------- */
.msj{font-family:var(--lectura);font-weight:700;font-size:2.75cqw;line-height:1.5;
     color:var(--tinta);text-align:center;margin-bottom:0}
.msj i{font-style:normal;color:var(--ambar-osc)}

/* ---------- cont · continuación centrada del cierre ---------- */
.cont{text-align:center;margin-top:5.0cqw}
.cont span{display:block;font-family:var(--display);font-weight:900;font-size:7.4cqw;
           line-height:1.04;letter-spacing:-.024em}
.cont .l1{color:var(--blanco)}

/* ============================================================
   ORO METÁLICO
   ============================================================ */
.oro{-webkit-background-clip:text;background-clip:text}
.oro.oro-tit{color:transparent;background-image:var(--oro-texto);
             filter:drop-shadow(0 0 .13em rgba(242,180,65,.26))}
.l2.oro{width:max-content;max-width:100%;margin-inline:auto}
.tt .l2.oro{margin-inline:0}
.oro.oro-rot{color:var(--ambar-osc);background-image:none;
             -webkit-background-clip:border-box;background-clip:border-box}
.filete.ligado{height:2px;background:var(--oro-linea);
               filter:drop-shadow(0 0 6px rgba(242,180,65,.42))}

/* ============================================================
   AÑADIDO EN LA PARTE 2 · "Construye tu oferta rentable"
   Sin uso en la guía 1 — se mantiene para las guías 2/3.
   ============================================================ */
.campo{font-family:var(--display);font-weight:800;font-size:1.9cqw;
       letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);
       margin:2.6cqw 0 0}
table.par td{width:50%;vertical-align:top}
table.par td:first-child{font-family:var(--lectura);font-weight:400;
       color:var(--tinta-cuerpo);white-space:normal}

/* ============================================================
   ACCESIBILIDAD · utilidad
   Único elemento que cruza desde la mitad excluida del archivo
   original: no tiene relación con el tutor ni la coreografía, es
   texto solo para lector de pantalla.
   ============================================================ */
.sr-solo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}