/*
Theme Name: Aprendo con Risas
Theme URI: https://aprendoconrisas.com
Author: Aprendo con Risas
Description: Tema a medida para aprendoconrisas.com — notas adhesivas de colores, tipografía manuscrita (Patrick Hand + Baloo 2) y fondos "stage" saturados que rotan por sección. Basado en el prototipo visual aprobado.
Version: 1.21.0
Requires at least: 6.0
Requires PHP: 7.4
License: Uso privado — Aprendo con Risas
Text Domain: aprendoconrisas
*/

  :root{
    color-scheme: light;
    --paper:#FFF7E8;
    --paper-card:#FFFDF6;
    --paper-raised:#FFFFFF;
    --ink:#22303A;
    --ink-soft:rgba(34,48,58,.72);
    --ink-faint:rgba(34,48,58,.52);
    --line:rgba(34,48,58,.16);
    --line-soft:rgba(34,48,58,.09);
    --note-bg:#F7EFDC;
    --note-bg-2:#EEE3C6;
    --cream-ink:#FBF6E9;
    --pin-red:#DD402B;
    --pin-teal:#12645A;
    --stage-yellow:#FFE7A6;
    --stage-yellow-ink:#22303A;
    --stage-teal:#12645A;
    --stage-violet:#7C63C9;
    --stage-coral:#E1543A;
    --stage-mustard:#DFA02A;
    --stage-grass:#2F8F5B;
    --stage-cielo:#2F8FC2;
    --coral:#FF6A55;
    --teal:#0F9C8D;
    --mustard:#D99A2B;
    --violet:#8571D6;
    --rose:#E37FA0;
    --grass:#4F9F6A;
    --accent:#FF6A55;
    --shadow:0 1px 2px rgba(26,46,51,.08), 0 8px 24px -12px rgba(26,46,51,.24);
    --shadow-lg:0 4px 10px rgba(26,46,51,.10), 0 22px 46px -16px rgba(26,46,51,.32);
  }
  /* Nota: esta marca es deliberadamente clara y pastel siempre — no cambia
     con el modo oscuro del sistema/navegador del visitante. El bloque de
     abajo queda disponible por si en el futuro se agrega un interruptor
     manual de tema dentro de la propia página. */
  :root[data-theme="dark"]{
    color-scheme: dark;
    --paper:#1A1409; --paper-card:#241C11; --paper-raised:#2A2114;
    --ink:#F3ECDA; --ink-soft:rgba(243,236,218,.74); --ink-faint:rgba(243,236,218,.52);
    --line:rgba(243,236,218,.18); --line-soft:rgba(243,236,218,.1);
    --note-bg:#2B2116; --note-bg-2:#231A11;
    --stage-yellow:#FFE7A6; --stage-yellow-ink:#22303A; --stage-teal:#0B2A25; --stage-violet:#28204A;
    --stage-coral:#421C13; --stage-mustard:#3A2A0E; --stage-grass:#153A28; --stage-cielo:#123244;
    --coral:#FF8C77; --teal:#3FC8B6; --mustard:#F0BE5C; --violet:#AC9AEF; --rose:#F0A0BE; --grass:#79C98C;
    --accent:#FF8C77; --pin-red:#FF7A63; --pin-teal:#3FC9B4;
    --shadow:0 1px 2px rgba(0,0,0,.32), 0 8px 24px -12px rgba(0,0,0,.5);
    --shadow-lg:0 4px 10px rgba(0,0,0,.36), 0 24px 48px -18px rgba(0,0,0,.6);
  }
  /* Per-stage background + ink (the color that changes per section, carousel-style) */
  [data-stage="yellow"]{ --stage-bg:var(--stage-yellow); --stage-ink:var(--stage-yellow-ink); }
  [data-stage="teal"]{ --stage-bg:var(--stage-teal); --stage-ink:var(--cream-ink); }
  [data-stage="violet"]{ --stage-bg:var(--stage-violet); --stage-ink:var(--cream-ink); }
  [data-stage="coral"]{ --stage-bg:var(--stage-coral); --stage-ink:var(--cream-ink); }
  [data-stage="mustard"]{ --stage-bg:var(--stage-mustard); --stage-ink:var(--cream-ink); }
  [data-stage="grass"]{ --stage-bg:var(--stage-grass); --stage-ink:var(--cream-ink); }
  [data-stage="cielo"]{ --stage-bg:var(--stage-cielo); --stage-ink:var(--cream-ink); }
  /* La página de inicio (stage amarillo) se mantiene siempre clara y pastel,
     con tinta oscura y logo negro, sin importar el modo claro/oscuro del sistema. */

  *,*::before,*::after{box-sizing:border-box;}
  /* Red de seguridad: ningún elemento (un video incrustado, una imagen,
     una tabla) puede forzar scroll horizontal de toda la página, aunque
     intente ser más ancho que la pantalla en el celular. Solo en <html>:
     ponerlo también en <body> confunde el cálculo de los elementos con
     posición "sticky" (como el encabezado) y hace que dejen de pegarse. */
  html{font-size:16px;overflow-x:hidden;}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:"Patrick Hand",system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
  img{max-width:100%;display:block;}
  [hidden]{display:none!important;}
  h1,h2,h3,h4{font-family:"Patrick Hand",system-ui,sans-serif;font-weight:400;margin:0;text-wrap:balance;line-height:1.12;}
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;}
  input,select,textarea{max-width:100%;font-family:"Baloo 2",system-ui,sans-serif;font-size:.98rem;color:var(--ink);background:var(--paper-raised);border:1.5px solid var(--line);border-radius:10px;padding:.6rem .75rem;}
  /* El formulario de comentarios de WordPress trae su textarea con un
     atributo cols="45" que le da un ancho propio bastante ancho; sin
     max-width:100% de arriba, eso se salía de la pantalla en el
     celular (lo confirmamos revisando el sitio real). */
  input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2.5px solid var(--teal);outline-offset:2px;}
  ::selection{background:var(--coral);color:#fff;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 1.5rem;}
  .wrap-narrow{max-width:760px;margin:0 auto;padding:0 1.5rem;}
  @media (max-width:640px){.wrap,.wrap-narrow{padding:0 1.1rem;}}
  .eyebrow{font-family:"Baloo 2";font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--coral);}

  /* ---------- Stage sections (full-bleed color, carousel-style) ---------- */
  .stage{background:var(--stage-bg);color:var(--stage-ink);}
  .stage-text{color:var(--stage-ink);}

  /* ---------- Sticky notes ---------- */
  .note{background:var(--note-bg);color:var(--ink);border-radius:20px;padding:1.6rem 1.7rem 1.9rem;position:relative;box-shadow:0 10px 0 -3px var(--note-bg-2), var(--shadow-lg);}
  .note .eyebrow{display:block;margin-bottom:.5rem;}
  .pin{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);width:1.15rem;height:1.15rem;border-radius:50%;background:var(--pin-red);box-shadow:0 3px 6px rgba(0,0,0,.28), inset 0 -3px 4px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.35);}
  .pin.teal{background:var(--pin-teal);}
  .note-sm{background:var(--note-bg);color:var(--ink);border-radius:14px;padding:.9rem 1.1rem;box-shadow:0 6px 0 -2px var(--note-bg-2), var(--shadow);position:relative;font-family:"Baloo 2";font-weight:600;font-size:.92rem;}

  /* ---------- Header ---------- */
  .site-header{position:sticky;top:0;z-index:30;background:var(--stage-bg);color:var(--stage-ink);border-bottom:1px solid rgba(0,0,0,.08);transition:background .2s ease;}
  .header-row{display:flex;align-items:center;gap:1.1rem;padding:1.1rem 0;position:relative;}
  .logo-link{display:flex;align-items:center;flex:none;border:none;background:none;padding:.2rem 0;}
  .logo-link img{height:3rem;width:auto;display:block;}
  .header-spacer{flex:1;}
  .site-nav{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;}
  .site-nav a,.site-nav button{flex:none;font-family:"Baloo 2";font-weight:700;font-size:.86rem;color:var(--stage-ink);background:none;border:none;padding:.5rem .7rem;border-radius:999px;opacity:.82;white-space:nowrap;}
  .site-nav a[data-active="true"],.site-nav button[data-active="true"]{opacity:1;background:rgba(255,255,255,.22);}
  .header-actions{display:flex;align-items:center;gap:.55rem;flex:none;}
  .icon-btn{width:2.3rem;height:2.3rem;padding:0;justify-content:center;}
  button.acr-menu-toggle{display:none;}
  .acr-menu-toggle .acr-menu-icon-close{display:none;}
  .acr-menu-toggle[aria-expanded="true"] .acr-menu-icon-menu{display:none;}
  .acr-menu-toggle[aria-expanded="true"] .acr-menu-icon-close{display:block;}
  .acr-theme-toggle .acr-theme-icon-sun{display:none;}
  :root[data-theme="dark"] .acr-theme-toggle .acr-theme-icon-sun{display:block;}
  :root[data-theme="dark"] .acr-theme-toggle .acr-theme-icon-moon{display:none;}
  .acr-search-form{display:flex;gap:.5rem;padding:0 0 .9rem;}
  .acr-search-form[hidden]{display:none;}
  .acr-search-form input{flex:1;font-family:"Baloo 2";font-size:.9rem;color:var(--ink);background:var(--paper-raised);border:1.5px solid var(--line);border-radius:999px;padding:.5rem .95rem;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  .cat-nav{display:flex;gap:.5rem;overflow-x:auto;padding:.15rem 0 .8rem;scrollbar-width:thin;}
  .cat-pill{flex:none;border:1.5px solid rgba(0,0,0,.12);background:rgba(255,255,255,.55);color:var(--stage-ink);border-radius:999px;padding:.38rem .85rem;font-family:"Baloo 2";font-size:.8rem;font-weight:700;white-space:nowrap;transition:transform .15s ease, box-shadow .15s ease;}
  .cat-pill:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
  .cat-pill[data-active="true"]{color:#fff;border-color:transparent;}
  .cat-pill-explora{border-style:dashed;background:rgba(255,255,255,.3);}
  /* "¿Para quién es esto?" — fila de filtro amigable, fuera del
     encabezado de color (vive sobre el fondo normal de la página),
     por eso usa los tokens --ink/--paper en vez de --stage-ink. */
  .nivel-filtro{display:flex;flex-wrap:wrap;gap:.5rem;padding:.3rem 0 1.1rem;}
  .nivel-pill{display:inline-flex;align-items:center;gap:.35rem;border:1.5px solid var(--nivel-color,var(--line));background:var(--nivel-bg,var(--paper-card));color:var(--nivel-color,var(--ink));border-radius:999px;padding:.42rem .9rem;font-family:"Baloo 2";font-size:.82rem;font-weight:700;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;}
  .nivel-pill:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
  .nivel-pill.is-active{background:var(--nivel-color,var(--coral));border-color:transparent;color:#fff;}
  /* Racha de práctica: un mensaje de ánimo personal, sin comparar
     con nadie más (ver page-ejercicios.php y assets/js/main.js). */
  .acr-racha-badge{display:inline-flex;align-items:center;font-family:"Baloo 2";font-weight:800;font-size:.95rem;color:var(--ink);background:var(--paper-raised);border:1.5px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;margin-top:.9rem;min-height:1.3em;}
  .acr-racha-badge:empty{display:none;}
  /* Memorama (page-juego-memorama.php) */
  .memo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.2rem,1fr));gap:.7rem;margin-top:1.2rem;}
  .memo-card{aspect-ratio:3/4;border-radius:14px;border:1.5px solid var(--line);background:var(--paper-card);box-shadow:var(--shadow);font-family:"Baloo 2";font-weight:800;font-size:1.05rem;line-height:1.15;display:flex;align-items:center;justify-content:center;text-align:center;padding:.4rem;color:var(--ink);transition:transform .15s ease, box-shadow .15s ease, background .15s ease;word-break:break-word;}
  .memo-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
  .memo-card[data-estado="oculta"]{background:var(--coral);border-color:var(--coral);color:#fff;font-size:1.6rem;}
  .memo-card[data-estado="volteada"]{border-color:var(--mustard);}
  .memo-card[data-estado="correcta"]{border-color:var(--grass);background:rgba(79,159,106,.14);cursor:default;}
  html.acr-a11y-alto-contraste .memo-card{box-shadow:none;border:2px solid #000;}
  /* Sopa de letras (page-juego-sopa.php) */
  .sopa-layout{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:flex-start;margin-top:1.2rem;}
  .sopa-grilla{display:grid;gap:.25rem;max-width:26rem;width:100%;flex:1 1 20rem;}
  .sopa-celda{aspect-ratio:1/1;border-radius:7px;border:1.5px solid var(--line);background:var(--paper-card);color:var(--ink);font-family:"Baloo 2";font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center;padding:0;transition:transform .12s ease, background .12s ease;}
  .sopa-celda:hover{transform:scale(1.06);}
  .sopa-celda[data-estado="inicio"]{background:var(--mustard);border-color:var(--mustard);color:#fff;}
  .sopa-celda[data-estado="encontrada"]{background:rgba(79,159,106,.28);border-color:var(--grass);color:var(--grass);}
  .sopa-celda[data-estado="error"]{background:var(--coral);border-color:var(--coral);color:#fff;}
  .sopa-lista{flex:0 1 14rem;}
  .sopa-lista ul{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem;}
  .sopa-palabra{font-family:"Baloo 2";font-weight:700;font-size:.95rem;color:var(--ink);}
  .sopa-palabra[data-hallada="true"]{color:var(--ink-faint);text-decoration:line-through;}
  html.acr-a11y-alto-contraste .sopa-celda{box-shadow:none;border:2px solid #000;}
  /* Equipo (page-nosotros.php) */
  .equipo-tarjeta{text-align:center;}
  .equipo-foto{display:block;width:6rem;height:6rem;border-radius:50%;object-fit:cover;margin:0 auto;border:3px solid var(--paper-card);box-shadow:var(--shadow);}
  .equipo-foto-iniciales{display:flex;align-items:center;justify-content:center;font-family:"Baloo 2";font-weight:800;font-size:1.6rem;color:#fff;}
  .equipo-tarjeta p{text-align:left;}
  html.acr-a11y-alto-contraste .equipo-foto{box-shadow:none;border:2px solid #000;}
  .btn{border-radius:999px;border:1.5px solid var(--line);background:var(--paper-card);color:var(--ink);padding:.5rem 1rem;font-weight:700;font-family:"Baloo 2";font-size:.86rem;display:inline-flex;align-items:center;gap:.4rem;transition:transform .15s ease, box-shadow .15s ease;}
  .btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
  /* Dentro de un botón flex, un ícono SVG no debe encogerse nunca
     (evita que quede minúsculo cuando el texto a su lado es corto
     o no hay texto, como en los botones de solo ícono). */
  .btn svg,.acr-a11y-toggle svg{flex-shrink:0;}
  .btn-primary{background:var(--coral);border-color:var(--coral);color:#fff;}
  .btn-ghost{border-color:transparent;background:transparent;}
  .btn-on-stage{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.16);color:var(--stage-ink);}
  .btn-sm{padding:.38rem .75rem;font-size:.78rem;}
  .btn-danger{color:var(--coral);}
  .acr-narrar-wrap{margin:1.1rem 0 1.5rem;}
  .acr-narrar{cursor:pointer;}
  @keyframes acr-pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
  .acr-narrar.is-speaking svg{animation:acr-pulse 1s ease-in-out infinite;}
  .acr-narrar.is-paused svg{opacity:.7;}
  .avatar{width:2.3rem;height:2.3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:"Baloo 2";font-weight:700;font-size:.85rem;border:none;flex:none;}
  .user-menu{position:relative;}
  .user-dropdown{position:absolute;right:0;top:calc(100% + .5rem);background:var(--paper-raised);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);min-width:13rem;padding:.4rem;display:flex;flex-direction:column;gap:.1rem;color:var(--ink);}
  .user-dropdown button{text-align:left;background:none;border:none;padding:.55rem .7rem;border-radius:9px;font-family:"Baloo 2";font-size:.86rem;font-weight:600;color:var(--ink);}
  .user-dropdown button:hover{background:var(--line-soft);}
  .user-dropdown .who{padding:.4rem .7rem .5rem;border-bottom:1px solid var(--line-soft);margin-bottom:.2rem;}
  .user-dropdown .who strong{display:block;font-family:"Patrick Hand";font-size:1.05rem;}
  .user-dropdown .who span{font-size:.74rem;color:var(--ink-faint);font-family:"Baloo 2";}
  .star-btn{background:none;border:none;padding:.2rem;color:var(--ink-faint);flex:none;}
  .star-btn[data-on="true"]{color:var(--mustard);}
  .star-btn svg{width:1.3rem;height:1.3rem;}

  /* ---------- Hero ---------- */
  .hero{padding-top:2.6rem;padding-bottom:1.6rem;}
  .hero-title{font-size:clamp(2.3rem,5.4vw,3.7rem);}
  .hero-title .accent{color:var(--coral);position:relative;display:inline-block;}
  .hero-title .accent svg{position:absolute;left:0;bottom:-.22em;width:100%;height:.32em;}
  .hero-sub{margin-top:.8rem;max-width:36rem;font-size:1.08rem;line-height:1.55;}
  .hero-note{margin-top:1.2rem;display:inline-flex;align-items:center;gap:.5rem;font-family:"Baloo 2";font-weight:700;font-size:.8rem;background:rgba(255,255,255,.4);padding:.45rem .8rem;border-radius:999px;}

  /* ---------- Tag cloud ---------- */
  .tag-cloud{display:flex;flex-wrap:wrap;gap:.55rem;padding:1.1rem 0 .4rem;}
  .tag-chip{font-family:"Baloo 2";font-weight:700;font-size:.8rem;background:rgba(255,255,255,.5);border:1.5px solid rgba(0,0,0,.1);color:var(--ink);border-radius:999px;padding:.32rem .75rem;}
  .tag-chip:hover{background:rgba(255,255,255,.75);}
  .tag-chip-note{font-family:"Baloo 2";font-weight:700;font-size:.78rem;background:var(--note-bg-2);border:none;color:var(--ink-soft);border-radius:999px;padding:.28rem .68rem;}
  .tag-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem;}

  /* ---------- Post grid ---------- */
  .section-title{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:1.6rem 0 1.1rem;}
  .section-title h2{font-size:1.7rem;}
  .section-title .muted{font-size:.85rem;font-family:"Baloo 2";opacity:.75;}
  .post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.7rem;padding:.4rem 0 3rem;}
  .subcat-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;}
  .cat-pill-sm{font-family:"Baloo 2";font-weight:700;font-size:.78rem;background:var(--note-bg-2);border:none;color:var(--ink-soft);border-radius:999px;padding:.32rem .8rem;text-decoration:none;}
  .cat-pill-sm:hover{background:var(--note-bg);}
  .topic-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.8rem;padding:.4rem 0 3rem;margin:0;}
  .topic-card{background:var(--note-bg);border-radius:20px;padding:1.6rem 1.6rem 1.8rem;position:relative;box-shadow:0 10px 0 -3px var(--note-bg-2), var(--shadow-lg);display:flex;flex-direction:column;gap:.4rem;}
  .topic-card:nth-child(3n+1){transform:rotate(-.6deg);}
  .topic-card:nth-child(3n+2){transform:rotate(.5deg);}
  .topic-card:nth-child(3n+3){transform:rotate(-.3deg);}
  .topic-card-link{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;}
  .topic-card-icon{width:2.1rem;height:2.1rem;flex:none;}
  .topic-card-link h2{font-family:"Patrick Hand";font-weight:400;font-size:1.5rem;margin:0;}
  .topic-card-desc{font-family:"Baloo 2";color:var(--ink-soft);font-size:.88rem;margin:.1rem 0 0;}
  .topic-card-subs{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.5rem;}
  .topic-card-biblioteca{background:var(--note-bg-2);border:2px dashed rgba(0,0,0,.12);}

  /* Carrusel de imágenes (bloque Galería + clase "carrusel") — ver
     initCarrusel() en main.js. La galería original se vuelve una
     fila que se desliza horizontal con "scroll-snap" (funciona con
     el dedo en el celular sin nada de JavaScript); el JS solo le
     agrega flechas y puntitos por encima, para computadora. */
  .acr-carrusel{position:relative;margin:1.7rem 0;}
  .acr-carrusel-clip{border-radius:20px;overflow:hidden;box-shadow:0 10px 0 -3px var(--note-bg-2), var(--shadow-lg);background:var(--note-bg);}
  .wp-block-gallery.carrusel{display:flex!important;flex-wrap:nowrap!important;gap:0!important;margin:0!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .wp-block-gallery.carrusel::-webkit-scrollbar{display:none;}
  .wp-block-gallery.carrusel .wp-block-image{flex:0 0 100%;scroll-snap-align:center;margin:0!important;}
  .wp-block-gallery.carrusel .wp-block-image img{width:100%;height:auto;display:block;}
  .acr-carrusel-btn{position:absolute;top:50%;transform:translateY(-50%);width:2.5rem;height:2.5rem;border-radius:50%;background:var(--note-bg);box-shadow:0 5px 0 -2px var(--note-bg-2), var(--shadow);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);font-size:1.4rem;line-height:1;z-index:2;transition:transform .15s ease;}
  .acr-carrusel-btn:hover{transform:translateY(-50%) scale(1.08);}
  .acr-carrusel-btn:disabled{opacity:.3;cursor:default;pointer-events:none;}
  .acr-carrusel-prev{left:-.7rem;}
  .acr-carrusel-next{right:-.7rem;}
  .acr-carrusel-dots{margin-top:1rem;margin-bottom:0;}
  @media (max-width:640px){
    .acr-carrusel-btn{display:none;}
  }
  .post-card{background:var(--note-bg);border:none;border-radius:20px;overflow:visible;display:flex;flex-direction:column;text-align:left;transition:transform .18s ease, box-shadow .18s ease;box-shadow:0 8px 0 -3px var(--note-bg-2), var(--shadow);position:relative;padding-top:.4rem;}
  .post-card:hover{transform:translateY(-3px) rotate(0deg)!important;box-shadow:0 8px 0 -3px var(--note-bg-2), var(--shadow-lg);}
  .post-card:nth-child(3n+1){transform:rotate(-.7deg);}
  .post-card:nth-child(3n+2){transform:rotate(.6deg);}
  .post-card:nth-child(3n+3){transform:rotate(-.3deg);}
  .card-fav{position:absolute;top:.6rem;right:.6rem;z-index:2;background:rgba(255,255,255,.7);border-radius:50%;}
  .cover{aspect-ratio:16/10;position:relative;overflow:hidden;border-radius:14px;margin:0 .7rem;}
  .cover .blob{position:absolute;inset:8%;border-radius:60% 40% 55% 45%/45% 55% 45% 55%;}
  .cover svg.icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;height:38%;}
  .cover .dot{position:absolute;border-radius:50%;opacity:.55;}
  .card-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1;}
  .acr-tag{display:inline-flex;align-items:center;gap:.35rem;font-family:"Baloo 2";font-size:.7rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:.28rem .6rem;border-radius:999px;width:fit-content;}
  .card-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;}
  .nivel-badge{display:inline-flex;align-items:center;gap:.3rem;font-family:"Baloo 2";font-size:.7rem;font-weight:800;padding:.28rem .6rem;border-radius:999px;width:fit-content;}
  .card-title{font-size:1.32rem;line-height:1.2;}
  .card-title a.stretched-link{color:inherit;text-decoration:none;}
  .card-title a.stretched-link::after{content:"";position:absolute;inset:0;z-index:1;}
  .post-card .card-chips{position:relative;z-index:2;}
  .card-excerpt{color:var(--ink-soft);font-size:.92rem;line-height:1.5;flex:1;font-family:"Baloo 2";}
  .card-meta{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--ink-faint);margin-top:.2rem;font-family:"Baloo 2";}
  .card-meta .mini-avatar{width:1.5rem;height:1.5rem;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Baloo 2";font-size:.6rem;font-weight:700;}
  .empty-state{padding:3rem 1rem;text-align:center;font-family:"Baloo 2";}

  /* ---------- Post detail ---------- */
  .post-hero{border-radius:22px;overflow:hidden;position:relative;aspect-ratio:21/9;margin:1.5rem 0 1.8rem;}
  .post-detail{max-width:42rem;margin:0 auto;padding-bottom:4rem;}
  .post-detail h1{font-size:clamp(2rem,4.6vw,2.9rem);}
  .post-meta-row{display:flex;align-items:center;gap:.6rem;margin-top:1rem;color:var(--ink-faint);font-size:.85rem;font-family:"Baloo 2";}
  .post-meta-row .mini-avatar{width:1.9rem;height:1.9rem;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Baloo 2";font-size:.7rem;font-weight:700;}
  .post-body{margin-top:1.8rem;display:flex;flex-direction:column;gap:1.3rem;font-size:1.18rem;line-height:1.6;}
  .block-text{white-space:pre-wrap;}
  .block-image figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);}
  .block-image img{width:100%;}
  .block-image figcaption{padding:.6rem .9rem;font-size:.85rem;color:var(--ink-faint);background:var(--paper-card);font-family:"Baloo 2";}
  .block-illustration{border-radius:16px;overflow:hidden;position:relative;aspect-ratio:16/9;border:1px solid var(--line);}
  .card-embed{border:1.5px solid var(--line);border-radius:16px;padding:1rem 1.1rem;display:flex;align-items:center;gap:.9rem;background:var(--paper-card);text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;}
  .card-embed:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
  .card-embed .emb-icon{width:2.6rem;height:2.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;}
  .card-embed .emb-text{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
  .card-embed .emb-label{font-weight:400;font-family:"Patrick Hand";font-size:1.1rem;}
  .card-embed .emb-sub{font-size:.78rem;color:var(--ink-faint);font-family:"Baloo 2";}
  .post-actions{display:flex;gap:.6rem;margin-top:2.3rem;padding-top:1.4rem;border-top:1px solid var(--line);font-family:"Baloo 2";}

  /* ---------- Auth ---------- */
  .auth-wrap{min-height:calc(100vh - 4rem);display:flex;align-items:center;justify-content:center;padding:3rem 1.2rem;}
  .auth-card{width:100%;max-width:24rem;background:var(--paper-card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);padding:2.1rem 1.9rem;}
  .auth-tabs{display:flex;gap:.4rem;background:var(--paper);border-radius:999px;padding:.3rem;margin-bottom:1.5rem;}
  .auth-tabs button{flex:1;border:none;background:none;padding:.5rem;border-radius:999px;font-family:"Baloo 2";font-weight:700;font-size:.84rem;color:var(--ink-faint);}
  .auth-tabs button[data-active="true"]{background:var(--coral);color:#fff;}
  .field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;}
  .field label{font-family:"Baloo 2";font-size:.8rem;font-weight:700;color:var(--ink-soft);}
  .auth-demo{background:var(--paper);border:1px dashed var(--line);border-radius:14px;padding:.85rem .9rem;font-family:"Baloo 2";font-size:.76rem;color:var(--ink-soft);margin-top:1.3rem;line-height:1.55;}
  .auth-demo strong{color:var(--ink);}
  .auth-error{background:rgba(221,64,43,.14);border:1px solid var(--coral);color:var(--ink);border-radius:10px;padding:.55rem .75rem;font-family:"Baloo 2";font-size:.82rem;margin-bottom:1rem;}

  /* ---------- Editor ---------- */
  .editor-shell{max-width:44rem;margin:0 auto;padding-bottom:5rem;}
  .editor-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.6rem 0 1.2rem;}
  .toolbelt{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.2rem 0 1.6rem;}
  .tool-btn{border:1.5px dashed var(--line);background:var(--paper-card);border-radius:12px;padding:.5rem .85rem;font-family:"Baloo 2";font-size:.8rem;font-weight:700;color:var(--ink-soft);display:inline-flex;align-items:center;gap:.4rem;}
  .tool-btn:hover{color:var(--ink);border-color:var(--teal);}
  .block-editor{border:1px solid var(--line);border-radius:16px;background:var(--paper-card);padding:1.1rem 1.2rem;margin-bottom:1rem;position:relative;}
  .block-editor .block-kind{font-family:"Baloo 2";font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:var(--ink-faint);margin-bottom:.7rem;display:flex;align-items:center;justify-content:space-between;}
  .block-editor textarea{width:100%;min-height:6rem;resize:vertical;font-family:"Patrick Hand";font-size:1.05rem;}
  .block-editor input[type="text"],.block-editor input[type="url"]{width:100%;margin-bottom:.6rem;}
  .remove-block{background:none;border:none;color:var(--ink-faint);font-family:"Baloo 2";font-size:.76rem;font-weight:700;padding:.15rem .4rem;}
  .remove-block:hover{color:var(--coral);}
  .upload-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-family:"Baloo 2";}
  .file-chip{display:flex;align-items:center;gap:.5rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.35rem .7rem .35rem .4rem;font-family:"Baloo 2";font-size:.78rem;}
  .file-chip .dot{width:1.6rem;height:1.6rem;border-radius:50%;flex:none;}
  .meta-panel{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:.5rem;}
  @media (max-width:560px){.meta-panel{grid-template-columns:1fr;}}
  .save-bar{position:sticky;bottom:1rem;display:flex;gap:.6rem;justify-content:flex-end;background:var(--paper-raised);border:1px solid var(--line);border-radius:16px;padding:.9rem;box-shadow:var(--shadow-lg);margin-top:1.5rem;}
  .hint{font-family:"Baloo 2";font-size:.76rem;color:var(--ink-faint);margin-top:.4rem;}

  /* ---------- Category manager ---------- */
  .cat-manage-list{display:flex;flex-direction:column;gap:.7rem;margin:1.3rem 0;}
  .cat-manage-row{display:flex;align-items:center;gap:.8rem;background:var(--note-bg);color:var(--ink);border-radius:14px;padding:.8rem 1rem;box-shadow:0 6px 0 -2px var(--note-bg-2);}
  .cat-swatch{width:1.6rem;height:1.6rem;border-radius:50%;flex:none;border:2px solid rgba(0,0,0,.15);}
  .cat-manage-row .cat-name{flex:1;font-size:1.15rem;}
  .cat-manage-row .cat-count{font-family:"Baloo 2";font-size:.76rem;color:var(--ink-faint);}
  .swatch-picker{display:flex;gap:.5rem;flex-wrap:wrap;margin:.3rem 0 .8rem;}
  .swatch-btn{width:2rem;height:2rem;border-radius:50%;border:2px solid transparent;}
  .swatch-btn[data-active="true"]{border-color:var(--ink);}

  /* ---------- FAQ / Contacto ---------- */
  details.faq{background:var(--note-bg);color:var(--ink);border-radius:14px;padding:1rem 1.2rem;box-shadow:0 6px 0 -2px var(--note-bg-2);}
  details.faq + details.faq{margin-top:.8rem;}
  details.faq summary{cursor:pointer;font-size:1.15rem;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;}
  details.faq summary::-webkit-details-marker{display:none;}
  details.faq summary .chev{transition:transform .2s ease;flex:none;font-family:"Baloo 2";color:var(--coral);}
  details.faq[open] summary .chev{transform:rotate(45deg);}
  details.faq p{margin-top:.7rem;font-family:"Baloo 2";font-size:.95rem;color:var(--ink-soft);line-height:1.55;}
  .contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:start;}
  @media (max-width:760px){.contact-grid{grid-template-columns:1fr;}}
  .social-row{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap;}
  .social-chip{font-family:"Baloo 2";font-weight:700;font-size:.82rem;background:rgba(255,255,255,.5);border:1.5px solid rgba(0,0,0,.12);border-radius:999px;padding:.4rem .85rem;}

  /* ---------- Newsletter ---------- */
  .newsletter{background:var(--note-bg);color:var(--ink);border-radius:18px;padding:1.4rem 1.5rem;box-shadow:0 8px 0 -3px var(--note-bg-2);}
  .newsletter form{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem;}
  .newsletter input{flex:1;min-width:10rem;}

  /* ---------- Quiz ---------- */
  .quiz-step{max-width:32rem;margin:0 auto;}
  .quiz-options{display:flex;flex-direction:column;gap:.7rem;margin-top:1.2rem;}
  .quiz-option{text-align:left;background:var(--paper-raised);border:1.5px solid var(--line);border-radius:14px;padding:.9rem 1.1rem;font-size:1.1rem;transition:transform .15s ease, box-shadow .15s ease;}
  .quiz-option:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--teal);}
  /* Estados de respuesta en la trivia (page-juego-trivia.php) */
  .quiz-option[data-estado="correcta"]{border-color:var(--grass);background:rgba(79,159,106,.14);}
  .quiz-option[data-estado="incorrecta"]{border-color:var(--coral);background:rgba(255,106,85,.12);}
  .quiz-option[data-estado="apagada"]{opacity:.55;}
  .quiz-option[data-estado="correcta"],.quiz-option[data-estado="incorrecta"],.quiz-option[data-estado="apagada"]{pointer-events:none;}
  .quiz-progress{display:flex;gap:.4rem;justify-content:center;margin-bottom:1rem;}
  .quiz-progress span, .quiz-progress a, .quiz-progress button{width:.55rem;height:.55rem;border-radius:50%;background:rgba(0,0,0,.18);}
  .quiz-progress span[data-done="true"], .quiz-progress a[data-done="true"], .quiz-progress button[data-done="true"]{background:var(--coral);}
  .quiz-progress a, .quiz-progress button{display:block;transition:transform .15s ease;}
  .quiz-progress a:hover, .quiz-progress button:hover{transform:scale(1.3);}
  .quiz-progress button{padding:0;border:none;cursor:pointer;flex:none;}
  .pager{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-bottom:1.2rem;flex-wrap:wrap;}
  .pager .quiz-progress{margin-bottom:0;}
  .pager-link{font-family:"Baloo 2";font-weight:700;font-size:.82rem;color:var(--ink);text-decoration:none;white-space:nowrap;background:var(--note-bg);border-radius:999px;padding:.5rem 1rem;box-shadow:0 5px 0 -2px var(--note-bg-2), var(--shadow);transition:transform .15s ease, box-shadow .15s ease;}
  .pager-prev{transform:rotate(-1.4deg);}
  .pager-next{transform:rotate(1.2deg);}
  .pager-link:hover{transform:translateY(-2px) rotate(0deg);box-shadow:0 5px 0 -2px var(--note-bg-2), var(--shadow-lg);}
  .pager-link-disabled{color:var(--ink-soft);opacity:.35;pointer-events:none;box-shadow:none;transform:none;}

  /* ---------- Generador de ejercicios ---------- */
  .acr-ej-controls{display:flex;flex-direction:column;gap:.9rem;}
  .acr-ej-check-row{display:flex;flex-wrap:wrap;gap:.9rem;font-family:"Baloo 2";}
  .acr-ej-check-row label{display:flex;align-items:center;gap:.4rem;font-weight:700;font-size:.92rem;color:var(--ink);}
  .acr-ej-check-row input[type="checkbox"]{width:1.1rem;height:1.1rem;accent-color:var(--teal);}

  /* Cuatro tarjetas por fila en pantallas grandes, para que una cuenta
     ancha (como una división de varias cifras) tenga espacio de sobra y
     no se corte el cociente. Menos columnas en pantallas chicas. */
  .acr-ej-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.4rem;}
  @media (max-width:1100px){.acr-ej-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.acr-ej-grid{grid-template-columns:1fr;}}
  .acr-ej-card{background:var(--paper-raised);border:1.5px solid var(--line);border-radius:14px;padding:1rem 1.1rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;overflow-x:auto;transition:border-color .15s ease, background .15s ease;}
  .acr-ej-card[data-state="correcto"]{border-color:var(--grass);background:rgba(47,143,91,.12);}
  .acr-ej-card[data-state="incorrecto"]{border-color:var(--coral);background:rgba(225,84,58,.1);}
  .acr-ej-card .acr-ej-feedback{font-family:"Baloo 2";font-size:.82rem;font-weight:700;min-height:1.1em;}
  .acr-ej-card[data-state="correcto"] .acr-ej-feedback{color:var(--grass);}
  .acr-ej-card[data-state="incorrecto"] .acr-ej-feedback{color:var(--coral);}
  .acr-ej-summary{margin-top:1.2rem;font-family:"Baloo 2";font-weight:800;font-size:1.05rem;}

  /* "Cuenta parada": suma, resta, multiplicación — cuadrícula CSS con una
     columna fija por cifra, así unidad queda bajo unidad, decena bajo
     decena, centena bajo centena, sin importar el ancho de cada carácter
     en la fuente manuscrita. Como en el cuaderno cuadriculado: cada cifra
     (dada o para completar) vive en su propio cuadrito, nunca comparte una
     caja ancha con otras cifras. */
  .acr-cuenta{display:grid;row-gap:.2rem;font-family:"Patrick Hand";font-size:1.5rem;line-height:1.15;}
  .acr-cuenta .celda{text-align:center;align-self:end;}
  .acr-cuenta .celda.signo{text-align:left;}
  .acr-cuenta .linea{height:0;border-top:2.5px solid var(--ink);align-self:end;margin-bottom:.3rem;}

  /* Casilla: la unidad visual de "una cifra, un cuadrito" — se usa para lo
     que el alumno completa (input) y, en la hoja impresa, para el cuadrito
     en blanco que representa esa misma cifra por escribir a mano. */
  .acr-casilla,
  .cel-vacia{width:100%;box-sizing:border-box;align-self:end;height:1.9rem;border:1.5px solid var(--line);border-radius:6px;background:var(--paper-raised);margin-bottom:.1rem;}
  input.acr-casilla{font-family:"Patrick Hand";font-size:1.3rem;text-align:center;padding:0;color:var(--ink);}
  .acr-parcial-input[data-ok="true"]{border-color:var(--grass);background:rgba(79,159,106,.12);color:var(--grass);}
  .acr-parcial-input[data-ok="false"]{border-color:var(--coral);background:rgba(255,106,85,.12);color:var(--coral);}

  /* "Galera": división — dividendo | divisor, cociente debajo del divisor */
  .acr-galera{display:inline-flex;align-items:flex-start;font-family:"Patrick Hand";font-size:1.6rem;gap:.35rem;}
  .acr-galera-izquierda{display:grid;row-gap:.3rem;padding-top:.1rem;}
  .acr-galera-izquierda .celda{text-align:center;}
  .acr-galera-izquierda .acr-casilla,
  .acr-galera-izquierda .cel-vacia{height:1.7rem;}
  .acr-galera-derecha{border-left:2.5px solid var(--ink);padding-left:.5rem;display:flex;flex-direction:column;align-items:center;min-width:2.6rem;}
  .acr-galera-divisor{border-bottom:2.5px solid var(--ink);padding:0 .3rem .2rem;min-width:1.8rem;text-align:center;}
  .acr-galera-cociente{padding-top:.25rem;min-width:1.8rem;text-align:center;}
  .acr-galera-cociente input{width:2.6rem;text-align:center;font-family:"Patrick Hand";font-size:1.4rem;border:none;border-bottom:2px dashed var(--line);background:transparent;}
  .acr-galera-resto{font-family:"Baloo 2";font-size:.8rem;margin-top:.3rem;color:var(--ink-soft);}
  .acr-galera-resto input{width:2.2rem;text-align:center;border:none;border-bottom:2px dashed var(--line);background:transparent;font-family:"Baloo 2";font-size:.9rem;}

  /* Espacio de trabajo debajo del dividendo: comparte la misma cuadrícula
     que él (mismas columnas), y cada cifra por escribir (al bajar un
     número, restar o anotar el resto) tiene su propia casilla en la
     columna exacta que le toca — no un renglón ancho genérico. */
  .acr-galera-paso-input{font-size:1.1rem;}

  /* Desarrollo completo ya resuelto (hoja de respuestas / feedback cuando
     está mal): el dividendo se repite arriba, en la misma cuadrícula que
     cada paso y con una cifra por celda en todos los renglones, y cada
     paso se plantea como "cuánto falta para llegar al número de arriba"
     en vez de una resta. */
  .acr-desarrollo-division{display:inline-grid;row-gap:.05rem;font-family:"Patrick Hand";font-size:1.25rem;margin-top:.5rem;justify-content:flex-start;}
  .acr-desarrollo-division .celda{text-align:center;}
  .acr-desarrollo-division .dg-producto{color:var(--ink-soft);}
  .acr-desarrollo-division .dg-linea{border-top:2px solid var(--ink);align-self:end;}
  .acr-desarrollo-division .dg-resto-final{font-weight:700;color:var(--teal);}
  .dg-nota{font-family:"Baloo 2";font-size:.78rem;color:var(--ink-soft);margin-top:.4rem;line-height:1.55;}

  .hueco-respuesta{display:inline-block;min-width:3.2rem;height:1.5rem;border-bottom:2.5px solid var(--ink);box-sizing:border-box;}
  .hueco-respuesta.hueco-chico{min-width:1.8rem;}

  /* Hoja para imprimir: también 4 por fila, por la misma razón. */
  .acr-ej-hoja-head{display:flex;flex-wrap:wrap;gap:1.5rem;font-family:"Baloo 2";font-weight:700;margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:1.5px dashed var(--line);}
  .acr-ej-hoja-list{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:0;margin:0;}
  @media (max-width:900px){.acr-ej-hoja-list{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.acr-ej-hoja-list{grid-template-columns:1fr;}}
  .acr-ej-hoja-list li{border:1.5px dashed var(--line);border-radius:12px;padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:.4rem;overflow-x:auto;}
  .acr-ej-hoja-list li .num{font-family:"Baloo 2";font-size:.75rem;color:var(--ink-faint);}
  .acr-ej-respuestas ol{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem 1.2rem;font-family:"Baloo 2";font-size:.92rem;padding-left:1.2rem;}
  @media (max-width:900px){.acr-ej-respuestas ol{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.acr-ej-respuestas ol{grid-template-columns:1fr;}}
  .acr-ej-respuestas ol li{overflow-x:auto;}

  @media print{
    .site-header,.site-footer,.skip-link,.acr-ej-controls,.acr-ej-toolbar,.acr-narrar-wrap,.acr-a11y-widget{display:none!important;}
    body{background:#fff!important;}
    [data-stage]{background:#fff!important;color:#000!important;}
    .note{box-shadow:none!important;background:#fff!important;border:1px solid #ccc;}
    .pin{display:none!important;}
  }
  .quiz-result-card{text-align:center;}

  /* ---------- Toast ---------- */
  .toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;border-radius:999px;font-family:"Baloo 2";font-size:.84rem;font-weight:600;box-shadow:var(--shadow-lg);z-index:100;max-width:88vw;}

  /* ---------- Accesibilidad (botón flotante + panel) ---------- */
  .acr-a11y-widget{position:fixed;right:1.1rem;bottom:1.1rem;z-index:120;}
  .acr-a11y-toggle{width:3rem;height:3rem;border-radius:50%;border:none;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);cursor:pointer;}
  .acr-a11y-panel{position:absolute;right:0;bottom:3.6rem;background:var(--paper-raised);border:1.5px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:1rem 1.1rem;min-width:13.5rem;display:flex;flex-direction:column;gap:.55rem;}
  .acr-a11y-panel[hidden]{display:none;}
  .acr-a11y-panel h4{font-size:1rem;margin-bottom:.1rem;}
  .acr-a11y-panel label{display:flex;align-items:center;gap:.5rem;font-family:"Baloo 2";font-size:.86rem;color:var(--ink);cursor:pointer;}
  .acr-a11y-panel input[type="checkbox"]{width:1.1rem;height:1.1rem;accent-color:var(--coral);}

  /* Texto más grande: todo el tema está en rem, así que agrandar la
     base alcanza para escalar proporcionalmente el sitio entero. */
  html.acr-a11y-text-grande{font-size:117%;}

  /* Alto contraste: tinta y bordes al negro puro, fondos a blanco
     puro, sin sombras suaves que bajen el contraste. */
  html.acr-a11y-alto-contraste{--ink:#000;--ink-soft:#000;--ink-faint:#111;--line:#000;--line-soft:rgba(0,0,0,.4);--paper:#fff;--paper-card:#fff;--paper-raised:#fff;--note-bg:#fff;--note-bg-2:#eee;}
  html.acr-a11y-alto-contraste .post-card,
  html.acr-a11y-alto-contraste .note,
  html.acr-a11y-alto-contraste .note-sm,
  html.acr-a11y-alto-contraste .acr-ej-card{box-shadow:none;border:2px solid #000;}

  /* Pausar animaciones: para quien se distrae o se marea con el
     movimiento (parpadeo del narrador, hover de tarjetas, etc.). */
  html.acr-a11y-sin-animacion *{transition:none!important;animation:none!important;}

  /* ---------- Footer ---------- */
  .site-footer{border-top:1px solid rgba(0,0,0,.08);padding:2.2rem 0 1.6rem;color:var(--stage-ink);font-family:"Baloo 2";}
  .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;}
  @media (max-width:720px){.footer-grid{grid-template-columns:1fr;}}
  .footer-grid h4{font-family:"Baloo 2";font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.7rem;opacity:.85;}
  .footer-links{display:flex;flex-direction:column;gap:.45rem;font-size:.86rem;}
  .footer-links a,.footer-links button{background:none;border:none;color:inherit;text-align:left;padding:0;font-family:"Baloo 2";font-size:.86rem;opacity:.9;}
  .footer-bottom{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid rgba(0,0,0,.08);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.78rem;opacity:.75;}

/* ---------- WordPress: bloques nativos dentro del contenido de la entrada ---------- */
.post-body .wp-block-image{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);}
.post-body .wp-block-image img{width:100%;display:block;}
.post-body .wp-block-image figcaption{padding:.6rem .9rem;font-size:.85rem;color:var(--ink-faint);background:var(--paper-card);font-family:"Baloo 2";}
/* En un contenedor flex (.post-body es flex en columna), cada hijo
   reserva por defecto el ancho mínimo que necesite su contenido, así
   tenga max-width:100%: eso es lo que dejaba que un video incrustado se
   saliera del recuadro en el celular. min-width:0 obliga a cada hijo a
   respetar el ancho real del recuadro. */
.post-body > *{min-width:0;}
.post-body .wp-block-embed,.post-body .wp-block-video,.post-body .embed-youtube,.post-body .embed-container{max-width:100%;border-radius:16px;overflow:hidden;}
/* OJO: .wp-block-embed__wrapper (el div que envuelve directamente al
   iframe) NO debe tener position:relative propio. Si lo tuviera, el
   iframe (position:absolute, ver más abajo) tomaría ESE div — sin alto
   propio — como su recuadro de referencia en vez del recuadro de
   abajo que sí tiene el alto correcto (el de proporción 16:9 o 9:16).
   Resultado real que pasó: el video quedaba recortado a 0px de alto,
   invisible, aunque el espacio reservado sí se viera en la página. Por
   eso aquí NO se fija position:relative en el wrapper: así el iframe
   "salta" ese div y usa directamente el recuadro con la proporción
   correcta como su referencia. */
/* Un iframe/video "suelto" (sin el envoltorio de proporción de abajo):
   que ocupe el ancho disponible. Le damos una proporción de 16:9 por
   defecto con CSS puro (la forma más común de un video) para que SIEMPRE
   se vea, incluso antes de que cargue JavaScript — nunca debe quedar
   invisible por tener alto 0 mientras espera algo. Si el video es en
   realidad vertical (un Short), assets/js/main.js (initEmbedsResponsivos)
   lee sus atributos width/height reales y corrige la proporción apenas
   carga la página, sin dejar nunca un hueco vacío de por medio. */
.post-body iframe,.post-body embed,.post-body object,.post-body video{max-width:100%!important;width:100%;height:auto;aspect-ratio:16/9;border-radius:16px;}
/* Cuando WordPress sí sabe la proporción real del video (normal 16:9,
   o vertical 9:16 para Shorts) y arma el recuadro con estas clases, el
   iframe queda con position:absolute esperando que el recuadro padre
   tenga una altura ya calculada (truco del "padding-bottom"). Si no se
   recrea ese truco aquí, el video queda aplastado: alto casi 0 por ser
   position:absolute con height:auto. Por eso recreamos el recuadro con
   la proporción correcta y dejamos que el iframe llene ese espacio. */
/* Verificado directamente en el sitio real (no es una suposición):
   WordPress mismo le agrega a ".wp-block-embed__wrapper" (el div que
   envuelve al iframe) su propio estilo interno "position:relative" —
   algo que no viene de este archivo y que este archivo no puede
   borrar. Si el recuadro con la proporción correcta (alto 0 +
   padding-bottom, más abajo) se arma en la figura de afuera, el video
   (position:absolute) termina usando ESE wrapper de WordPress como su
   referencia en vez del recuadro — un wrapper sin alto propio — y
   queda recortado a 0px, invisible. Por eso el recuadro con la
   proporción se arma aquí directamente sobre ese wrapper, para que
   sea su propia referencia y no haya ambigüedad.
   Además, .post-body es flex en columna: un hijo centrado con
   margin:auto (el caso vertical/Short) se mide "a la medida de su
   contenido" en vez de estirarse — y su único contenido (el iframe)
   está fuera del flujo normal por el truco de arriba, así que sin
   width explícito ese cálculo daba CERO. width:min(100%,22rem) lo
   evita dándole un ancho fijo, sin depender de su contenido. */
.post-body .wp-embed-aspect-16-9,.post-body .wp-embed-aspect-9-16{position:relative;overflow:hidden;border-radius:16px;width:100%;max-width:100%;}
.post-body .wp-embed-aspect-9-16{width:min(100%,22rem);max-width:22rem;margin-left:auto;margin-right:auto;}
.post-body .wp-embed-aspect-16-9 .wp-block-embed__wrapper,.post-body .wp-embed-aspect-9-16 .wp-block-embed__wrapper{position:relative!important;height:0;overflow:hidden;}
.post-body .wp-embed-aspect-16-9 .wp-block-embed__wrapper{padding-bottom:56.25%;}
.post-body .wp-embed-aspect-9-16 .wp-block-embed__wrapper{padding-bottom:177.78%;}
.post-body .wp-embed-aspect-16-9 iframe,.post-body .wp-embed-aspect-9-16 iframe{position:absolute;top:0;left:0;width:100%!important;height:100%!important;border-radius:16px;}
.post-body ul,.post-body ol{padding-left:1.3rem;}
.post-body blockquote{border-left:4px solid var(--coral);margin:0;padding:.2rem 0 .2rem 1.1rem;font-style:italic;color:var(--ink-soft);}
.post-body a{color:var(--coral);text-decoration:underline;text-underline-offset:.15em;}
.post-body figure{margin:0;}

/* ---------- Menú de WordPress (wp_nav_menu) dentro del header ---------- */
.site-nav ul{list-style:none;display:flex;align-items:center;gap:.1rem;margin:0;padding:0;}
.site-nav li{display:flex;}
.site-nav .current-menu-item > a{opacity:1;background:rgba(255,255,255,.22);border-radius:999px;}

/* Submenús (páginas o enlaces anidados dentro de otro ítem del
   menú, desde Apariencia → Menús). En escritorio aparecen como un
   desplegable al pasar el mouse o al enfocar con el teclado; la
   flechita avisa que ese ítem tiene más opciones adentro. */
.site-nav li.menu-item-has-children{position:relative;}
.site-nav li.menu-item-has-children > a::after{content:"";display:inline-block;width:.35rem;height:.35rem;margin-left:.4rem;margin-bottom:.1rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.75;vertical-align:middle;}
.site-nav .sub-menu{
	list-style:none;
	margin:0;
	padding:.5rem;
	position:absolute;
	top:100%;
	left:0;
	min-width:13rem;
	flex-direction:column;
	align-items:stretch;
	gap:.1rem;
	background:var(--paper-raised);
	border:1.5px solid var(--line);
	border-radius:14px;
	box-shadow:var(--shadow-lg);
	opacity:0;
	visibility:hidden;
	transform:translateY(-6px);
	transition:opacity .15s ease, transform .15s ease;
	z-index:140;
}
.site-nav li.menu-item-has-children:hover > .sub-menu,
.site-nav li.menu-item-has-children:focus-within > .sub-menu{
	display:flex;
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}
.site-nav .sub-menu li{width:100%;}
.site-nav .sub-menu a{color:var(--ink);opacity:1;width:100%;text-align:left;padding:.6rem .75rem;border-radius:9px;white-space:normal;font-weight:600;}
.site-nav .sub-menu a:hover,
.site-nav .sub-menu a:focus{background:var(--note-bg-2);}
.site-nav .sub-menu .current-menu-item > a{background:var(--note-bg-2);}
html.acr-a11y-alto-contraste .site-nav .sub-menu{box-shadow:none;border:2px solid #000;}

/* ---------- Formulario de contacto (compatible con Contact Form 7) ---------- */
.wpcf7-form p{margin-bottom:1rem;}
.wpcf7-form label{display:flex;flex-direction:column;gap:.35rem;font-family:"Baloo 2";font-size:.8rem;font-weight:700;color:var(--ink-soft);}
.wpcf7-form input[type="text"],.wpcf7-form input[type="email"],.wpcf7-form textarea{width:100%;margin-top:.35rem;}
.wpcf7-form input[type="submit"]{border-radius:999px;border:1.5px solid var(--coral);background:var(--coral);color:#fff;padding:.5rem 1.2rem;font-weight:700;font-family:"Baloo 2";font-size:.86rem;cursor:pointer;}
.wpcf7-not-valid-tip{color:var(--coral);font-family:"Baloo 2";font-size:.78rem;margin-top:.2rem;}
.wpcf7-response-output{border-radius:10px;font-family:"Baloo 2";font-size:.82rem;margin-top:1rem!important;}

/* ---------- Utilidades ---------- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;position:absolute!important;word-wrap:normal!important;}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 10px 0;z-index:200;font-family:"Baloo 2";}
.skip-link:focus{left:0;}

/* El bloque nativo "Detalles" de WordPress hereda el estilo de FAQ
   automáticamente cuando se usa dentro del contenido de una página. */
.post-body details,.wp-block-details{background:var(--note-bg-2);border-radius:14px;padding:1rem 1.2rem;margin:.8rem 0;}
.post-body details summary,.wp-block-details summary{cursor:pointer;font-size:1.1rem;font-family:"Patrick Hand";}

/* ---------- Barra lateral de las entradas ---------- */
/* minmax(0,1fr) en vez de 1fr: en CSS Grid, una columna "1fr" sola
   reserva como ancho mínimo el tamaño del contenido que tenga dentro
   (como si fuera min-width:auto), así ese contenido ya tenga
   max-width:100%. Eso es lo que permitía que un video incrustado ancho
   empujara toda la columna — y la página entera — más allá del borde
   del celular. minmax(0,1fr) obliga a la columna a respetar el ancho
   real disponible. */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.4rem;align-items:start;padding-top:1.5rem;}
.post-layout .post-detail{max-width:none;margin:0;}
.sidebar-post{display:flex;flex-direction:column;gap:1.4rem;position:sticky;top:1.5rem;}
.sidebar-widget{background:var(--paper-card);border:1px solid var(--line);border-radius:18px;padding:1.3rem 1.3rem 1.4rem;box-shadow:var(--shadow);}
.sidebar-widget h4{font-family:"Patrick Hand";font-size:1.2rem;margin-bottom:.9rem;}
.sidebar-cat-list{display:flex;flex-wrap:wrap;gap:.5rem;}
.sidebar-cat-chip{color:#fff;font-family:"Baloo 2";font-weight:700;font-size:.78rem;border-radius:999px;padding:.4rem .85rem;text-decoration:none;display:inline-block;transition:transform .15s ease;}
.sidebar-cat-chip:hover{transform:translateY(-1px);}
.sidebar-post-link{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;text-decoration:none;color:var(--ink);font-family:"Baloo 2";font-size:.9rem;border-top:1px solid var(--line-soft);}
.sidebar-post-link:first-of-type{border-top:none;padding-top:0;}
.sidebar-post-link:hover{color:var(--coral);}
.sidebar-post-icon{width:2.1rem;height:2.1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;}
.sidebar-post-icon svg{flex-shrink:0;}
@media (max-width:900px){
  .post-layout{grid-template-columns:minmax(0,1fr);gap:1.6rem;}
  .sidebar-post{position:static;}
}
html.acr-a11y-alto-contraste .sidebar-widget{box-shadow:none;border:2px solid #000;}

/* ---------- Correo semanal: avisos del formulario ---------- */
.newsletter-aviso{font-family:"Baloo 2";font-weight:700;font-size:.86rem;border-radius:10px;padding:.6rem .8rem;margin-top:.5rem;}
.newsletter-aviso-ok{background:rgba(255,255,255,.75);color:#12645A;}
.newsletter-aviso-error{background:rgba(255,255,255,.75);color:#E1543A;}
.acr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- Glosario ilustrado ---------- */
.glosario-intro{font-size:1.1rem;color:var(--ink-soft);margin-top:.8rem;}
.glosario-indice{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.6rem 0 1rem;padding-bottom:1.4rem;border-bottom:1px dashed var(--line-soft);}
.glosario-indice a{background:var(--note-bg-2);color:var(--ink);font-family:"Baloo 2";font-weight:700;font-size:.82rem;border-radius:999px;padding:.4rem .9rem;text-decoration:none;}
.glosario-indice a:hover{background:var(--coral);color:#fff;}
.glosario-body h3.glosario-termino{font-family:"Patrick Hand";font-size:1.5rem;font-weight:400;background:var(--note-bg);display:inline-block;padding:.5rem 1.15rem;border-radius:12px;box-shadow:0 6px 0 -2px var(--note-bg-2);margin-top:1.6rem;scroll-margin-top:5.5rem;}
html.acr-a11y-alto-contraste .glosario-body h3.glosario-termino{box-shadow:none;border:2px solid #000;background:#fff;}

/* ---------- Menú del header en celular (desplegable) ----------
   En pantallas anchas, .acr-mobile-menu no existe visualmente
   (display:contents): el menú y los íconos se ven en la misma fila
   de siempre. En celular se esconde todo detrás del botón de
   hamburguesa, y al abrirlo aparece como un panel desplegable con
   el menú arriba y los íconos (buscar, tema, idioma, cuenta) abajo,
   para que nunca compitan por espacio en la fila del header. */
.acr-mobile-menu{display:contents;}
@media (max-width:860px){
  button.acr-menu-toggle{display:inline-flex;}
  .acr-mobile-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin-top:.6rem;
    background:var(--paper-raised);
    border:1.5px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow-lg);
    padding:.6rem;
    z-index:150;
  }
  .acr-mobile-menu.is-open{display:flex;flex-direction:column;align-items:stretch;gap:.3rem;}
  .site-nav{overflow-x:visible;max-height:50vh;overflow-y:auto;}
  .site-nav ul{flex-direction:column;align-items:stretch;width:100%;gap:.15rem;}
  .site-nav li{width:100%;}
  .site-nav a,
  .site-nav button{color:var(--ink);opacity:1;width:100%;text-align:left;padding:.85rem .9rem;white-space:normal;border-radius:10px;}
  .site-nav > ul > li > a[data-active="true"],
  .site-nav .current-menu-item > a{background:var(--note-bg-2);}
  /* En celular no hay "hover", así que los submenús se muestran
     siempre abiertos, indentados debajo de su ítem, en vez de
     esconderse hasta pasar el mouse (que ahí no existe). El ítem
     padre pasa a columna para que el enlace y su submenú queden
     uno encima del otro, en vez de apretados lado a lado. */
  .site-nav li.menu-item-has-children{flex-direction:column;align-items:stretch;}
  .site-nav li.menu-item-has-children > a::after{display:none;}
  .site-nav .sub-menu{
    position:static;
    display:flex;
    flex-direction:column;
    opacity:1;
    visibility:visible;
    transform:none;
    background:none;
    border:none;
    box-shadow:none;
    border-radius:0;
    padding:0 0 0 1rem;
    margin:0 0 .3rem;
    min-width:0;
  }
  .site-nav .sub-menu a{padding:.7rem .9rem;font-size:.92rem;opacity:.88;}
  .header-actions{position:relative;flex-wrap:wrap;gap:.5rem;padding-top:.6rem;margin-top:.3rem;border-top:1px solid var(--line-soft);width:100%;}
  .header-actions .btn{color:var(--ink);border-color:var(--line);background:var(--note-bg-2);}
  /* Dentro del panel móvil el widget de idioma ya no está pegado al
     borde derecho de la pantalla, así que el panel se ancla al
     contenedor de íconos (más ancho) en vez de al botón angosto,
     para no quedar cortado por el borde izquierdo. */
  .header-actions .acr-lang-widget{position:static;}
  .header-actions .acr-lang-panel{left:0;right:0;width:auto;}
}
html.acr-a11y-alto-contraste .acr-mobile-menu.is-open{box-shadow:none;border:2px solid #000;}

/* ---------- Selector de idioma (traducción automática) ---------- */
/* El widget real de Google Traductor queda escondido: nosotros
   dibujamos nuestro propio botón y panel, y solo usamos el <select>
   que Google crea por detrás para disparar la traducción. */
.acr-gt-hidden,
#google_translate_element,
.goog-te-banner-frame,
.goog-te-gadget-icon{display:none!important;}
.goog-text-highlight{background:none!important;box-shadow:none!important;}
body{top:0!important;}
.acr-lang-widget{position:relative;}
.acr-lang-panel{position:absolute;right:0;top:calc(100% + .5rem);background:var(--paper-raised);border:1.5px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:1rem 1.1rem;min-width:11.5rem;max-height:70vh;overflow-y:auto;display:flex;flex-direction:column;gap:.3rem;z-index:150;}
.acr-lang-panel[hidden]{display:none;}
.acr-lang-panel h4{font-size:1rem;margin-bottom:0;}
.acr-lang-aviso{font-family:"Baloo 2";font-size:.74rem;color:var(--ink-faint);margin:-.2rem 0 .3rem;}
.acr-lang-option{display:flex;align-items:center;background:none;border:none;text-align:left;font-family:"Baloo 2";font-weight:700;font-size:.9rem;color:var(--ink);padding:.5rem .6rem;border-radius:10px;cursor:pointer;}
.acr-lang-option:hover{background:var(--note-bg-2);}
.acr-lang-option[data-active="true"]{background:var(--note-bg-2);color:var(--coral);}
.acr-lang-otros-label{font-family:"Baloo 2";font-size:.78rem;color:var(--ink-faint);margin-top:.3rem;}
#acr-lang-otros{width:100%;}
html.acr-a11y-alto-contraste .acr-lang-panel{box-shadow:none;border:2px solid #000;}
.acr-compact-icon{display:none;}
@media (max-width:860px){
  .acr-compact-link{padding:0;width:2.3rem;height:2.3rem;justify-content:center;}
  .acr-compact-link .btn-label{display:none;}
  .acr-compact-icon{display:block;}
}

/* =================================================================
   TIENDA — estilos base de WooCommerce, para que se sienta parte
   del mismo sitio (misma tipografía, mismos botones redondeados,
   misma paleta) y no como una sección pegada de otro lado.
   ================================================================= */

/* Avisos (agregado al carrito, error de pago, etc.) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments{
	list-style:none;
	background:var(--note-bg);
	color:var(--ink);
	border-radius:14px;
	padding:1rem 1.2rem;
	margin:0 0 1.5rem;
	box-shadow:0 6px 0 -2px var(--note-bg-2), var(--shadow);
	font-family:"Baloo 2";
	font-size:.92rem;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	flex-wrap:wrap;
}
.woocommerce-error{background:#F6D8CF;}
.woocommerce-message .button,
.woocommerce-error .button{order:2;}

/* Botones (agregar al carrito, pagar, etc.) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
	font-family:"Baloo 2";
	font-weight:700;
	font-size:.9rem;
	border-radius:999px;
	border:1.5px solid var(--line);
	background:var(--coral);
	color:#fff;
	padding:.7rem 1.4rem;
	cursor:pointer;
	transition:transform .15s ease, box-shadow .15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
	transform:translateY(-2px);
	box-shadow:var(--shadow);
	background:var(--coral);
	color:#fff;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #place_order{
	background:var(--teal);
}
.acr-btn-comprar{display:inline-flex;align-items:center;gap:.6rem;margin:1rem 0;}
.acr-btn-precio{background:rgba(255,255,255,.25);border-radius:999px;padding:.15rem .6rem;font-size:.85rem;}

/* Grilla de productos (tienda / categoría de producto) */
.woocommerce ul.products{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6rem;margin:0;padding:0;}
/* WooCommerce le pone a cada tarjeta un ancho en porcentaje (pensado
   para su sistema viejo de "columnas" sin grid, por ejemplo 22% para
   4 columnas) — eso no tiene nada que ver con el ancho real de cada
   celda de ESTA cuadrícula, y por eso la tarjeta se veía chiquita
   dentro de su espacio. width:auto;float:none;margin:0 deja que sea
   la cuadrícula (arriba) la que decida el tamaño, no WooCommerce. */
.woocommerce ul.products li.product{width:auto!important;float:none!important;margin:0!important;background:var(--note-bg);border-radius:18px;padding:1rem 1rem 1.3rem;box-shadow:0 8px 0 -3px var(--note-bg-2), var(--shadow);position:relative;}
.woocommerce ul.products li.product img{border-radius:12px;margin-bottom:.8rem;aspect-ratio:4/3;object-fit:cover;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:"Patrick Hand";font-weight:400;font-size:1.2rem;margin:0 0 .3rem;}
.woocommerce ul.products li.product .price{font-family:"Baloo 2";font-weight:700;color:var(--coral);}
.woocommerce ul.products li.product .price del{opacity:.5;font-weight:400;margin-right:.4rem;}
.woocommerce ul.products li.product .button{margin-top:.8rem;display:inline-block;}
.woocommerce ul.products li.product a{text-decoration:none;color:inherit;}

/* Página de un producto individual */
.woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start;}
.woocommerce div.product .woocommerce-product-gallery{border-radius:18px;overflow:hidden;}
.woocommerce div.product .woocommerce-product-gallery img{border-radius:18px;}
.woocommerce div.product .summary{display:flex;flex-direction:column;gap:1rem;}
.woocommerce div.product .summary h1.product_title{font-family:"Patrick Hand";font-weight:400;font-size:clamp(1.8rem,4vw,2.4rem);margin:0;}
.woocommerce div.product .summary .price{font-family:"Baloo 2";font-weight:800;font-size:1.4rem;color:var(--coral);}
.woocommerce div.product .summary .woocommerce-product-details__short-description{font-size:1.05rem;line-height:1.6;}
.woocommerce div.product form.cart{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;}
.woocommerce div.product .quantity input.qty{width:4rem;text-align:center;}
@media (max-width:760px){.woocommerce div.product{grid-template-columns:1fr;}}

/* Carrito y pago (tablas, formularios) */
.woocommerce table.shop_table{width:100%;border-collapse:collapse;font-family:"Baloo 2";font-size:.92rem;margin:0 0 1.5rem;}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{padding:.8rem .6rem;border-bottom:1px solid var(--line-soft);text-align:left;}
.woocommerce table.shop_table thead th{font-weight:800;color:var(--ink-soft);}
.woocommerce td.product-thumbnail img{border-radius:10px;width:4rem;height:4rem;object-fit:cover;}
.woocommerce .quantity input.qty{padding:.4rem .5rem;}
.woocommerce .cart-collaterals .cart_totals{background:var(--note-bg);border-radius:16px;padding:1.3rem 1.4rem;box-shadow:0 8px 0 -3px var(--note-bg-2), var(--shadow);}
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register{background:var(--paper-card);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.4rem;}
.woocommerce #payment{background:var(--note-bg);border-radius:16px;padding:1.2rem 1.3rem;}
.woocommerce #payment ul.payment_methods{list-style:none;margin:0 0 1rem;padding:0;}
.woocommerce form .form-row label{font-family:"Baloo 2";font-size:.82rem;font-weight:700;color:var(--ink-soft);}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{width:100%;margin-top:.3rem;}

/* Mi cuenta */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem;padding:0;}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:inline-block;font-family:"Baloo 2";font-weight:700;font-size:.86rem;background:var(--note-bg-2);border-radius:999px;padding:.5rem 1rem;text-decoration:none;color:var(--ink);}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--coral);color:#fff;}
.woocommerce-MyAccount-content .woocommerce-Downloads table,
.woocommerce-MyAccount-content table.shop_table{width:100%;}

/* Migas de pan y resumen de orden */
.woocommerce-breadcrumb{font-family:"Baloo 2";font-size:.82rem;color:var(--ink-faint);margin-bottom:1.2rem;}
.woocommerce-breadcrumb a{color:var(--ink-faint);}
.woocommerce-order-overview{list-style:none;display:flex;flex-wrap:wrap;gap:1.2rem;padding:0;margin:0 0 1.5rem;font-family:"Baloo 2";}
.woocommerce-order-overview li{background:var(--note-bg);border-radius:12px;padding:.7rem 1rem;}

html.acr-a11y-alto-contraste .woocommerce ul.products li.product,
html.acr-a11y-alto-contraste .woocommerce-message,
html.acr-a11y-alto-contraste .woocommerce .cart-collaterals .cart_totals,
html.acr-a11y-alto-contraste .woocommerce #payment{box-shadow:none;border:2px solid #000;}

/* Oculta el botón amarillo "Pagar con PayPal" (pago exprés) que
   aparece arriba del carrito y del formulario de pago: por decisión
   del sitio, todos pasan por la pantalla normal de pago, donde la
   opción de tarjeta de débito/crédito queda primero y seleccionada
   por defecto, sin necesidad de iniciar sesión en PayPal. */
.wc-block-components-express-payment,
.wc-block-components-express-payment-continue-rule{display:none!important;}