/* Propuesta E · Postal — la heredera de Matasellos, con menos ruido.
   La gramática es la del reverso de una postal: cartulina clara, filetes finos, la línea divisoria
   vertical, renglones para la dirección y el recuadro del sello arriba a la derecha.
   Dos tintas: el rojo óxido del sello grabado (logo, ilustración, números, botones) y, muy de vez en
   cuando, el azul de un matasellos (el de la portada, el del código y la letra de los sobres).
   Lo que se conserva de la B porque gustó: serifa + Figtree, matasellos circulares como números
   y líneas onduladas de franqueo como separadores. Lo que se quita: rotaciones, rayas de correo aéreo,
   mostaza y salvia. Borde dentado solo en el sello de la portada.
   Títulos en Literata regular: Young Serif solo tiene un peso, que se lee como negrita (informe 3);
   se queda en los números de matasellos y en la letra de los sobres. */

:root {
  --rojo: #A33B22;
  --rojo-osc: #84301B;
  --azul: #2E4A86;
  --tinta: #2B211B;
  --tinta-2: #5B4A3E;
  --papel: #F3ECDD;
  --papel-2: #ECE3D0;
  --sello-papel: #FBF6EC;
  --sobre-papel: #FDF9F1;
  --linea: rgba(43, 33, 27, .22);
  --linea-fuerte: rgba(43, 33, 27, .5);
  --marca-fondo: var(--papel);

  --f-titulo: "Literata", Georgia, serif;
  --f-numero: "Young Serif", Georgia, serif;
  --f-texto: "Figtree", system-ui, sans-serif;
  --f-mono: "DM Mono", ui-monospace, monospace;
  --f-mano: "Young Serif", Georgia, serif;

  --ancho: 1180px;
  --marca-tam: 52px;
  --icono-tam: 108px;
  --icono-trazo: 1;

  --ondas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='26' viewBox='0 0 40 26'%3E%3Cpath d='M0 6 q5 -4.5 10 0 t10 0 t10 0 t10 0 M0 13 q5 -4.5 10 0 t10 0 t10 0 t10 0 M0 20 q5 -4.5 10 0 t10 0 t10 0 t10 0' fill='none' stroke='%23A33B22' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  --ondas-tinta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 6 q5 -4.5 10 0 t10 0 t10 0 t10 0' fill='none' stroke='%232B211B' stroke-opacity='.45' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body { background: var(--papel) var(--grano); color: var(--tinta); font: 400 1.0625rem/1.62 var(--f-texto); }
::selection { background: var(--rojo); color: var(--sobre-papel); }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 400; color: var(--tinta); line-height: 1.08; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.3rem); letter-spacing: -.018em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); letter-spacing: -.01em; }
h3 { font-size: 1.32rem; }
.seccion-entrada, .hero-entrada { font-size: 1.16rem; color: var(--tinta-2); }

/* Etiquetas de impreso de correos: Figtree en versalitas espaciadas. */
.kicker, .chip, figcaption, .sobre-etq, .libreria-ruta, .enlace-flecha, .compromiso h3, .decalogo-cambio a {
  font-family: var(--f-texto); font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
}
.kicker { font-size: .74rem; color: var(--rojo); display: inline-flex; align-items: center; gap: .7rem; }
.kicker::before { content: ""; width: 30px; height: 12px; background: var(--ondas-tinta) repeat-x left center / 20px 6px; filter: none; opacity: .9; }

.btn { background: var(--rojo); color: var(--sobre-papel); font: 600 .95rem var(--f-texto); letter-spacing: .02em; border-radius: 2px; }
.btn:hover { background: var(--rojo-osc); }
.btn:active { transform: translateY(1px); }
.btn--sec { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.btn--sec:hover { background: var(--tinta); color: var(--sobre-papel); }
.btn--pronto, .btn--pronto:hover { background: transparent; color: var(--tinta-2); box-shadow: none; border: 1px dashed var(--linea-fuerte); }
.enlace-flecha { font-size: .76rem; color: var(--rojo); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.chip { font-size: .66rem; padding: .18rem .55rem; border: 1px solid var(--linea-fuerte); border-radius: 2px; color: var(--tinta-2); }
.pin-num {
  width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--sello-papel); color: var(--rojo);
  font: 400 .95rem/1 var(--f-numero); border: 1.5px solid var(--rojo); box-shadow: inset 0 0 0 2.5px var(--sello-papel), inset 0 0 0 3.5px var(--rojo);
}
.aviso { margin-top: 1.4rem; padding: .8rem 1rem; max-width: 62ch; font-size: .95rem; background: var(--sello-papel); border: 1px solid var(--linea-fuerte); color: var(--tinta-2); }
.aviso strong { color: var(--rojo); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .78em; margin-right: .3rem; }

/* Cabecera: un filete fino y la marca en rojo. */
.cab { border-bottom: 1px solid var(--linea); }
.cab-marca { color: var(--rojo); }
.nombre-fw { font: 600 .92rem/1.15 var(--f-texto); color: var(--tinta); }
.cab-nav a { font-size: .92rem; font-weight: 500; color: var(--tinta); padding: .3rem 0; border-bottom: 1px solid transparent; }
.cab-nav a:hover, .cab-nav a[aria-current] { color: var(--rojo); border-color: currentColor; }
.cab-idioma a { font-size: .78rem; letter-spacing: .08em; color: var(--tinta-2); }

/* Portada: texto a la izquierda, el sello grabado a la derecha. */
@media (min-width: 861px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hero h1 { max-width: 13ch; }
.hero-ilus { max-width: 540px; justify-self: end; width: 100%; }

/* Títulos de sección: el número es un matasellos y un filete fino llega hasta el margen (sin ondas: informe 1). */
.titulo-seccion { align-items: center; gap: 1.1rem; }
.titulo-seccion::after { content: ""; flex: 1 1 3rem; min-width: 2rem; height: 1px; background: var(--linea-fuerte); }
.num-seccion {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  width: 3.7rem; height: 3.7rem; border-radius: 50%; color: var(--rojo); font: 400 1.15rem/1 var(--f-numero);
  border: 1.5px solid var(--rojo); box-shadow: inset 0 0 0 4px var(--papel), inset 0 0 0 5px var(--rojo);
}
.num-seccion::before { content: "Nº"; font: 600 .52rem var(--f-texto); letter-spacing: .14em; }

/* Ilustraciones: grabado a una tinta (la tinta del texto). */
.icono { color: var(--tinta); }

.ideas-lista { gap: 0; }
.idea { padding: 0 1.8rem; border-left: 1px solid var(--linea); }
.idea:first-child { padding-left: 0; border-left: 0; }
.idea h3 { margin-top: .4rem; }
.idea p { color: var(--tinta-2); }
@media (max-width: 780px) { .idea { padding: 1.2rem 0 0; border-left: 0; border-top: 1px solid var(--linea); } .idea:first-child { border-top: 0; } }

/* Circuito: papel algo más oscuro a sangre; cada paso, una columna separada por un filete. */
.circuito { border-image: linear-gradient(var(--papel-2) 0 0) fill 0 // 0 100vw; }
.circuito .num-seccion { box-shadow: inset 0 0 0 4px var(--papel-2), inset 0 0 0 5px var(--rojo); }
.pasos { gap: 0; }
.paso { padding: 0 1.1rem; border-left: 1px solid var(--linea); }
.paso:first-child { border-left: 0; padding-left: 0; }
.paso::before { content: "Nº " counter(paso); font: 600 .68rem var(--f-texto); letter-spacing: .16em; color: var(--rojo); }
.paso .icono { --icono-tam: 92px; }
.paso h3 { font-size: 1.18rem; }
.paso p { font-size: .95rem; color: var(--tinta-2); }
@media (max-width: 1000px) { .pasos { gap: 2rem 0; } .paso:nth-child(odd) { border-left: 0; padding-left: 0; } }
@media (max-width: 560px) { .paso { border-left: 0; padding: 1.2rem 0 0; border-top: 1px solid var(--linea); } .paso:first-child { border-top: 0; } }

/* Dos maneras: el reverso de una postal. Mensaje a la izquierda, dirección a la derecha. */
.maneras-grid {
  position: relative; gap: 0; background: var(--sello-papel); border: 1px solid var(--linea-fuerte);
  box-shadow: 0 1px 0 var(--linea), 0 18px 30px -24px rgba(43, 33, 27, .45);
}
.manera { padding: 2rem 2.2rem; }
.manera + .manera { border-left: 1px solid var(--linea-fuerte); padding-right: 6rem; }
.manera h3 { font-size: 1.55rem; }
.manera p { color: var(--tinta-2); }
.manera-sobre {
  justify-self: stretch; margin-top: .6rem; padding: .2rem 0 1.4rem; font-size: 1.25rem; color: var(--azul);
  background: repeating-linear-gradient(transparent 0 1.85rem, var(--linea-fuerte) 1.85rem calc(1.85rem + 1px)) 0 .15rem / 100% 4rem no-repeat;
  line-height: 1.85rem;
}
@media (max-width: 680px) { .manera + .manera { border-left: 0; border-top: 1px solid var(--linea-fuerte); padding-right: 2.2rem; } .maneras-grid .marca-sello { display: none; } }

/* El sobre */
.mano { font-family: var(--f-mano); color: var(--azul); }
.sobre-papel { background: var(--sobre-papel); border: 1px solid var(--linea-fuerte); box-shadow: 0 16px 28px -22px rgba(43, 33, 27, .5); }
.sobre-marca { color: var(--rojo); }
.sobre-para { font-size: 5cqi; }
.sobre--reverso .sobre-papel { background: #F7EFE0; }
.sobre-solapa { background: #EFE5D2; }
.sobre-solapa::after { content: ""; position: absolute; inset: 0; background: var(--linea-fuerte); clip-path: polygon(0 0, 100% 0, 50% 100%, 49.75% 99.3%, 99.4% .5%, .6% .5%, 50.25% 99.3%, 50% 100%); }
.sobre-etq { font-size: .62em; color: var(--tinta-2); letter-spacing: .12em; }
.sobre figcaption { font-size: .66rem; color: var(--tinta-2); }
.sobre-claves { list-style: none; padding: 0; counter-reset: k; gap: 0; border-top: 1px solid var(--linea); }
.sobre-claves li { counter-increment: k; position: relative; padding: .8rem 0 .8rem 2.6rem; border-bottom: 1px solid var(--linea); color: var(--tinta-2); }
.sobre-claves li::before { content: counter(k); position: absolute; left: 0; top: .78rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rojo); font: 400 .82rem/1 var(--f-numero); color: var(--rojo); }
.sobre-claves strong { color: var(--tinta); font-weight: 600; }

.dibuja h3 { font-size: 1.6rem; }
.dibuja > p { color: var(--tinta-2); }
.pasos-marca li { background: var(--sello-papel); border: 1px solid var(--linea-fuerte); padding: 1.2rem .8rem 1rem; }
.pasos-marca .t-viejo { stroke: var(--rojo); }
.pasos-marca .t-nuevo { stroke: var(--azul); }
.pasos-marca span { font-size: .92rem; color: var(--tinta-2); }
.pasos-marca b { font: 400 .95rem var(--f-numero); color: var(--rojo); margin-right: .2rem; }

/* Para las librerías: sin bloques de color; lo que pedimos es una postal con renglones. */
.librerias-lema { font-family: var(--f-titulo); font-size: clamp(1.35rem, 2.8vw, 1.85rem); color: var(--rojo); line-height: 1.25; max-width: 30ch; }
.beneficios li { padding-top: 1rem; border-top: 1px solid var(--linea-fuerte); }
.beneficios h3 { font-size: 1.22rem; }
.beneficios p { color: var(--tinta-2); font-size: .98rem; }
.compromiso { position: relative; background: var(--sello-papel); border: 1px solid var(--linea-fuerte); box-shadow: 0 18px 30px -24px rgba(43, 33, 27, .45); }
.compromiso h3 { font-size: .74rem; font-weight: 500; color: var(--rojo); }
.compromiso-lista li { padding: .45rem 0; border-bottom: 1px solid var(--linea); font-size: .98rem; }
.compromiso-lista li::before { font: 400 .8rem/1.9 var(--f-numero); color: var(--rojo); }

/* Las normas: dos postales con su recuadro de sello. */
.normas-tarjeta { position: relative; background: var(--sello-papel); border: 1px solid var(--linea-fuerte); padding-right: 5.5rem; }
.normas-tarjeta h3 { font-size: 1.5rem; }
.normas-tarjeta li { padding: .25rem 0; border-bottom: 1px solid var(--linea); color: var(--tinta-2); font-size: .97rem; }
.normas-tarjeta li::before { font: 400 .85rem/1.7 var(--f-numero); color: var(--rojo); }

/* El logo, arriba a la derecha de las postales. */
.marca-sello { position: absolute; top: 1.2rem; right: 1.2rem; width: 66px; color: var(--rojo); }
.marca-sello svg { width: 100%; height: auto; }

/* El vídeo, sin marco: su fondo es el de la sección. El código y las descargas. */
.video video { background: var(--papel-2); }
.video figcaption { margin-top: .7rem; font-size: .66rem; color: var(--tinta-2); }
.maneras-codigo { color: var(--tinta-2); }
.maneras-codigo strong { color: var(--tinta); font-weight: 600; }
.descargas h3 { font-size: 1.6rem; }
.descargas-lista li { padding-top: 1rem; border-top: 1px solid var(--linea-fuerte); }
.descargas-lista strong { font-family: var(--f-titulo); font-weight: 400; font-size: 1.22rem; }
.descargas-lista p { color: var(--tinta-2); font-size: .98rem; }
.descargas-enlaces a { color: var(--rojo); font-weight: 600; font-size: .95rem; }
.descargas-enlaces a:hover { color: var(--rojo-osc); }

.faq-lista { border-top: 1px solid var(--linea-fuerte); }
.faq summary { font-family: var(--f-titulo); font-size: 1.15rem; border-bottom: 1px solid var(--linea); }
.faq summary::after { font: 300 1.4rem/1 var(--f-texto); color: var(--rojo); }
.faq details[open] summary { color: var(--rojo); }
.faq details p { padding-top: .9rem; color: var(--tinta-2); }

/* Pie: un filete fino y nada más. */
.pie { position: relative; padding-top: 4rem; color: var(--tinta-2); }
.pie::before { content: ""; position: absolute; top: 1.75rem; left: var(--hueco); right: var(--hueco); height: 1px; background: var(--linea-fuerte); }
.pie .marca { color: var(--rojo); }
.pie-texto { display: grid; gap: .5rem; }
.pie-nav a { font-size: .92rem; }
.pie-nav a:hover { color: var(--rojo); }
.pie-nota { font-size: .82rem; border-top: 1px solid var(--linea); padding-top: 1rem; }

/* Mapa: la cartulina enmarca el mapa; los puntos, matasellos. */
.mapa { border: 1px solid var(--linea-fuerte); box-shadow: 0 0 0 6px var(--sello-papel), 0 0 0 7px var(--linea-fuerte); margin: 7px; }
.pin .pin-num { width: 36px; height: 36px; box-shadow: inset 0 0 0 2.5px var(--sello-papel), inset 0 0 0 3.5px var(--rojo), 0 3px 8px rgba(43, 33, 27, .25); }
.mapa-lado > .btn { width: 100%; }
.mapa-lista { gap: 0; border-top: 1px solid var(--linea-fuerte); }
.mapa-lista li { border-bottom: 1px solid var(--linea); padding-bottom: .8rem; }
.libreria-tarjeta { padding: 1rem .5rem .4rem; transition: background var(--mov); }
.libreria-tarjeta:hover { background: rgba(251, 246, 236, .6); }
.libreria-tarjeta[aria-pressed="true"] { background: var(--sello-papel); box-shadow: inset 2px 0 0 var(--rojo); }
.libreria-datos strong { font-family: var(--f-titulo); font-weight: 400; font-size: 1.15rem; }
.libreria-datos > span:not(.chip) { font-size: .93rem; color: var(--tinta-2); }
.libreria-dist { color: var(--rojo) !important; font-weight: 600; }
.libreria-ruta { margin-left: 3.75rem; font-size: .66rem; color: var(--rojo); text-decoration: none; border-bottom: 1px solid currentColor; }
.libreria-ruta:hover { color: var(--rojo-osc); }

/* Normas */
.decalogo-cambio a { font-size: .7rem; border: 1px solid var(--linea-fuerte); color: var(--tinta); border-radius: 2px; }
.decalogo-cambio a[aria-current] { background: var(--rojo); color: var(--sobre-papel); border-color: var(--rojo); }
.norma { border-top: 1px solid var(--linea); align-items: start; }
.norma:first-child { border-top: 1px solid var(--linea-fuerte); }
.norma-n {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  width: clamp(3.6rem, 7vw, 4.6rem); aspect-ratio: 1; border-radius: 50%; color: var(--rojo);
  font: 400 clamp(1.3rem, 3vw, 1.75rem)/1 var(--f-numero);
  border: 1.5px solid var(--rojo); box-shadow: inset 0 0 0 4px var(--papel), inset 0 0 0 5px var(--rojo);
}
.norma-n::before { content: "Nº"; font: 600 .5rem var(--f-texto); letter-spacing: .14em; }
.norma h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); }
.norma-texto p { color: var(--tinta-2); }

/* Marca */
.marca-logos figure { background: var(--sello-papel); border: 1px solid var(--linea-fuerte); color: var(--rojo); }
.marca-logo-inversa { background: var(--rojo) !important; color: var(--sobre-papel) !important; --marca-fondo: var(--rojo); }
.marca-logos figcaption { color: var(--tinta-2); font-size: .64rem; }
.marca-logo-inversa figcaption { color: var(--sobre-papel); }
.paleta-muestra { height: 104px; border: 1px solid var(--linea-fuerte); }
.paleta-color code { font-family: var(--f-mono); font-size: .8rem; color: var(--rojo); }
.paleta-color small { color: var(--tinta-2); }
.tipo { border-top: 1px solid var(--linea-fuerte); padding-top: 1rem; }
.tipo-muestra { color: var(--tinta); }

@media (max-width: 860px) { .hero-ilus { justify-self: start; } }
@media (max-width: 560px) {
  .titulo-seccion::after { display: none; }
  .manera { padding: 1.5rem 1.3rem; }
  .normas-tarjeta .marca-sello { display: none; }
  .normas-tarjeta { padding-right: 1.4rem; }
}
.mano em { font-style: normal; color: var(--tinta-2); }

/* El vídeo, centrat a la secció (2026-11-06). */
.circuito .video { margin-inline: auto; width: 100%; }
.circuito .video figcaption { text-align: center; }

/* Contacte: el formulari, sobre la cartulina d'un sobre. */
.contacto-form { background: var(--sobre-papel); border: 1px solid var(--linea-fuerte); padding: clamp(1.2rem, 3vw, 2rem); box-shadow: 0 18px 30px -26px rgba(43, 33, 27, .55); }
.contacto-form label { color: var(--tinta); font-family: var(--f-texto); }
.contacto-form input, .contacto-form select, .contacto-form textarea { background: var(--sello-papel); color: var(--tinta); border: 1px solid var(--linea-fuerte); border-radius: 2px; }
.contacto-form input:focus-visible, .contacto-form select:focus-visible, .contacto-form textarea:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.contacto-privacidad { font-size: .88rem; color: var(--tinta-2); margin: 0; }
.contacto-correo { margin-top: 1rem; }
.contacto-correo a { color: var(--rojo); font-weight: 600; }
.contacto-estado { font-weight: 600; color: var(--tinta-2); }
.contacto-estado[data-tipo="ok"] { color: var(--azul); }
.contacto-estado[data-tipo="error"] { color: var(--rojo); }