:root{
  /* ===== ESTÉTICA v2 — «cuaderno de taller» (docs/NORTE.md v2 + 2-bis, docs/bocetos/estetica-v2/) =====
     Tokens medidos del boceto aprobado. Cambiar AQUÍ para que cambie toda la web: todo lo que sigue
     usa estas variables, nunca un color o una fuente escritos a mano. */
  --papel:#EFE9DE; --papel-oscuro:#D4CFC4;
  --lapiz:#49453E; --tinta:#2E2C27;
  --ocre:#D1A64F; --salvia:#848768; --terracota:#7E5B3E;
  --boton-verde:#34402E;          /* verde oscuro: solo pie y bandas de cierre (NORTE 2-bis) */
  --verde-textura:#B7CD96;        /* verde medio de su web, para el fondo que asoma en los bordes */
  /* Retoque 16/09 (docs/julia/2026-09-15/foto-1404-explora-iconos-nuevos.jpg): mancha de los
     iconos de "Explora", PROVISIONAL -- --salvia sola quedaba grisácea (R y G casi iguales,
     134/135, sin tirón a verde). --verde-textura oscurecido con --verde-fondo sí tiene ese
     tirón (R muy por debajo de G) y se acerca al verde medido en su foto (#719952): con este
     52% el dibujo en --papel encima da 3.3:1 (>=3:1 no-texto, WCAG 1.4.11). */
  --mancha-explora: color-mix(in srgb, var(--verde-textura) 52%, var(--verde-fondo) 48%);
  /* QA 23/09: --salvia sobre --papel da 3.07:1, no llega a AA texto (4.5:1) -- variante solo
     para ".meta .profe" (nombre de la profesora en las fichas de clase), más oscura de la
     misma familia verde-oliva. NO tocar --salvia: la usan más sitios y cambiaría toda la web.
     #5F6249 sobre --papel = 5.22:1 (medido, ver informe de la tanda). */
  --profe:#5F6249;
  /* alias de compatibilidad: el CSS heredado de la v1 seguía usando estos nombres por todas partes;
     re-apuntan a los tokens v2 para que TODO lo que ya usaba var() cambie solo, sin tocar cada regla. */
  --verde:var(--boton-verde); --verde-mural:var(--salvia);
  --lima:var(--ocre); --amarillo:var(--ocre); --marron:var(--terracota); --linea:var(--lapiz);
  /* --verde-fondo NO es alias de --boton-verde: es el verde muestreado del propio borde del
     dragón (marca/dragon-fondo.png, ~#1c3a27 medido en las 4 esquinas), para que el hero se
     funda sin costura con la imagen (item 7). Es un color de imagen, no de marca. */
  --verde-fondo:#1c3a27;

  /* variantes suaves (mismo tono, aclarado hacia el papel): cumplen AA con texto de --tinta encima,
     donde el color pleno se queda corto (reseñas, etiquetas, tarjetas de color) */
  /* Retoque 16/09 (docs/julia/2026-09-15/foto-1352-resenas.jpg): las tarjetas reales de Julia
     son bastante más cálidas y saturadas que estas -suave — se sube el % de color medido a ojo
     contra la foto (ver docs/capturas/estetica-v2-retoque/), siempre comprobando que --tinta
     encima sigue en AA (>=4.5:1; con estos tres el contraste real queda en 8.0/6.6/5.6:1). */
  --ocre-suave: color-mix(in srgb, var(--ocre) 58%, var(--papel) 42%);
  --salvia-suave: color-mix(in srgb, var(--salvia) 55%, var(--papel) 45%);
  --terracota-suave: color-mix(in srgb, var(--terracota) 28%, var(--papel) 72%);
  --oliva-suave: color-mix(in srgb, var(--salvia) 72%, var(--papel) 28%);
  /* Retoque 22/09: los 5 colores que Julia midió con cuentagotas en su boceto de Canva de
     /servicios/ (uno por tarjeta, docs/capturas/julia-22sep/) -- HEX tal cual, SIN pasar por
     color-mix() como las "-suave" de arriba: son los que ella eligió, no una aproximación.
     Contraste de --tinta (#2E2C27) encima: 9.82:1 / 11.77:1 / 10.91:1 / 8.68:1 / 10.0:1 --
     los 5 sobran de sobra el AA de 4.5:1. */
  --serv-ocre-claro:#F3D688; --serv-crema:#F4EBD8; --serv-lima-palido:#E3E8AF;
  --serv-salvia-claro:#CBCFAD; --serv-ocre-miel:#F4D88E;
  /* borde a lápiz sobre fondo oscuro (botones/bandas verdes): más claro para que se note */
  --lapiz-en-oscuro: color-mix(in srgb, var(--papel) 55%, var(--boton-verde) 45%);
  /* sombra suave (sustituye la sombra dura Npx Npx 0 de la v1) */
  --sombra-suave: 0 10px 22px -12px rgba(46,44,39,.35);
  --sombra-suave-hover: 0 16px 30px -12px rgba(46,44,39,.4);

  --display:'Caveat Brush','Kalam',cursive; --texto:'Open Sans',sans-serif; --mano:'Kalam','Open Sans',cursive;
  --ease:cubic-bezier(.22,1,.36,1);

  /* ===== FONDO v4 — fondo-b2 A TODA LA WEB, opacidad 1 (encargo 18/09/2026: "que B2 sea el
     fondo de TODA la web"). Julia eligió en /bocetos/fondos/ el fondo B (su fondo-4, verde
     lima, ampliado a 4K con Higgsfield y recortado sin el papel blanco) en intensidad 2·Medio
     (15% de mezcla hacia --papel + saturación x0.92 -- ver site/herramientas/genera_fondos_
     prueba.py). Copiado a su sitio definitivo en fotos/fondo/fondo-b2-{2560,1600,900}.webp
     (mismos ficheros que sirvió la página de pruebas, sin reprocesar).
     CAMBIO DE FONDO: antes fondo-7 a opacidad .32 (transparencia = quien MENOS estorba);
     ahora B2 a opacidad 1 (un verde lima vivo, decidido por Julia como protagonista, no como
     textura de fondo) -- por eso este cambio viene con la ronda de "cartelas de papel"
     (.cartela-cab/.cartela-hoja, más abajo) en cada sitio donde antes bastaba con que el
     fondo se viera flojo: con B2 a opacidad plena, texto directamente encima ya NO llega a
     4.5:1 y necesita su propia cartela opaca. El texto sigue en contraste AA porque el fondo
     NUNCA pinta sobre cabecera, hero, bandas oscuras ni pie (esos elementos ya tienen su
     propio fondo opaco por encima) y las tarjetas siguen en papel opaco encima -- las DOS
     cosas dependen de la jerarquía de z-index de abajo (ver el comentario de .fondo-textura). */
  --fondo-2560: url('/fotos/fondo/fondo-b2-2560.webp');
  --fondo-1600: url('/fotos/fondo/fondo-b2-1600.webp');
  --fondo-900: url('/fotos/fondo/fondo-b2-900.webp');
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{font-family:var(--texto);background:var(--papel);color:var(--tinta);-webkit-font-smoothing:antialiased;overflow-x:clip;padding-bottom:var(--cookies-h,0px)}
img,video{display:block}
.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}
.grano{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90;opacity:.08;mix-blend-mode:multiply}

/* ===== FONDO GENERAL v3 (item 2 del encargo 16/09/2026, CAMBIO DE MÉTODO 16/09 tarde) =====
   Una sola foto de fondo-7 a pantalla completa (`cover`, sin repetir), fixed para que se vea
   igual da igual el scroll -- ver site/herramientas/genera_fondo_cover.py y el comentario de
   --fondo-cover en :root.

   z-index:0 -- POR DEBAJO de las secciones de papel (.intro/.clases/.agenda/.servicios/
   .contacto/.faq/.galeria, todas z-index:1). Antes estaba en z-index:2 (POR ENCIMA de esas
   secciones), lo cual parecía correcto sobre el papel pero escondía un fallo real: cada
   sección es su propio contexto de apilamiento (position:relative + z-index), así que TODO lo
   de dentro -- incluidas las tarjetas con z-index:3 propio, como .ficha o .xplora -- queda
   atrapado en ese contexto y pinta como UN SOLO bloque a "z=1"; con el fondo en z=2 (por
   encima de ese bloque entero), la textura se pintaba ENCIMA de todo lo de dentro, tarjetas
   incluidas -- por eso Explora y las tarjetas de clase se veían transparentadas (aviso del
   coordinador 16/09 tarde). Con el fondo en z=0 y las secciones sin su propio
   `background:var(--papel)` (quitado más abajo, en cada regla de sección: .intro{...},
   .clases{...}, etc. -- ya no hace falta, el papel de <body> hace de base), la sección pinta
   POR ENCIMA del fondo como bloque, pero al no tener relleno propio deja ver el fondo en sus
   huecos; sus tarjetas, que SÍ tienen `background:var(--papel)` explícito, quedan opacas por
   encima igual que siempre. El hero, las bandas oscuras y el pie (z-index:3, con su propio
   fondo OPACO) y la cabecera (z-index:4) ya estaban por encima del fondo en cualquiera de los
   dos esquemas -- eso no cambia. */
.fondo-textura{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--fondo-900);background-repeat:no-repeat;background-position:center;
  background-size:cover;opacity:1;
}
/* 3 anchos servidos según viewport (encargo: "2560/1600/900 según ancho") -- base movil (900),
   subiendo de resolucion segun crece la pantalla; sin depender de srcset porque es un
   background-image, no un <img>. */
@media(min-width:641px){.fondo-textura{background-image:var(--fondo-1600)}}
@media(min-width:1601px){.fondo-textura{background-image:var(--fondo-2560)}}
@media(prefers-reduced-transparency:reduce){.fondo-textura{display:none}}

/* color:papel a proposito: body ahora es tinta-sobre-papel por defecto (estetica v2), pero el
   hero sigue siendo un fondo oscuro (verde de la imagen) — .tagline/.lateral heredan este color;
   .top ya trae su propio color:tinta (cabecera papel) y gana por especificidad igual+orden. */
/* Restaurado 16/09 (informe de Guillermo, "se veía impecable ayer y hoy peor"): el intento de
   contener la portada (clamp 460-620px, luego 600-800px) la dejaba en una caja bajo la cabecera
   de papel, con las pinceladas de .fondo-textura pintándose ENCIMA de los bordes del dragón. Se
   vuelve a pantalla completa (100svh, como el despliegue bueno commit 09839aa). Base = escritorio,
   con `cover` para que no queden bandas. Desde el 17/09 .lienzo es un <video> (vídeo real del
   taller, no el dragón): `cover` se mantiene también en móvil -- ver el media query de abajo, ya
   sin el `contain` que protegía la figura del dragón (un vídeo panorámico no tiene ese problema).
   z-index:3: por encima de .fondo-textura (z-index:2, position:fixed) para que sus pinceladas
   NUNCA se pinten sobre el vídeo ni a sus lados -- antes .hero se quedaba en z-index:auto y
   perdía ese pulso. */
.hero{position:relative;z-index:3;height:100svh;min-height:560px;overflow:hidden;background:var(--verde-fondo);color:var(--papel)}
.lienzo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 48%;z-index:1;background:var(--verde-fondo)}
/* Velo reforzado el 17/09 al pasar de la ilustración fija del dragón a vídeo real: la ilustración
   tenía SIEMPRE el mismo verde oscuro bajo el texto (era su propio dibujo); el vídeo cambia de
   brillo con la escena (gente, luces, suelo). Medido con los fotogramas reales del clip de Julia
   (docs/julia/2026-09-17/video-bucle-portada.mp4, 22 fotogramas a 2 fps) y el peor píxel (percentil
   95) de cada zona -- nav, rótulo lateral y bloque logo+texto+botón -- contra el texto en --papel y
   el "Entra al taller." en --ocre: con el degradado viejo (transparente 22%-72%) el rótulo lateral
   quedaba en 1.6:1 y el nav en 3.98:1, los dos por debajo del 4,5:1 de AA. Este degradado nunca baja
   de .52 y sube a .66 arriba / .78 abajo, y ya da >=4,46:1 en las tres zonas (nav 5.46:1, lateral
   >=4,69:1, bloque inferior: papel 9,42:1, ocre 5,03:1) contra ese peor píxel medido. */
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,30,16,.66) 0%,rgba(20,30,16,.66) 16%,rgba(20,30,16,.56) 50%,rgba(20,30,16,.78) 78%)}

.capa{position:relative;z-index:3;height:100%;max-width:1500px;margin:0 auto;padding:26px 34px;
  display:flex;flex-direction:column;justify-content:space-between}

/* ---- fila superior: marca + nav ---- */
/* ===== CABECERA v2 — fondo papel siempre (home e interiores), logo a la izquierda,
   menú con pincelada verde bajo la opción activa, idiomas en cápsula verde oscuro.
   En la home, `.top` es una barra papel que bombea (bleed) a los bordes de `.capa`,
   por encima del dragón/verde del hero (item 7); en interiores `.hero-slim` ya es
   papel entero, así que `.top` solo aporta el borde inferior. ===== */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--papel);color:var(--tinta);
  border-bottom:1px solid color-mix(in srgb, var(--lapiz) 16%, transparent);position:relative;z-index:4}
.capa .top{margin:-26px -34px 0;padding:14px 34px}
@media(max-width:820px){.capa .top{margin:-20px -22px 0;padding:12px 22px}}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinta)}
.marca .disco{width:46px;height:46px;border-radius:50%;background:var(--papel);display:grid;place-items:center;flex:none;border:1.5px solid color-mix(in srgb, var(--lapiz) 30%, transparent)}
.marca .disco img{width:36px;height:36px}
.marca b{font-family:var(--texto);font-weight:700;font-size:1.05rem;letter-spacing:0;line-height:1.15;display:block;text-shadow:none}
.marca b em{font-style:normal;font-weight:600;font-size:.86em;opacity:.85}
.marca small{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:1;color:var(--lapiz);text-shadow:none;margin-top:2px}
.nav{display:flex;gap:clamp(14px,2vw,26px);align-items:center;padding-top:0}
.nav a{font-weight:700;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:var(--tinta);
  opacity:.88;position:relative;text-shadow:none;padding-bottom:8px;transition:opacity .15s}
.nav a:hover{opacity:1}
.nav a::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-3px;height:8px;
  background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 20%22%3E%3Cpath d=%22M2,12 Q10,3 25,6 Q45,10 60,5 Q80,1 98,9 Q94,18 75,15 Q50,19 30,13 Q12,17 2,12 Z%22 fill=%22%23848768%22/%3E%3C/svg%3E');
  background-size:100% 100%;background-repeat:no-repeat;opacity:0;transition:opacity .2s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{opacity:.9}
.nav a[aria-current]{opacity:1}
.hamburguesa{display:none}

/* Restaurado 16/09: en la PORTADA (.hero, no .hero-slim) la cabecera vuelve a ir transparente
   sobre el dragón con letra clara, como en el despliegue bueno (commit 09839aa) -- la cabecera
   de papel de las páginas interiores (.hero-slim .top, en site/build.py) no se toca. */
.hero .top{background:transparent;color:var(--papel);border-bottom:0}
.hero .marca{color:var(--papel)}
.hero .marca .disco{box-shadow:0 4px 16px rgba(0,0,0,.35)}
.hero .marca b{text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hero .marca small{color:var(--papel);opacity:.9;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero .nav a{color:var(--papel);opacity:.92;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* ---- fila inferior: tagline + reserva (susurro en esquinas) ---- */
.bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
/* logo de Julia (18/09, protagonista): centrado en horizontal, zona alta-media del hero -- no
   compite con el disco pequeño de la marca en .top (ese es el de navegación, este es solo de la
   portada) ni con el texto de abajo, que sigue en .bottom sin tocar. top:32% cae dentro del tramo
   .56-.66 de opacidad del velo (.hero::before): de sobra para que se lea el reborde blanco del logo
   sobre cualquier fotograma del vídeo (mismo criterio medido que el resto del hero). */
.marca-hero{position:absolute;left:50%;top:32%;transform:translate(-50%,-50%);z-index:3;text-align:center;pointer-events:none}
.marca-hero img{width:clamp(120px,14vw,180px);height:auto;filter:drop-shadow(0 4px 18px rgba(0,0,0,.45));display:block}
@media(max-width:820px){.marca-hero{top:29%}.marca-hero img{width:110px}}
.tagline{max-width:30ch;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.tagline .mano{font-family:var(--mano);font-size:1.5rem;color:var(--amarillo);display:block;line-height:1.05}
.tagline span{font-size:.92rem;opacity:.92;font-weight:500}
.reserva{display:inline-flex;align-items:center;gap:9px;background:var(--amarillo);color:var(--tinta);font-weight:800;font-size:.98rem;
  padding:11px 20px;border-radius:40px;text-decoration:none;white-space:nowrap;
  transition:transform .14s var(--ease)}
.reserva:hover{transform:translateY(-2px)}
.reserva svg{width:17px;height:17px}

/* etiqueta lateral tipo cartel (vertical, esquina) */
.lateral{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:3;writing-mode:vertical-rl;
  font-weight:700;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;opacity:.7;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* entrada elegante */
.rv{opacity:0;transform:translateY(14px)}
.rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.d1{transition-delay:.15s}.d2{transition-delay:.30s}.d3{transition-delay:.45s}.d4{transition-delay:.6s}
.lienzo.in{animation:aparece 1.1s var(--ease) both}
@keyframes aparece{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}

@media(max-width:820px){
  .nav{display:none}
  /* min-width/min-height:44px (zona de pulsación): antes 43x35 con solo el padding:8px.
     align-items+justify-content mantienen las 3 líneas centradas en el botón más grande,
     sin tocar su tamaño ni su trazo (aspecto idéntico). */
  .hamburguesa{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:8px;min-width:44px;min-height:44px}
  .hamburguesa span{width:27px;height:3px;background:var(--tinta);border-radius:3px;box-shadow:none}
  /* la portada sigue con la cabecera transparente en móvil (arriba): las 3 líneas necesitan
     el mismo color papel que el resto del texto de .hero .top, si no, desaparecen sobre el verde. */
  .hero .hamburguesa span{background:var(--papel);box-shadow:0 1px 4px rgba(0,0,0,.5)}
  /* Hasta el 16/09 aquí se forzaba `object-fit:contain` para no cortar la figura del dragón por
     los bordes (aviso del coordinador, 2ª vuelta). Desde el 17/09 .lienzo es el vídeo del taller:
     sin figura que proteger, se queda en `cover` (regla base) también en móvil -- comprobado en
     capturas a 375px, docs/capturas/hero-video/. El <source media="(max-width:820px)"> del <video>
     ya sirve la versión de 1280 aquí; no depende del object-fit. */
  .lateral{display:none}
  .bottom{flex-direction:column;align-items:flex-start;gap:16px}
  /* 18/09 (aviso del coordinador): el botón .reserva quedaba tapado por la .tabbar fija de abajo
     (position:fixed, z-index:80) -- el hero es 100svh y no sabía que esa barra existe. Mismo 66px
     que ya usa `body{padding-bottom:...}` arriba para el resto de páginas, + el hueco real del
     iPhone con home indicator (env(safe-area-inset-bottom)). Solo el padding-bottom cambia: el
     resto de .capa sigue igual. */
  .capa{padding:20px 22px calc(20px + 66px + env(safe-area-inset-bottom, 0px)) 22px}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.lienzo.in{animation:none}}

/* ===== SECCIONES DE LA PORTADA ===== */
.sep-papel{line-height:0;position:relative;z-index:2;margin-top:-1px}
.sep-papel svg{display:block;width:100%;height:62px}
/* separador v2: trazo fino a lápiz entre dos tramos de papel (sustituye la ola de color) */
.sep-lapiz{line-height:0;position:relative;z-index:2}
.sep-lapiz svg{display:block;width:100%;height:12px}
/* z-index:3 (por encima de .fondo-textura, z-index:2): el contenido real (tarjetas,
   texto, botones) va SIEMPRE encima de las pinceladas del fondo -- así se puede dejar
   que el fondo entre más (hasta 200px a 1440, corrección del coordinador 16/09) sin
   tapar nada: donde no hay tarjeta (el padding transparente de .wrap, o el margen fuera
   de .wrap), la pincelada se ve; donde SÍ hay tarjeta (fondo opaco propio), la tapa. */
.wrap{position:relative;z-index:3;max-width:1200px;margin:0 auto;padding:0 34px}
.intro{position:relative;z-index:1;color:var(--tinta);padding:6px 0 84px}
.eyebrow-m{font-family:var(--mano);font-size:1.25rem;color:var(--verde);transform:rotate(-1.6deg);display:inline-block;margin-bottom:6px}
.intro h2{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,5.4vw,4rem);line-height:.96;letter-spacing:-.03em;color:var(--tinta);max-width:20ch}
.intro h2 .vivo{font-family:var(--mano);font-style:italic;color:var(--verde);position:relative;white-space:nowrap}
.intro h2 .vivo svg{position:absolute;left:-2%;right:-4%;bottom:-.06em;width:107%;height:.3em;overflow:visible}
.intro h2 .vivo svg path{fill:none;stroke:var(--salvia);stroke-width:11;stroke-linecap:round}
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;margin-top:36px}
.intro p.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:#4A4F40;font-weight:500;max-width:46ch;margin-bottom:24px}
.intro p.lead b{color:var(--verde);font-weight:800}
.props{list-style:none;display:flex;flex-direction:column;gap:13px;margin:0 0 26px}
.props li{display:flex;align-items:flex-start;gap:12px;font-size:1.05rem;color:var(--tinta)}
.props li svg{width:21px;height:21px;flex:none;margin-top:3px}
.props li b{font-weight:800}
/* etiqueta "60 €/mes" con el estilo de precio de la v2 (docs/bocetos/estetica-v2/index.html
   .precio-bloque .num): papel + borde a lápiz (clase .borde-lapiz-tarjeta añadida en el HTML),
   sin el rotate ni la sombra dura de la v1. */
.ancla{display:inline-flex;align-items:center;gap:14px;background:var(--papel);color:var(--tinta);
  border-radius:16px;padding:14px 22px;box-shadow:var(--sombra-suave);font-weight:600;font-size:.9rem}
.ancla b{font-family:var(--texto);font-weight:800;font-size:1.7rem;display:block;line-height:1;color:var(--tinta)}
/* fondo: antes --verde-mural (oliva solido). El borde a lapiz (border-image, ver
   COMPONENTES REUTILIZABLES v3 mas abajo) es un recorte con huecos TRANSPARENTES entre
   las dos lineas de grafito -- por ahi se ve el fondo propio de la caja, así que un fondo
   oliva solido se veia como un "marco verde oliva grueso plano" (revision 16/09). Papel,
   como el resto de tarjetas del sistema. */
.intro-foto{position:relative;border:3.5px solid var(--linea);border-radius:14px;overflow:hidden;box-shadow:10px 10px 0 var(--linea);rotate:-1.8deg;transition:transform .15s var(--ease);aspect-ratio:4/3.3;background:var(--papel)}
.intro-foto img{width:100%;height:100%;object-fit:cover}
.intro-foto .pin{position:absolute;top:-16px;right:-12px;width:52px;height:52px;transform:rotate(13deg);filter:drop-shadow(2px 3px 0 rgba(38,32,26,.3))}

/* ===== ¿QUÉ ES? — campo de BURBUJAS, siempre legibles (16/09, fidelidad Julia) =====
   Fallo visto en el publicado: título y frase en 15px/13px dentro de un círculo que
   solo se abría al pasar el ratón -- en escritorio "no se lee nada" hasta hacer
   hover, y en móvil (sin hover) se quedaba cerrado del todo. Julia: "deben leerse
   sin pasar el ratón". Se quita el estado "cerrado" (círculo de cristal chiquito)
   y el mural difuminado de fondo (una foto borrosa de una chica y un árbol detrás
   de las burbujas, item 2 del encargo) -- quedan siempre en su tamaño "abierto",
   en fila que envuelve (flex-wrap), centradas, con su burbujeo vertical suave
   (siguen "flotando", NORTE 2-bis) pero sin el mecanismo de hover/click que las
   hacía ilegibles por defecto. */
#que-es.intro{isolation:isolate}
#que-es .eyebrow-m{text-shadow:0 1px 0 var(--papel),0 0 8px var(--papel)}
#que-es .hint-burbujas{font-family:var(--mano);color:var(--marron);font-size:1.05rem;margin:4px 0 0}
#que-es .hint-burbujas::before{content:"☞ "}
/* Corrección del coordinador (16/09): "las has convertido en tarjetas inclinadas, MAL
   -- Julia quiere BURBUJAS flotando (le encantan)". Vuelven a ser círculos de cristal
   de verdad (el mismo look que ya tenía la web: gradientes radiales para el brillo y el
   reflejo), simplemente SIEMPRE en el tamaño grande y legible -- nunca el círculo
   chiquito que solo se abría al pasar el ratón. Diámetro subido a 246-288px
   (contenido_web.py, _QE_POS) para que quepan el título (≥22px) y la frase (≥15px)
   sin recortarse. */
#que-es .campo{position:static;height:auto;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;margin:34px 0 14px;max-width:1040px;margin-inline:auto}
#que-es .lineas{display:none}
#que-es .burbuja{position:static}
#que-es .flotador{position:relative;width:var(--s);height:var(--s);border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  animation:flota var(--dur,8s) ease-in-out var(--delay,0s) infinite;will-change:transform;
  transition:width .32s var(--ease),height .32s var(--ease),border-radius .32s var(--ease),padding .32s var(--ease);
  background:radial-gradient(circle at 46% 13%,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 8%),
    radial-gradient(circle at 38% 26%,rgba(255,255,255,.55),rgba(255,255,255,0) 36%),
    radial-gradient(circle at 50% 97%,rgba(255,255,255,.72),rgba(255,255,255,0) 28%),
    radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--fill) 30%,transparent) 0%,
      color-mix(in srgb,var(--fill) 46%,transparent) 54%,color-mix(in srgb,var(--fill) 68%,transparent) 83%,
      color-mix(in srgb,var(--fill) 30%,transparent) 100%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),inset 0 14px 22px rgba(255,255,255,.32),
    inset 0 -20px 28px rgba(0,0,0,.14),0 20px 30px -12px rgba(38,32,26,.4)}
#que-es .iris{position:absolute;inset:0;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 72% 82%,rgba(255,255,255,.5),rgba(255,255,255,0) 15%);
  transition:opacity .28s var(--ease)}
#que-es .nucleo{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;text-align:center;width:76%;min-height:44px;position:relative;z-index:2}
#que-es .nucleo:focus-visible{outline:3px solid var(--linea);outline-offset:4px;border-radius:16px}
#que-es .titulo{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,calc(1.1vw + .9rem),1.65rem);line-height:1.08;color:var(--ink);max-width:11ch;text-shadow:0 1px 1px rgba(255,255,255,.6)}
/* Julia (18/09, 2º encargo): "que solo ponga el título... y que al pasar el ratón te explique
   por qué" -- vuelve el mecanismo cerrado/abierto (existía antes del commit 5283261, revertido
   el 16/09 porque el circulito chico de ENTONCES no dejaba leer ni el título sin hover). Con las
   burbujas ya grandes y legibles de por sí (16/09), el título se ve siempre; la frase vive oculta
   (max-height:0) y solo se revela al abrir -- clic/toque (.abierta, JS de ~línea 2135, ya
   existía) o paso del ratón/foco de teclado en dispositivos con hover real (:hover/:focus-within,
   solo con @media(hover:hover) para no dejar burbujas "pegadas" abiertas al tocar en móvil). La
   burbuja crece de círculo a "squircle" para que la frase entera quepa sin recortarse. */
#que-es .detalle{font-size:1rem;line-height:1.38;color:var(--ink);max-width:19ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .32s var(--ease),opacity .22s var(--ease)}
#que-es .burbuja.abierta{position:relative;z-index:10}
#que-es .burbuja.abierta .flotador{width:min(360px,32vw);height:auto;min-height:var(--s);
  border-radius:26px;overflow:visible;animation-play-state:paused;padding:22px 20px}
#que-es .burbuja.abierta .nucleo{width:92%}
#que-es .burbuja.abierta .iris{opacity:0}
#que-es .burbuja.abierta .detalle{max-height:280px;opacity:1}
@media(hover:hover){
  #que-es .burbuja:hover,#que-es .burbuja:focus-within{position:relative;z-index:10}
  #que-es .burbuja:hover .flotador,#que-es .burbuja:focus-within .flotador{
    width:min(360px,32vw);height:auto;min-height:var(--s);
    border-radius:26px;overflow:visible;animation-play-state:paused;padding:22px 20px}
  #que-es .burbuja:hover .nucleo,#que-es .burbuja:focus-within .nucleo{width:92%}
  #que-es .burbuja:hover .iris,#que-es .burbuja:focus-within .iris{opacity:0}
  #que-es .burbuja:hover .detalle,#que-es .burbuja:focus-within .detalle{max-height:280px;opacity:1}
}
@keyframes flota{0%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-11px) rotate(calc(var(--rot,0deg) * -0.6))}100%{transform:translateY(0) rotate(var(--rot,0deg))}}
@media(max-width:820px){
  #que-es .campo{gap:16px}
  #que-es .flotador{width:min(var(--s),78vw);height:min(var(--s),78vw)}
  #que-es .titulo{font-size:1.3rem;max-width:10ch}
  #que-es .detalle{font-size:.97rem;max-width:16ch}
  #que-es .burbuja.abierta .flotador{width:min(300px,80vw);height:auto}
}
@media(max-width:820px) and (hover:hover){
  #que-es .burbuja:hover .flotador,#que-es .burbuja:focus-within .flotador{width:min(300px,80vw);height:auto}
}
/* Corrección del coordinador (16/09): en movil (<=600px) el min(var(--s),78vw) seguia
   dando circulos enormes (hasta ~290px) en UNA sola columna -- la seccion se hacia
   eterna. Dos columnas escalonadas, circulos ~150px, titulo/frase legibles sin recortar
   ni solapar. Escritorio (>600px, regla de arriba) no se toca. */
@media(max-width:600px){
  #que-es .campo{display:grid;grid-template-columns:repeat(2,1fr);justify-items:center;
    gap:6px 4px;max-width:320px;margin-inline:auto}
  #que-es .burbuja{display:flex;justify-content:center;width:100%}
  #que-es .burbuja:nth-child(2n){margin-top:46px}
  #que-es .flotador{width:min(150px,40vw);height:min(150px,40vw)}
  /* Julia (18/09, 1ª vuelta): "Experimentación" y "Acompañamiento" se salían del círculo
     en móvil -- arreglo de entonces: letra fluida por vw + guion como último recurso.
     Julia (18/09, 2ª vuelta): el guion visible ("Materiales in- cluidos") le da pena.
     Corrección del coordinador (misma tarde): la 2ª vuelta se pasó de frenada -- letra
     de ~10px es PEOR que el guion; ella pidió salto de línea, no letra diminuta.
     Solución correcta, la que pedía el coordinador:
       1) width:min-content en vez de max-width:100% -- la caja del título se encoge al
          ancho de su palabra MÁS LARGA (la única unidad que no puede partirse), así que
          cualquier palabra extra cae SIEMPRE a su propia línea, sin condición ("Materiales"
          / "incluidos", "Grupos" / "reducidos") -- nunca con guion (hyphens:none se
          mantiene) y nunca "cuando no cabe": SIEMPRE que hay más de una palabra.
       2) Tamaño base de vuelta a legible (15-17px, clamp por vw). Los títulos de una
          SOLA palabra larga (>10 letras: "Experimentación", "Acompañamiento",
          "Multidisciplinar", "Flexibilidad" -- no tienen espacio donde partirse) llevan
          la clase .titulo-largo (server-side, _titulo_largo() en contenido_web.py,
          mismo criterio en los 3 idiomas porque el cambio de idioma reescribe el mismo
          span) con una letra algo menor, pero nunca por debajo de 14px.
     En escritorio (>600px) no se toca. */
  #que-es .titulo{font-size:clamp(15px,4.3vw,17px);line-height:1.16;width:min-content;
    max-width:100%;margin-inline:auto;padding-inline:2px;overflow-wrap:normal;
    word-break:normal;hyphens:none}
  #que-es .titulo.titulo-largo{font-size:14px;line-height:1.12}
  #que-es .detalle{font-size:.92rem;line-height:1.24;max-width:13ch}
  #que-es .burbuja.abierta{z-index:10}
  #que-es .burbuja.abierta .flotador{width:min(240px,84vw);height:auto;min-height:min(150px,40vw)}
  #que-es .burbuja.abierta .detalle{max-width:20ch}
}
@media(max-width:600px) and (hover:hover){
  #que-es .burbuja:hover .flotador,#que-es .burbuja:focus-within .flotador{width:min(240px,84vw);height:auto;min-height:min(150px,40vw)}
  #que-es .burbuja:hover .detalle,#que-es .burbuja:focus-within .detalle{max-width:20ch}
}
@media(prefers-reduced-motion:reduce){#que-es .flotador{animation:none}}
/* 18/09 (Julia, 3er encargo): ANILLO de burbujas en escritorio -- foto suya de la sección con
   las 7 burbujas rodeadas a mano formando un círculo, "Materiales incluidos" arriba del todo y
   el resto en el sentido de las agujas del reloj ("la distribución del móvil me parece ideal",
   dice también, así que <=820px NO se toca -- sigue con el flex-wrap de arriba). Solo CSS por
   nth-child (el panel dice "siempre son 7"): cada burbuja se coloca a --radio del centro del
   anillo con rotate+translateY+rotate-inverso (el rotate final deshace el giro y deja el
   círculo derecho); --bs uniforma el diámetro (antes variaba 246-290px según _QE_POS). El
   centro del anillo queda vacío porque ninguna burbuja apunta ahí. */
@media(min-width:821px){
  #que-es .campo{--bs:clamp(200px,21vw,264px);--radio:calc(var(--bs) * 1.3);
    position:relative;display:block;width:calc(var(--radio) * 2 + var(--bs));
    height:calc(var(--radio) * 2 + var(--bs));margin:70px auto 50px;gap:0}
  #que-es .campo>.burbuja{position:absolute;top:50%;left:50%;width:auto;margin:0}
  #que-es .campo>.burbuja .flotador{width:var(--bs);height:var(--bs)}
  /* ángulo = (posición-2) * 360/7: la burbuja 2 del array (Materiales incluidos, siempre
     esa posición en contenido/burbujas.json) cae a 0deg (arriba); el resto sigue el orden
     de la lista en sentido horario, incluida la vuelta de la 7 a la 1. */
  #que-es .campo>.burbuja:nth-child(1){transform:translate(-50%,-50%) rotate(-51.4286deg) translateY(calc(var(--radio) * -1)) rotate(51.4286deg)}
  #que-es .campo>.burbuja:nth-child(2){transform:translate(-50%,-50%) translateY(calc(var(--radio) * -1))}
  #que-es .campo>.burbuja:nth-child(3){transform:translate(-50%,-50%) rotate(51.4286deg) translateY(calc(var(--radio) * -1)) rotate(-51.4286deg)}
  #que-es .campo>.burbuja:nth-child(4){transform:translate(-50%,-50%) rotate(102.8571deg) translateY(calc(var(--radio) * -1)) rotate(-102.8571deg)}
  #que-es .campo>.burbuja:nth-child(5){transform:translate(-50%,-50%) rotate(154.2857deg) translateY(calc(var(--radio) * -1)) rotate(-154.2857deg)}
  #que-es .campo>.burbuja:nth-child(6){transform:translate(-50%,-50%) rotate(205.7143deg) translateY(calc(var(--radio) * -1)) rotate(-205.7143deg)}
  #que-es .campo>.burbuja:nth-child(7){transform:translate(-50%,-50%) rotate(257.1429deg) translateY(calc(var(--radio) * -1)) rotate(-257.1429deg)}
  /* burbuja abierta (clic) o en hover: por encima de sus vecinas por z-index, SIN volver a
     position:relative (line 359/366 más arriba) -- eso la sacaría del anillo. El selector
     "#que-es .campo>.burbuja..." pesa más que esas reglas (una clase más), así que gana
     siempre, no depende de qué bloque venga antes en la hoja. */
  #que-es .campo>.burbuja.abierta{position:absolute;z-index:20}
  #que-es .campo>.burbuja.abierta .flotador{width:min(360px,32vw);height:auto;min-height:var(--bs)}
}
@media(min-width:821px) and (hover:hover){
  #que-es .campo>.burbuja:hover,#que-es .campo>.burbuja:focus-within{position:absolute;z-index:20}
  #que-es .campo>.burbuja:hover .flotador,#que-es .campo>.burbuja:focus-within .flotador{width:min(360px,32vw);height:auto;min-height:var(--bs)}
}
@media(max-width:820px){
  .wrap{padding:0 22px}
  .intro-grid{grid-template-columns:1fr;gap:26px}
  .intro-foto{order:-1;rotate:-1.2deg}
}

/* ===== CLASES (color-block verde) ===== */
.sep-verde{line-height:0;position:relative;z-index:2;margin-top:-1px}
.sep-verde svg{display:block;width:100%;height:64px}
/* Estética v2 (NORTE 2-bis): "las secciones van sobre papel... solo las bandas de cierre
   usan el verde oscuro" — Clases deja de ser un color-block verde y pasa a papel, como en
   el boceto aprobado (docs/bocetos/estetica-v2/index.html), con las fichas ya diferenciadas
   por su borde a lápiz (ver el bloque de componentes reutilizables, más abajo). */
.clases{position:relative;z-index:1;color:var(--tinta);padding:8px 0 88px}
.clases-head{max-width:62ch}
.clases .eyebrow-m{color:var(--terracota);transform:rotate(-1.4deg)}
.clases h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.7rem);line-height:.97;letter-spacing:-.03em;color:var(--tinta);max-width:17ch;text-transform:uppercase}
/* boceto aprobado: título entero en Caveat Brush, sin diferenciar la palabra por color/fuente */
.clases h2 .vivo{font-family:inherit;font-style:normal;color:inherit;position:relative;white-space:nowrap}
.clases h2 .vivo svg{display:none}
/* subtítulo «Arte para una vida más creativa»: versalitas espaciadas en Open Sans (boceto),
   no la manuscrita -- esa queda para las etiquetas de grupo y el «Te esperamos» */
.clases-sub{font-family:var(--texto);font-style:normal;font-weight:600;font-size:clamp(.78rem,1.1vw,.94rem);letter-spacing:.28em;text-transform:uppercase;color:var(--lapiz);margin:10px 0 0}
.clases .lead{font-size:clamp(1.02rem,1.4vw,1.18rem);color:#4A4F40;font-weight:500;max-width:42ch;margin-top:16px}
.clases .lead b{color:var(--terracota);font-weight:700}

.banda{margin-top:30px}
/* ===== etiqueta de grupo: mancha de acuarela REAL (recorte de archivo-1347-png-sin-fondo.png,
   limpiada de halo, NO un path de SVG relleno de color plano) en vez de la píldora plana con
   borde negro de la v1. Fidelidad Julia (foto-1335, item 5 -- y corrección del coordinador
   16/09: "no imites la acuarela con CSS, usa las manchas reales del PNG"): la edad va DENTRO
   de la pincelada, junto al nombre del grupo. La imagen se estira sin más (background-size:
   100% 100%, sin mantener proporción) a lo que mida la cápsula -- como un trazo de pincel
   real que se alarga al escribir encima -- así que basta con dimensionar el padding para
   conseguir la proporción de la maqueta (ancho ~2,5-3x el texto, alto ~1,6x la letra). ===== */
.banda-label{display:inline-block;margin-bottom:15px}
/* Corrección del coordinador (16/09, 3ª ronda): "la pincelada aún es corta; en 1335 mide
   ~2,5-3x el ancho del texto y sobresale a la izquierda del borde de la tarjeta". Padding
   horizontal más que duplicado (1.7em -> 3.4em) y un margen izquierdo negativo para que
   la mancha empiece antes que la tarjeta de debajo, no alineada con su borde. */
.mancha-etiqueta{position:relative;display:inline-flex;align-items:baseline;gap:.6em;justify-content:center;
  margin-left:-16px;padding:.85em 3.4em;background-image:var(--ec-img);background-size:100% 100%;background-repeat:no-repeat}
.mancha-etiqueta svg{display:none}
/* Corrección del coordinador (16/09): «Peques» a mano ~40px a 1440 (medido en foto-1335,
   salía a ~26px -- el clamp topaba en 1.7rem). */
.mancha-etiqueta span{position:relative;z-index:1;font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,2.27vw,2.03rem);color:var(--tinta);white-space:nowrap}
/* opacidad quitada a propósito (contraste, ver el comentario de --ec más abajo): un texto
   tan pequeño exige 4.5:1 siempre, y con opacidad de por medio el salvia se quedaba en el
   límite (4.59:1); a opacidad plena los tres colores -suave dan >=5.2:1. */
.mancha-etiqueta small{position:relative;z-index:1;font-family:var(--texto);font-size:.72rem;letter-spacing:.14em;
  font-variant:small-caps;text-transform:uppercase;font-weight:700;color:var(--tinta);white-space:nowrap}
/* Artistas no lleva edad en la maqueta (foto-1335): <small> vacío para no romper el
   recorte de contenido_web.py (espera la misma estructura en los tres grupos) sin pintar
   el hueco que dejaba el gap de flex */
.mancha-etiqueta small:empty{display:none}
/* -suave (no el color pleno): el color pleno de terracota/salvia con texto tinta encima
   se queda corto de 4.5:1 (medido: terracota 2.3:1, salvia 3.75:1 -- ninguno llega a AA
   para el nombre del grupo, y la edad en versalitas -- texto pequeño, exige 4.5:1 siempre --
   se queda aún peor). Las variantes -suave sí cumplen AA con tinta encima en los tres casos
   (8.1 / 6.56 / 7.91 : 1) y son, de hecho, el color que ya usan el resto de manchas y
   tarjetas de la v2 -- ver el comentario de --ocre-suave et al. en :root. */
.banda.edad-peques  {--ec:var(--ocre-suave);--ec-img:url('/fotos/manchas/ocre-1-suave.webp')}
.banda.edad-jovenes {--ec:var(--salvia-suave);--ec-img:url('/fotos/manchas/salvia-1-suave.webp')}
/* Corrección del coordinador (16/09, 8ª ronda): "Artistas sale gris/beige -- debe ser la
   pincelada TERRACOTA de 1335, misma técnica que Peques/Jóvenes". --terracota-suave (28%,
   afinado para .serv.c-marron/.quote.c-terracota) se queda gris aquí; --ec propio al 58%
   (mismo % que --ocre-suave) para esta etiqueta -- el raster se regenera aparte, ver
   site/herramientas/arregla_etiqueta_artistas.py. */
.banda.edad-artistas{--ec:color-mix(in srgb, var(--terracota) 58%, var(--papel) 42%);--ec-img:url('/fotos/manchas/terracota-1-suave.webp')}

.fichas{display:grid;gap:11px}
.fichas.trio{grid-template-columns:repeat(3,1fr)}
.fichas.solo{grid-template-columns:1fr}

/* ===== TARJETA DE CLASE (boceto): fila ancha con divisor a lápiz, precio+plazas centrados y
   el botón «Apúntate» a la derecha. El borde a lápiz y la sombra suave ya los aplica el bloque
   de COMPONENTES REUTILIZABLES v2 más abajo (selector compartido .ficha, .ev-card...). ===== */
.ficha{position:relative;background:var(--papel);color:var(--tinta);border-radius:16px;padding:0}
.ficha.ancha{
  display:grid;grid-template-columns:78px 1.35fr 10px 1fr auto;align-items:center;
  gap:clamp(11px,1.6vw,19px);padding:13px clamp(13px,1.9vw,19px)}
/* Miniatura de la clase (Julia, tanda 3 16/09 -- WHATSAPP-16SEP.md): "esto lo veo como
   miniatura antes de meterte en la página". Clic -> ficha propia (mismo destino que el <h3>,
   por eso va aria-hidden: ver _miniatura_html en contenido_web.py). Reutiliza el borde a lápiz
   de .gfoto/.xplora (ver COMPONENTES REUTILIZABLES v3 más abajo) pero con un trazo más fino:
   a 120px un borde de 10px se comía casi una quinta parte de la imagen. Telas aéreas y
   Coworking (sin foto aún) pintan .ficha-mini-vacio: mismo ancho de columna, sin nada dentro,
   para que el nombre de TODAS las tarjetas arranque en la misma x -- ver justificación en el
   commit de esta tanda. */
.ficha-mini{display:block;position:relative;width:78px;height:78px;overflow:hidden;
  background:var(--papel);border-width:6px!important;border-image-width:6px!important;
  border-image-slice:12!important;border-radius:14px!important}
.ficha-mini img{width:100%;height:100%;object-fit:cover;display:block}
/* la de pinceles (recorte con transparencia, sin foto real detrás): flota sobre el papel,
   sin marco a lápiz ni sombra -- el encargo de Julia pide expresamente "sin marco rectangular". */
.ficha-mini.sin-borde{border:none!important;box-shadow:none!important;
  background:transparent!important;border-radius:0!important}
.ficha-mini.sin-borde img{object-fit:contain}
.ficha-mini-vacio{width:78px;height:1px}
/* Corrección del coordinador (16/09): nombre del curso ~28-30px (medido: 18.24px) y
   líneas de detalle 15-16px (medido: 14.88px) -- todo salía más pequeño y apretado que
   la maqueta (foto-1335). */
.ficha-datos h3{font-family:var(--texto);font-weight:700;font-size:1.5rem;line-height:1.12;color:var(--tinta);margin-bottom:.32rem}
.ficha-datos h3 a{color:inherit;text-decoration:none}
.ficha-datos h3 a:hover{text-decoration:underline}
.ficha-datos h3 .capsula-nivel{margin-left:.55em;vertical-align:middle}
.ficha-divisor{align-self:stretch;width:1.3px;background:var(--lapiz);opacity:.4}
.meta{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0}
/* medido en foto-1335 (1122px) y escalado a 1440: detalle ~17px, iconos ~22px */
.meta li{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;color:var(--tinta);line-height:1.34}
.meta li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--lapiz)}
.meta b{color:var(--tinta);font-weight:700}
.meta .profe{color:var(--profe);font-weight:700;font-style:italic}
.ficha-precio{display:flex;flex-direction:column;justify-content:center;gap:2px}
.ficha-precio .precio{display:flex;align-items:baseline;gap:6px}
.ficha-precio .precio b{font-family:var(--texto);font-weight:700;font-size:1.7rem;line-height:1;color:var(--tinta)}
/* medido en foto-1335 y escalado a 1440: /mes ~22px, «clase suelta...» ~15px, «Plazas
   abiertas» ~16px SIN negrita (antes 700) */
.ficha-precio .precio .u{font-size:1.11rem;color:var(--lapiz);font-weight:600}
.ficha-precio .detalle{font-size:.76rem;color:var(--lapiz);line-height:1.28;margin-top:2px}
.ficha-precio .plazas{display:flex;align-items:center;gap:.4em;margin-top:5px;font-size:.81rem;font-weight:400;color:var(--tinta)}
.ficha-precio .plazas svg{width:12px;height:12px;color:var(--lapiz);flex:none}
.boton-apunta{justify-self:end;white-space:nowrap}

.clases-extra{margin-top:42px;display:inline-flex;flex-wrap:wrap;gap:10px 24px;align-items:center;font-size:.93rem;color:#4A4F40;
  background:var(--papel);
  border-style:solid!important;border-color:transparent!important;border-width:11px!important;
  border-image-slice:24!important;border-image-width:11px!important;border-image-repeat:stretch!important;
  border-image-source:url('/fotos/bordes/tarjeta-ancha.webp')!important;
  border-radius:14px!important;box-shadow:var(--sombra-suave)!important;
  padding:18px 26px;max-width:100%}
.clases-extra span{display:inline-flex;align-items:center;gap:9px}
.clases-extra b{color:var(--tinta);font-weight:700}

@media(max-width:820px){
  .fichas.trio{grid-template-columns:1fr}
  .ficha.ancha{grid-template-columns:1fr;text-align:left;row-gap:12px;padding:17px}
  .ficha-divisor{width:100%;height:1.3px;opacity:.35}
  .boton-apunta{justify-self:stretch;justify-content:center;width:100%}
  .clases h2{max-width:none}
  /* móvil: miniatura arriba a ancho completo en vez de a la izquierda -- con el nombre a
     28-30px y 3-4 líneas de datos debajo, una miniatura de 84px a la izquierda apretaba el
     título contra el borde y no dejaba respirar; a todo lo ancho arriba (mismo criterio que
     .ev-thumb en las tarjetas de evento, que también van a ancho completo en la pila móvil)
     queda limpia y no rompe la tarjeta. Comparado en capturas de los dos (ver commit). */
  .ficha-mini{width:100%;height:154px;border-radius:12px}
  .ficha-mini-vacio{display:none}
}

/* ===== AGENDA (color-block papel; eventos que caducan) ===== */
.agenda{position:relative;z-index:1;color:var(--tinta);padding:10px 0 88px}
.agenda .wrap{position:relative}
.agenda-head{max-width:60ch}
.agenda .eyebrow-m{color:var(--verde);transform:rotate(-1.4deg);display:inline-block}
.agenda h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.7rem);line-height:.97;letter-spacing:-.03em;color:var(--tinta);max-width:16ch}
.agenda h2 .vivo{font-family:var(--mano);font-style:italic;color:var(--verde);position:relative;white-space:nowrap}
.agenda h2 .vivo svg{position:absolute;left:-2%;right:-4%;bottom:-.06em;width:107%;height:.3em;overflow:visible}
.agenda h2 .vivo svg path{fill:none;stroke:var(--salvia);stroke-width:11;stroke-linecap:round}
.agenda .lead{font-size:clamp(1.02rem,1.4vw,1.18rem);color:#4A4F40;font-weight:500;max-width:54ch;margin-top:16px}
.agenda .lead b{color:var(--verde);font-weight:800}
/* tira de filtros (pastillas) — adaptación del glass-calendar a papel/tinta */
.filtros{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 6px;padding:13px 0;background:var(--papel);box-shadow:0 8px 14px -12px rgba(38,32,26,.4)}
.filtro{font-weight:800;font-size:.86rem;color:var(--tinta);background:var(--papel);border:2.5px solid var(--linea);border-radius:30px;padding:8px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:transform .14s var(--ease),background .14s}
.filtro:hover{transform:translateY(-2px)}
.filtro.on{background:var(--amarillo)}
/* lista de eventos */
.eventos{display:flex;flex-direction:column;gap:20px;margin-top:14px}
.evento{display:flex;gap:22px;align-items:stretch;background:var(--papel);border:3px solid var(--linea);border-radius:15px;box-shadow:7px 7px 0 var(--linea);padding:18px}
.evento:nth-child(odd){transform:rotate(-.5deg)}
.evento:nth-child(even){transform:rotate(.5deg)}
.evento.oculto{display:none}
/* fundido suave al filtrar — cotejo del glass-calendar (21st.dev): robamos su pulido (framer-motion) y lo hacemos con CSS de craft; `translate` independiente para no pisar la rotación de la tarjeta */
@media(prefers-reduced-motion:no-preference){.evento.recien{animation:evento-in .4s var(--ease) both}}
@keyframes evento-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
/* bloque-fecha (el "calendario" que distingue evento de clase) */
.fecha{flex:none;width:106px;background:var(--amarillo);border:2.5px solid var(--linea);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 6px;box-shadow:3px 3px 0 var(--linea);text-align:center}
.fecha .dia{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:.85;color:var(--linea)}
.fecha .mes{font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--linea);margin-top:4px}
.fecha .ano{font-size:.64rem;font-weight:700;opacity:.65;letter-spacing:.08em;margin-top:2px}
.evento.c-marron .fecha{background:var(--verde-mural)}
.evento.c-marron .fecha .dia,.evento.c-marron .fecha .mes,.evento.c-marron .fecha .ano{color:var(--papel)}
.evento.c-lima .fecha{background:var(--lima)}
.evento.c-verde .fecha{background:var(--verde)}
.evento.c-verde .fecha .dia,.evento.c-verde .fecha .mes,.evento.c-verde .fecha .ano{color:var(--papel)}
/* cuerpo del evento */
.ev-body{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.ev-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cat{font-size:.69rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--verde);background:#EDF1E1;border:2px solid var(--linea);border-radius:20px;padding:3px 10px}
.bilingue{font-size:.64rem;font-weight:800;letter-spacing:.06em;color:var(--marron);border:2px dashed var(--marron);border-radius:14px;padding:2px 8px}
.evento h3{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.02;letter-spacing:-.02em;color:var(--tinta)}
.ev-meta{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:0}
.ev-meta li{display:flex;gap:8px;align-items:center;font-size:.92rem;color:#3C4233}
.ev-meta li svg{width:15px;height:15px;flex:none}
.ev-meta .profe{color:var(--verde);font-weight:700;font-style:italic}
.ev-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.ev-precio{font-size:.93rem;color:#3C4233}
.ev-precio b{font-family:var(--display);font-weight:800;font-size:1.45rem;color:var(--verde);margin-right:4px}
.agenda-extra{margin-top:34px;font-size:.95rem;color:#4A4F40;max-width:60ch}
.agenda-extra b{color:var(--tinta);font-weight:700}
@media(max-width:820px){
  .evento{flex-direction:column;gap:14px}
  .evento,.evento:nth-child(odd),.evento:nth-child(even){transform:none}
  .fecha{flex-direction:row;align-items:baseline;width:auto;gap:9px;align-self:flex-start;padding:8px 15px}
  .fecha .dia{font-size:1.95rem}
  .fecha .mes,.fecha .ano{margin-top:0}
  .filtro{font-size:.8rem;padding:7px 13px}
}

/* ===== EL ESPACIO (color-block verde oscuro; sticky side-by-side + duotono) ===== */
/* z-index:3 (no 1): las bandas de fondo OSCURO tienen que tapar del todo el fondo-textura
   fijo (z-index:2) -- si se quedan en 1 (como las de papel) las pinceladas fijas se pintan
   POR ENCIMA de su verde oscuro y se ven encima del pie/Instagram/estas bandas (corrección
   del coordinador 16/09, 3ª ronda). */
.espacio{position:relative;z-index:3;background:var(--verde-fondo);color:var(--papel);padding:8px 0 80px}
.espacio .eyebrow-m{color:var(--amarillo);transform:rotate(-1.4deg);display:inline-block}
.espacio h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.6rem);line-height:.97;letter-spacing:-.03em;color:var(--papel);max-width:13ch}
.espacio h2 .vivo{font-family:var(--mano);font-style:italic;color:var(--amarillo);position:relative;white-space:nowrap}
.espacio h2 .vivo svg{position:absolute;left:-2%;right:-4%;bottom:-.06em;width:107%;height:.3em;overflow:visible}
.espacio h2 .vivo svg path{fill:none;stroke:var(--salvia);stroke-width:11;stroke-linecap:round}
.espacio .lead{font-size:clamp(1rem,1.4vw,1.16rem);color:#D9DECB;font-weight:500;max-width:44ch;margin-top:16px}
.espacio .lead b{color:var(--amarillo);font-weight:700}
.espacio-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:50px;margin-top:30px;align-items:start}
.espacio-texto{position:sticky;top:54px}
.rincones-list{list-style:none;display:flex;flex-direction:column;gap:15px;margin-top:26px}
.rincones-list li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;line-height:1.4}
.rincones-list li svg{width:17px;height:17px;flex:none;margin-top:3px}
.rincones-list b{color:var(--papel);font-weight:800;display:block}
.rincones-list span span{color:#C2C8B5;font-size:.92rem}
/* collage de fotos (foto-sticker + duotono verde) */
.espacio-fotos{display:flex;flex-direction:column;gap:30px}
.foto-panel{margin:0;border:3.5px solid var(--linea);border-radius:14px;overflow:hidden;box-shadow:11px 11px 0 rgba(0,0,0,.4);position:relative;background:var(--verde)}
.foto-panel img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.1}
.foto-panel:nth-child(odd){transform:rotate(-1.4deg)}
.foto-panel:nth-child(even){transform:rotate(1.5deg)}
.foto-panel .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 11px;font-family:var(--mano);font-size:1.15rem;color:var(--papel);background:linear-gradient(transparent,rgba(15,24,14,.72));text-shadow:0 1px 7px rgba(0,0,0,.7);z-index:2}
/* duotono verde: la foto en gris aporta la LUMINANCIA sobre el verde de fondo */
/* fotos del espacio a COLOR (se retiró el duotono verde: quedaba mal) */
.foto-panel.duo img{filter:saturate(1.04) contrast(1.02)}
.espacio-cierre{margin-top:40px;font-family:var(--mano);font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--amarillo);max-width:24ch;transform:rotate(-1deg)}
@media(max-width:900px){
  .espacio-grid{grid-template-columns:1fr;gap:28px}
  .espacio-texto{position:static}
  .espacio h2{max-width:none}
  .foto-panel,.foto-panel:nth-child(odd),.foto-panel:nth-child(even){transform:none}
  .espacio-fotos{gap:24px}
}

/* ===== SERVICIOS (color-block papel; lo que el taller ofrece además de clases) ===== */
.servicios{position:relative;z-index:1;color:var(--tinta);padding:10px 0 86px}
.servicios .eyebrow-m{color:var(--verde)}
.servicios h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.6rem);line-height:.97;letter-spacing:-.03em;color:var(--tinta);max-width:16ch}
.servicios h2 .vivo{font-family:var(--mano);font-style:italic;color:var(--verde);position:relative;white-space:nowrap}
.servicios h2 .vivo svg{position:absolute;left:-2%;right:-4%;bottom:-.06em;width:107%;height:.3em;overflow:visible}
.servicios h2 .vivo svg path{fill:none;stroke:var(--salvia);stroke-width:11;stroke-linecap:round}
.servicios .lead{font-size:clamp(1.02rem,1.4vw,1.18rem);color:#4A4F40;font-weight:500;max-width:56ch;margin-top:16px}
.servicios .lead b{color:var(--verde);font-weight:800}
.serv-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
/* estética v2: fuera la rotación aleatoria por tarjeta (v1, "collage") y los tonos
   planos saturados -- las variantes de color pasan a las "-suave" (mismo tono, aclarado
   hacia el papel) que ya usan las reseñas, para que el texto de tinta cumpla AA y las
   tarjetas se lean como papel teñido, no como bloques de cartulina. */
.serv{position:relative;background:var(--ocre-suave);color:var(--tinta);border:3px solid var(--linea);border-radius:16px;box-shadow:7px 7px 0 var(--linea);padding:22px;display:flex;flex-direction:column;gap:11px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.serv:hover{transform:translateY(-6px);z-index:2}
.serv.c-amarillo{background:var(--ocre-suave)}
.serv.c-verde{background:var(--salvia-suave)}
.serv.c-marron{background:var(--terracota-suave)}
/* 5 colores del boceto de Julia (22/09), uno por tarjeta -- ver el comentario de :root */
.serv.c-ocre-claro{background:var(--serv-ocre-claro)}
.serv.c-crema{background:var(--serv-crema)}
.serv.c-lima-palido{background:var(--serv-lima-palido)}
.serv.c-salvia-claro{background:var(--serv-salvia-claro)}
.serv.c-ocre-miel{background:var(--serv-ocre-miel)}
.serv.feat{grid-column:1 / -1;flex-direction:row;align-items:center;gap:24px 38px;flex-wrap:wrap}
.serv.feat:hover{transform:translateY(-5px)}
.serv.feat .serv-main{flex:1 1 340px;display:flex;flex-direction:column;gap:11px}
.serv.feat .serv-side{flex:1 1 220px;display:flex;flex-direction:column;gap:14px}
/* icono de servicio (encargo Julia 18/09, punto 1): mismo recorte real de "Explora"
   (.mancha-icono/.xplora más abajo), arriba del todo de la tarjeta -- 80px de escritorio,
   58px en móvil (media query de abajo). Sin icono asignado, _icono_serv() no pinta el
   <span> y la tarjeta queda igual que antes. */
.serv-icono{display:block;width:80px;height:80px}
.serv-icono img{width:100%;height:100%;object-fit:contain;display:block}
.serv-tag{align-self:flex-start;font-size:.69rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--linea);background:var(--papel);border:1.5px solid var(--linea);border-radius:20px;padding:3px 11px}
.serv h3{font-family:var(--display);font-weight:800;font-size:1.55rem;line-height:1.04;letter-spacing:-.02em}
.serv p{font-size:.98rem;line-height:1.45;color:inherit}
.serv .precio-serv{font-size:.94rem;color:inherit}
/* precio en la fuente de TEXTO (Open Sans), nunca en la manuscrita -- igual que el
   boceto (.precio-bloque .num): un número grande se lee mejor sin temblor de lápiz.
   Corrección 22/09 (revisión del coordinador): nowrap para que un precio en negrita nunca
   se parta a media palabra/número (lo que le pasaba a "657 73 15 92" en Fotos con Txema) --
   la línea completa ("Con Txema · 657…") puede seguir partiéndose ANTES del número si hace
   falta, solo el número en sí se queda entero. */
.serv .precio-serv b{font-family:var(--texto);font-weight:800;font-size:1.55rem;color:var(--linea);margin-right:4px;white-space:nowrap}
/* Solo Fotos con Txema (clase "precio-compacto", ver tarjeta_servicio() en
   contenido_web.py): su precio es un teléfono, más largo que el resto -- un pelín más
   pequeño para que quepa entero sin desbordar la columna de texto. */
.serv .precio-serv.precio-compacto b{font-size:1.24rem}
.serv .serv-foot .wa{background:var(--linea);color:var(--papel);border-color:var(--linea)}
.serv .serv-foot{margin-top:auto;padding-top:4px}
/* Foto grande de servicio (encargo Julia 22/09, boceto propio en Canva del 22/09: "la foto
   grande a la derecha, no el marco pequeño tipo polaroid de la prueba de hoy"). Campo "foto"
   opcional en contenido/servicios/*.json -- sin foto, tarjeta_servicio() no añade "con-foto" y
   nada de este bloque se aplica: la tarjeta sale exactamente igual que siempre. Con foto:
   ocupa ~50% del ancho de la tarjeta y toda su altura útil (el margen interior es el padding
   de siempre de .serv -- align-items:stretch, sin flex-basis en px, hace que la foto iguale
   la altura del texto solo), esquinas redondeadas y un borde fino oscuro sencillo -- por eso
   la figure YA NO lleva la clase .ev-figura (ese es el marco a lápiz en miniatura, tipo
   polaroid, que Julia pidió quitar; ver _foto_serv_html() en contenido_web.py). En la tarjeta
   ancha de Cumpleaños (.feat) la foto es HERMANA de .serv-main/.serv-side, no vive dentro de
   serv-side, para poder pedirle su propio ~40% del ancho TOTAL sin comprimir precio/botón
   (que se quedan centrados en su columna, como pedía el boceto). En móvil (<=600px, media
   query de abajo) la foto pasa a ancho completo arriba, proporción 4:3, texto debajo -- es
   contenido de apoyo, no hace falta que vaya primero. */
.serv.con-foto{flex-direction:row;align-items:stretch;gap:18px}
.serv.con-foto>.serv-cuerpo{flex:1 1 50%;display:flex;flex-direction:column;gap:11px;min-width:0}
.serv-foto{flex:0 0 calc(50% - 9px);align-self:stretch;margin:0;border-radius:15px;
  overflow:hidden;border:2px solid var(--linea)}
.serv-foto img{width:100%;height:100%;object-fit:cover;display:block}
.serv.feat.con-foto{flex-wrap:nowrap}
.serv.feat.con-foto .serv-main,.serv.feat.con-foto .serv-side{min-width:0}
/* Corrección 22/09 (coordinador, 2ª vuelta): con una foto VERTICAL (retrato de Txema-style,
   ej. 1170x1442) el bloque de arriba (align-self:stretch + img height:100%) hacía que la
   altura de la foto -- sin alto propio, solo ancho 40% -- saliera de su proporción intrínseca
   y estirase TODA la fila; la tarjeta de Cumpleaños quedaba mucho más alta que en el boceto
   (que la tiene baja, foto horizontal recortada ~3:2). Aquí, solo en la tarjeta ancha (.feat):
   la foto deja de estirarse (align-self:center, no stretch) y se le fija su propia proporción
   3:2 vía aspect-ratio -- la altura de la tarjeta vuelve a marcarla el texto, como pedía el
   boceto. object-position:top dentro de la imagen para que el recorte se quede con la parte de
   arriba de la foto (donde están los banderines), no el centro. */
.serv.feat.con-foto .serv-foto{flex:0 0 40%;align-self:center;height:auto;aspect-ratio:3/2}
.serv.feat.con-foto .serv-foto img{object-position:center top}
/* Corrección 22/09 (revisión del coordinador): precio + botón, juntos y centrados en la
   columna del medio, como el boceto -- justify-content:center aquí NO bastaba, porque
   .serv-foot tiene margin-top:auto (regla de arriba, pensada para pegar el botón abajo del
   todo en las tarjetas normales de altura variable) y un margen automático se come TODO el
   hueco libre antes de que justify-content pueda repartir nada. Se anula solo aquí. */
.serv.feat.con-foto .serv-side{justify-content:center}
.serv.feat.con-foto .serv-side .serv-foot{margin-top:0}
@media(max-width:820px){
  .serv-grid{grid-template-columns:1fr}
  .serv.feat{flex-direction:column;align-items:stretch}
  /* en columna, flex-basis pasa a ser la ALTURA -- sin esto, "serv-main"/"serv-side"
     se quedaban con un hueco muerto debajo del texto (340px/220px de alto mínimo,
     visto en la tarjeta de Cumpleaños a 375px). */
  .serv.feat .serv-main,.serv.feat .serv-side{flex:none}
  .servicios h2{max-width:none}
  .serv-icono{width:58px;height:58px}
  /* la foto de Cumpleaños se queda en fila (texto+precio+foto) hasta 600px, no hasta 820px
     (especificidad .serv.feat.con-foto > .serv.feat, gana pase lo que pase el orden). */
  .serv.feat.con-foto{flex-direction:row}
  .serv.feat.con-foto .serv-main,.serv.feat.con-foto .serv-side{flex:1 1 auto}
}
@media(max-width:600px){
  .serv.con-foto{flex-direction:column}
  .serv.feat.con-foto{flex-direction:column;flex-wrap:wrap}
  .serv.feat.con-foto .serv-main,.serv.feat.con-foto .serv-side{flex:none}
  .serv-foto,.serv.feat.con-foto .serv-foto{flex:none;width:100%;height:auto;
    aspect-ratio:4/3;align-self:auto}
  /* mismo motivo que en escritorio (ver comentario de .serv.feat.con-foto .serv-foto más
     arriba): que el recorte 4:3 deje ver los banderines de arriba de la foto, no el centro. */
  .serv.feat.con-foto .serv-foto img{object-position:center top}
}

/* ===== CONTACTO (color-block verde; cierre + reserva) ===== */
/* Estética v2: /contacto/ pasa a papel (igual que Clases); la banda de cierre #contacto-cta
   (y #instagram) recupera el verde oscuro más abajo, con selector de ID (ver overrides v2). */
.contacto{position:relative;z-index:1;color:var(--tinta);padding:10px 0 78px}
.contacto .eyebrow-m{color:var(--terracota)}
.contacto h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.6rem);line-height:.97;letter-spacing:-.03em;color:var(--tinta);max-width:15ch}
.contacto h2 .vivo{font-family:var(--mano);font-style:italic;color:var(--terracota);position:relative;white-space:nowrap}
.contacto h2 .vivo svg{position:absolute;left:-2%;right:-4%;bottom:-.06em;width:107%;height:.3em;overflow:visible}
.contacto h2 .vivo svg path{fill:none;stroke:var(--salvia);stroke-width:11;stroke-linecap:round}
.contacto .lead{font-size:clamp(1.02rem,1.4vw,1.18rem);color:#4A4F40;font-weight:500;max-width:46ch;margin-top:16px}
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;margin-top:30px;align-items:start}
.cta-wa{display:inline-flex;align-items:center;gap:11px;background:var(--amarillo);color:var(--tinta);font-weight:800;font-size:1.1rem;padding:15px 26px;border-radius:40px;border:3px solid var(--linea);box-shadow:none;text-decoration:none;transition:transform .15s var(--ease)}
.cta-wa:hover{transform:translateY(-2px)}
.cta-wa svg{width:22px;height:22px}
/* 18/09 (fondo B2 a toda la web): la lista de dirección/email/teléfono vivía suelta sobre el
   hueco de .contacto -- ahora es su propia hoja de papel (mismo trazo a lápiz de las tarjetas,
   ver "CARTELAS DE PAPEL" más abajo). .cta-wa/.redes se quedan fuera, ya son píldoras opacas. */
.datos{list-style:none;display:flex;flex-direction:column;gap:15px;margin:22px 0 0;
  background:var(--papel);
  border-style:solid!important;border-color:transparent!important;border-width:11px!important;
  border-image-slice:24!important;border-image-width:11px!important;border-image-repeat:stretch!important;
  border-image-source:url('/fotos/bordes/tarjeta-ancha.webp')!important;
  border-radius:14px!important;box-shadow:var(--sombra-suave)!important;
  padding:22px 24px;max-width:46ch}
.datos li{display:flex;gap:13px;align-items:flex-start;font-size:1rem;color:#3C4233;line-height:1.4}
.datos li>svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--terracota)}
.datos a{color:var(--tinta);text-decoration:none;border-bottom:2px solid color-mix(in srgb, var(--terracota) 45%, transparent);position:relative}
.datos a:hover{border-color:var(--terracota)}
/* QA 23/09: el enlace de email/teléfono medía 24px de alto de zona pulsable (menos de los 44px
   de WCAG SC 2.5.8). Un ::after invisible, sin padding ni min-height, amplía el área sin mover
   el texto ni el subrayado (border-bottom) ni separar visualmente los renglones de la lista. */
.datos a::after{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
.datos b{display:block;color:var(--tinta);font-weight:800}
.redes{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.redes a{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.86rem;color:var(--tinta);background:var(--papel);border:2.5px solid var(--linea);border-radius:30px;padding:7px 14px;text-decoration:none;box-shadow:none;transition:transform .14s var(--ease)}
.redes a:hover{transform:translateY(-2px)}
.redes svg{width:15px;height:15px}
/* Corrección 16/09 (revisión coordinador): el "mapa" era un bloque verde oscuro con borde
   sólido y sombra dura desplazada -- justo los "cuadraditos" que Julia rechazó (NORTE §2-bis).
   Pasa a tarjeta de papel con el borde a lápiz del sistema (se suma a .ficha/.ev-card/... en
   el bloque de "COMPONENTES REUTILIZABLES v3" más abajo, con border-image normal, no la
   "-clara" pensada para fondo oscuro) y sombra suave, como el resto de tarjetas. */
.mapa{position:relative;border-radius:14px;overflow:hidden;background:var(--papel);aspect-ratio:4/3.5}
.mapa iframe{width:100%;height:100%;border:0;display:block}
.mapa-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:26px}
.mapa-placeholder p{max-width:34ch;font-size:.95rem;line-height:1.4;color:var(--tinta);margin:0}
/* texto en --tinta: sobre --papel da >13:1, muy por encima del 4,5:1 de AA. */
.mapa-placeholder .btn-mapa{font-family:var(--texto);background:var(--amarillo);color:var(--tinta);font-weight:800;font-size:.95rem;padding:11px 22px;border-radius:30px;cursor:pointer;transition:transform .15s var(--ease)}
.mapa-placeholder .btn-mapa:hover,.mapa-placeholder .btn-mapa:focus-visible{transform:translateY(-2px)}
.mapa-placeholder .mapa-directo{color:var(--tinta);font-weight:700;font-size:.85rem;text-decoration:underline;text-underline-offset:3px;border-bottom:none}
@media(max-width:820px){
  .contacto-grid{grid-template-columns:1fr;gap:26px}
  .mapa{transform:none;order:-1;aspect-ratio:4/3}
  .contacto h2{max-width:none}
}

/* ===== Formulario de contacto (dentro de #contacto, debajo de la rejilla existente) ===== */
/* 18/09 (fondo B2 a toda la web): el formulario entero (h3 + campos + nota legal) vivía suelto
   sobre el hueco de .contacto -- pasa a ser su propia hoja de papel; se quita el separador
   punteado de arriba porque el propio borde a lápiz de la cartela ya separa del bloque anterior. */
.form-contacto{margin-top:34px;max-width:640px;
  background:var(--papel);
  border-style:solid!important;border-color:transparent!important;border-width:11px!important;
  border-image-slice:24!important;border-image-width:11px!important;border-image-repeat:stretch!important;
  border-image-source:url('/fotos/bordes/tarjeta-ancha.webp')!important;
  border-radius:14px!important;box-shadow:var(--sombra-suave)!important;
  padding:clamp(24px,4vw,36px)}
.form-contacto h3{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.6vw,1.6rem);color:var(--tinta);margin:0 0 18px}
.form-contacto form{display:grid;gap:16px}
.form-contacto .campo{display:flex;flex-direction:column;gap:6px}
.form-contacto label{font-size:.86rem;font-weight:700;color:#3C4233}
/* Arreglo 16/09 (docs/capturas/publicado-16sep/contacto-1440): el relleno gris apagado
   (--papel-oscuro) desentonaba con el papel de la seccion. Fondo de papel un poco mas claro
   que la seccion (mismo tono, sin gris) + el mismo borde a lapiz que el resto de tarjetas
   (border-image de .borde-lapiz-tarjeta) en vez de una linea solida generica. Contraste
   medido (docs/capturas/estetica-v2-arreglos): texto escrito 12.3:1, foco 9.4:1 (AA >=4.5:1
   y >=3:1 respectivamente). */
.form-contacto input[type=text],.form-contacto input[type=email],.form-contacto input[type=tel],.form-contacto textarea{
  font-family:var(--texto);font-size:1rem;padding:11px 14px;border-radius:10px;
  border-style:solid;border-color:transparent;border-width:7px;
  border-image-slice:36;border-image-width:7px;border-image-repeat:stretch;
  border-image-source:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%2296%22%20viewBox%3D%220%200%20400%2096%22%3E%3Cpath%20d%3D%22M%2021.92%2C7.84%20Q%2024.00%2C7.18%2033.78%2C7.27%20Q%2043.56%2C7.36%2053.33%2C7.74%20Q%2063.11%2C8.11%2072.89%2C8.40%20Q%2082.67%2C8.70%2092.44%2C8.73%20Q%20102.22%2C8.76%20112.00%2C8.66%20Q%20121.78%2C8.56%20131.56%2C8.68%20Q%20141.33%2C8.79%20151.11%2C9.31%20Q%20160.89%2C9.83%20170.67%2C10.62%20Q%20180.44%2C11.40%20190.22%2C12.04%20Q%20200.00%2C12.67%20209.78%2C12.77%20Q%20219.56%2C12.88%20229.33%2C12.41%20Q%20239.11%2C11.94%20248.89%2C11.22%20Q%20258.67%2C10.51%20268.44%2C9.96%20Q%20278.22%2C9.42%20288.00%2C9.24%20Q%20297.78%2C9.06%20307.56%2C9.10%20Q%20317.33%2C9.13%20327.11%2C9.06%20Q%20336.89%2C8.99%20346.67%2C8.63%20Q%20356.44%2C8.28%20366.22%2C7.80%20Q%20376.00%2C7.32%20378.22%2C7.39%20Q%20380.44%2C7.45%20382.37%2C8.54%20Q%20384.30%2C9.63%20385.54%2C11.43%20Q%20386.78%2C13.22%20387.40%2C15.14%20Q%20388.03%2C17.05%20388.47%2C18.80%20Q%20388.92%2C20.54%20389.42%2C22.27%20Q%20389.92%2C24.00%20390.46%2C28.00%20Q%20391.00%2C32.00%20391.43%2C36.00%20Q%20391.85%2C40.00%20391.95%2C44.00%20Q%20392.06%2C48.00%20391.98%2C52.00%20Q%20391.91%2C56.00%20391.97%2C60.00%20Q%20392.04%2C64.00%20392.42%2C68.00%20Q%20392.80%2C72.00%20393.04%2C74.31%20Q%20393.28%2C76.63%20392.65%2C78.94%20Q%20392.02%2C81.25%20390.38%2C82.99%20Q%20388.73%2C84.73%20386.49%2C85.51%20Q%20384.24%2C86.28%20382.03%2C86.24%20Q%20379.81%2C86.20%20377.90%2C85.86%20Q%20376.00%2C85.52%20366.22%2C85.40%20Q%20356.44%2C85.29%20346.67%2C85.45%20Q%20336.89%2C85.61%20327.11%2C85.70%20Q%20317.33%2C85.80%20307.56%2C85.64%20Q%20297.78%2C85.48%20288.00%2C85.21%20Q%20278.22%2C84.95%20268.44%2C84.92%20Q%20258.67%2C84.88%20248.89%2C85.29%20Q%20239.11%2C85.70%20229.33%2C86.40%20Q%20219.56%2C87.10%20209.78%2C87.69%20Q%20200.00%2C88.27%20190.22%2C88.37%20Q%20180.44%2C88.46%20170.67%2C88.02%20Q%20160.89%2C87.57%20151.11%2C86.92%20Q%20141.33%2C86.26%20131.56%2C85.81%20Q%20121.78%2C85.36%20112.00%2C85.31%20Q%20102.22%2C85.26%2092.44%2C85.45%20Q%2082.67%2C85.64%2072.89%2C85.74%20Q%2063.11%2C85.85%2053.33%2C85.69%20Q%2043.56%2C85.53%2033.78%2C85.25%20Q%2024.00%2C84.98%2022.33%2C84.74%20Q%2020.65%2C84.50%2018.85%2C84.27%20Q%2017.05%2C84.04%2014.99%2C83.56%20Q%2012.93%2C83.07%2010.93%2C81.88%20Q%208.94%2C80.69%207.66%2C78.71%20Q%206.38%2C76.72%206.20%2C74.36%20Q%206.01%2C72.00%206.44%2C68.00%20Q%206.87%2C64.00%207.21%2C60.00%20Q%207.55%2C56.00%207.61%2C52.00%20Q%207.66%2C48.00%207.58%2C44.00%20Q%207.49%2C40.00%207.58%2C36.00%20Q%207.67%2C32.00%208.11%2C28.00%20Q%208.56%2C24.00%209.44%2C22.17%20Q%2010.32%2C20.33%2011.40%2C18.84%20Q%2012.48%2C17.35%2013.47%2C15.91%20Q%2014.46%2C14.46%2015.57%2C12.89%20Q%2016.67%2C11.31%2018.26%2C9.90%20Q%2019.85%2C8.50%2021.92%2C7.84%20Z%22%20fill%3D%22none%22%20stroke%3D%22%2349453E%22%20stroke-width%3D%226%22%2F%3E%3Cpath%20d%3D%22M%2027.43%2C20.78%20Q%2028.50%2C21.05%2038.03%2C21.76%20Q%2047.56%2C22.47%2057.08%2C23.21%20Q%2066.61%2C23.95%2076.14%2C24.41%20Q%2085.67%2C24.87%2095.19%2C24.82%20Q%20104.72%2C24.78%20114.25%2C24.25%20Q%20123.78%2C23.71%20133.31%2C22.89%20Q%20142.83%2C22.08%20152.36%2C21.31%20Q%20161.89%2C20.55%20171.42%2C20.09%20Q%20180.94%2C19.63%20190.47%2C19.57%20Q%20200.00%2C19.51%20209.53%2C19.74%20Q%20219.06%2C19.97%20228.58%2C20.28%20Q%20238.11%2C20.60%20247.64%2C20.81%20Q%20257.17%2C21.03%20266.69%2C21.09%20Q%20276.22%2C21.15%20285.75%2C21.12%20Q%20295.28%2C21.09%20304.81%2C21.10%20Q%20314.33%2C21.10%20323.86%2C21.20%20Q%20333.39%2C21.29%20342.92%2C21.43%20Q%20352.44%2C21.57%20361.97%2C21.63%20Q%20371.50%2C21.69%20372.41%2C21.70%20Q%20373.32%2C21.70%20374.31%2C21.81%20Q%20375.30%2C21.91%20376.30%2C22.31%20Q%20377.30%2C22.70%20378.02%2C23.51%20Q%20378.75%2C24.32%20378.89%2C25.40%20Q%20379.04%2C26.48%20378.54%2C27.49%20Q%20378.04%2C28.50%20377.28%2C32.40%20Q%20376.51%2C36.30%20375.93%2C40.20%20Q%20375.34%2C44.10%20375.21%2C48.00%20Q%20375.07%2C51.90%20375.46%2C55.80%20Q%20375.84%2C59.70%20376.60%2C63.60%20Q%20377.35%2C67.50%20378.04%2C68.47%20Q%20378.74%2C69.44%20378.86%2C70.63%20Q%20378.99%2C71.83%20378.44%2C72.86%20Q%20377.89%2C73.89%20376.87%2C74.47%20Q%20375.86%2C75.05%20374.73%2C75.19%20Q%20373.60%2C75.33%20372.55%2C75.21%20Q%20371.50%2C75.08%20361.97%2C74.97%20Q%20352.44%2C74.86%20342.92%2C74.87%20Q%20333.39%2C74.89%20323.86%2C74.90%20Q%20314.33%2C74.92%20304.81%2C74.86%20Q%20295.28%2C74.79%20285.75%2C74.66%20Q%20276.22%2C74.52%20266.69%2C74.42%20Q%20257.17%2C74.31%20247.64%2C74.37%20Q%20238.11%2C74.42%20228.58%2C74.66%20Q%20219.06%2C74.89%20209.53%2C75.21%20Q%20200.00%2C75.52%20190.47%2C75.70%20Q%20180.94%2C75.88%20171.42%2C75.73%20Q%20161.89%2C75.58%20152.36%2C75.05%20Q%20142.83%2C74.52%20133.31%2C73.77%20Q%20123.78%2C73.01%20114.25%2C72.33%20Q%20104.72%2C71.65%2095.19%2C71.35%20Q%2085.67%2C71.04%2076.14%2C71.26%20Q%2066.61%2C71.48%2057.08%2C72.14%20Q%2047.56%2C72.80%2038.03%2C73.64%20Q%2028.50%2C74.47%2027.42%2C75.02%20Q%2026.34%2C75.56%2025.17%2C75.42%20Q%2024.00%2C75.29%2023.11%2C74.53%20Q%2022.22%2C73.78%2021.76%2C72.72%20Q%2021.30%2C71.66%2021.17%2C70.58%20Q%2021.04%2C69.50%2021.07%2C68.50%20Q%2021.10%2C67.50%2021.12%2C63.60%20Q%2021.14%2C59.70%2021.11%2C55.80%20Q%2021.08%2C51.90%2021.11%2C48.00%20Q%2021.14%2C44.10%2021.26%2C40.20%20Q%2021.38%2C36.30%2021.51%2C32.40%20Q%2021.64%2C28.50%2021.77%2C27.61%20Q%2021.89%2C26.73%2022.08%2C25.81%20Q%2022.26%2C24.90%2022.62%2C23.93%20Q%2022.97%2C22.97%2023.65%2C22.13%20Q%2024.34%2C21.29%2025.35%2C20.90%20Q%2026.36%2C20.51%2027.43%2C20.78%20Z%22%20fill%3D%22none%22%20stroke%3D%22%2349453E%22%20stroke-width%3D%225.4%22%2F%3E%3C%2Fsvg%3E');
  background:color-mix(in srgb, var(--papel) 70%, white 30%);color:var(--tinta)}
.form-contacto input:focus-visible,.form-contacto textarea:focus-visible{outline:3px solid var(--boton-verde);outline-offset:1px}
.form-contacto textarea{resize:vertical;min-height:100px;font-family:var(--texto)}
.campo-trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.campo-check{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:#3C4233;cursor:pointer;position:relative}
.campo-check input{margin-top:3px;width:18px;height:18px;flex:none}
/* QA 23/09: la casilla mide 18x18 (sin tocar -- así se ve hoy). Zona pulsable <44px (WCAG SC
   2.5.8): un ::before invisible sobre la etiqueta amplía el área alrededor de la casilla; SC
   2.5.8 permite sumar la etiqueta asociada al target, y toda la <label> ya activa la casilla
   al clicar, así que esto no cambia el comportamiento, solo lo hace medible. */
.campo-check::before{content:"";position:absolute;left:0;top:0;width:54px;height:54px}
.campo-check a{color:var(--tinta);text-decoration:underline}
.form-contacto button[type=submit]{font-family:var(--texto);justify-self:start;background:var(--amarillo);color:var(--tinta);font-weight:800;font-size:1rem;padding:13px 28px;border-radius:40px;border:3px solid var(--linea);box-shadow:none;cursor:pointer;transition:transform .15s var(--ease)}
.form-contacto button[type=submit]:hover,.form-contacto button[type=submit]:focus-visible{transform:translateY(-2px)}
.form-contacto button[type=submit]:disabled{opacity:.6;cursor:progress;transform:none}
.form-estado{min-height:1.3em;font-weight:700;font-size:.92rem;margin:0}
.form-estado.ok{color:var(--boton-verde)}
.form-estado.error{color:var(--terracota)}
.form-legal{margin-top:18px;font-size:.78rem;line-height:1.5;color:#5A5F4C;max-width:60ch}
.form-legal a{color:var(--tinta)}

/* ===== ESTÉTICA v2 — banda de cierre "Síguenos" en verde oscuro (NORTE 2-bis) =====
   #instagram reutiliza .espacio (ver site/build.py) pero ES la banda verde oscuro, junto
   al pie. El selector de ID pesa más que la clase, así que esto gana sobre el papel de
   arriba sin tocar /contacto/. */
#instagram{position:relative;z-index:3;background:var(--boton-verde);color:var(--papel)}
#instagram .eyebrow-m{color:var(--ocre)}
#instagram h2{color:var(--papel)}
#instagram h2 .vivo{color:var(--ocre)}
#instagram .lead{color:#E7EBDC}
/* Propuesta A aprobada (encargo 23/09, fotos/pruebas-final/a-instagram.webp): 3 fotos grandes
   bajo el texto, MISMA franja para la home y para el remate de /contacto/,
   /estudio-creativo-bilbao/ y /servicios/ -- build.py inyecta @instagram en las 4 (una sola vez
   por página). .pie ya comparte el mismo --boton-verde: sin imagen que empalmar ni hack de
   padding, la banda y el pie se leen solos como un verde continuo. */
.insta-galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1040px;margin:34px auto 0}
.insta-foto{position:relative;display:block;margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--papel)}
.insta-foto img{width:100%;height:100%;object-fit:cover;display:block}
a.insta-foto{transition:transform .2s var(--ease)}
a.insta-foto:hover,a.insta-foto:focus-visible{transform:translateY(-4px)}
/* icono SOLO en publicaciones reales del feed (build.py: es_feed) -- las fotos de relleno del
   taller no lo llevan, para no dar a entender que son posts (spec 23/09). */
.insta-ico{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;
  background:rgba(28,58,39,.6);color:var(--papel);display:grid;place-items:center}
.insta-ico svg{width:16px;height:16px}
/* móvil: una foto grande arriba, dos debajo (spec 23/09 y fotos/pruebas-final/a-instagram-movil.webp) */
@media(max-width:700px){
  .insta-galeria{grid-template-columns:1fr 1fr;gap:14px}
  .insta-galeria .insta-foto:first-child{grid-column:1/-1}
}

/* Corrección del coordinador (16/09, 8ª ronda): comparando /actividades/ con foto-1335, el
   cierre «Te esperamos / ¿Te animas? Escríbenos» NO va en banda verde oscuro -- va sobre
   PAPEL (como el resto de la página, con las pinceladas del fondo alrededor). Se revierte
   la regla de NORTE 2-bis para #contacto-cta (el pie y #instagram la mantienen). */
#contacto-cta{position:relative;z-index:3;background:transparent;color:var(--tinta)}
/* «Te esperamos» a mano, en tinta, flanqueado por dos trazos ocre ( › … ‹ ) -- no lleva
   mancha de fondo, es texto suelto sobre el papel (medido en foto-1335). */
#contacto-cta .eyebrow-m{color:var(--tinta);font-size:1.05rem;display:inline-flex;align-items:center;gap:.55em}
#contacto-cta .eyebrow-m::before,#contacto-cta .eyebrow-m::after{content:"";width:.62em;height:.62em;border:.16em solid var(--ocre);border-width:0 .16em .16em 0;flex:none}
#contacto-cta .eyebrow-m::before{transform:rotate(-45deg)}
#contacto-cta .eyebrow-m::after{transform:rotate(135deg)}
/* «¿Te animas? Escríbenos» en UNA línea, ~44px a 1440 (medido en foto-1335 y escalado --
   antes clamp topaba en 3.6rem=57.6px). max-width suelto para que quepa en una sola línea. */
#contacto-cta h2{color:var(--tinta);font-size:clamp(1.7rem,3.4vw,2.75rem);max-width:none;white-space:nowrap}
#contacto-cta h2 .vivo{color:var(--boton-verde)}
#contacto-cta .lead{color:#6B6255}
@media(max-width:640px){#contacto-cta h2{white-space:normal}}
@media(max-width:600px){.form-contacto button[type=submit]{justify-self:stretch;text-align:center}}

/* ===== Aviso de cookies + panel "Configurar" (vanilla, sin librerías) ===== */
.cookies-banner{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--tinta);color:var(--papel);padding:18px 22px;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between;box-shadow:0 -6px 24px rgba(0,0,0,.28)}
.cookies-banner[hidden]{display:none}
.cookies-banner p{margin:0;flex:1 1 320px;font-size:.9rem;line-height:1.45;color:#E7EBDC}
.cookies-banner p a{color:var(--papel);text-decoration:underline}
.cookies-acciones{display:flex;flex-wrap:wrap;gap:10px}
/* min-height:44px (zona de pulsación, sin cambiar el aspecto): con el padding+borde de
   arriba el alto real rondaba los 41px; display:flex + centrado mantiene el texto igual de
   centrado con esos ~3px extra invisibles. */
.cookies-acciones button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:var(--texto);font-weight:800;font-size:.86rem;padding:11px 20px;border-radius:30px;border:2.5px solid var(--linea);cursor:pointer;transition:transform .15s var(--ease);background:var(--papel);color:var(--linea)}
.cookies-acciones button:hover,.cookies-acciones button:focus-visible{transform:translateY(-2px)}
.cookies-modal-fondo{position:fixed;inset:0;background:rgba(20,24,15,.55);z-index:90;display:flex;align-items:center;justify-content:center;padding:18px}
.cookies-modal-fondo[hidden]{display:none}
.cookies-modal{background:var(--papel);color:var(--tinta);border-radius:16px;border:3px solid var(--linea);box-shadow:8px 10px 0 var(--linea);max-width:520px;width:100%;padding:26px 26px 22px;max-height:86vh;overflow:auto}
.cookies-modal h3{font-family:var(--display);font-weight:800;font-size:1.3rem;margin:0 0 12px;color:var(--tinta)}
.cookies-modal p{font-size:.92rem;line-height:1.5;margin:0 0 8px;color:#3C4233}
.cookies-cat{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:14px 0;border-top:2px dashed rgba(38,32,26,.18)}
.cookies-cat:last-of-type{border-bottom:2px dashed rgba(38,32,26,.18)}
.cookies-cat b{font-size:.94rem;color:var(--tinta)}
.cookies-cat small{display:block;color:#5A5F4C;font-weight:500;margin-top:2px;font-size:.82rem;line-height:1.4}
.cookies-modal-acciones{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.cookies-modal-acciones button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:var(--texto);font-weight:800;font-size:.86rem;padding:10px 20px;border-radius:30px;border:2.5px solid var(--linea);cursor:pointer;background:var(--papel);color:var(--linea)}
.switch{position:relative;display:inline-block;width:44px;height:26px;flex:none}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch i{position:absolute;inset:0;background:#C7C2AA;border-radius:30px;transition:background .15s;pointer-events:none}
.switch i::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:var(--papel);border-radius:50%;transition:transform .15s}
.switch input:checked+i{background:var(--verde)}
.switch input:checked+i::before{transform:translateX(18px)}
.switch input:disabled+i{opacity:.6}
/* Aviso de cookies en móvil: los TRES botones al mismo tamaño (AEPD -- rechazar debe ser
   tan visible como aceptar). Con flex-wrap + flex:1 "Rechazar"/"Configurar" compartían la
   primera fila y "Aceptar" quedaba solo en la segunda, estirado a todo el ancho -> se veía
   más grande que los otros dos. Se apilan los tres a todo el ancho, uno por fila. */
@media(max-width:600px){.cookies-banner{flex-direction:column;align-items:stretch}.cookies-banner p{flex:none}.cookies-acciones{flex-direction:column;justify-content:stretch}.cookies-acciones button{flex:none;width:100%}}

/* ===== FOOTER ===== */
.pie{background:var(--boton-verde);color:#C8CEBC;padding:50px 0 28px;position:relative;z-index:3;font-size:.93rem}
.pie-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px}
.pie-marca .pm{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pie-marca .disco{width:46px;height:46px;border-radius:50%;background:var(--papel);display:grid;place-items:center;flex:none}
.pie-marca .disco img{width:36px;height:36px}
.pie-marca b{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--papel);line-height:1}
/* opacity:.7 (color heredado #C8CEBC de .pie) daba 4,2:1 sobre el verde del pie -- por
   debajo del 4,5:1 de AA. .8 da 5:1, con el mismo aspecto apagado/pequeño de subtítulo. */
.pie-marca small{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;opacity:.8}
.pie-marca p{max-width:34ch;color:#A9AF9C;line-height:1.5}
/* QA 23/09: "Explora" pasa de h4 a h3 (saltaba de h2 a h4 en el orden de encabezados);
   se agrupa con h4 en el selector para que "Dónde estamos" (que se queda en h4) y "Explora"
   midan exactamente igual -- ni un píxel de diferencia. */
.pie h3,.pie h4{font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;color:var(--papel);margin-bottom:13px}
.pie ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.pie a{color:#C8CEBC;text-decoration:none}
.pie a:hover{color:var(--amarillo)}
/* QA 23/09: enlaces de teléfono/email del pie medían 19-24px de alto (línea de texto suelta).
   inline-block + padding vertical con margin negativo de la misma medida: la zona de toque
   real crece a 44px sin mover el texto de sitio ni ensanchar la línea (el margen negativo
   "devuelve" el hueco extra al flujo). */
.pie ul li a{display:inline-block;padding-block:13px;margin-block:-13px}
/* #8E947F daba 3,49:1 sobre el verde del pie (#34402E), por debajo del 4,5:1 que exige AA
   para texto normal -- #A6AC91 (misma familia verde-grisácea, más clara) da 4,66:1. */
.pie-legal{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.13);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 22px;font-size:.8rem;color:#A6AC91}
.pie-legal .legales{display:flex;flex-wrap:wrap;gap:8px 18px}
@media(max-width:820px){ .pie-grid{grid-template-columns:1fr;gap:28px} }

/* ===== FAQ (acordeón nativo) ===== */
.faq{position:relative;z-index:1;color:var(--tinta);padding:10px 0 84px}
.faq .eyebrow-m{color:var(--verde)}
.faq h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.6rem);line-height:.97;letter-spacing:-.03em;color:var(--tinta);max-width:18ch}
.faq h2 .vivo{font-family:var(--mano);font-style:italic;color:var(--verde);position:relative;white-space:nowrap}
.faq h2 .vivo svg{position:absolute;left:-2%;right:-4%;bottom:-.06em;width:107%;height:.3em;overflow:visible}
.faq h2 .vivo svg path{fill:none;stroke:var(--salvia);stroke-width:11;stroke-linecap:round}
.faq-list{max-width:840px;margin-top:30px;display:flex;flex-direction:column;gap:14px}
.faq-item{border-radius:14px;background:var(--papel);transition:background .2s var(--ease)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:17px 20px;font-family:var(--display);font-weight:800;font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--tinta)}
.faq-item summary::-webkit-details-marker{display:none}
/* signo +/− "a mano" (SPEC E3): letra manuscrita, no un + que rota a un aspa */
.faq-item summary::after{content:"+";font-family:var(--mano);font-weight:700;font-size:2rem;line-height:.5;flex:none;color:var(--terracota)}
.faq-item[open] summary::after{content:"–"}
.faq-item[open]{background:var(--papel-oscuro)}
.faq-item .ans{padding:0 20px 19px;font-size:1rem;color:#3C4233;line-height:1.55;max-width:64ch}
.faq-item .ans a{color:var(--verde);font-weight:700}

/* ===== SOBRE / EQUIPO (color-block verde oscuro; retratos a color) ===== */
.equipo{position:relative;z-index:3;background:var(--verde-fondo);color:var(--papel);padding:8px 0 82px}
.equipo .eyebrow-m{color:var(--amarillo);transform:rotate(-1.4deg);display:inline-block}
.equipo h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.6rem);line-height:.97;letter-spacing:-.03em;color:var(--papel);max-width:16ch}
.equipo h2 .vivo{font-family:var(--mano);font-style:italic;color:var(--amarillo);position:relative;white-space:nowrap}
.equipo h2 .vivo svg{position:absolute;left:-2%;right:-4%;bottom:-.06em;width:107%;height:.3em;overflow:visible}
.equipo h2 .vivo svg path{fill:none;stroke:var(--salvia);stroke-width:11;stroke-linecap:round}
.equipo .lead{font-size:clamp(1rem,1.4vw,1.16rem);color:#D9DECB;font-weight:500;max-width:50ch;margin-top:16px}
.equipo .lead b{color:var(--amarillo);font-weight:700}
.equipo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:24px;margin-top:34px;align-items:start;justify-content:center}
.persona{background:var(--papel);color:var(--tinta);border:3px solid var(--linea);border-radius:15px;box-shadow:8px 8px 0 rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s var(--ease)}
.persona:nth-child(odd){rotate:-1deg}
.persona:nth-child(even){rotate:1deg}
.persona .foto{aspect-ratio:4/3.3;overflow:hidden;border-bottom:3px solid var(--linea);background:var(--verde-mural)}
.persona .foto img{width:100%;height:100%;object-fit:cover}
.persona .txt{padding:16px 18px}
.persona h3{font-family:var(--display);font-weight:800;font-size:1.4rem;line-height:1;letter-spacing:-.02em}
.persona .rol{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--verde);margin:4px 0 9px}
.persona p{font-size:.94rem;color:#3C4233;line-height:1.45}
.persona.txt-card{justify-content:center;padding:22px;background:var(--verde);color:var(--papel)}
.persona.txt-card h3{color:var(--papel)}
.persona.txt-card .rol{color:var(--amarillo)}
.persona.txt-card p{color:#E7EBDC}
.persona.txt-card b{color:var(--papel)}
@media(max-width:820px){
  .equipo-grid{grid-template-columns:1fr;gap:20px}
  .persona,.persona:nth-child(odd),.persona:nth-child(even){rotate:0}
  .equipo h2{max-width:none}
}

/* ===== GALERÍA / COMUNIDAD (muro masonry: fotos duotono + notas de testimonio) ===== */
.galeria{position:relative;z-index:1;color:var(--tinta);padding:10px 0 86px}
.galeria .eyebrow-m{color:var(--verde)}
.galeria h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.6rem);line-height:.97;letter-spacing:-.03em;color:var(--tinta);max-width:16ch}
.galeria h2 .vivo{font-family:var(--mano);font-style:italic;color:var(--verde);position:relative;white-space:nowrap}
.galeria h2 .vivo svg{position:absolute;left:-2%;right:-4%;bottom:-.06em;width:107%;height:.3em;overflow:visible}
.galeria h2 .vivo svg path{fill:none;stroke:var(--salvia);stroke-width:11;stroke-linecap:round}
.galeria .lead{font-size:clamp(1.02rem,1.4vw,1.18rem);color:#4A4F40;font-weight:500;max-width:52ch;margin-top:16px}
/* galería 3D: la rejilla de fotos se endereza (rotateX 46°→0°) y escala al entrar — adaptación del "Animated Scroll Gallery" de 21st.dev en CSS puro, sin WebGL */
.gal3d-stage{margin-top:34px;perspective:1300px;perspective-origin:center 26%}
.gal3d{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;transform-style:preserve-3d;transform:rotateX(0deg)}
@supports (animation-timeline: view()){
  .gal3d{animation:gal-tilt linear both;animation-timeline:view();animation-range:entry 4% cover 42%}
}
@keyframes gal-tilt{from{transform:rotateX(46deg) scale(.85);opacity:.4}to{transform:rotateX(0deg) scale(1);opacity:1}}
/* QA 23/09: antes .gal3d solo se apagaba con prefers-reduced-motion por debajo de 820px
   (heredaba el animation:none del @media(max-width:820px) de más abajo) -- en escritorio
   seguía inclinando/escalando la rejilla con el reduce activo. Regla propia, ver
   docs/DESIGN-DECISIONS.md. */
@media(prefers-reduced-motion:reduce){.gal3d{animation:none;transform:none}}
/* fondo: antes --verde-mural (oliva solido), mismo "marco verde oliva grueso plano" que
   .intro-foto -- ver comentario ahi. Papel, como el resto de tarjetas. */
.gfoto{position:relative;margin:0;border:3.5px solid var(--linea);border-radius:14px;box-shadow:9px 9px 0 var(--linea);overflow:hidden;background:var(--papel);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.gfoto:nth-child(2n){transform:rotate(1.1deg)}
.gfoto:nth-child(3n){transform:rotate(-1.2deg)}
.gfoto img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;display:block}
.gfoto figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 10px;font-family:var(--mano);font-size:1.12rem;color:var(--papel);background:linear-gradient(transparent,rgba(15,24,14,.8));text-shadow:0 1px 7px rgba(0,0,0,.75)}
.gfoto:hover{transform:translateY(-5px) rotate(0);box-shadow:12px 15px 0 var(--linea);z-index:2}
/* banda de testimonios — reseñas v3 (Julia, 18/09: "estos colores me molestan un poco
   la verdad, prefiero en blanco o color cremita más apagado"). Fuera las variantes
   ocre/salvia/oliva y sus manchas de acuarela de color -- las 3 tarjetas, sea cual sea
   su "color" en contenido/galeria.json, comparten ahora un único fondo crema claro
   apagado (--papel, el mismo "papel" neutro del resto del sistema de tarjetas: AA
   garantizado porque es el par tinta/papel base de toda la web). Se mantiene el borde
   a lápiz (heredado del selector compartido de arriba), el texto, la firma y el trazo
   ondulado de foto-1352-resenas.jpg. */
.voces{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.quote{position:relative;padding:26px 24px 22px;color:var(--tinta);display:flex;flex-direction:column;overflow:hidden;
  background-color:var(--papel);background-image:none}
.quote:nth-child(1){transform:rotate(-1deg)}
.quote:nth-child(3){transform:rotate(1deg)}
.quote.c-lima,.quote.c-verde{background-color:var(--papel);background-image:none}
.quote p{font-size:1rem;line-height:1.5;font-weight:600;margin:0;position:relative;z-index:1}
.quote cite{display:block;margin-top:14px;font-family:var(--mano);font-style:normal;font-size:1.25rem;font-weight:700;color:var(--tinta);position:relative;z-index:1}
/* mancha más oscura en la esquina inferior derecha, como foto-1352-resenas.jpg.
   Corrección del coordinador (16/09, 6ª ronda): "se ve un rectángulo con canto recto
   horizontal y vertical -- es la capa de la mancha de esquina, se pinta como caja". La
   caja (right/bottom/width/height propios, menor que la tarjeta) tenía un borde propio
   donde el navegador recortaba el degradado en seco, aunque el degradado en sí ya
   llegara a transparente antes. Ahora el pseudo-elemento ocupa la tarjeta ENTERA
   (inset:0, sin caja propia más pequeña) y es el propio degradado radial -- una elipse
   centrada en la esquina, que se apaga mucho antes del borde -- el que da toda la forma:
   no hay ningún canto recto posible porque no hay una caja más chica que recortar. */
.quote::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(ellipse 70% 62% at 100% 100%, rgba(26,22,16,.26), transparent 68%);
  pointer-events:none;z-index:0}
/* trazo ondulado a lápiz UNA sola vez, CENTRADO y más largo (~60% del ancho) bajo toda la
   fila (foto-1352 -- item 6 del encargo: ni uno por tarjeta ni a todo el ancho). grid-
   column:1/-1 es IMPRESCINDIBLE: .voces es un grid de 3 columnas y el ::after, sin esto,
   se coloca como un item más (1 columna de 3, pegado a la izquierda) -- por eso salía
   corto y descentrado (corrección del coordinador, 3ª ronda). */
.voces::after{content:"";display:block;grid-column:1/-1;margin:18px auto 0;width:60%;height:16px;
  background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%209%20Q%2038%201%2076%209%20T%20150%209%20T%20224%209%20T%20298%209%22%20fill%3D%22none%22%20stroke%3D%22%2349453E%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fsvg%3E');
  background-repeat:no-repeat;background-size:100% 100%;opacity:.5}
@media(max-width:900px){ .gal3d,.voces{grid-template-columns:1fr 1fr} }
@media(max-width:820px){
  .gal3d-stage{perspective:none}
  .gal3d{transform:none;animation:none}
  .voces{grid-template-columns:1fr}
  .gfoto:nth-child(n),.quote:nth-child(n){transform:none}
  .galeria h2{max-width:none}
}

/* ===== NAVEGACIÓN: idiomas · menú móvil · tab bar ===== */
.idiomas{display:inline-flex;gap:2px;align-items:center;background:var(--boton-verde);border:0;border-radius:999px;padding:4px}
.idiomas button{position:relative;background:none;border:0;color:var(--papel);font-family:var(--texto);font-weight:700;font-size:.8rem;letter-spacing:.03em;padding:5px 10px;border-radius:999px;cursor:pointer;opacity:.75;transition:opacity .15s,background .15s,color .15s}
/* zona de pulsación >=44x44 sin tocar el tamaño visible de la cápsula (van muy pegados,
   gap:2px -- engordar el padding real las agrandaría a ojos vistas): un ::before invisible,
   centrado sobre el botón, extiende el área de toque hasta 44px por lado. */
.idiomas button::before{content:"";position:absolute;top:50%;left:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
.idiomas button:hover{opacity:1}
.idiomas button.on{background:var(--ocre);color:var(--tinta);opacity:1}
.menu-movil{position:fixed;inset:0;z-index:95;background:var(--boton-verde);color:var(--papel);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:30px 34px;transform:translateX(100%);transition:transform .35s var(--ease);visibility:hidden}
/* nota: --boton-verde de marca, no --verde-fondo (ese es el verde muestreado del dragón, ver :root) */
.menu-movil.abierto{transform:translateX(0);visibility:visible}
.menu-movil a{font-family:var(--texto);font-weight:700;font-size:1.8rem;letter-spacing:0;color:var(--papel);text-decoration:none;padding:6px 0}
.menu-movil .idiomas{align-self:flex-start;margin-top:20px;background:color-mix(in srgb, var(--papel) 18%, transparent)}
.menu-movil .cerrar{position:absolute;top:21px;right:16px;padding:1px 10px;background:none;border:0;color:var(--papel);font-size:2.6rem;line-height:1;cursor:pointer}
/* zona de pulsación >=44x44 sin tocar el tamaño visible del aspa: el ::before de abajo
   ya lo daba, pero un auditor automático mide el propio botón (QA 23/09, medía 24x42) --
   el padding de arriba (10px horiz., 1px vert. + top/right recolocados para que el aspa
   quede en el mismo sitio de siempre) hace que el elemento REAL ya mida 44x44. */
.menu-movil .cerrar::before{content:"";position:absolute;top:50%;left:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.tabbar{display:none}
@media(max-width:820px){
  body{padding-bottom:calc(66px + var(--cookies-h,0px))}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--papel);border-top:1px solid color-mix(in srgb, var(--lapiz) 20%, transparent);box-shadow:0 -6px 18px -8px rgba(46,44,39,.22)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;text-decoration:none;color:var(--tinta);font-size:.76rem;font-weight:800;letter-spacing:.02em}
  .tabbar a svg{width:21px;height:21px}
  .tabbar a.reservar{color:var(--boton-verde)}
  .cookies-banner{bottom:66px}
}

/* ===== CRAFT — movimiento "vivo de taller" (gratis, a prueba de fallos) ===== */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* entradas coreografiadas: la clase .cr la pone el JS → si no hay JS, todo visible */
.cr{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.cr.cr-in{opacity:1;transform:none}
/* variante solo-opacidad para elementos con rotación propia (no les pisa el transform) */
.cr-fade{opacity:0;transition:opacity .8s var(--ease)}
.cr-fade.cr-in{opacity:1}
.intro .wrap{position:relative}
/* sello del dragón REAL que se pinta (barrido clip izq→der) */
.firma-dragon{position:absolute;top:-2px;right:34px;width:92px;height:92px;z-index:4;opacity:.85;pointer-events:none}
.js-anim .firma-dragon{clip-path:inset(0 100% 0 0)}
.firma-dragon.painted{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--ease)}
@media(prefers-reduced-motion:reduce){.js-anim .firma-dragon{clip-path:none}}
@media(max-width:820px){.firma-dragon{width:58px;height:58px;top:-4px;right:0}}
/* imán en la CTA principal */
.reserva.magnet{transition:transform .25s var(--ease)}

/* ===== PULIDO (impeccable + emilkowalski): foco accesible · press · tipografía · touch ===== */
/* estética v2: foco visible con --lapiz (7,9:1 sobre papel) por defecto; --ocre/--amarillo
   sobre papel apenas da 1,9:1 (no llega al 3:1 de foco/gráficos no textuales, WCAG 1.4.11) */
:focus-visible{outline:3px solid var(--lapiz);outline-offset:3px;border-radius:5px}
/* … salvo donde el foco cae sobre el verde oscuro: ahí --lapiz también se hunde (1,2:1),
   así que en esas zonas el foco pasa a --papel (9:1 sobre boton-verde) */
.hero :focus-visible, .pie :focus-visible, .menu-movil :focus-visible, .idiomas button:focus-visible,
#contacto-cta :focus-visible, #instagram :focus-visible, .cookies-banner :focus-visible{outline-color:var(--papel)}
.menu-movil a:focus-visible,.tabbar a:focus-visible{outline-offset:-3px}
/* feedback táctil al pulsar (emilkowalski: scale al press) */
.wa:active,.cta-wa:active,.reserva:active,.filtro:active,.tabbar a:active,.idiomas button:active,.serv-foot .wa:active{transform:scale(.96)}
.faq-item summary:active{transform:scale(.995)}
/* tipografía: cortes de línea equilibrados en titulares, sin huérfanas en prosa */
h2{text-wrap:balance}
.lead,.persona p,.serv p,.faq-item .ans,.rincones-list span span,.quote p{text-wrap:pretty}
/* contraste: un punto más de margen en el texto más apagado */
.precio .suelta{color:#595D4C}
/* touch targets cómodos en móvil */
@media(max-width:820px){ .idiomas button{padding:9px 13px} }
/* QA 23/09: zona de toque real >=44x44 -- el ::before invisible de arriba no lo detectan
   los auditores automáticos (miden el propio elemento). En vez de agrandar visualmente el
   botón, min-width/min-height + contenido centrado: la cápsula visible crece poco, el texto
   no cambia de tamaño más que el font-size ya subido arriba. */
@media(max-width:820px){
  .idiomas button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ============================================================================
   ===== COMPONENTES REUTILIZABLES v3 (16/09, fidelidad Julia — RECORTES REALES) =====
   El intento anterior (box-shadow en doble anillo, commit 469f586) arreglaba las
   esquinas redondeadas pero el coordinador lo rechazó: "se ve como dos líneas de
   CSS limpias, no como el trazo de grafito a mano de foto-1346". Cambio de método:
   en vez de IMITAR el lápiz con CSS, se usan los recortes REALES del PNG de Julia
   (archivo-1347-png-sin-fondo.png, mitad inferior: las 10 cápsulas/tarjetas ya
   dibujadas a mano) como border-image de verdad — site/herramientas/genera_bordes_
   lapiz.py aísla el trazo del relleno de papel (deja transparente el hueco entre
   las dos líneas, así funciona sobre cualquier fondo) y genera una versión clara
   para fondo oscuro. Las esquinas redondeadas van DENTRO de cada imagen (son un
   dibujo, no una forma geométrica), así que el problema de "border-image ignora
   border-radius" desaparece: no hace falta que coincida con precisión, solo que
   el --border-radius del CSS (para que el FONDO de la caja también se recorte en
   curva) se acerque a lo que ya trae dibujado la imagen. Tres formas (a más
   redonda, mejor encaja con elementos más cuadrados):
     - fotos/bordes/tarjeta-ancha(-clara).webp — tarjetas anchas, radio ~14px
     - fotos/bordes/tarjeta-media(-clara).webp — tarjetas más cuadradas (fotos, Explora)
     - fotos/bordes/capsula(-clara).webp — botones y píldoras, totalmente redondos
   ========================================================================= */
.borde-lapiz-tarjeta, .borde-lapiz-tarjeta--claro,
.ficha, .ev-card, .evento, .serv, .faq-item, .cookies-modal, .intro-foto,
.ev-figura, .ev-galeria figure, .quote, .mapa{
  border-style:solid!important;border-color:transparent!important;border-width:11px!important;
  border-image-slice:24!important;border-image-width:11px!important;border-image-repeat:stretch!important;
  border-image-source:url('/fotos/bordes/tarjeta-ancha.webp')!important;
  border-radius:14px!important;box-shadow:var(--sombra-suave)!important;
}
/* ============================================================================
   ===== CARTELAS DE PAPEL (18/09, fondo B2 a toda la web) =====
   Con el fondo a opacidad 1 (antes .32), el texto suelto que antes vivía directamente sobre
   el hueco transparente de cada sección (eyebrow+h2+entradilla, notas cortas, cuerpos largos
   sin tarjetas alrededor) deja de llegar a 4.5:1 sobre el verde lima de B2. Mismo recurso que
   /bocetos/fondos/ (.clases-head-cartela): papel opaco + el MISMO trazo a lápiz real de las
   tarjetas (border-image de tarjeta-ancha.webp, no una imitación en CSS).
   .cartela-cab  -- compacta, abraza el contenido: cabecera de sección (eyebrow+h2+entradilla)
                    justo antes de una rejilla de tarjetas que YA es opaca -- agrupa los tres
                    en UNA cartela (encargo: "para que no quede un collage de cajitas"), no una
                    por elemento.
   .cartela-hoja -- ocupa el ancho de su contenedor: cuerpos de texto largos SIN tarjetas
                    alrededor (legales, ficha de evento/clase, "Qué es BiGGeR", datos de
                    contacto, formulario) -- una sola hoja de papel. */
.cartela-cab, .cartela-hoja, .clases-head, .agenda-head{
  background:var(--papel);
  border-style:solid!important;border-color:transparent!important;border-width:11px!important;
  border-image-slice:24!important;border-image-width:11px!important;border-image-repeat:stretch!important;
  border-image-source:url('/fotos/bordes/tarjeta-ancha.webp')!important;
  border-radius:14px!important;box-shadow:var(--sombra-suave)!important;
}
.cartela-cab, .clases-head, .agenda-head{display:inline-block;max-width:min(62ch,92vw);padding:26px 30px 28px;margin-bottom:8px}
.cartela-cab.centro{display:block;width:fit-content;margin:0 auto 8px;text-align:center}
/* SOLO /servicios/ (encargo Julia 22/09, v5 -- boceto real a mano en
   docs/julia/2026-09-22/boceto-servicios-julia.jpg, no el de Canva): la v3 tenía DOS fallos que
   Julia vio de inmediato -- (a) el path se dibujaba pegado al límite del viewBox (viewBox alto
   313, pero puntos de control de la curva inferior en y=343-347: el 10% de abajo caía FUERA del
   viewBox y se recortaba en seco, así que el trazo del borde inferior desaparecía del todo, no
   solo se adelgazaba); (b) la forma no seguía el contorno real del boceto. v4 corrigió las dos:
   máscara de color (crema #EFE9DE del papel vs. verde del fondo, sobre
   docs/julia/2026-09-22/boceto-servicios-julia.jpg) + contorno con OpenCV (findContours) +
   resampleado a 24 puntos equiespaciados por perímetro + spline centrípeta de Catmull-Rom a
   Bézier cúbica, normalizado a un viewBox 0 0 1000 460 con MARGEN interior (path nunca toca el
   límite del viewBox, así el trazo entero cae siempre dentro en los 4 lados).
   v5 (mismo día, revisión del coordinador sobre v4): la forma y el borde inferior ya estaban
   bien, pero el trazo doble se pintaba como UNA línea gruesa (~4px) -- v4 desplazaba el segundo
   path un vector CONSTANTE de ~2,6px con stroke-width 2,4-3, así los dos trazos gruesos se
   solapaban casi del todo. El boceto real son DOS líneas FINAS (~1,2-1,5px) con una separación
   que VARÍA a lo largo del contorno (~2 a 10px, a veces casi se tocan, a veces se abren, "dos
   pasadas de lápiz") y un filo claro/papel visible entre ambas. v5: stroke-width 1.3-1.4, y el
   segundo path ya no es un offset paralelo constante -- es el MISMO contorno rotado 0,65°,
   escalado x1,009 y trasladado (2,3, 1,4) respecto al centro de la forma (rotate_scale_
   translate en el script de generación), lo que separa las dos curvas de forma no uniforme por
   pura geometría (más separación cuanto más lejos del centro de rotación, casi nula donde el
   contorno pasa cerca de él) en vez de "a mano". Color --tinta (#2E2C27, el tinta real del
   sitio) en vez de --lapiz (#49453E) que llevaba v4 -- pedido explícito del coordinador.
   El SVG vive como fondo de la cartela (data-URI, preserveAspectRatio="none" -- estira sin más
   el rectángulo para no invertir en mantener 3 paths distintos por breakpoint; vector-
   effect="non-scaling-stroke" en los dos paths para que el trazo no engorde ni adelgace al
   estirar). border-image y border-radius se cancelan (el papel y el trazo los pone ya el SVG)
   -- el resto de cartelas de la web (Qué es BiGGeR, Comunidad, Clases, Agenda…) sigue con su
   marco de siempre, sin tocar.
   El padding generoso de v2/v3/v4 se mantiene (el contorno digitalizado no se hunde más que esas
   medidas en ningún punto): texto con >=28px de aire en los 4 lados a 1440, 768 y 375, borde
   inferior visible en las tres (comprobado en docs/capturas/julia-22sep/cartela-v4-*, mismos
   ficheros reutilizados tras el cambio de trazo de v5). */
.servicios .cartela-cab{
  border-style:none!important;border-image:none!important;background:transparent!important;
  box-shadow:none!important;border-radius:0!important;
  background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDQ2MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHBhdGggZD0iTTM5Mi4wOSAyMC4wMCBDMzU2LjY4IDIwLjQ1IDMyMS41NSAyNC43MyAyODYuMjAgMjYuNzUgQzI1MC43NSAyOC43OCAyMTMuNzcgMjUuOTEgMTc5LjY4IDMyLjE1IEMxNDYuNzIgMzguMTkgMTA5LjM3IDQ0Ljg2IDg1LjA2IDYzLjYwIEM2MS42MCA4MS42OCA0Ni42NiAxMTMuOTUgMzYuMzcgMTQyLjYxIEMyNS45NyAxNzEuNTcgMjQuNTMgMjA0Ljk5IDIyLjk4IDIzNi40NSBDMjEuNDIgMjY3Ljk4IDE5LjM0IDMwMS43NyAyNy4wMiAzMzEuNTggQzM0LjU5IDM2MC45NSA0Ni4wMCAzOTYuNTQgNjguNzMgNDEzLjk5IEM5Mi40OCA0MzIuMjMgMTMyLjg0IDQzNS4yNyAxNjYuNDYgNDM4LjY1IEMyMDEuMTMgNDQyLjE0IDIzNy44MiA0MzUuNzIgMjczLjU5IDQzNC42MCBDMzA5LjQ1IDQzMy40NyAzNDUuMzUgNDMyLjE5IDM4MS4zNCA0MzEuOTAgQzQxNy40NSA0MzEuNjAgNDUzLjkwIDQzMS43MSA0ODkuODggNDMyLjg1IEM1MjUuNTIgNDMzLjk3IDU2MC41OSA0MzcuNDYgNTk2LjIxIDQzOC42NSBDNjMyLjE1IDQzOS44NSA2NjguNjIgNDQwLjY4IDcwNC41NyA0NDAuMDAgQzc0MC4yNCA0MzkuMzMgNzc2LjQ3IDQzOS4zOSA4MTEuMDkgNDM0LjYwIEM4NDQuODAgNDI5LjkzIDg4My42NSA0MjguNDYgOTA5LjU5IDQxMS42NCBDOTM0LjQ5IDM5NS40OSA5NTIuMTggMzYzLjgwIDk2My42MyAzMzUuNjkgQzk3NS4xNSAzMDcuMzggOTc4LjI2IDI3My40NiA5NzguNTEgMjQyLjQwIEM5NzguNzYgMjExLjQ2IDk3Ny4yOSAxNzcuMjYgOTY1LjEyIDE0OS42NyBDOTUyLjg4IDEyMS45NCA5MzAuODEgOTIuOTIgOTA1LjI3IDc2LjQ0IEM4NzkuMTggNTkuNjAgODQyLjk0IDU0LjU2IDgxMC4yNCA0OS43MSBDNzc2Ljc1IDQ0Ljc1IDc0MS40MCA0OC41OCA3MDYuNzAgNDcuMDEgQzY3MS41OCA0NS40MiA2MzUuNjUgNDQuMTEgNjAwLjgwIDQwLjI2IEM1NjYuNDkgMzYuNDYgNTMzLjY1IDI3LjM5IDQ5OS4yMiAyNC4wNSBDNDY0LjA4IDIwLjY0IDQyNy42OSAxOS41NSAzOTIuMDkgMjAuMDAgWiIgZmlsbD0iI0VGRTlERSIgc3Ryb2tlPSIjMkUyQzI3IiBzdHJva2Utd2lkdGg9IjEuNCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIi8+PHBhdGggZD0iTTM5NS45NyAxOC4yOSBDMzYwLjIzIDE4LjM0IDMyNC43NCAyMi4yNSAyODkuMDUgMjMuODkgQzI1My4yNiAyNS41MyAyMTUuOTggMjIuMjEgMTgxLjUyIDI4LjEyIEMxNDguMjAgMzMuODQgMTEwLjQ0IDQwLjE0IDg1LjY5IDU4Ljc3IEM2MS44MiA3Ni43NCA0Ni4zOCAxMDkuMTMgMzUuNjcgMTM3LjkyIEMyNC44NCAxNjcuMDIgMjMuMDEgMjAwLjczIDIxLjA4IDIzMi40NSBDMTkuMTQgMjY0LjI1IDE2LjY2IDI5OC4zMSAyNC4wNyAzMjguNDcgQzMxLjM3IDM1OC4xOSA0Mi40NyAzOTQuMjMgNjUuMjEgNDEyLjEwIEM4OC45NiA0MzAuNzcgMTI5LjY1IDQzNC4zMCAxNjMuNTMgNDM4LjEwIEMxOTguNDcgNDQyLjAxIDIzNS41NiA0MzUuOTYgMjcxLjY2IDQzNS4yNCBDMzA3Ljg1IDQzNC41MSAzNDQuMDkgNDMzLjYzIDM4MC40MCA0MzMuNzQgQzQxNi44NCA0MzMuODYgNDUzLjYxIDQzNC4zOSA0ODkuOTEgNDM1Ljk0IEM1MjUuODUgNDM3LjQ4IDU2MS4xOSA0NDEuNDEgNTk3LjEyIDQ0My4wMiBDNjMzLjM2IDQ0NC42NCA2NzAuMTUgNDQ1Ljg5IDcwNi40MyA0NDUuNjIgQzc0Mi40MyA0NDUuMzUgNzc4Ljk4IDQ0NS44MiA4MTMuOTYgNDQxLjM5IEM4NDguMDMgNDM3LjA3IDg4Ny4yNCA0MzYuMDMgOTEzLjYwIDQxOS4zNSBDOTM4LjkyIDQwMy4zNCA5NTcuMTIgMzcxLjU3IDk2OS4wMCAzNDMuMzQgQzk4MC45NSAzMTQuOTIgOTg0LjQ3IDI4MC43MyA5ODUuMDggMjQ5LjM5IEM5ODUuNjggMjE4LjE3IDk4NC42MCAxODMuNjUgOTcyLjYzIDE1NS42NyBDOTYwLjYwIDEyNy41NiA5MzguNjYgOTguMDMgOTEzLjA5IDgxLjExIEM4ODYuOTYgNjMuODIgODUwLjQ0IDU4LjMyIDgxNy41MSA1My4wNSBDNzgzLjc3IDQ3LjY2IDc0OC4wNiA1MS4xMiA3MTMuMDggNDkuMTQgQzY3Ny42NyA0Ny4xNCA2NDEuNDMgNDUuNDEgNjA2LjMxIDQxLjEyIEM1NzEuNzQgMzYuODkgNTM4LjcwIDI3LjM3IDUwNC4wMSAyMy42MCBDNDY4LjU5IDE5Ljc2IDQzMS44OSAxOC4yNCAzOTUuOTcgMTguMjkgWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMkUyQzI3IiBzdHJva2Utd2lkdGg9IjEuMyIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIi8+PC9zdmc+')!important;
  background-repeat:no-repeat!important;background-size:100% 100%!important;background-position:center!important;
  padding:48px 56px 52px;
}
@media(max-width:900px){
  .servicios .cartela-cab{padding:38px 42px 42px}
}
@media(max-width:600px){
  .servicios .cartela-cab{padding:32px 30px 36px}
}
.cartela-hoja{display:block;width:100%;padding:clamp(24px,4vw,40px) clamp(22px,4vw,36px);margin-top:20px}
.cartela-hoja:first-child{margin-top:0}
/* tarjetas más cuadradas: la cápsula mediana (más redondeada) encaja mejor. .ficha-mini (la
   miniatura de /actividades/, tanda 3 16/09) se suma aquí para llevar el MISMO trazo a lápiz;
   su tamaño de borde se reduce aparte (ver .ficha-mini más abajo) porque a 120px un borde de
   10px se come casi una quinta parte de la imagen. */
.gfoto, .xplora, .ficha-mini, .insta-foto{
  border-style:solid!important;border-color:transparent!important;border-width:10px!important;
  border-image-slice:20!important;border-image-width:10px!important;border-image-repeat:stretch!important;
  border-image-source:url('/fotos/bordes/tarjeta-media.webp')!important;
  border-radius:18px!important;box-shadow:var(--sombra-suave)!important;
}
/* sobre fondo oscuro o con foto: la versión clara del mismo recorte. El mapa ya no lleva esta
   variante -- ahora es tarjeta de papel (normal), no un bloque oscuro. */
.intro-foto, .borde-lapiz-tarjeta--claro{
  border-image-source:url('/fotos/bordes/tarjeta-ancha-clara.webp')!important;
}
/* .insta-foto vive sobre el verde oscuro de #instagram: la MISMA forma cuadrada de .gfoto pero
   con el trazo CLARO (tarjeta-media-clara, no tarjeta-ancha-clara -- esa es la forma ancha de
   .intro-foto) para que el lápiz se note sobre el fondo oscuro, como en la maqueta aprobada. */
.insta-foto{border-image-source:url('/fotos/bordes/tarjeta-media-clara.webp')!important}
.serv:hover, .ev-card:hover, .gfoto:hover{box-shadow:var(--sombra-suave-hover)!important}

/* ---- BOTÓN PRINCIPAL: cápsula verde oscuro con el trazo doble CLARO de foto-1340
   (border-image real, no el filtro de turbulencia sobre un ::before) ---- */
.wa{display:inline-flex;align-items:center;gap:8px;background:var(--verde);color:var(--papel);
  font-weight:800;font-size:.9rem;padding:10px 17px;text-decoration:none;
  transition:transform .14s var(--ease)}
.wa:hover{transform:translateY(-2px)}
.wa svg{width:16px;height:16px}
.wa, .cta-wa, .reserva, .redes a, .filtro, .cookies-acciones button, .cookies-modal-acciones button,
.form-contacto button[type=submit], .mapa-placeholder .btn-mapa, .boton-contacto, .capsula-nivel{
  position:relative;box-shadow:none!important;
  border-style:solid!important;border-color:transparent!important;border-width:9px!important;
  border-image-slice:26!important;border-image-width:9px!important;border-image-repeat:stretch!important;
  border-radius:999px!important;
}
/* botón oscuro (verde): trazo claro para que se note sobre el verde oscuro */
.wa{border-image-source:url('/fotos/bordes/capsula-clara.webp')!important}
/* botones claros (ocre/papel): trazo a lápiz normal */
.cta-wa, .reserva, .redes a, .filtro, .cookies-acciones button, .cookies-modal-acciones button,
.form-contacto button[type=submit], .mapa-placeholder .btn-mapa, .boton-contacto, .capsula-nivel{
  border-image-source:url('/fotos/bordes/capsula.webp')!important;
}
/* etiqueta "60 €/mes" (.ancla): NO es un botón -- lleva el borde a lápiz de TARJETA
   (mismo mecanismo que .ficha/.ev-card), con su --sombra-suave normal y sin rotate. */

/* ---- BOTÓN SECUNDARIO: papel con borde a lápiz (reutiliza .redes a / .cookies-acciones
   button / botón "Escribir un email" de las bandas de cierre, que ya son papel+lapiz) ---- */
.boton-contacto{background:var(--papel);color:var(--tinta)}
.boton-contacto.wa{background:var(--ocre);color:var(--tinta);border-image-source:url('/fotos/bordes/capsula.webp')!important}

/* ---- CÁPSULA PEQUEÑA ("Todos los niveles") ---- */
.capsula-nivel{display:inline-block;background:var(--ocre);color:var(--tinta);font-weight:700;
  font-size:.68rem;letter-spacing:.03em;padding:.3em .85em;border-width:7px!important}
/* QA 23/09 (ronda 2): los enlaces de filtro por edad de /actividades/ son este mismo
   componente (.capsula-nivel, 36px de alto medido) -- menos de los 44px de zona pulsable.
   position:relative ya lo pone el grupo de arriba (.wa, .cta-wa... .capsula-nivel). Igual
   que en .datos a::after: un ::after invisible amplia el area sin tocar el borde a lápiz
   (border-image) ni el tamaño visible de la cápsula. También cae sobre el badge decorativo
   "Todos los niveles" (no es clicable, span suelto) -- ahí no cambia nada, solo añade una
   zona inerte sin efecto. */
.capsula-nivel::after{content:"";position:absolute;left:0;right:0;top:-19px;bottom:-19px}

/* ============================================================================
   ===== EFECTOS PROPUESTOS (a validar 18/06) — cinta · frase al scroll · tilt ===== */
/* 1. Cinta/marquee de disciplinas — CSS puro, pausa al hover, respeta reduce-motion */
.cinta{background:var(--amarillo);border-top:3px solid var(--linea);border-bottom:3px solid var(--linea);overflow:hidden;position:relative;z-index:1}
.cinta-track{display:flex;align-items:center;width:max-content;animation:cinta-scroll 34s linear infinite}
.cinta:hover .cinta-track{animation-play-state:paused}
.cinta-track b{font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,2.4vw,1.7rem);color:var(--linea);letter-spacing:-.01em;padding:13px 0;white-space:nowrap}
.cinta-track .est{width:19px;height:19px;margin:0 30px;flex:none}
@keyframes cinta-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cinta-track{animation:none;flex-wrap:wrap;justify-content:center}}
/* 2. Frase manifiesto: las palabras se encienden al entrar (la clase .lit la pone el JS; sin JS, visible) */
.manifiesto{background:var(--verde);color:var(--papel);border-top:3px solid var(--linea);border-bottom:3px solid var(--linea);position:relative;z-index:3;padding:62px 0}
.manifiesto p{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,4.4vw,3.2rem);line-height:1.05;letter-spacing:-.02em;max-width:20ch;margin:0 auto;text-align:center;text-wrap:balance}
.manifiesto .w{opacity:.22;transition:opacity .55s var(--ease)}
.manifiesto.lit .w{opacity:1}
@media(prefers-reduced-motion:reduce){.manifiesto .w{opacity:1}}
/* 3. Tilt 3D sutil en la foto del taller (reduce-motion: sin transición) */
@media(prefers-reduced-motion:reduce){.intro-foto{transition:none}}
/* A. Fotos que se "pintan" al entrar (barrido clip-path; .pintada la pone el JS; sin JS = visible) */
.pintable{clip-path:inset(0 100% 0 0);transition:clip-path .85s var(--ease)}
.pintable.pintada{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.pintable{clip-path:none;transition:none}}
/* C. Doodle estrella a mano junto a la palabra-acento -- QUITADO (Julia, 18/09: "esto es
   un chivato de IA usada, prefiero out"). El SVG vivía en contenido/textos.json
   (comunidad/servicios .titulo_html); esta regla ya no tiene nada que pintar. */
/* B. Foto-sticker de El espacio que se levanta al pasar el cursor */
.foto-panel{transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
@media(hover:hover){.foto-panel:hover{transform:rotate(0) translateY(-7px) scale(1.015);box-shadow:16px 20px 0 rgba(0,0,0,.45);z-index:2}}
@media(prefers-reduced-motion:reduce){.foto-panel{transition:none}}

/* ===== Explora / "Todo lo que puedes hacer en BiGGeR" (item 1 del encargo 16/09/2026,
   iconos definitivos de Julia: icono-clases-semanales.png) =====
   Tarjeta con borde a lápiz (.borde-lapiz-tarjeta, añadida en el HTML) y el recorte REAL
   de cada mancha+icono de icono-clases-semanales.png (site/herramientas/
   genera_iconos_explora.py), mismo tamaño visual que antes (~86px, mancha-icono abajo). */
.xgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.xplora{position:relative;display:flex;gap:22px;align-items:center;text-decoration:none;color:var(--tinta);background:var(--papel);border-radius:14px;box-shadow:var(--sombra-suave);padding:20px 44px 20px 22px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.xplora:nth-child(odd){rotate:-.6deg}
.xplora:nth-child(even){rotate:.6deg}
.xplora .xplora-tx{min-width:0}
.xplora h3{font-family:var(--texto);font-weight:700;font-size:1.05rem;line-height:1.15;margin:0 0 5px;color:var(--tinta)}
.xplora p{font-size:.92rem;line-height:1.4;color:#3C4233;margin:0}
.xplora .mancha-icono{flex:none;width:86px;height:86px;display:flex;align-items:center;justify-content:center}
.xplora .mancha-icono img{width:100%;height:100%;object-fit:contain}
.xplora .xplora-go{position:absolute;top:20px;right:18px;width:21px;height:21px;stroke:var(--boton-verde);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform .2s var(--ease),opacity .2s var(--ease)}
@media(hover:hover){.xplora:hover{transform:translateY(-5px);box-shadow:var(--sombra-suave-hover)}.xplora:hover .xplora-go{transform:translateX(4px);opacity:1}}
@media(max-width:860px){.xgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.xgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.xplora,.xplora .xplora-go{transition:none}}

/* ── cabecera SLIM de paginas internas (generada por build.py): papel entera,
   igual que el resto de la cabecera v2 — .top ya trae su propio fondo/borde. ── */
/* z-index:3 (no 1): igual que .capa en el hero de portada -- se queda por encima del fondo
   fijo (home/hero-vivo.html) pase lo que pase con SU z-index (0 desde el 16/09 tarde), y con
   su propio `background:var(--papel)` (a diferencia de .intro/.clases/etc., que ya no lo
   llevan) sigue opaca del todo -- si se queda en 1 sin fondo propio, el logo y el selector de
   idioma se leen sobre el fondo en vez de sobre papel (corrección del coordinador 16/09, 4ª
   ronda -- el motivo cambió pero la regla se mantiene). */
.hero-slim{position:relative;z-index:3;background:var(--papel);color:var(--tinta)}
.capa-slim{max-width:1500px;margin:0 auto;padding:14px 34px}
.hero-slim .top{align-items:center;border-bottom:0}
.hero-slim .rv{opacity:1;transform:none}        /* nav visible sin depender del reveal */
@media(max-width:820px){.capa-slim{padding:10px 22px}}

/* ── horario semanal de clases (home) — MATRIZ horas×dias (desktop) + tarjetas por dia (movil) ── */
/* MATRIZ (desktop): horas en la columna izquierda, dias arriba — formato cuadrado clasico.
   Rejilla con lineas suaves + eje (cabecera+horas) sombreado para que se lea como tabla. */
/* Tanda 3 paso 9 (E3): casillas con borde a lápiz fino -- el mismo --lapiz de la v2 en vez
   del rgba(38,32,26,...) suelto de la v1, para que la rejilla case con el resto de trazos. */
.horario-matriz{margin-top:26px;width:100%;border-collapse:collapse;table-layout:fixed}
.horario-matriz th,.horario-matriz td{padding:6px;border:1.5px solid color-mix(in srgb, var(--lapiz) 20%, transparent)}
.horario-matriz thead th{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:.82rem;color:var(--tinta);text-align:center;vertical-align:bottom;padding:6px 6px 10px;background:var(--papel-oscuro);border-bottom:3px solid var(--lapiz)}
.horario-matriz thead th.m-corner{font-family:var(--texto);font-size:.64rem;font-weight:700;letter-spacing:.14em;color:var(--lapiz);text-align:right;padding-right:12px}
.horario-matriz tbody th.m-hora{width:1%;white-space:nowrap;text-align:right;padding:9px 12px;font-weight:800;font-size:.82rem;color:var(--tinta);font-variant-numeric:tabular-nums;background:var(--papel-oscuro);border-right:3px solid var(--lapiz)}
.horario-matriz td{vertical-align:top;background:var(--papel)}
.horario-matriz td:empty{background:repeating-linear-gradient(135deg,transparent,transparent 9px,color-mix(in srgb, var(--lapiz) 6%, transparent) 9px,color-mix(in srgb, var(--lapiz) 6%, transparent) 10px)}
.horario-matriz td .sesion + .sesion{margin-top:8px}
.horario-matriz td .sesion b{display:block;font-family:var(--display);font-weight:800;font-size:.9rem}
.horario-matriz td .sesion .sub{display:block;font-size:.72rem;margin-top:1px;opacity:.9}
.horario-matriz .m-sep-row td{border:0;border-top:2.5px dashed var(--verde-mural);background:transparent;padding:0;height:5px}
/* TARJETAS POR DIA (movil) */
.horario{display:none}
.dia{background:var(--papel);border:3px solid var(--linea);border-radius:14px;box-shadow:5px 5px 0 var(--linea);padding:12px 11px;display:flex;flex-direction:column;gap:9px;min-width:0}
.dia>h3{margin:0 0 2px;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:.84rem;color:var(--tinta);text-align:left;padding-bottom:8px;border-bottom:2px solid var(--linea)}
/* Fallo visto en el publicado (item 7 del encargo, "cuadraditos"): borde sólido de 2px y
   esquinas casi vivas (radio 9px) -- lo que Julia llamó cuadraditos. Pasan a cápsula con el
   MISMO trazo doble a lápiz que las tarjetas (box-shadow en vez de border, ver el bloque de
   componentes reutilizables de hero-vivo.html) pero coloreado con el tono de cada actividad
   en vez de --lapiz, para conservar el código de color de un vistazo. Sin border: 2px suelto
   en ningún sitio. */
.sesion{border-radius:16px;padding:8px 10px;border:none;line-height:1.18}
.sesion .h{display:block;font-size:.72rem;font-weight:700;opacity:.85;font-variant-numeric:tabular-nums}
.sesion b{display:block;font-family:var(--display);font-weight:800;font-size:.94rem}
.sesion .sub{display:block;font-size:.74rem;margin-top:1px}
.s-pintura{background:var(--salvia-suave);color:var(--tinta);
  box-shadow:0 0 0 1.1px var(--salvia),0 0 0 2.8px var(--salvia-suave),0 0 0 3.9px color-mix(in srgb, var(--salvia) 58%, transparent)}
.s-ceramica{background:var(--terracota-suave);color:var(--tinta);
  box-shadow:0 0 0 1.1px var(--terracota),0 0 0 2.8px var(--terracota-suave),0 0 0 3.9px color-mix(in srgb, var(--terracota) 58%, transparent)}
.s-amarillo{background:var(--ocre-suave);color:var(--tinta);
  box-shadow:0 0 0 1.1px var(--ocre),0 0 0 2.8px var(--ocre-suave),0 0 0 3.9px color-mix(in srgb, var(--ocre) 58%, transparent)}
.s-puntual{background:repeating-linear-gradient(45deg,var(--papel),var(--papel) 7px,var(--papel-oscuro) 7px,var(--papel-oscuro) 14px);color:var(--tinta);
  box-shadow:0 0 0 1.1px var(--lapiz),0 0 0 2.8px var(--papel),0 0 0 3.9px color-mix(in srgb, var(--lapiz) 45%, transparent)}
.leyenda{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:20px;font-size:.86rem;color:#4A4F40}
.leyenda span{display:inline-flex;align-items:center;gap:7px}
.leyenda i{width:15px;height:15px;border-radius:4px;border:2px solid;flex:none}
.leyenda b{font-weight:700}
.coworking-nota{margin-top:14px;font-size:.96rem;color:#4A4F40}
.coworking-nota b{color:var(--verde);font-weight:800}
@media(max-width:860px){
  .horario-matriz{display:none}
  .horario{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
}
@media(max-width:520px){.horario{grid-template-columns:1fr}}

/* ── ilustracion de fondo en la ficha (Fase estetica: "nitido a sangre" + texto reforzado) ── */
.ficha-foto{overflow:hidden;background:var(--verde-mural);text-decoration:none}
.ficha-foto>*{position:relative;z-index:2}
.ficha-foto::before{content:"";position:absolute;inset:0;z-index:0;background:var(--foto) var(--pos,center 40%)/cover no-repeat;filter:blur(3px);transform:scale(1.06)}
.ficha-foto::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(251,250,243,.28),rgba(251,250,243,.22) 48%,rgba(251,250,243,.48))}
.ficha-foto .meta,.ficha-foto .meta li,.ficha-foto .meta span{font-weight:800}
.ficha-foto .precio .u{font-weight:800}
.ficha-foto .precio .suelta{color:var(--tinta);font-weight:800}
/* halo crema reforzado + TRAZO en el propio color de la letra -> glifos mas gruesos y legibles sobre el dibujo, sin difuminarlo */
.ficha-foto h3,.ficha-foto .meta,.ficha-foto .meta span,.ficha-foto .meta li,.ficha-foto .estado,.ficha-foto .precio b,.ficha-foto .precio .u,.ficha-foto .precio .suelta,.ficha-foto .edad{
  text-shadow:0 0 2px rgba(251,250,243,1),0 0 4px rgba(251,250,243,1),0 0 8px rgba(251,250,243,.98),0 0 14px rgba(251,250,243,.9),0 1px 0 rgba(251,250,243,1);
  -webkit-text-stroke:.3px currentColor;text-stroke:.3px currentColor}
/* ficha ANCHA en solitario (landings de disciplina): el dibujo va con FONDO TRANSPARENTE
   (--foto-solo) y se asienta directamente sobre el verde de la tarjeta -> sin costura ni mascara.
   Texto a la izquierda, dibujo a la derecha. */
@media(min-width:761px){
  .fichas.solo .ficha-foto>*{max-width:min(560px,58%)}
  .fichas.solo .ficha-foto::before{background-image:var(--foto-solo,var(--foto));
    background-size:auto 132%;background-position:right 4% center;background-repeat:no-repeat;
    filter:none;transform:none}
  /* velo crema SOLO a la izquierda, para que lea el texto; se apaga antes de llegar al dibujo */
  .fichas.solo .ficha-foto::after{background:linear-gradient(90deg,rgba(251,250,243,.92) 0%,rgba(251,250,243,.62) 28%,rgba(251,250,243,.14) 50%,rgba(251,250,243,0) 66%)}
}

/* ── «Taller Abierto» + tabla «Alquiler de horno» (arreglo SEO 23/09, B-3): misma cartela de
   papel que el resto de .ev-cuerpo, tabla sencilla con los mismos tokens que .horario-matriz
   (--papel/--papel-oscuro/--lapiz/--tinta) -- sin CSS ni color nuevo. ── */
.tabla-horno-wrap{margin-top:6px;overflow-x:auto}
.tabla-horno{width:100%;border-collapse:collapse;margin-top:4px;font-size:.96rem}
.tabla-horno th,.tabla-horno td{padding:8px 12px;border:1.5px solid color-mix(in srgb, var(--lapiz) 25%, transparent);text-align:left}
.tabla-horno thead th{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:.78rem;color:var(--tinta);background:var(--papel-oscuro);border-bottom:3px solid var(--lapiz)}
.tabla-horno tbody td{background:var(--papel);color:var(--tinta)}
.tabla-horno .c-precio{font-weight:800;text-align:right;white-space:nowrap}
.tabla-horno-nota{font-size:.86rem;color:var(--lapiz);margin:4px 0 10px}
@media(max-width:480px){.tabla-horno{font-size:.88rem}.tabla-horno th,.tabla-horno td{padding:7px 8px}}

/* ===== EVENTOS — listado (tarjetas miniatura+descripcion, como la web de Julia) ===== */
/* Julia (18/09): "hay que intentar que se diferencien más" -- Próximos/Ya realizados pasaban
   desapercibidos (1.5rem normal, línea final al 22% de opacidad). MAYÚSCULAS grandes con la
   misma tipografía de título del sitio; el trazo fino en línea se sustituye por un divisor de
   ancho completo antes de "Ya realizados" (ver .ev-realizados-sep::before más abajo). */
.ev-seccion-h{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.15rem);
  letter-spacing:.02em;text-transform:uppercase;color:var(--tinta);margin:42px 0 0}
.ev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.ev-card{display:flex;flex-direction:column;background:var(--papel);border:3px solid var(--linea);border-radius:16px;box-shadow:6px 7px 0 var(--linea);overflow:hidden;text-decoration:none;color:var(--tinta);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
/* el marco a lápiz ya lo pone .ev-card entera (border-image, ver hero-vivo.html) --
   aquí solo un trazo fino de separación entre el cartel y el cuerpo, nunca un borde duro. */
.ev-thumb{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--verde-mural);border-bottom:1.5px solid color-mix(in srgb, var(--linea) 35%, transparent)}
/* la mayoría de carteles de evento son verticales (~0.7-0.8) contra una tarjeta apaisada:
   object-position hacia arriba para no recortar el título, que casi siempre va arriba del
   cartel (arreglo QA 16/09, "Monográfico: pantalla de lámpara" en Próximos a 1440px). */
.ev-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
/* evento sin foto real: icono de Julia (fotos/explora/) centrado sobre papel, nunca recortado
   a lo bestia como un cartel -- misma idea que .ev-portada.ilustra pero para la tarjeta. */
.ev-thumb.ilustra{background:var(--papel-oscuro)}
.ev-thumb.ilustra img{object-fit:contain;object-position:center;padding:13%}
.ev-badge{position:absolute;top:10px;left:10px;background:var(--tinta);color:var(--papel);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 10px;border-radius:20px}
.ev-card-body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
/* la fecha nunca se corta: si la etiqueta + la fecha no caben en una fila (tarjetas
   estrechas de la rejilla de 4 columnas, "Ya realizados"), la fecha baja a su propia
   línea bajo la cápsula -- sin text-overflow ni recortarla. */
.ev-card-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 10px}
.ev-tag{font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;padding:3px 10px;border-radius:20px;border:2px solid;white-space:nowrap}
.ev-tag.c-amarillo{background:var(--ocre-suave);border-color:var(--ocre);color:var(--tinta)}
.ev-tag.c-lima{background:var(--salvia-suave);border-color:var(--salvia);color:var(--tinta)}
.ev-tag.c-verde{background:var(--verde);border-color:var(--verde);color:var(--papel)}
.ev-tag.c-marron{background:var(--terracota-suave);border-color:var(--terracota);color:var(--tinta)}
/* "la fecha en letra a mano" (spec paso 9/E4): la manuscrita, como el resto de fechas
   y notas escritas a mano del sitio -- nunca la fuente de texto para esto. */
.ev-fecha{font-family:var(--mano);font-weight:700;font-size:1rem;color:var(--linea);white-space:nowrap}
.ev-card h3{font-family:var(--display);font-weight:800;font-size:1.26rem;line-height:1.04;margin:3px 0 0;color:var(--tinta)}
.ev-card p{font-size:.94rem;line-height:1.4;color:#3C4233;margin:0}
.ev-mas{margin-top:auto;padding-top:4px;font-weight:800;color:var(--verde);font-size:.9rem}
.ev-card.pasado .ev-thumb img{filter:saturate(.92)}
.ev-card[hidden]{display:none!important}
.ev-filtro-vacio[hidden]{display:none!important}
@media(hover:hover){.ev-card:hover{transform:translateY(-5px)}}
@media(max-width:900px){.ev-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.ev-grid{grid-template-columns:1fr}}
@media(min-width:1201px){.ev-grid:not(.ev-grid-grande){grid-template-columns:repeat(4,1fr)}}
/* ── «Próximos» bien grande: carteles más grandes, 2 columnas en escritorio, 1 en el móvil (Julia, 12/09) ── */
.ev-seccion-h.ev-grande{font-size:clamp(2.1rem,4.6vw,2.9rem);margin-top:24px}
.ev-grid.ev-grid-grande{grid-template-columns:repeat(2,1fr);gap:30px}
.ev-grid.ev-grid-grande .ev-thumb{aspect-ratio:16/10}
.ev-grid.ev-grid-grande .ev-card h3{font-size:1.5rem}
.ev-grid.ev-grid-grande .ev-card p{font-size:1rem}
@media(max-width:900px){.ev-grid.ev-grid-grande{grid-template-columns:1fr}}
/* ── «Ya realizados»: Julia (18/09, 3º encargo): «esto pasa muy desapercibido, hay que
   intentar que se diferencien más... más espacio, un divisor y mayúsculas grandes» -- mucho
   más aire antes del apartado (64px→104px) + un divisor a lápiz de ANCHO COMPLETO y bien
   visible sobre el verde (el mismo trazo ondulado a mano de .voces::after de las reseñas,
   estirado al 100% del ancho y con más grosor/opacidad para leerse claro), en vez del
   border-top recto y al 40% de opacidad de antes. */
.ev-realizados-sep{margin-top:104px;padding-top:46px;position:relative}
.ev-realizados-sep::before{content:"";position:absolute;top:0;left:0;right:0;height:18px;
  background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%2018%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%209%20Q%2076%201%20150%209%20T%20300%209%20T%20450%209%20T%20598%209%22%20fill%3D%22none%22%20stroke%3D%22%2349453E%22%20stroke-width%3D%222.2%22%2F%3E%3C%2Fsvg%3E');
  background-repeat:no-repeat;background-size:100% 100%;opacity:.75}
.ev-realizados-sep .ev-seccion-h{margin-top:0}
/* ===== FICHA individual (clase o evento, mismo formato: foto/cartel a lápiz a la izquierda,
   nombre+cápsula+datos+precio+botón a la derecha) — estética v2, docs/bocetos/estetica-v2/.
   El marco a lápiz y la sombra suave de .ev-figura/.ev-galeria figure los pone el bloque de
   COMPONENTES REUTILIZABLES v2 de hero-vivo.html (mismo selector que .ficha/.ev-card...);
   aquí solo queda la geometría y el color de relleno cuando aún no hay foto. ===== */
.ev-portada{display:grid;grid-template-columns:1.02fr .98fr;gap:36px;align-items:center}
.ev-figura{margin:0;border-radius:18px;overflow:hidden;background:var(--papel-oscuro);aspect-ratio:4/5}
.ev-figura img{width:100%;height:100%;object-fit:cover;display:block}
.ev-portada.ilustra .ev-figura{aspect-ratio:1/1}
.ev-portada.ilustra .ev-figura img{object-fit:contain;padding:7%}
.ev-portada .ev-meta{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:9px}
.ev-portada .ev-meta li{display:flex;align-items:center;gap:10px;font-size:1rem;color:var(--tinta)}
.ev-portada .ev-meta svg{width:21px;height:21px;flex:none;color:var(--lapiz)}
.ev-titulo{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.1rem);line-height:1;letter-spacing:-.02em;color:var(--tinta);margin:8px 0 4px}
.ev-cuando{font-weight:800;color:var(--verde);font-size:1.08rem;margin:0 0 6px}
.ev-precio-grande{font-family:var(--texto);font-weight:700;font-size:clamp(1.8rem,3vw,2.2rem);color:var(--tinta);margin:16px 0 2px}
/* ficha propia de CLASE (clase_detail, contenido_web.py _precio_html): el div lleva las dos
   clases "precio ev-precio-grande" -- .ev-precio-grande solo pone la tipografia grande del
   precio; sin esto, "<b>75 €</b><span class=u>/mes</span><span class=suelta>clase suelta...
   </span>" salian todos en línea corrida y sin espacio ("75 €/mesclase suelta 30 €..."),
   porque el flex real vive en ".ficha-precio .precio" (hero-vivo.html) y esta ficha no tiene
   ese ancestro .ficha-precio. Solo afecta aqui (selector con las dos clases): la ficha de
   EVENTO usa .ev-precio-grande sola, con texto plano, y sigue igual. */
.ev-precio-grande.precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px}
.ev-precio-grande.precio .u{font-family:var(--texto);font-weight:600;font-size:.74rem;color:var(--lapiz)}
.ev-precio-grande.precio .suelta{flex:0 0 100%;display:block;font-family:var(--texto);
  font-weight:400;font-size:.78rem;color:var(--lapiz);line-height:1.28;margin-top:6px}
.ev-cta{margin-top:18px}
.ev-cuerpo{max-width:740px;margin-top:36px}
.ev-cuerpo .lead{font-size:1.08rem}
.ev-bloque-h{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--tinta);margin:30px 0 12px}
/* ── festivos y colonias (contenido/festivos.json): fila etiqueta + lista en linea,
   cada fecha/mes es un bloque que no se parte entre lineas (Julia, 12/09) ── */
/* Festivos y colonias (E3, 16/09): cada fecha en cápsula -- festivos en ocre, colonias en
   terracota (docs/tanda3/SPEC-paso9-estetica-secciones.md: "cápsulas de fecha en ocre y
   terracota"), en vez de la lista con "·" plana de antes. */
.festivos-fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:18px 0 0;font-size:1rem}
.festivos-fila+.festivos-fila{margin-top:16px}
.festivos-fila>b{flex:none;font-family:var(--mano);font-weight:400;font-size:1.2rem;color:var(--tinta)}
.festivos-lista{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
/* borde a lápiz (--lapiz) en vez de un borde del mismo tono que el relleno: éste último
   daba solo 1,6:1 en la cápsula ocre (por debajo del 3:1 de WCAG 1.4.11 para contornos de
   componente); --lapiz da >7:1 contra los dos rellenos y además encaja con el resto del
   lenguaje a lápiz de la web. */
.festivos-lista li{white-space:nowrap;font-weight:700;font-size:.86rem;padding:.4em 1em;border-radius:999px;border:1.5px solid var(--lapiz);color:var(--tinta)}
.festivos-fila--festivos .festivos-lista li{background:var(--ocre-suave)}
.festivos-fila--colonias .festivos-lista li{background:var(--terracota-suave)}
@media(max-width:600px){
  .festivos-fila{flex-direction:column;align-items:flex-start;gap:8px}
}
.ev-incluye{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ev-incluye li{position:relative;padding-left:26px;font-size:1.02rem;line-height:1.42;color:var(--tinta)}
.ev-incluye li::before{content:"";position:absolute;left:2px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--ocre);border:2px solid var(--lapiz)}
.ev-galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.ev-galeria figure{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:1/1;background:var(--papel-oscuro)}
.ev-galeria img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:760px){.ev-portada{grid-template-columns:1fr;gap:22px}.ev-galeria{grid-template-columns:repeat(2,1fr)}}
/* ── galeria de "Nuestro espacio en fotos" en /estudio-creativo-bilbao/: rejilla PLANA
   (sin el tilt 3D de .gal3d, que ahi dejaba un hueco grande bajo el titulo). Reusa .gfoto
   (bordes, esquinas, rotacion) tal cual; la de "Comunidad" en portada sigue con .gal3d. ── */
.gal-plana{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
@media(max-width:900px){.gal-plana{grid-template-columns:1fr 1fr}}
/* ── /estudio-creativo-bilbao/ (#que-es-cuerpo), revision 16/09: letra diminuta (~13px)
   e igualada a /actividades/ -- los <div class="lead"> de los bloques foto+texto no
   cuadraban con el selector ".intro p.lead" (solo <p>), asi que no llevaban NINGUNA
   regla de tamaño y caian al cuerpo por defecto. Los subtitulos de bloque compartian
   .ev-bloque-h con las fichas de evento (1.4rem, pensado para "Qué incluye"), sin
   jerarquia frente al texto. Aqui: texto 17px/1440 (16px movil, interlineado 1.6,
   columna a ~60 caracteres), subtitulos de bloque ~30px con la letra de titulos
   (misma .ev-bloque-h, solo mas grande), y el titulo de seccion "Nuestro espacio —
   Descubre BiGGeR por dentro" al tamaño de h2 que ya usa /actividades/ en "Horario
   semanal de clases" (clamp 1.8rem-3rem) en vez del h3 de ficha -- con mas ancho
   (34ch) para que quepa en 1-2 lineas, no en tres. */
#que-es-cuerpo .lead{font-size:1.0625rem;line-height:1.6;color:#4A4F40;max-width:60ch}
#que-es-cuerpo h3.ev-bloque-h{font-size:clamp(1.5rem,2.4vw,1.9rem)}
#que-es-cuerpo h2.ev-bloque-h{font-size:clamp(1.8rem,4vw,3rem);max-width:34ch}
@media(max-width:600px){
  #que-es-cuerpo .lead{font-size:1rem}
}