/*
 * AFA Escola El Cim — tokens de marca v4
 *
 * Comunes a las CUATRO paletas. Lo que cambia entre ellas vive en
 * `styles/5x.json`, que son variaciones de estilo de WordPress: la junta las
 * elige desde Editor del sitio → Estilos y la web cambia entera sin tocar código.
 *
 * NINGÚN COLOR FUERA DE ESTA LISTA. Los dos «derivados» existen solo por
 * contraste y no son colores nuevos de la marca.
 *
 * Los ratios anotados aquí están MEDIDOS, no copiados. La primera versión del
 * paquete decía 4,6:1 para el naranja de texto y eran 4,13 sobre crema — por
 * debajo de AA— y ese número estaba en el comentario mientras el valor ya era
 * otro. Un comentario que miente es peor que ninguno.
 */

:root {
  /* --- marca --- */
  --afa-taronja:      #E07B00;  /* color principal del manual */
  --afa-oliva:        #6B7D5A;  /* verd de la branca */
  --afa-verd-clar:    #A8BEA1;  /* fulles */
  --afa-crema:        #EDE7DB;  /* fons de marca */
  --afa-negre:        #1A1A1A;  /* tinta */

  /*
   * --- derivados (solo contraste) ---
   *
   * `--afa-taronja-text`: 4,70 sobre crema · 5,31 sobre crema claro · 5,78
   * sobre blanco. Un solo derivado válido sobre los tres fondos claros, así que
   * no hace falta ninguna regla condicional.
   *
   * `--afa-oliva-fosc`: 7,61 sobre crema · 9,37 sobre blanco, y además es la
   * tinta de las bandas llenas. `--afa-oliva` NO se usa para texto por debajo
   * de 24px: sobre crema da 3,62 y sobre blanco 4,46, las dos por debajo de 4,5.
   */
  --afa-taronja-text: #9B5300;
  --afa-oliva-fosc:   #3F4A34;

  /* --- neutros de apoyo --- */
  --afa-blanc:        #FFFFFF;
  --afa-crema-clar:   #F8F5EF;
  /*
   * El crema FOSC sobre el qual flota la composició. A les maquetes de Design
   * és el fons del `body` i la portada hi va a sobre com una targeta amb vora i
   * cantonades arrodonides. Ho vaig descartar com «el fons de la mesa de qui
   * mira la maqueta» i no ho era: la targeta forma part del disseny, i sense
   * ella la pàgina no s'acaba per cap costat.
   */
  /*
   * ── EL TAULER, DOS PASSOS MÉS FOSC (05-10-2026) ──────────────────────
   *
   * Era `#E4DED2` i amb l'amplada de pantalla d'en David a penes es
   * distingia del paper: 1,088 de contrast, o sigui un marc que no es
   * llegia com a marc. Amb `#D3C9B5` són **1,333** contra el contingut i
   * 1,642 contra el blanc de les seccions.
   *
   * ES VA PROVAR AL NAVEGADOR ABANS, i no es va triar pel número: es van
   * mirar cinc tons a la pantalla real i es va mesurar després.
   *
   * ── PER QUÈ NO `--afa-vora` (#DCD3C2), QUE ERA EL PAS DE MÉS AVALL ───
   *
   * Perquè aquell valor JA és el color de les línies i els filets d'aquest
   * tema. Si el tauler fos exactament el color de la vora del marc, el cant
   * deixaria de llegir-se com a cant: s'arreglaria el fons trencant el
   * filet. Un número que surt bé no sempre és un color que es pot fer
   * servir.
   *
   * I no s'hi posa text mai a sobre, així que aquí no hi ha cap sòl de
   * WCAG: l'única porta és que el tauler no pugui ser més clar que la
   * pàgina, i la comprova `bin/contrast.php`.
   */
  --afa-taula:        #D3C9B5;
  --afa-vora:         #DCD3C2;
  --afa-vora-clara:   #ECE6DA;
  --afa-tinta-2:      #5E6152;  /* 5,16 sobre crema · 6,35 sobre blanco */
  --afa-tinta-3:      #6B6558;  /* metadatos: 4,70 sobre crema */

  /* --- tipografía --- */
  --afa-font:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --afa-font-ma: 'Caveat', cursive;

  /*
   * ── LA ESCALA SALE DE LAS MAQUETAS, NO DEL TOKEN DEL PAQUETE ──────────
   *
   * El paquete de diseño se contradice a sí mismo: `tokens-base.css` declara
   * `clamp(34px, 5vw, 54px)` y 1180px de ancho, y **las diez maquetas están
   * dibujadas a 940px con el titular a 42px**. Implementando los tokens, la web
   * salía un 25 % más ancha y con el titular un 29 % más grande que lo que la
   * junta está mirando para decidir.
   *
   * Mandan las maquetas, por dos motivos. Uno: es lo que la junta aprueba, y una
   * web que no se parece a lo aprobado es una discusión garantizada. Dos: 1180px
   * de texto a 15px son unas 110 letras por línea, casi el doble de lo que se
   * lee cómodo.
   *
   * Y son DOS valores en un solo fichero, así que volver atrás es una línea. Si
   * algún día el paquete resuelve su propia contradicción hacia el otro lado, se
   * cambian aquí y la web entera va detrás.
   */
  --afa-t-display: clamp(30px, 3.3vw, 42px);
  --afa-t-h2:      clamp(24px, 3vw, 34px);
  --afa-t-h3:      20px;
  --afa-t-cos:     15px;
  --afa-t-petit:   13px;
  --afa-t-meta:    12px;
  --afa-t-etiqueta: 11px;   /* + letter-spacing .16em + mayúsculas */

  /* --- forma y espacio --- */
  --afa-r-gran:  20px;
  --afa-r-carta: 16px;
  --afa-r-petit: 8px;
  --afa-r-pill:  999px;
  --afa-gap:     16px;
  --afa-seccio:  clamp(40px, 6vw, 72px);
  --afa-marge:   clamp(20px, 4vw, 44px);
  /*
   * L'AMPLADA DE TOT EL LLOC SURT D'AQUÍ, I NOMÉS D'AQUÍ.
   *
   * Eren 940px, els de les maquetes. David ho va trobar «muy mini» el 20 de
   * setembre de 2026 i va demanar més amplitud. Es va mesurar en un navegador
   * de debò a cinc passos i es va triar aquest.
   *
   * ── EL QUE NO CANVIA, QUE ERA LA SEVA CONDICIÓ ─────────────────────────
   *
   * Les proporcions internes es conserven SOLES: el taulell és `1.92fr / 1fr`,
   * així que el repartiment 617/321 surt del mateix número a qualsevol
   * amplada — a 1128 són 740/386, i la raó segueix essent 1,920 exacta.
   * I el canaló es queda a 24px, o sigui que la SEPARACIÓ tampoc no es mou.
   *
   * ── I ON ES TRENCA, QUE ÉS EL QUE VA DECIDIR ──────────────────────────
   *
   * Cada pas necessita una finestra de token + 40. Amb 1128 en calen 1168, o
   * sigui que entra sencer a qualsevol portàtil. El pas següent (1222) també
   * hi cabria, però deixa la línia de text de les pàgines interiors en 140
   * caràcters, i el còmode són 65-75.
   *
   * **Compte amb el que ve després:** l'entradeta d'/extraescolars/ ja mesura
   * 106 caràcters A 940. Eixamplar no ho espatlla —ja estava passat— però si
   * algun dia es puja més, el que toca abans no és aquest número: és posar un
   * sostre de mesura a la columna de text de les interiors.
   */
  --afa-ample:   1128px;   /* 940 fins al 20/09/2026; el del paquet deia 1180 */

  /*
   * --- LO QUE CADA PALETA REDEFINE, Y POR QUÉ ESTÁ AQUÍ ---
   *
   * Las cuatro no se diferencian solo en tonos: 5B no tiene tarjetas, 5C monta
   * las suyas sobre la banda verde con la única sombra del proyecto, y 5E lleva
   * el botón casi recto y reglas negras entre secciones.
   *
   * Declarar aquí los valores por defecto es lo que permite que una variación
   * cambie el ASPECTO sin reescribir la estructura. Lo que no se puede resolver
   * con un token —que los servicios sean tarjetas o filas— va en el bloque `css`
   * de cada variación, que es el único sitio donde las cuatro divergen de verdad.
   */
  /*
   * El color de l'etiqueta de secció. TÉ VALOR PER DEFECTE, i fa falta: sense
   * cap variació activa —el tema acabat d'activar, o l'editor mentre carrega—
   * les etiquetes es quedaven sense color i queien al que heretessin. Una
   * variable declarada només a les variacions és una variable que a vegades no
   * hi és.
   *
   * L'oliva fosc i no l'oliva: a 11px, `--afa-oliva` dona 3,62 sobre crema i
   * demana 4,5. 5E el canvia pel taronja de text, que dona 4,70.
   */
  --afa-etiqueta:      var(--afa-oliva-fosc);
  --afa-r-boto:        var(--afa-r-pill);  /* 5E: 4px */
  --afa-targeta-fons:  var(--afa-blanc);   /* 5B y 5E: transparent */
  --afa-targeta-vora:  1px solid var(--afa-vora);
  --afa-targeta-radi:  var(--afa-r-carta);
  --afa-targeta-coixi: 22px;
  --afa-targeta-ombra: none;               /* 5C: la única del proyecto */
  --afa-regla:         1px solid var(--afa-vora-clara);  /* 5E: negra */
  --afa-muntatge:      0;                  /* 5C: -56px (-46 en móvil) */

  /* --- movimiento --- */
  --afa-corba: cubic-bezier(.16, .8, .24, 1);
  --afa-dur:   .8s;

  /*
   * LA OTRA CURVA, Y NO ES UNA VARIANTE ESTÉTICA.
   *
   * `--afa-corba` está hecha para el revelado, que dura 0,8 s. Medida en el
   * despliegue del dock —fotograma a fotograma, en `marc.css` §4— a los 20 ms
   * ya había recorrido el 68 % del camino: para una superficie que crece o se
   * pliega en un cuarto de segundo, eso es un salto con cola, que es justo lo
   * que se venía a quitar.
   *
   * Esta reparte el movimiento (13 % · 42 % · 86 % · 98 %) y es la de cualquier
   * superficie que cambia de tamaño. Vive aquí porque ya la necesitan dos: el
   * dock y el plegado de las bandas del marco.
   */
  --afa-corba-superficie: cubic-bezier(.4, 0, .2, 1);
}

/*
 * `border-box` PARA TODO, y no es higiene genérica: es un fallo medido.
 *
 * Los dos botones del hero se salían 30 px de una pantalla de 375. La
 * aritmética lo canta: el contenedor mide 335, el botón lleva `width: 100%` y
 * `padding: 0 24px`, y con `content-box` eso son 335 + 48 = **383**. Con
 * `border-box` el relleno cae dentro y son 335.
 *
 * Este proyecto ya lo tiene anotado para los campos de formulario de WordPress
 * —«con `width:100%` más relleno y borde se salen de la pantalla en móvil»— y
 * ha vuelto a morder en los botones. Ponerlo una vez arriba es más barato que
 * acordarse en cada componente, y sobre todo: el olvido cae del lado seguro.
 *
 * `inherit` en los pseudoelementos y no `border-box` a secas, que es la forma
 * que no rompe una librería de terceros si algún día entra alguna.
 */
*, *::before, *::after { box-sizing: border-box; }

/*
 * La ÚNICA animación del sitio: la entrada al desplazarse.
 *
 * Y una lección que costó dos capturas inservibles en el paquete de diseño: con
 * `opacity: 0` de partida, cualquier cosa que renderice la página sin ejecutar
 * el observador —una captura automática, un lector que no ejecuta JS, un
 * rastreador— se encuentra media página en blanco. Por eso el respaldo de
 * abajo: si el JavaScript no llega a marcar `.is-in`, a los 3 segundos se
 * enciende igual.
 */
/*
 * SE LLAMA `.afa-reveal` Y NO `[data-reveal]`, y el nombre no es indiferente.
 *
 * El paquete de diseño propone `[data-reveal]` + `.is-in`. Pero `assets/js/reveal.js`
 * y los siete bloques dinámicos de `inc/blocs.php` —que vienen del tema v3 y
 * funcionan— emiten `.afa-reveal` y marcan `.es-veu`. Escribí la hoja con los
 * nombres del paquete y el resultado fue que **no coincidía ninguno de los dos
 * lados**: la animación no se aplicaba a nada y nada la encendía.
 *
 * Gana el nombre que ya está emitido, por dos motivos. Uno: cambiar el JS y los
 * bloques es tocar código que funciona para renombrar una clase. Dos, y decide:
 * desde una plantilla de bloques **no se le puede poner un atributo `data-*` a un
 * bloque del núcleo**, así que `data-reveal` obligaría a envolver cada sección en
 * un `wp:html` propio.
 *
 * Dos nombres para una cosa es el fallo que este proyecto tiene anotado como «la
 * cara B». Aquí hay uno.
 */
.afa-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--afa-dur) var(--afa-corba), transform var(--afa-dur) var(--afa-corba);
}
.afa-reveal.es-veu { opacity: 1; transform: none; }

/* Sin JavaScript no hay nada que revelar: se ve y ya está. */
.no-js .afa-reveal { opacity: 1; transform: none; }

/*
 * ── DOS CASOS MÁS EN QUE NO SE PUEDE ESCONDER NADA ──────────────────────
 *
 * El revelado es decoración, pero es LO QUE HACE VISIBLE la página: todo nace
 * en `opacity: 0` y solo aparece si algo lo enciende. `reveal.js` ya cubre tres
 * casos (sin JavaScript, sin IntersectionObserver, y el observador que no
 * dispara nunca). Faltaban estos dos, y los dos se han visto:
 *
 * 1. EL LIENZO DEL EDITOR. WordPress carga las hojas del tema dentro del
 *    iframe del editor pero NO los scripts del frontal, y ese documento tampoco
 *    lleva la clase `no-js`. Resultado: David abría la portada en el editor y
 *    veía un rectángulo vacío — el contenido estaba, invisible. Lo que se edita
 *    no se puede animar: aquí no hay scroll que revele nada.
 *
 * 2. QUE `reveal.js` NO LLEGUE. El script que quita `no-js` es EN LÍNEA y corre
 *    siempre; `reveal.js` va diferido y al pie. Entre los dos hay un hueco: con
 *    JavaScript activado y un despliegue a medias, `no-js` desaparece, el
 *    revelado no llega nunca y el sitio entero se queda **en blanco con el
 *    contenido dentro**. El propio script en línea se pone ahora un plazo.
 */
.editor-styles-wrapper .afa-reveal,
.afa-revela-tot .afa-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .afa-reveal { opacity: 1; transform: none; transition: none; }
}