/* ################ base/estilos/base.css ################ */
/* ==========================================================================
   ESTILOS DE: BASE (lo general de toda la página)
   Contiene: colores generales (:root), reglas de inicio, fondo de pantalla,
   la caja principal (.stage) y lo que comparten varias ventanas.
   Cada parte de la página tiene su propio css en componentes/.
   ========================================================================== */

  :root{
    --cover-red:#b7263c;
    --cover-red-dark:#8a1c2d;
    --page-cream:#fbf3e6;
    --page-cream-2:#f7ecd9;
    --ink:#2c2118;
    --ink-soft:#6b5d4f;
    --gold:#c99a3f;
    --shadow: 0 30px 70px -20px rgba(15,8,4,.6);
  }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;} /* quita el cuadro/flash azul al tocar en Android */
  button, [role="button"]{outline:none;}
  button:focus-visible, .nav-item:focus-visible, .cat-card:focus-visible, .phrase-chip:focus-visible{
    outline:2px solid var(--cover-red); outline-offset:2px;
  } /* conserva un contorno visible solo para navegación con teclado */
  html,body{margin:0;padding:0;height:100%; width:100%; overflow-x:hidden;}
  body{
    min-height:100vh;
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background-image:
      linear-gradient(rgba(15,10,20,.62), rgba(15,10,20,.76)),
      url('img/fondo.png');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding:26px 16px 40px 16px;
    overflow-x:hidden;
    max-width:100vw;
  }

  /* Caja principal: barra de menú lateral + libro */
  .stage{position:relative; width:100%; max-width:1320px; display:flex; align-items:flex-start; justify-content:center;}

  /* Compartido por las ventanas (video, favoritos, historial, ideas, ayuda) */
  .modal-close{background:rgba(255,255,255,.2); border:none; color:#fff; width:30px;height:30px;border-radius:50%; cursor:pointer; display:flex;align-items:center;justify-content:center; flex:0 0 30px;}
  @keyframes modalPop{from{transform:scale(.92); opacity:0;}to{transform:scale(1); opacity:1;}}

  /* Celular */
  @media (max-width:900px){
    body{padding-bottom:92px;} /* deja espacio para el menú fijo de abajo */
    .stage{flex-direction:column; align-items:center;}
  }


/* ################ componentes/barra-superior/barra-superior.css ################ */
/* ==========================================================================
   ESTILOS DE: BARRA SUPERIOR (menú, título, buscador y botones de arriba)
   ========================================================================== */

  /* ---------------- Top bar ---------------- */
  .topbar{
    width:100%; max-width:1320px;
    display:flex; align-items:center; gap:14px;
    background:rgba(255,253,250,.92);
    border-radius:18px;
    padding:10px 18px;
    box-shadow:var(--shadow);
    margin-bottom:22px;
    position:relative; top:0; z-index:40;
  }
  .tb-menu-btn{
    width:38px;height:38px;border-radius:50%;
    background:var(--cover-red); color:#fff; border:none;
    display:flex;align-items:center;justify-content:center; cursor:pointer;
    flex:0 0 38px;
  }
  .tb-title{
    display:flex;align-items:center;gap:8px;
    font-family:'Fraunces',serif; font-weight:700; font-size:19px; color:var(--cover-red);
    white-space:nowrap;
    min-width:0; flex:1 1 auto; overflow:hidden;
  }
  .tb-title span.long{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  /* Buscador desplegable: arranca colapsado en un botón-ícono en cualquier
     tamaño de pantalla y se despliega como una barra al tocar la lupa. */
  .tb-search{
    position:absolute; left:56px; right:16px; top:calc(100% + 8px);
    max-width:none; margin:0; opacity:0; pointer-events:none; transform:translateY(-6px);
    background:rgba(255,253,250,.98); border-radius:14px; box-shadow:var(--shadow); padding:8px;
    transition:opacity .25s ease, transform .25s ease; z-index:55;
  }
  .tb-search.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .tb-search input{
    width:100%; border:1.5px solid #eee0cb; background:var(--page-cream);
    border-radius:12px; padding:9px 14px; font-size:13.5px; font-family:'Inter';
    outline:none; color:var(--ink);
  }
  .tb-search input:focus{border-color:var(--cover-red);}
  .tb-search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px;height:15px; color:var(--ink-soft);}
  .tb-search-toggle.tb-icon-btn{display:flex; margin-left:auto;}

  /* --- Solo en computadora: la lupa queda pegada a los demás íconos y el
     buscador se abre justo al lado de ella, no centrado en el medio --- */
  @media (min-width:901px){
    .tb-search{
      position:relative; left:auto; right:auto; top:auto;
      order:2; margin-left:auto; margin-right:0;
      width:0; max-width:0; opacity:0; overflow:hidden; pointer-events:none;
      padding:0; background:transparent; box-shadow:none; transform:none;
      transition:max-width .3s ease, opacity .2s ease, padding .3s ease;
    }
    .tb-search.open{
      width:auto; max-width:260px; opacity:1; pointer-events:auto; overflow:visible;
      padding:8px; margin-right:10px;
      background:rgba(255,253,250,.98); border-radius:12px; box-shadow:var(--shadow);
    }
    .tb-search .tb-results{left:0; right:0;}
    .tb-search-toggle.tb-icon-btn{order:3; margin-left:0;}
    #topbar .tb-actions{order:4; margin-left:0;}
  }
  .tb-results{
    position:absolute; top:calc(100% + 6px); left:0; right:0;
    background:#fff; border-radius:12px; box-shadow:var(--shadow);
    max-height:280px; overflow-y:auto; display:none; z-index:60;
  }
  .tb-results.show{display:block;}
  .tb-result{
    padding:10px 14px; font-size:13px; cursor:pointer; border-bottom:1px solid #f2e9d8;
    display:flex; justify-content:space-between; gap:8px; align-items:center;
  }
  .tb-result:last-child{border-bottom:none;}
  .tb-result:hover{background:var(--page-cream);}
  .tb-result span.cat{font-size:10.5px; color:var(--ink-soft); font-weight:600;}
  .tb-actions{display:flex; align-items:center; gap:10px; margin-left:auto;}
  .tb-icon-btn{
    width:36px;height:36px;border-radius:50%; border:none; cursor:pointer;
    background:var(--page-cream); color:var(--cover-red);
    display:flex;align-items:center;justify-content:center;
    transition:transform .15s ease, background .15s ease;
    flex:0 0 36px;
  }
  .tb-icon-btn:hover{background:var(--accent-pink,#f6d9d9); transform:translateY(-1px);}
  .tb-icon-btn svg{width:16px;height:16px;}
  .tb-icon-btn .count-badge{
    position:absolute; top:-3px; right:-3px; background:var(--gold); color:#fff;
    font-size:9px; font-weight:800; border-radius:10px; min-width:15px; height:15px;
    display:flex; align-items:center; justify-content:center; padding:0 3px;
  }
  .tb-icon-btn{position:relative;}

  /* Celular */
  @media (max-width:900px){
    /* En celular el título siempre se ve */
    .tb-title span.long{display:inline;}
    .tb-actions{gap:4px;}
    .tb-icon-btn{width:32px;height:32px; flex:0 0 32px;}

    /* Favoritos, Historial, Ideas, Ayuda y Desarrolladores ya están en el
       menú de abajo / en el pie de página: se quitan de arriba en celular.
       "Cerrar libro" se deja porque no está en ningún otro lado. */
    .tb-actions #favBtn,
    .tb-actions #historyBtn,
    .tb-actions #ideasBtn,
    .tb-actions #helpBtn,
    .tb-actions #devsBtn{display:none;}
  }
  /* Computadora: animación tipo "dock" en los íconos de arriba */
  @media (min-width:901px){
    /* Animación tipo "dock": al pasar el cursor sobre un ícono de la barra
       superior, se agranda y se ilumina, aparece su nombre, y los demás se opacan */
    .tb-actions{padding:0 2px;}
    .tb-actions .tb-icon-btn{
      transition:transform .18s cubic-bezier(.4,0,.2,1), opacity .18s ease, background .15s ease;
    }
    .tb-actions:hover .tb-icon-btn{opacity:.42;}
    .tb-actions .tb-icon-btn:hover{
      opacity:1 !important; transform:translateY(-4px) scale(1.22); z-index:5;
      background:var(--cover-red); color:#fff;
    }
    .tb-icon-btn::after{
      content:attr(data-tooltip); position:absolute; bottom:-30px; left:50%;
      transform:translateX(-50%) translateY(4px);
      background:var(--ink); color:#fff; font-size:10.5px; font-weight:600;
      padding:4px 10px; border-radius:8px; white-space:nowrap;
      opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:6;
    }
    .tb-icon-btn:hover::after{opacity:1; transform:translateX(-50%) translateY(0);}
  }
  /* Celulares pequeños */
  @media (max-width:420px){
    .topbar{padding:8px 10px; gap:8px;}
    .tb-title{font-size:16px;}
  }


/* ################ componentes/menu-lateral/menu-lateral.css ################ */
/* ==========================================================================
   ESTILOS DE: MENÚ LATERAL (lista de categorías) y mensaje de transición del celular
   ========================================================================== */

  /* Side nav (categorías) */
  .nav-card{
    background:#fffdfa; border-radius:20px; box-shadow:var(--shadow);
    width:0; flex:0 0 0px; margin-right:0; margin-top:40px; z-index:20;
    position:relative; overflow:hidden; opacity:0; padding:14px 0;
    transition:width .38s cubic-bezier(.4,0,.2,1), flex-basis .38s cubic-bezier(.4,0,.2,1),
               opacity .25s ease, margin-right .38s ease, padding .38s ease;
  }
  .nav-card.nav-open{
    width:190px; flex:0 0 190px; margin-right:-24px; opacity:1; padding:14px 10px;
    max-height:80vh; overflow-y:auto;
  }
  .nav-card::-webkit-scrollbar{display:none;}
  .nav-card{scrollbar-width:none; -ms-overflow-style:none;}
  .nav-item{
    display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
    font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer;
    transition:background .15s ease, color .15s ease, transform .15s ease;
  }
  .nav-item span.emoji{font-size:15px; width:18px; text-align:center;}
  .nav-item:hover{background:#fbeceb; color:var(--cover-red); transform:translateX(2px);}
  .nav-item.active{background:#f6d9d9; color:var(--cover-red);}
  .nav-divider{height:1px; background:#eee2d2; margin:8px 10px;}

  /* Mensaje de transición al tocar una categoría (solo celular) */
  .nav-transition{
    position:fixed; inset:0; z-index:300;
    background:rgba(20,10,5,.72);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .nav-transition.show{opacity:1;}
  .nt-icon{
    width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.15);
    display:flex; align-items:center; justify-content:center; font-size:36px; color:#fbeee0;
    transform:scale(.6); transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .nav-transition.show .nt-icon{transform:scale(1);}
  .nt-text{color:#fbeee0; font-family:'Fraunces',serif; font-weight:700; font-size:17px; text-align:center; padding:0 20px;}

  /* Celular: el menú se muestra como ventana centrada */
  @media (max-width:900px){
    /* Menú de categorías (tres rayas): en celular se muestra como una
       ventana centrada en la pantalla, con el fondo borroso detrás */
    .nav-card{
      position:fixed; inset:0; z-index:150; margin:0; padding:0;
      width:100%; max-width:none; max-height:none; flex:none;
      display:flex; align-items:center; justify-content:center;
      background:transparent; box-shadow:none; border-radius:0;
      opacity:0; pointer-events:none;
      transition:opacity .3s ease;
    }
    .nav-card::before{
      content:""; position:fixed; inset:0; z-index:-1;
      background:rgba(20,10,5,.5);
      backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
      opacity:0; transition:opacity .3s ease;
    }
    .nav-card.nav-open{opacity:1; pointer-events:auto;}
    .nav-card.nav-open::before{opacity:1;}
    .nav-card-inner{
      background:#fffdfa; border-radius:20px; box-shadow:var(--shadow);
      width:88%; max-width:340px; max-height:74vh; overflow-y:auto;
      padding:16px 10px; scrollbar-width:none;
      transform:scale(.9) translateY(10px); opacity:0;
      transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .25s ease;
    }
    .nav-card-inner::-webkit-scrollbar{display:none;}
    .nav-card.nav-open .nav-card-inner{transform:scale(1) translateY(0); opacity:1;}
  }


/* ################ componentes/portada/portada.css ################ */
/* ==========================================================================
   ESTILOS DE: PORTADA (el libro cerrado)
   ========================================================================== */

  /* CLOSED COVER */
  .cover{
    grid-area:1/1; width:100%; aspect-ratio:820/560;
    background:linear-gradient(160deg, var(--cover-red), var(--cover-red-dark));
    border-radius:14px; box-shadow:var(--shadow);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    cursor:pointer; text-align:center; padding:30px;
    transform-style:preserve-3d; transform-origin:left center;
    transition:transform 1s cubic-bezier(.4,0,.2,1), box-shadow 1s ease;
    position:relative; z-index:30;
  }
  .cover::before{
    content:""; position:absolute; left:14px; top:14px; right:14px; bottom:14px;
    border:1.5px solid rgba(108, 196, 23, 1); border-radius:8px; pointer-events:none;
  }
  .cover-icon{
    width:62px;height:62px;border-radius:50%; background:rgba(255,255,255,.14);
    display:flex;align-items:center;justify-content:center; margin-bottom:16px;
    color:#f7d9c8;
  }
  .cover h1{font-family:'Fraunces',serif; color:#fbeee0; font-size:34px; margin:0 0 8px 0;}
  .cover p{color:#f3cfcf; font-size:13.5px; max-width:340px; margin:0 0 18px 0; line-height:1.5;}
  .cover .hint{
    font-size:12px; color:#fbeee0; background:rgba(255,255,255,.12);
    padding:8px 16px; border-radius:20px; display:inline-flex; align-items:center; gap:8px;
    animation:pulseHint 1.8s ease-in-out infinite;
  }
  @keyframes pulseHint{0%,100%{opacity:.75;}50%{opacity:1;}}
  /* ---- Animación de abrir/cerrar el libro ----
     La mueve programa.js (función animarLibro): gira la tapa desde el lomo, de 0° a 180°.
     Pasados los 90° se ve el reverso de la tapa (papel, clase .back) y las hojas del libro aparecen debajo. */
  .cover{will-change:transform; transition:none;}
  .cover{
    border-radius:4px 14px 14px 4px;
    box-shadow:7px 5px 0 -1px #efe0c8, 0 22px 40px rgba(0,0,0,.35);
  }
  .cover::after{content:""; position:absolute; left:0; top:0; bottom:0; width:16px; border-radius:4px 0 0 4px;
    background:linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.08) 60%, transparent); pointer-events:none;}
  @media (max-width:900px){ .cover{aspect-ratio:3/4;} }   /* celular: portada vertical, como un libro de verdad */
  .cover.back{background:var(--page-cream-2,#f7ecd9); box-shadow:0 0 26px rgba(0,0,0,.22);}
  .cover.back > *{opacity:0 !important;}
  .cover.back::before{border-color:rgba(120,80,40,.18);}
  .cover.hidden{display:none;}

  /* Celulares pequeños */
  @media (max-width:420px){
    .cover{padding:20px;}
    .cover h1{font-size:26px;}
  }


/* ################ componentes/libro/libro.css ################ */
/* ==========================================================================
   ESTILOS DE: LIBRO ABIERTO (marco, hojas y animación de pasar página)
   ========================================================================== */

  /* Book wrap */
  .book-outer{
    position:relative; width:920px; max-width:78vw; perspective:2200px;
    display:grid; grid-template-columns:1fr; /* portada y libro ocupan la misma celda: solo cuenta el alto del que esté visible */
  }
  .cover, .book{min-width:0;} /* evita que el contenido interno (ej. cat-grid) fuerce el ancho de la celda */

  /* OPEN BOOK */
  .book{
    grid-area:1/1; width:100%; background:var(--cover-red); border-radius:14px; box-shadow:var(--shadow);
    padding:16px; background-image:linear-gradient(160deg, var(--cover-red), var(--cover-red-dark));
    opacity:0; transform:scale(.97); transition:opacity .5s ease .15s, transform .5s ease .15s;
    position:relative;
    max-height:0; overflow:hidden; /* mientras está cerrado no debe empujar el alto de la celda del grid */
  }
  .book.visible{opacity:1; transform:scale(1); max-height:none; overflow:visible;}
  .book.anim{opacity:1; transform:none; max-height:none; overflow:visible; transition:none;}
  .book{visibility:hidden;}
  .book.visible, .book.anim{visibility:visible;}
  .book-topline{display:flex; align-items:center; justify-content:flex-start; gap:8px; padding:2px 4px 12px 4px;}
  .book-topline .btitle{color:#fbeee0; font-family:'Fraunces',serif; font-weight:600; font-size:14px; flex:1; text-align:center; padding-right:var(--flechas-ancho,122px); line-height:1.25;}

  .pages{
    display:grid; grid-template-columns:1fr 1fr; background:var(--page-cream);
    border-radius:6px; min-height:540px; position:relative; overflow:hidden;
    box-shadow:inset 0 0 40px rgba(120,80,40,.12);
  }
  .pages::before{
    content:""; position:absolute; left:50%; top:0; bottom:0; width:26px; margin-left:-13px;
    background:linear-gradient(90deg, transparent, rgba(90,55,25,.14), transparent); pointer-events:none; z-index:5;
  }
  .page{padding:30px 28px; position:relative; overflow-y:auto; max-height:540px;}
  /* La hoja sigue pudiendo desplazarse, pero sin mostrar la barra gris */
  .page{scrollbar-width:none; -ms-overflow-style:none;}
  .page::-webkit-scrollbar{display:none;}
  .page-left{background:var(--page-cream); display:flex; flex-direction:column;}
  .media-slot{
    margin-top:auto; border:2px dashed #d9c5a3; border-radius:14px;
    min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; color:var(--ink-soft); text-align:center; padding:16px; background:rgba(255,255,255,.4);
  }
  .media-slot svg{width:30px;height:30px; color:#c9a96b;}
  .media-slot span{font-size:12.5px; font-weight:700;}
  .media-slot small{font-size:10.5px; opacity:.8;}
  .media-slot.filled{border:none; padding:0; overflow:hidden; min-height:170px;}
  .media-slot.filled img, .media-slot.filled video{width:100%; height:100%; object-fit:cover; display:block; border-radius:14px;}

  /* ==========================================================================
     TARJETA QUE GIRA  (foto adelante, video atrás)
     Se activa en programa.js con:  catMedia:{ imagen:'foto.jpg', video:'video.mp4' }
     ► Para cambiar el tamaño, las esquinas o el espacio, edita SOLO estas 4 líneas:
     ========================================================================== */
  :root{
    --tarjeta-alto:200px;          /* alto de la tarjeta. Más grande = foto y video más grandes */
    --tarjeta-radio:14px;          /* esquinas: 0px = rectas, 24px = muy redondeadas */
    --tarjeta-espacio:16px;        /* espacio MÍNIMO entre la tarjeta y lo que tiene arriba */
    --tarjeta-profundidad:1600px;  /* efecto 3D: número chico = giro más exagerado, grande = más plano */
  }

  /* El recuadro: tiene el alto fijo y es quien da la perspectiva 3D. Ocupa todo el ancho de la hoja. */
  .media-slot.filled.flip-slot{
    height:var(--tarjeta-alto); min-height:0;
    perspective:var(--tarjeta-profundidad);
    cursor:pointer; overflow:visible; background:none;
  }

  /* Deja SIEMPRE un espacio libre entre la tarjeta y el bloque de arriba (aunque la hoja esté llena).
     Para que la tarjeta quede más pegada o más separada, cambia --tarjeta-espacio arriba. */
  .page-left > :has(+ .flip-slot){margin-bottom:var(--tarjeta-espacio);}

  /* La pieza que gira (el giro lo hace programa.js, función girarTarjeta). No pongas 'transition' aquí. */
  .flip-inner{position:relative; width:100%; height:100%; transform-style:preserve-3d;}

  /* Las dos caras van una encima de la otra y se ocultan cuando miran hacia atrás.
     Las dos usan el mismo marco, así el video respeta exactamente el margen de la foto. */
  .flip-front, .flip-back{
    position:absolute; top:0; left:0; right:0; bottom:0;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    border-radius:var(--tarjeta-radio); overflow:hidden;
  }
  .flip-back{transform:rotateY(180deg); background:#000;}   /* fondo negro: se ven las barras si el video no llena el marco */

  /* Cara de adelante: la foto llena el marco (se recorta un poco si la proporción es distinta).
     Para ver la foto COMPLETA sin recortar, cambia 'cover' por 'contain'. */
  .media-slot.filled.flip-slot .flip-front img{width:100%; height:100%; object-fit:cover; display:block; border-radius:var(--tarjeta-radio);}

  /* Cara de atrás: el video se ve COMPLETO (contain), para que no se corte la persona que hace las señas.
     Si prefieres que llene todo el marco aunque se recorte, cambia 'contain' por 'cover'. */
  .media-slot.filled.flip-slot .flip-back video{width:100%; height:100%; object-fit:contain; display:block; border-radius:var(--tarjeta-radio); background:#000;}

  /* Botoncito "Toca para ver el video" sobre la foto. Para quitarlo: display:none; */
  .flip-hint{position:absolute; left:50%; bottom:10px; transform:translateX(-50%); background:rgba(0,0,0,.55); color:#fff; font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px; white-space:nowrap; pointer-events:none;}

  /* Mensaje que sale atrás si el video no existe (nombre mal escrito o archivo no subido) */
  .flip-missing{position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; color:#fff; font-size:12.5px; font-weight:700; background:#000;}

  .page-right{background:var(--page-cream-2);}

  .flip-out{animation:flipOut .55s ease forwards;}
  .flip-in{animation:flipIn .55s ease forwards;}
  @keyframes flipOut{0%{transform:rotateY(0deg);opacity:1;}100%{transform:rotateY(-95deg);opacity:0;}}
  @keyframes flipIn{0%{transform:rotateY(95deg);opacity:0;}100%{transform:rotateY(0deg);opacity:1;}}
  .pages{transform-style:preserve-3d;}

  /* Celular */
  @media (max-width:900px){
    .book-outer{max-width:94vw;}
    .pages{grid-template-columns:1fr;}
    .pages::before{display:none;}
    .page{max-height:none;}
  }
  /* Celulares pequeños */
  @media (max-width:420px){
    .book{padding:10px;}
    .page{padding:20px 16px;}
  }


/* ################ componentes/indice/indice.css ################ */
/* ==========================================================================
   ESTILOS DE: ÍNDICE (primera hoja: bienvenida y tarjetas de categorías)
   Los estilos .toc-badge y .toc-desc los usan también las hojas de desarrolladores.
   ========================================================================== */

  /* TOC */
  .toc-badge{
    display:inline-flex; align-items:center; gap:6px; color:var(--cover-red); font-weight:700;
    font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px;
  }
  .page-left h2{font-family:'Fraunces',serif; font-size:30px; color:var(--cover-red); margin:0 0 10px 0;}
  .toc-desc{font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin-bottom:16px;}
  .toc-stats{display:flex; gap:10px; flex-wrap:wrap;}
  .toc-stat{background:#f6d9d9; color:var(--cover-red); border-radius:12px; padding:10px 14px; font-size:12px; font-weight:700; text-align:center; flex:1 1 100px;}
  .toc-stat small{display:block; font-weight:500; color:var(--ink-soft); font-size:10.5px; margin-top:2px;}

  .cat-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:12px;
  }
  .cat-card{
    background:#fff; border-radius:14px; padding:16px 14px; cursor:pointer; text-align:left;
    border:2px solid transparent; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    box-shadow:0 6px 16px -8px rgba(60,30,10,.18);
  }
  .cat-card:hover{transform:translateY(-3px); box-shadow:0 12px 20px -8px rgba(60,30,10,.28);}
  .cat-card .cc-icon{font-size:24px; margin-bottom:8px; display:block;}
  .cat-card .cc-title{font-weight:700; font-size:13.5px; margin-bottom:4px; color:var(--ink);}
  .cat-card .cc-desc{font-size:11.5px; color:var(--ink-soft); font-style:italic; line-height:1.35; margin-bottom:6px;}
  .cat-card .cc-count{font-size:11px; color:var(--ink-soft);}


/* ################ componentes/pagina-categoria/pagina-categoria.css ################ */
/* ==========================================================================
   ESTILOS DE: HOJA DE CADA CATEGORÍA (cabecera y botones de frase)
   El color de cada categoría NO está aquí: viene de categorias/<tema>/<tema>.css
   ========================================================================== */

  /* Category page */
  .cat-head{display:flex; align-items:center; gap:12px; margin-bottom:4px;}
  .cat-head .ch-icon{
    width:52px;height:52px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:24px; flex:0 0 52px;
    position:relative; overflow:hidden;
    background:var(--cat-color-soft, #f6d9d9); color:var(--cat-color, var(--cover-red));
  }
  .ch-icon .ch-face{
    position:absolute; inset:0; display:flex;align-items:center;justify-content:center;
    transition:opacity .35s ease, transform .35s ease;
  }
  .ch-icon .ch-face.b{opacity:0; transform:scale(.55) rotate(12deg);}
  .ch-icon:hover .ch-face.a{opacity:0; transform:scale(.55) rotate(-12deg);}
  .ch-icon:hover .ch-face.b{opacity:1; transform:scale(1) rotate(0deg);}
  .ch-icon{cursor:pointer;}
  .cat-head h2{font-family:'Fraunces',serif; font-size:clamp(19px,2.3vw,25px); line-height:1.15; margin:0; color:var(--ink); min-width:0; overflow-wrap:break-word; text-wrap:balance;}
  .cat-sub{font-size:12.5px; color:var(--ink-soft); margin:6px 0 18px 0; font-style:italic;}

  .subgroup-title{
    font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--gold); margin:18px 0 8px 0; display:flex; align-items:center; gap:6px;
  }
  .subgroup-title:first-child{margin-top:0;}
  .subgroup-desc{font-size:12.5px; color:var(--ink-soft); font-style:italic; margin:-4px 0 10px 0; line-height:1.4;}

  .phrase-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px;
  }
  .phrase-chip{
    background:#fff; border:1.5px solid #f0e3cd; border-radius:12px; padding:12px 12px;
    font-size:12.5px; font-weight:600; color:var(--ink); text-align:left; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
    line-height:1.35;
  }
  .phrase-chip:hover{transform:translateY(-2px); box-shadow:0 8px 16px -8px rgba(60,30,10,.3); border-color:var(--cat-color, var(--cover-red));}
  .phrase-chip .pc-play{
    flex:0 0 24px; width:24px;height:24px;border-radius:50%; background:var(--cat-color, var(--cover-red)); color:#fff;
    display:flex;align-items:center;justify-content:center;
  }
  .phrase-chip .pc-play svg{width:10px;height:10px;}


/* ################ componentes/ventana-video/ventana-video.css ################ */
/* ==========================================================================
   ESTILOS DE: VENTANA DE VIDEO (se abre al tocar una frase)
   El color de la cabecera viene de cada categoría (--cat-color).
   .modal-close y la animación modalPop están en base/estilos/base.css
   ========================================================================== */

  /* ---------------- Video Modal ---------------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(20,10,5,.62); backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; z-index:200; padding:20px;
  }
  .modal-overlay.show{display:flex;}
  .modal-card{
    background:var(--page-cream); border-radius:18px; width:min(460px, calc(100vw - 40px)); flex:none; /* tamaño fijo: no depende del texto */
    box-shadow:0 40px 80px -20px rgba(0,0,0,.6); overflow:hidden;
    animation:modalPop .25s ease;
  }
  .modal-head{
    padding:16px 20px; display:flex; align-items:center; justify-content:space-between;
    background:var(--cat-color, var(--cover-red)); color:#fff;
  }
  .modal-head .mh-tag{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; opacity:.85;}
  .modal-head h3{font-family:'Fraunces',serif; font-size:19px; margin:2px 0 0 0;}
  .modal-group{ display:flex; align-items:center; gap:14px; max-width:100%; }
  .modal-ref-img{
        width:240px; flex:0 0 240px; height:auto; max-height:300px; object-fit:contain; background:#fff; display:block;
    border-radius:14px; border:1px solid rgba(255,255,255,.25); box-shadow:0 20px 50px -15px rgba(0,0,0,.5);
    order:1;
  }
  .modal-video{
    aspect-ratio:16/10; background:linear-gradient(150deg, var(--cat-color, var(--cover-red)), #2c2118);
    display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; gap:10px; position:relative;
  }
  @media (max-width:900px){
    .modal-group{ flex-direction:column; max-width:460px; }
        .modal-ref-img{ width:100%; flex:0 0 auto; height:auto; max-height:200px; object-fit:contain; order:-1; }
  }
  .modal-video .play-circle{
    width:58px;height:58px;border-radius:50%; background:rgba(255,255,255,.18); display:flex;align-items:center;justify-content:center;
    border:2px solid rgba(255,255,255,.5);
  }
  .modal-video .play-circle svg{width:22px;height:22px;}
  .modal-video p{font-size:12px; opacity:.85; margin:0; text-align:center; padding:0 24px;}
  .modal-video video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; display:block;}
  .modal-body{padding:16px 20px 20px 20px;}
  .modal-body .mb-note{font-size:12px; color:var(--ink-soft); line-height:1.5;}
  .modal-body .mb-note.con-frase{font-size:15px; font-weight:600; color:var(--ink); line-height:1.45; text-align:center;}


/* ################ componentes/pie-de-pagina/pie-de-pagina.css ################ */
/* ==========================================================================
   ESTILOS DE: PIE DE PÁGINA (contacto, accesos rápidos y menú fijo de abajo en celular)
   ========================================================================== */

  /* ---------------- Pie de página con accesos rápidos ---------------- */
  .footer-bar{
    width:100%; max-width:1320px; margin-top:24px;
    background:rgba(255,253,250,.92); border-radius:18px; box-shadow:var(--shadow);
    display:flex; justify-content:space-around; align-items:center; padding:10px 6px;
  }
  .footer-item{
    display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
    color:var(--ink-soft); font-size:10.5px; font-weight:600; padding:4px 8px; border-radius:10px;
    transition:color .15s ease, background .15s ease;
  }
  .footer-item:hover{color:var(--cover-red); background:var(--page-cream);}
  .footer-item svg{width:19px;height:19px;}

  /* ---------------- Pie de página completo (contacto + accesos rápidos) ---------------- */
  .site-footer{
    width:100%; max-width:1320px; margin-top:24px;
    background:linear-gradient(160deg, var(--cover-red), var(--cover-red-dark));
    border-radius:18px; box-shadow:var(--shadow); color:#fbeee0;
    padding:26px 28px 18px 28px; display:flex; flex-wrap:wrap; gap:26px 32px;
  }
  .sf-col{flex:1 1 220px; min-width:180px;}
  .sf-title{font-family:'Fraunces',serif; font-weight:700; font-size:16px; margin-bottom:12px; color:#fff;}
  .sf-line{display:flex; align-items:flex-start; gap:8px; font-size:12.5px; margin-bottom:9px; color:#f3d9d9; line-height:1.4;}
  .sf-line svg{width:15px;height:15px; flex:0 0 15px; margin-top:1px;}
  .sf-social{display:flex; gap:10px; margin-top:12px;}
  .sf-icon{
    width:32px;height:32px;border-radius:50%; background:rgba(255,255,255,.16); color:#fff;
    display:flex;align-items:center;justify-content:center; text-decoration:none;
    transition:background .15s ease, transform .15s ease;
  }
  .sf-icon svg{width:15px;height:15px;}
  .sf-icon:hover{background:rgba(255,255,255,.3); transform:translateY(-2px);}
  .sf-link{
    display:block; background:none; border:none; color:#f3d9d9; font-size:12.5px; font-weight:600;
    padding:5px 0; cursor:pointer; text-align:left; font-family:'Inter'; transition:color .15s ease;
  }
  .sf-link:hover{color:#fff; text-decoration:underline;}
  .sf-bottom{
    flex:1 1 100%; border-top:1px solid rgba(255,255,255,.18); margin-top:2px; padding-top:12px;
    display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center;
  }
  .sf-bottom span{font-size:11.5px; font-weight:600;}
  .sf-bottom small{font-size:10px; opacity:.75;}

  /* Celular */
  @media (max-width:900px){
    /* El menú de accesos rápidos queda fijo abajo de la pantalla */
    .footer-bar{
      display:flex; position:fixed; left:10px; right:10px; bottom:10px;
      margin-top:0; z-index:120;
      width:auto; /* antes era 100% + margen izquierdo: la barra se salía de la pantalla por la derecha */
    }
    .site-footer{margin-bottom:14px;}
    /* con 6 opciones, se compactan para que quepan todas en pantallas angostas */
    .footer-bar{padding:10px 2px;}
    .footer-item{padding:4px 3px; font-size:10px; min-width:0;}
  }
  /* Computadora: el menú de abajo no se muestra */
  @media (min-width:901px){
    .footer-bar{display:none;} /* en escritorio el menú lateral ya cubre estas opciones */
  }


/* ################ componentes/ventanas/ventanas.css ################ */
/* ==========================================================================
   ESTILOS DE: VENTANAS (lo común: fondo oscuro, caja y cabecera de las 4 ventanas laterales)
   ========================================================================== */

  /* ---------------- Modales de Favoritos / Historial / Ideas / Ayuda ---------------- */
  .side-modal-overlay{
    position:fixed; inset:0; background:rgba(20,10,5,.55); backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; z-index:210; padding:20px;
  }
  .side-modal-overlay.show{display:flex;}
  .side-modal{
    background:var(--page-cream); border-radius:18px; width:100%; max-width:440px; max-height:80vh;
    box-shadow:0 40px 80px -20px rgba(0,0,0,.6); overflow:hidden; display:flex; flex-direction:column;
    animation:modalPop .25s ease;
  }
  .side-modal-head{
    padding:16px 20px; display:flex; align-items:center; justify-content:space-between;
    background:var(--cover-red); color:#fff; font-family:'Fraunces',serif; font-size:17px; font-weight:700;
  }
  .side-modal-body{padding:14px 18px 18px 18px; overflow-y:auto;}


/* ################ componentes/favoritos-historial/favoritos-historial.css ################ */
/* ==========================================================================
   ESTILOS DE: FAVORITOS e HISTORIAL (filas de la lista)
   ========================================================================== */

  .sm-empty{font-size:12.5px; color:var(--ink-soft); text-align:center; padding:20px 10px; line-height:1.6;}
  .sm-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:#fff; border:1.5px solid #f0e3cd; border-radius:12px; padding:10px 12px; margin-bottom:8px;
    font-size:12.5px; font-weight:600; cursor:pointer;
  }
  .sm-row:hover{border-color:var(--cover-red);}
  .sm-row small{display:block; font-weight:500; color:var(--ink-soft); font-size:10.5px; margin-top:2px;}
  .sm-row .sm-star{color:var(--gold); flex:0 0 auto; background:none; border:none; cursor:pointer;}
  .sm-row .sm-star svg{width:16px;height:16px;}


/* ################ componentes/buzon-ideas/buzon-ideas.css ################ */
/* ==========================================================================
   ESTILOS DE: BUZÓN DE IDEAS (cuadro de texto y botón)
   ========================================================================== */

  .ideas-textarea{
    width:100%; min-height:110px; border:1.5px solid #eee0cb; background:#fff; border-radius:12px;
    padding:10px 12px; font-family:'Inter'; font-size:13px; resize:vertical; outline:none; color:var(--ink);
  }
  .ideas-textarea:focus{border-color:var(--cover-red);}
  .ideas-send{
    margin-top:10px; background:var(--cover-red); color:#fff; border:none; border-radius:12px;
    padding:10px 18px; font-weight:700; font-size:13px; cursor:pointer; width:100%;
  }
  .ideas-send:hover{background:var(--cover-red-dark);}


/* ################ componentes/ayuda/ayuda.css ################ */
/* ==========================================================================
   ESTILOS DE: AYUDA (lista de consejos)
   ========================================================================== */

  .help-list{list-style:none; margin:0; padding:0; font-size:12.5px; line-height:1.7; color:var(--ink);}
  .help-list li{display:flex; gap:8px; margin-bottom:8px;}
  .help-list span.hemoji{flex:0 0 20px;}


/* ################ componentes/desarrolladores/desarrolladores.css ################ */
/* ==========================================================================
   ESTILOS DE: DESARROLLADORES y TUTOR (las dos hojas del final del libro)
   Usa también estilos del libro (.toc-badge, .toc-desc, .page-left h2).
   ========================================================================== */

  /* Desarrolladores */
  .about-section{
    display:flex; align-items:flex-start; gap:12px;
    padding:12px 0; border-bottom:1px solid #efe2cc;
  }
  .about-section:last-of-type{border-bottom:none;}
  .about-icon{
    width:36px; height:36px; border-radius:50%; background:#f6d9d9; flex:0 0 36px;
    display:flex; align-items:center; justify-content:center; font-size:16px;
  }
  .about-label{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--cover-red); margin-bottom:3px;}
  .about-text{font-size:13px; color:var(--ink); line-height:1.5;}
  .about-footer{
    text-align:center; font-size:11px; color:var(--ink-soft); margin-top:14px;
    padding-top:12px; border-top:1px dashed #e6d8c0;
  }

  /* Tarjetas de desarrolladores (página completa del libro) */
  .dev-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px;}
  .dev-card{
    background:#fff; border-radius:14px; padding:16px 12px; text-align:center;
    box-shadow:0 6px 16px -8px rgba(60,30,10,.18);
  }
  .dev-photo{
    width:84px; height:84px; border-radius:50%; margin:0 auto 10px auto; overflow:hidden;
    border:2px dashed #d9c5a3; display:flex; align-items:center; justify-content:center;
    background:var(--page-cream); color:#c9a96b;
  }
  .dev-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .dev-photo svg{width:28px; height:28px;}
  .dev-name{font-weight:700; font-size:13px; color:var(--ink); margin-bottom:4px;}
  .dev-phrase{font-size:11.5px; color:var(--ink-soft); font-style:italic; line-height:1.4; min-height:32px;}

  /* Tarjeta grande del tutor, y botón para pasar entre Desarrolladores y Tutor */
  .tutor-card{max-width:220px; margin:18px auto 0 auto; padding:22px 16px;}
  .tutor-photo{width:120px; height:120px; margin-bottom:14px;}
  .tutor-photo svg{width:38px; height:38px;}
  .tutor-card .dev-name{font-size:15px;}
  .page-link-btn{
    display:block; width:100%; margin-top:18px; background:var(--cover-red); color:#fff;
    border:none; border-radius:12px; padding:11px; font-size:12.5px; font-weight:700; cursor:pointer;
    transition:background .15s ease, transform .15s ease;
  }
  .page-link-btn:hover{background:var(--cover-red-dark); transform:translateY(-1px);}


  /* Título largo de la hoja de la intérprete: un poco más chico para que entre en una línea */
  .page-left h2.titulo-interprete{font-size:24px;}


/* ################ categorias/comercio/comercio.css ################ */
/* ==========================================================================
   ESTILOS DE: Comercio y Dinero
   Se aplican solo dentro de esta categoría (la clase .tema-comercio la pone el programa, en base/nucleo/nucleo.js).
   ========================================================================== */
.tema-comercio{
  --cat-color:#c9922f;        /* color principal: botones de frase, cabecera del video, ícono */
  --cat-color-soft:#c9922f22;   /* el mismo color, suave: fondo del ícono de la categoría */
}

/* Aquí puedes agregar estilos solo para esta categoría. Ejemplo:
.tema-comercio .phrase-chip{ border-radius:20px; }
*/


/* ################ categorias/tramites/tramites.css ################ */
/* ==========================================================================
   ESTILOS DE: Trámites e Instituciones
   Se aplican solo dentro de esta categoría (la clase .tema-tramites la pone el programa, en base/nucleo/nucleo.js).
   ========================================================================== */
.tema-tramites{
  --cat-color:#4a7fa5;        /* color principal: botones de frase, cabecera del video, ícono */
  --cat-color-soft:#4a7fa522;   /* el mismo color, suave: fondo del ícono de la categoría */
}

/* Aquí puedes agregar estilos solo para esta categoría. Ejemplo:
.tema-tramites .phrase-chip{ border-radius:20px; }
*/


/* ################ categorias/emergencias/emergencias.css ################ */
/* ==========================================================================
   ESTILOS DE: Emergencias y Salud
   Se aplican solo dentro de esta categoría (la clase .tema-emergencias la pone el programa, en base/nucleo/nucleo.js).
   ========================================================================== */
.tema-emergencias{
  --cat-color:#c1443f;        /* color principal: botones de frase, cabecera del video, ícono */
  --cat-color-soft:#c1443f22;   /* el mismo color, suave: fondo del ícono de la categoría */
}

/* Aquí puedes agregar estilos solo para esta categoría. Ejemplo:
.tema-emergencias .phrase-chip{ border-radius:20px; }
*/


/* ################ categorias/educacion/educacion.css ################ */
/* ==========================================================================
   ESTILOS DE: Educación y Colegio
   Se aplican solo dentro de esta categoría (la clase .tema-educacion la pone el programa, en base/nucleo/nucleo.js).
   ========================================================================== */
.tema-educacion{
  --cat-color:#4f7a58;        /* color principal: botones de frase, cabecera del video, ícono */
  --cat-color-soft:#4f7a5822;   /* el mismo color, suave: fondo del ícono de la categoría */
}

/* Aquí puedes agregar estilos solo para esta categoría. Ejemplo:
.tema-educacion .phrase-chip{ border-radius:20px; }
*/


/* ################ categorias/hogar/hogar.css ################ */
/* ==========================================================================
   ESTILOS DE: Hogar y Familia
   Se aplican solo dentro de esta categoría (la clase .tema-hogar la pone el programa, en base/nucleo/nucleo.js).
   ========================================================================== */
.tema-hogar{
  --cat-color:#c9636b;        /* color principal: botones de frase, cabecera del video, ícono */
  --cat-color-soft:#c9636b22;   /* el mismo color, suave: fondo del ícono de la categoría */
}

/* Aquí puedes agregar estilos solo para esta categoría. Ejemplo:
.tema-hogar .phrase-chip{ border-radius:20px; }
*/


/* ################ categorias/general/general.css ################ */
/* ==========================================================================
   ESTILOS DE: Frases Generales e Interacción Social
   Se aplican solo dentro de esta categoría (la clase .tema-general la pone el programa, en base/nucleo/nucleo.js).
   ========================================================================== */
.tema-general{
  --cat-color:#8b6bb0;        /* color principal: botones de frase, cabecera del video, ícono */
  --cat-color-soft:#8b6bb022;   /* el mismo color, suave: fondo del ícono de la categoría */
}

/* Aquí puedes agregar estilos solo para esta categoría. Ejemplo:
.tema-general .phrase-chip{ border-radius:20px; }
*/


/* ################ categorias/informatica/informatica.css ################ */
/* ==========================================================================
   ESTILOS DE: Informática
   Se aplican solo dentro de esta categoría (la clase .tema-informatica la pone el programa, en base/nucleo/nucleo.js).
   ========================================================================== */
.tema-informatica{
  --cat-color:#4c58c9;        /* color principal: botones de frase, cabecera del video, ícono */
  --cat-color-soft:#4c58c922;   /* el mismo color, suave: fondo del ícono de la categoría */
}

.tema-informatica .phrase-chip{ border-radius:20px; }


/* ################ categorias/contabilidad/contabilidad.css ################ */
/* ==========================================================================
   ESTILOS DE: Contabilidad
   Se aplican solo dentro de esta categoría (la clase .tema-contabilidad la pone el programa, en base/nucleo/nucleo.js).
   ========================================================================== */
.tema-contabilidad{
  --cat-color:#2f8c96;        /* color principal: botones de frase, cabecera del video, ícono */
  --cat-color-soft:#2f8c9622;   /* el mismo color, suave: fondo del ícono de la categoría */
}

.tema-contabilidad .phrase-chip{ border-radius:20px; }


/* Títulos en rojo (solo dentro de la sección con la clase "valores") */
.valores h1,
.valores h4 {
  color: red;
}

.col-lg-4 {
  margin-bottom: 20px;
}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 415px;
  perspective: 1000px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card.girada .flip-card-inner {
  transform: rotateY(180deg);
}

/* Las dos caras van una encima de la otra */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
}

.flip-card-front {
  background-color: #f8f9fa;
}

.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flip-card-back {
  background-color: #000;
  color: white;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flip-card video {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

/* Si pones texto en la tarjeta */
.flip-card p  { font-size: 115%; padding: 0 10px; }
.flip-card h4 { font-size: 130%; margin-bottom: 10px; padding: 0 10px; }
/* Portada: nombre de la institución */
.cover-inst{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#fbeee0; background:rgba(255,255,255,.14); padding:7px 16px; border-radius:20px; margin-bottom:14px; line-height:1.4; font-weight:700;}
/* ==========================================================================
   FLECHAS (‹ ▲ ▼ ›) — viven DENTRO del libro, en la franja roja de arriba, a la izquierda.
   ‹ › pasan de hoja   |   ▲ ▼ suben y bajan la hoja.
   Tamaño de los botones: cambia 26px (escritorio) o 24px (celular) más abajo.
   ========================================================================== */
:root{ --flechas-ancho:122px; }   /* ancho que ocupan las flechas; sirve para mantener el título centrado */
.nav-arrows{display:flex; gap:4px; align-items:center; flex:0 0 auto; padding:3px; border-radius:20px; background:rgba(255,255,255,.16);}
.nav-arrows button{width:26px; height:26px; padding:0; border:0; border-radius:50%; background:#fff; color:var(--cover-red,#b7263c); font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .15s, opacity .15s;}
.nav-arrows button:hover:not(:disabled){transform:scale(1.12);}
.nav-arrows button:disabled{opacity:.35; cursor:default;}
#arrUp,#arrDown{font-size:10px;}
@media (max-width:900px){
  :root{ --flechas-ancho:0px; }          /* en celular el título usa el espacio que sobra */
  .nav-arrows button{width:24px; height:24px;}
}

/* ==========================================================================
   LOGO Y NOMBRE DE LA INSTITUCIÓN (barra de arriba, a la derecha del botón del menú)
   El logo es img/logo-fe-y-alegria.png (se pone en index.html).
   ========================================================================== */
.tb-brand{display:flex; align-items:center; gap:9px; flex:0 0 auto;}
.tb-logo{height:42px; width:auto; display:block; flex:0 0 auto;}   /* tamaño del logo: cambia 42px */
.tb-brand-name{font-family:'Fraunces',serif; font-weight:700; font-size:15px; line-height:1.05; color:var(--cover-red); white-space:nowrap;}
.tb-brand-name small{display:block; margin-top:2px; font-family:'Inter',sans-serif; font-weight:600; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft);}
.tb-sep{width:1px; height:28px; background:rgba(60,30,10,.15); flex:0 0 1px;}
@media (max-width:900px){
  .tb-brand-name, .tb-sep{display:none;}   /* en celular solo se ve el logo, para que quepa el título */
  .tb-logo{height:36px;}
}

/* ==========================================================================
   ESPACIOS VACÍOS DE FRASES  ({ text:'Útiles 1', vacio:true } en programa.js)
   Se ven con borde punteado y más suaves, para saber cuáles faltan por llenar.
   ========================================================================== */
.phrase-chip.vacio{border-style:dashed; border-color:#d9c5a3; background:rgba(255,255,255,.55); color:var(--ink-soft); font-weight:500;}
.phrase-chip.vacio .pc-play{opacity:.45;}

/* ==========================================================================
   LIBRO CERRADO / ABRIÉNDOSE (escritorio)
   Cerrado: solo se ve la tapa (media página) centrada en la pantalla.
   Al abrir: la tapa gira hacia la izquierda desde el lomo y el libro se centra.
   ========================================================================== */
.book-outer::after{   /* sombra que proyecta la tapa sobre la hoja derecha mientras se levanta */
  content:""; position:absolute; top:0; bottom:0; right:0; width:100%; z-index:20; pointer-events:none;
  border-radius:14px; opacity:var(--sombra-tapa,0);
  background:linear-gradient(90deg, rgba(40,15,10,.55), rgba(40,15,10,.18) 55%, transparent);
}
@media (min-width:901px){
  .book-outer{perspective:2600px;}
  .book-outer::after{width:50%; border-radius:0 14px 14px 0;}
  .book-outer.closed{transform:translateX(-25%);}
  .cover{width:50%; justify-self:end; aspect-ratio:410/560;}
  .cover h1{font-size:28px;}
  .cover p{max-width:280px;}
}

/* ===== TUTORIAL DE BIENVENIDA ===== */
.tuto-overlay{
  position:fixed; inset:0; background:rgba(20,10,8,.55); z-index:300;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.tuto-overlay.show{ opacity:1; pointer-events:auto; }
.tuto-card{
  background:var(--page-cream); border-radius:18px; padding:28px 24px; width:300px;
  text-align:center; position:relative; box-shadow:0 30px 60px -15px rgba(0,0,0,.5);
}
.tuto-skip{ position:absolute; top:12px; right:14px; background:none; border:none; font-size:12px; color:var(--ink-soft); cursor:pointer; }
.tuto-icon{ font-size:38px; margin-bottom:10px; }
.tuto-card h3{ font-family:'Fraunces',serif; font-size:18px; margin:0 0 8px 0; }
.tuto-card p{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin:0 0 18px 0; }
.tuto-dots{ display:flex; gap:6px; justify-content:center; margin-bottom:18px; }
.tuto-dot{ width:7px; height:7px; border-radius:50%; background:#d9c5a3; }
.tuto-dot.active{ background:var(--cover-red); }
.tuto-next{
  background:var(--cover-red); color:#fff; border:none; border-radius:10px;
  padding:10px 20px; font-weight:700; font-size:13px; cursor:pointer; width:100%;
}

/* ===== TUTORIAL: cuadro de video al lado de la tarjeta ===== */
.tuto-group{
  display:flex; align-items:center; justify-content:center; gap:18px;
  max-height:94vh; overflow-y:auto; padding:6px;
}
.tuto-video-box{
  position:relative; width:380px; aspect-ratio:4/3; flex:0 0 auto; order:2; /* a la derecha */
  background:#000; border-radius:18px; overflow:hidden;
  box-shadow:0 30px 60px -15px rgba(0,0,0,.5);
}
.tuto-video-box video{ width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.tuto-video-empty{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  text-align:center; padding:16px; color:#f3d9d9; font-size:14px; font-weight:600;
  background:linear-gradient(160deg,#7a1427,#a8213a);
}
@media (max-width:760px){
  .tuto-group{ flex-direction:column; gap:12px; }
  .tuto-video-box{ width:300px; max-width:100%; order:0; } /* en celular, arriba */
}

/* Texto "Toca el libro para abrirlo" más grande */
.hint {
  font-size: 1.4rem !important;
  padding: 10px 20px !important;
}


/* ################ componentes/libro-turnjs/libro-turnjs.css ################ */
/* ==========================================================================
   ESTILOS DE: LIBRO CON TURN.JS (solo computador, se activa con la clase .turn-mode que pone programa.js)
   ► Si quieres volver al libro de siempre, pon  USAR_TURNJS = false  en programa.js (no hace falta borrar nada aquí).
   ========================================================================== */

  /* Mientras Turn.js está activo, el libro de siempre (hojas fijas) se oculta y Turn.js dibuja las suyas */
  .pages.turn-mode{overflow:visible; transform-style:flat;}
  .pages.turn-mode::before{display:none;}                    /* la sombra del lomo la pone Turn.js */
  .pages.turn-mode > #pageLeft, .pages.turn-mode > #pageRight{display:none;}

  /* Caja donde vive el libro: ocupa el lugar de las dos hojas, sin empujar el tamaño del marco */
  .flipbook-caja{position:absolute; top:0; left:0; right:0; height:540px; z-index:1;}
  .flipbook-caja .flipbook{margin:0;}

  /* Páginas de Turn.js: sin relleno ni desplazamiento propio (Turn.js mide con ellas sus esquinas).
     La hoja de siempre va adentro (.page.page-left / .page.page-right) con su relleno y su desplazamiento. */
  .flipbook .page-vacia, .flipbook .turn-pagina{padding:0; overflow:hidden; max-height:none;}
  .flipbook .page-vacia{background:var(--page-cream);}
  .flipbook .lado-izq{background:var(--page-cream); box-shadow:inset -14px 0 18px -12px rgba(90,55,25,.22);}   /* sombra suave hacia el lomo */
  .flipbook .lado-der{background:var(--page-cream-2); box-shadow:inset 14px 0 18px -12px rgba(90,55,25,.22);}
  .flipbook .turn-pagina > .page{height:100%;}

  /* Que no se seleccione el texto ni se arrastre la imagen al intentar pasar la página */
  .flipbook .turn-pagina img{-webkit-user-drag:none;}
  .flipbook .lado-izq, .flipbook .lado-der{-webkit-user-select:none; user-select:none;}
  .flipbook .phrase-chip span{user-select:none;}

  .hint {
  font-size: 1.1rem !important;
  padding: 5px 8px !important;
}

.hint-emoji {
font-size: 1.6rem;
  vertical-align: middle;
}

/* Quitar el ícono de volumen de todos los videos */
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-volume-slider-container,
video::-webkit-media-controls-volume-control-container,
video::-webkit-media-controls-volume-control-hover-background {
  display: none !important;
}