/* Estilos de barbiestesteadoras.org — compartidos por la portada (index.html)
   y las páginas sueltas (pad/index.html).

   Vivían embebidos en index.html. Se sacaron al separar la página del pad: dos
   copias del mismo CSS se separan en cuanto alguien toca una sola. Si se agrega
   otra página, enlázalo con ruta relativa a su carpeta: ../estilos.css

   Sobre el `?v=` de los enlaces: ya NO es obligatorio subirlo. Cloudflare
   forzaba 4 h de caché en el .css pisando el `no-cache` de nginx, pero el
   27/07/2026 la zona se puso en «Respect Existing Headers» y ahora respeta la
   cabecera del origen. Verificado desde fuera: este archivo responde
   `cache-control: no-cache`. El parámetro se deja como refuerzo; si alguien lo
   sube, no rompe nada, y si lo olvida, tampoco. */

  /* Una sola familia — Helvetica — y una sola familia de color: rosas claros
     sobre blanco. La jerarquía la cargan el peso y el tamaño, no el contraste
     de tipografías. */
  :root {
    color-scheme: light;
    --blanco: #FFFCFD;
    --rosa-1: #FFF1F6;
    --rosa-2: #FFE3EE;
    --rosa-3: #FFD3E4;
    --rosa-borde: #F5C0D6;
    --rosa-fuerte: #D6246E;
    --rosa-hondo: #A81854;
    --tinta: #2B1A22;
    --tinta-2: #6D5761;
    --tinta-3: #9C8791;
    --tipo: Helvetica, 'Helvetica Neue', 'Nimbus Sans', Arial, sans-serif;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--blanco);
    color: var(--tinta);
    font-family: var(--tipo);
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
  }

  .marco { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
  .prosa { max-width: 62ch; }

  a { color: var(--rosa-fuerte); text-underline-offset: 3px; }
  a:focus-visible { outline: 3px solid var(--rosa-fuerte); outline-offset: 3px; border-radius: 4px; }

  /* ---------------------------------------------------------- portada */

  .portada { background: var(--rosa-2); border-bottom: 1px solid var(--rosa-borde); }
  .portada .marco { padding: 56px 24px 60px; }

  .marca { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-bottom: 34px; }
  /* 150 px = el triple de los 50 px originales. El archivo es de 480×480, así que
     aguanta incluso a 3× de densidad. Recortado del PNG original de 3480×2160,
     no reescalado del chico. */
  /* Sin `border-radius`: el archivo v2 tiene fondo transparente y el medallón ya
     es redondo. La máscara circular sobraba y además le cortaba la cuerda de
     abajo, que se sale del círculo inscrito. */
  .marca img { width: 150px; height: 150px; flex: none; }
  /* Al triplicar el logo, 12 px al lado se leían como pie de foto. 14 px
     devuelve la proporción sin cambiar el tono del conjunto. */
  .marca span {
    font-size: 14px; letter-spacing: .15em; text-transform: uppercase;
    color: var(--rosa-hondo); font-weight: 700; line-height: 1.4;
  }
  /* Atajo al espacio de trabajo, arriba del todo: quien viene a trabajar no
     tiene por qué recorrer la portada. `margin-left:auto` lo manda a la derecha;
     con .marca en wrap, en pantallas angostas baja a su propio renglón. */
  .marca .entrada {
    margin-left: auto; text-decoration: none;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    padding: 8px 16px; border-radius: 99px;
    background: var(--blanco); color: var(--rosa-hondo); border: 1px solid var(--rosa-borde);
    transition: background .12s, border-color .12s;
  }
  .marca .entrada:hover { background: var(--rosa-1); border-color: var(--rosa-fuerte); }
  /* Al bajar a su propio renglón, pegado a la derecha queda huérfano: se alinea
     con el margen izquierdo, como todo lo demás de la portada. */
  @media (max-width: 620px) { .marca .entrada { margin-left: 0; } }

  h1 {
    font-size: clamp(42px, 9vw, 82px);
    line-height: .96; letter-spacing: -.035em; margin: 0 0 20px;
    font-weight: 700;
  }
  h1 .rosa { color: var(--rosa-fuerte); }

  .entradilla { font-size: clamp(18px, 2.2vw, 22px); color: var(--tinta-2); max-width: 42ch; margin: 0; font-weight: 400; }
  .entradilla b { color: var(--tinta); font-weight: 700; }

  .regiones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
  .region {
    font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    padding: 7px 15px; border-radius: 99px;
    border: 1px solid var(--rosa-borde); color: var(--rosa-hondo); background: var(--blanco);
  }

  .acciones { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
  .btn {
    display: inline-block; padding: 13px 26px; border-radius: 99px;
    font-weight: 700; font-size: 15.5px; text-decoration: none;
    background: var(--rosa-fuerte); color: #fff; border: 1px solid var(--rosa-fuerte);
    transition: background .12s;
  }
  .btn:hover { background: var(--rosa-hondo); border-color: var(--rosa-hondo); }
  .btn.claro { background: var(--blanco); color: var(--rosa-hondo); border-color: var(--rosa-borde); }
  .btn.claro:hover { background: var(--rosa-1); }

  /* ---------------------------------------------------------- secciones */

  section { padding: 64px 0; }
  section.franja { background: var(--rosa-1); border-top: 1px solid var(--rosa-borde);
                   border-bottom: 1px solid var(--rosa-borde); }

  /* Dos secciones planas seguidas se leen como una sola: una línea las separa
     sin romper la alternancia de fondos del resto de la página. */
  section:not(.franja) + section:not(.franja) { border-top: 1px solid var(--rosa-borde); }

  /* La puerta al espacio de trabajo vive en su propia página (/espacio/), igual
     que el pad: la portada solo la enlaza desde .marca .entrada. Por eso aquí no
     hay fondo propio ni clase .franja — la portada mantiene sus 13 secciones y
     su alternancia sin que este bloque intervenga.
     En «Materiales» .autoria es un crédito secundario y --tinta-3 alcanza; en las
     tarjetas de /espacio/ carga la descripción de la puerta, y ese gris da 3.3:1
     sobre blanco —debajo del 4.5:1 de WCAG AA—. Con --tinta-2 sube a 6.5:1. */

  .rotulo {
    display: inline-block; font-size: 11.5px; letter-spacing: .15em;
    text-transform: uppercase; font-weight: 700; margin: 0 0 14px;
    color: var(--rosa-hondo);
  }

  h2 {
    font-size: clamp(26px, 4.2vw, 38px);
    line-height: 1.08; letter-spacing: -.028em; margin: 0 0 18px;
    font-weight: 700; text-wrap: balance;
  }

  h3 { font-size: 18px; margin: 0 0 6px; font-weight: 700; letter-spacing: -.01em; }
  p { margin: 0 0 16px; }
  .prosa p:last-child { margin-bottom: 0; }
  .grande { font-size: 19px; color: var(--tinta-2); }
  .grande b { color: var(--tinta); font-weight: 700; }

  .manifiesto {
    font-size: clamp(23px, 3.6vw, 34px);
    line-height: 1.2; letter-spacing: -.025em; font-weight: 700;
    margin: 34px 0; max-width: 22ch;
  }
  .manifiesto .destaca { color: var(--rosa-fuerte); }

  .aclaracion {
    background: var(--rosa-2); border: 1px solid var(--rosa-borde);
    border-radius: 14px; padding: 17px 21px; max-width: 54ch; font-size: 16px;
  }
  .aclaracion b { font-weight: 700; }

  /* ---------------------------------------------------------- huecos de imagen */
  /* Marcas de posición: dicen qué imagen va y en qué proporción, para que se
     puedan reemplazar sin tocar la maquetación. */
  .hueco {
    border: 1px dashed var(--rosa-borde); border-radius: 16px;
    background: repeating-linear-gradient(45deg, var(--rosa-1), var(--rosa-1) 12px, var(--blanco) 12px, var(--blanco) 24px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 24px 20px; color: var(--tinta-3);
  }
  .hueco .que { font-weight: 700; color: var(--rosa-hondo); font-size: 14.5px; margin-bottom: 3px; }
  .hueco .medida { font-size: 12.5px; letter-spacing: .04em; }
  .hueco.ancho { aspect-ratio: 16 / 7; }

  /* ---------------------------------------------------------- qué hacemos */

  .hacemos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
  .quehace {
    background: var(--blanco); border: 1px solid var(--rosa-borde);
    border-radius: 16px; padding: 21px 23px;
  }
  .quehace .n {
    font-size: 12px; font-weight: 700; letter-spacing: .1em;
    display: block; margin-bottom: 8px; color: var(--rosa-fuerte);
  }
  .quehace p { margin: 0; font-size: 15px; color: var(--tinta-2); line-height: 1.55; }

  /* ---------------------------------------------------------- colectivas */

  .colectivas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 24px; }
  .colectiva {
    display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
    background: var(--blanco); border: 1px solid var(--rosa-borde);
    border-radius: 16px; padding: 19px 21px;
  }
  .colectiva.sin-logo { grid-template-columns: 1fr; }
  .colectiva p { margin: 0; font-size: 14.5px; color: var(--tinta-2); line-height: 1.5; }

  /* Las tarjetas de comisión pueden ir solas, y una sola ocupa todo el ancho del
     marco: sin tope, el párrafo sale en renglones de cien caracteres. Se le pone
     el mismo ancho de lectura que a .prosa. El logotipo va más grande y alineado
     al título porque aquí es un emblema con detalle, no una marca plana. */
  #comisiones .colectiva p { max-width: 62ch; }
  #comisiones .logo-col { width: 96px; align-self: start; }

  /* ---------------------------------------------------------- galería */

  .galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 24px; }
  figure { margin: 0; }
  figcaption { padding: 11px 4px 0; font-size: 14.5px; color: var(--tinta-2); }
  figcaption b { color: var(--tinta); display: block; font-size: 15.5px; margin-bottom: 2px; }


  .postal-img { width: 100%; height: auto; display: block; border-radius: 16px;
                border: 1px solid var(--rosa-borde); }
  .logo-col { width: 76px; height: auto; flex: none; align-self: center; }
  /* 130px para que las SIETE colectivas entren en un solo renglón. El ancho útil
     del .marco son 992px (1040 menos los 24 de padding a cada lado, con
     border-box), así que 7×130 + 6×12 de hueco = 982 y entra justo. Con los
     150px de antes cabían seis y la séptima bajaba sola, que es exactamente la
     jerarquía que se quiso quitar.
     Si se suma una octava, hay que rebajarlo o aceptar que el muro se parta. */
  .muro { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
          gap: 12px; margin-top: 16px; }
  .pieza { background: var(--blanco); border: 1px solid var(--rosa-borde); border-radius: 16px;
           padding: 18px 14px 14px; display: flex; flex-direction: column;
           align-items: center; gap: 10px; text-align: center; }
  .pieza img { max-width: 100%; height: 62px; width: auto; object-fit: contain; }
  .pieza span { font-size: 13px; font-weight: 700; color: var(--tinta-2); line-height: 1.3; }
  /* Las colectivas que tienen cuenta pública son un enlace entero —logo y nombre—,
     porque en móvil se toca el nombre tanto como la imagen. Las que no tienen
     siguen siendo un <div> y se ven igual: no se marca quién falta. */
  a.pieza { text-decoration: none; transition: border-color .12s, transform .12s; }
  a.pieza:hover { border-color: var(--rosa-fuerte); transform: translateY(-2px); }
  a.pieza:hover span { color: var(--rosa-hondo); }


  /* ---------------------------------------------------------- blog */
  .entradas { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; margin-top: 24px; }
  .entradas .entrada {
    background: var(--blanco); border: 1px solid var(--rosa-borde); border-radius: 16px;
    padding: 20px 22px; display: flex; flex-direction: column; gap: 8px;
  }
  .entradas .entrada .fecha { font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
                    color: var(--rosa-fuerte); font-weight: 700; }
  .entradas .entrada h3 { margin: 0; font-size: 17px; }
  .entradas .entrada p { margin: 0; font-size: 14.5px; color: var(--tinta-2); line-height: 1.5; }
  .vacio {
    border: 1px dashed var(--rosa-borde); border-radius: 16px; padding: 28px 24px;
    background: var(--rosa-1); color: var(--tinta-2); font-size: 15.5px; margin-top: 22px;
  }
  .vacio b { color: var(--rosa-hondo); }
  /* Dentro de una franja el recuadro punteado comparte fondo con la sección y
     deja de leerse como un aviso. Se invierte para que siga destacando. */
  .franja .vacio { background: var(--blanco); }

  /* ---------------------------------------------------------- foro y voluntariado */
  .pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 22px; }
  .paso {
    background: var(--blanco); border: 1px solid var(--rosa-borde); border-radius: 16px; padding: 19px 21px;
  }
  .paso .n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; margin-bottom: 9px;
    background: var(--rosa-fuerte); color: #fff; font-size: 13px; font-weight: 700;
  }
  .paso h3 { font-size: 16px; }
  .paso p { margin: 0; font-size: 14.5px; color: var(--tinta-2); line-height: 1.5; }
  .cuidado {
    background: var(--rosa-2); border: 1px solid var(--rosa-borde); border-left: 4px solid var(--rosa-fuerte);
    border-radius: 14px; padding: 18px 22px; margin-top: 20px; font-size: 15.5px;
  }
  .cuidado b { font-weight: 700; }
  .cuidado ul { margin: 10px 0 0; padding-left: 20px; color: var(--tinta-2); font-size: 15px; }
  .cuidado li { margin-bottom: 5px; }

  /* ---------------------------------------------------------- descargas */

  .descargas { display: flex; flex-direction: column; gap: 11px; margin-top: 24px; }
  .descarga {
    display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
    background: var(--blanco); border: 1px solid var(--rosa-borde);
    border-radius: 14px; padding: 17px 21px; text-decoration: none; color: inherit;
    transition: background .12s, border-color .12s;
  }
  .descarga:hover { background: var(--rosa-1); border-color: var(--rosa-fuerte); }
  .descarga .autoria { font-size: 13.5px; color: var(--tinta-3); margin-top: 2px; }
  .descarga .flecha { color: var(--rosa-fuerte); font-weight: 700; white-space: nowrap; font-size: 14.5px; }

  /* ---------------------------------------------------------- prensa */

  .prensa { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 14px; margin-top: 24px; }
  .nota {
    background: var(--blanco); border: 1px solid var(--rosa-borde); border-radius: 16px;
    padding: 20px 22px; text-decoration: none; color: inherit; display: block;
    transition: background .12s, border-color .12s;
  }
  .nota:hover { background: var(--rosa-1); border-color: var(--rosa-fuerte); }
  .nota .medio {
    font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
    color: var(--rosa-fuerte); font-weight: 700;
  }
  .nota .titular { font-size: 16px; font-weight: 700; margin-top: 7px; line-height: 1.34; letter-spacing: -.01em; }

  /* ---------------------------------------------------------- cajas */

  .caja {
    background: var(--rosa-2); border: 1px solid var(--rosa-borde);
    border-radius: 22px; padding: 34px 32px;
  }
  .caja h2 { margin-bottom: 14px; }

  /* ---------------------------------------------------------- contacto */

  .contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 14px; margin-top: 24px; }
  .via {
    background: var(--blanco); border: 1px solid var(--rosa-borde); border-radius: 16px;
    padding: 20px 22px; text-decoration: none; color: inherit; display: block;
    transition: background .12s, border-color .12s;
  }
  .via:hover { background: var(--rosa-1); border-color: var(--rosa-fuerte); }
  .via .et { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
             color: var(--tinta-3); font-weight: 700; }
  .via .valor { font-size: 15.5px; font-weight: 700; margin-top: 5px; word-break: break-word; }

  /* ⚠ El pie comparte tono con .franja, así que la última sección tiene que ser
     clara o los dos se funden en un bloque rosa continuo. Eso ata la alternancia
     de toda la página a un número IMPAR de secciones: si se agrega una, hay que
     mover el patrón entero o dejar el pie en --blanco. */

  /* ---------------------------------------------------------- mapa del sitio */
  /* Va en el pie de las TRES páginas para que nadie quede en un callejón: desde
     cualquier punto se ve el sitio entero y se puede volver. */

  .mapa { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
          gap: 24px 20px; padding-bottom: 26px; margin-bottom: 20px;
          border-bottom: 1px solid var(--rosa-borde); }
  .mapa-t { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
            font-weight: 700; color: var(--rosa-hondo); margin: 0 0 9px; }
  .mapa a { display: block; color: var(--tinta-2); text-decoration: none;
            font-size: 14.5px; padding: 3px 0; line-height: 1.45; }
  .mapa a:hover { color: var(--rosa-fuerte); text-decoration: underline; }

  .pie-abajo { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
               justify-content: space-between; }
  .pie-abajo p { margin: 0; }
  .vuelta { display: flex; flex-wrap: wrap; gap: 8px; }
  .vuelta a { display: inline-block; font-size: 13.5px; font-weight: 700;
              text-decoration: none; padding: 8px 16px; border-radius: 99px;
              border: 1px solid var(--rosa-borde); color: var(--rosa-hondo);
              background: var(--blanco); white-space: nowrap; }
  .vuelta a:hover { background: var(--rosa-1); border-color: var(--rosa-fuerte); }

  footer { padding: 42px 0 58px; color: var(--tinta-3); font-size: 14px;
           background: var(--rosa-1); border-top: 1px solid var(--rosa-borde); }
  footer p { margin: 0 0 8px; max-width: 66ch; }

  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }