/* ---------------------------------------------------------------------------
   Hoja del sitio — surehelpline.org
   Propia, encima de bootstrap. Nacio como rediseño de prueba en /test y paso
   a la portada el 2026-08-06.

   Colores: EXACTAMENTE los de la organizacion, los que declara
   assets/css/main.css y los del logotipo. No se inventa ninguno.
     --verde    #008080  titulos, enlaces y secciones alternas
     --morado   #74006F  barra de crisis y cargos del personal
     --amarillo #F2D255  el subrayado corto bajo cada titulo
     --azul     #1070A0  el azul del texto del logotipo
     --tinta    #222222  el texto corrido
--------------------------------------------------------------------------- */

:root {
    --verde: #008080;
    --verde-oscuro: #006a6a;
    --morado: #74006F;
    --amarillo: #F2D255;
    --azul: #1070A0;
    --tinta: #222222;
    --texto: #222222;
    --suave: #6c757d;
    --linea: #dfe5e6;
    --teal: #008080;
    --blanco: #fff;

    /* Escala de espacios. Una sola, y todo sale de aqui: si cada bloque
       inventa su margen, la pagina se lee desordenada aunque cada pieza
       este bien. */
    --s1: .25rem;
    --s2: .5rem;
    --s3: .75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3.25rem;

    --ancho: 1120px;
    --radio: 10px;

    /* Alto de la cabecera fija. Lo usan los anclajes para no quedar tapados;
       se redefine en cada punto de ruptura. */
    --alto-fijo: 108px;

    color-scheme: light;
}

/* --- base ---------------------------------------------------------------- */

/* Inter para el texto: dibujada para pantalla, con la altura de x alta y las
   formas abiertas que se agradecen en un movil. Montserrat solo en titulos.
   Tamaños fluidos con clamp(): crecen solos sin saltos entre dispositivos. */
body {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-optical-sizing: auto;
    color: var(--texto);
    background: var(--blanco);
    font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
    line-height: 1.65;
    letter-spacing: -.003em;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: Montserrat, Inter, system-ui, sans-serif;
    color: var(--tinta);
    line-height: 1.22;
    letter-spacing: -.015em;
    text-wrap: balance;
    margin: 0;
}

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

a { color: var(--verde); text-decoration: none; }
a:hover { color: var(--verde-oscuro); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.envoltorio {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--s5);
}

/* El limite de medida solo tiene sentido en el texto corrido a ancho de
   pagina. Dentro de una tarjeta, que ya es estrecha, recortaba 50px y dejaba
   un hueco a la derecha en veinte parrafos: eso era la mitad del "desorden". */
.apilado p, .entradilla p { max-width: 62ch; }

/* --- cabecera fija -------------------------------------------------------
   Barra de crisis + logotipo + menu van dentro de UN contenedor sticky. Es
   mas robusto que encadenar dos sticky con offsets calculados a mano: si la
   barra cambia de alto, el menu la sigue sin tocar ningun numero. */

.fijo {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 1px 0 var(--linea), 0 6px 18px rgba(0, 0, 0, .06);
}

/* La barra de crisis va en su propia banda, debajo del menu y dentro de la
   cabecera fija: sigue visible en todo momento sin quitarle sitio al
   logotipo ni a la navegacion. */
.emergencia {
    background: var(--morado);
    color: var(--blanco);
}

.emergencia .envoltorio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px var(--s4);
    padding-top: var(--s2);
    padding-bottom: var(--s2);
    font-size: .8125rem;
    line-height: 1.4;
    text-align: center;
    /* El cintillo es una franja de utilidad y no tiene por que respetar la
       rejilla de 1120px del contenido: con ese tope, el saludo mas la
       pastilla se pasaban por 13px y la banda se partia en tres renglones. */
    max-width: 1400px;
    position: relative;
}

/* Cada linea de crisis es un bloque que no se parte por dentro: asi, cuando
   no caben las dos en una fila, cada una baja entera en vez de quedar el
   numero descolgado del rotulo. */
.emergencia .linea { display: inline-flex; align-items: baseline; gap: .35em; flex-wrap: wrap; justify-content: center; }

.emergencia b { font-weight: 700; letter-spacing: .02em; }
/* Los telefonos llevan subrayado permanente: sobre el morado, en blanco y en
   negrita, no se distinguian del rotulo que tienen al lado. La linea va en
   amarillo de marca y separada del texto, que sobre fondo oscuro se lee mejor
   que pegada a las cifras. */
.emergencia a {
    color: var(--blanco);
    font-weight: 700;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: var(--amarillo);
    text-decoration-thickness: 2px;
    text-underline-offset: .22em;
}

.emergencia a:hover,
.emergencia a:focus-visible {
    color: var(--amarillo);
    text-decoration-color: var(--amarillo);
    text-decoration-thickness: 3px;
}
/* El saludo y los separadores solo tienen sentido cuando todo cabe en un
   renglon. Se controlan aqui y no con las utilidades d-* de bootstrap, que
   llevan !important y colaban un "|" suelto entre las dos lineas. */
.emergencia .separa { opacity: .45; }
.emergencia .saludo { display: none; }

@media (min-width: 1100px) {
    .emergencia .saludo { display: inline; }
}

.cabecera { background: var(--blanco); position: relative; z-index: 2; }

.cabecera .envoltorio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding-top: var(--s2);
    padding-bottom: var(--s2);
}

/* Alto reservado de antemano para que la cabecera no salte cuando el
   logotipo termina de cargar. */
.cabecera .logo img { width: 260px; height: 75px; object-fit: contain; }

/* min-width:0 es lo que permite que el menu se encoja dentro del flex en vez
   de empujar la pagina a lo ancho. Sin esto, a menos de 700px el menu medía
   881px y desbordaba la pagina 531px en horizontal. */
.cabecera nav { min-width: 0; }

.menu {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.menu a {
    display: block;
    color: #1a1a1a;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    /* Las mayusculas necesitan mas aire entre letras que la caja baja; con
       .01em se apelmazaban y se leian apagadas. */
    letter-spacing: .02em;
    white-space: nowrap;
    padding: var(--s1) 0;
    border-bottom: 2px solid transparent;
    /* El suavizado "antialiased" del body adelgaza los trazos en macOS y a
       12px en mayusculas eso es justo lo que hacia que el menu se viera
       descolorido. Aqui se deja el del sistema, que los deja mas densos. */
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

.menu a:hover,
.menu a:focus-visible { color: var(--verde); border-bottom-color: var(--amarillo); text-decoration: none; }

/* La seccion por la que se va pasando queda marcada en el menu. */
.menu a.activo { color: var(--verde); border-bottom-color: var(--amarillo); }

/* Boton MENU: solo aparece cuando los ocho enlaces dejan de caber en una
   fila. Por encima de 860px el menu va desplegado y el boton sobra. */
.boton-menu {
    display: none;
    align-items: center;
    gap: var(--s2);
    background: var(--blanco);
    color: var(--tinta);
    border: 1px solid var(--linea);
    border-radius: 6px;
    padding: .5rem .9rem;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    cursor: pointer;
    line-height: 1;
}

.boton-menu:hover { border-color: var(--verde); color: var(--verde); }
.boton-menu:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.boton-menu .bi { font-size: 1.15rem; }
.boton-menu[aria-expanded="true"] { background: var(--verde); border-color: var(--verde); color: var(--blanco); }
.boton-menu .icono-cerrar { display: none; }
.boton-menu[aria-expanded="true"] .icono-abrir { display: none; }
.boton-menu[aria-expanded="true"] .icono-cerrar { display: inline-block; }

/* --- pastilla de idioma ---------------------------------------------------
   El mando propio; el desplegable de Google se esconde y hace el trabajo
   por detras. Sin "body { top: 0 }" el widget empuja la pagina hacia abajo
   con su banda y rompe la cabecera fija. */

#google_translate_element { display: none; }
.goog-te-banner-frame.skiptranslate { display: none !important; }
.skiptranslate iframe { display: none !important; }
body { top: 0 !important; }

/* Flota abajo a la derecha. Ni en la fila del logotipo -donde le quitaba 81px
   al menu y los ocho enlaces dejaban de caber en ingles- ni en el cintillo
   -donde en español sumaba un renglon y la zona fija se comia el 22% de la
   pantalla del movil-. Aqui esta siempre a mano y no le quita alto a nada. */
.idioma {
    position: fixed;
    right: var(--s4);
    bottom: var(--s4);
    z-index: 1035;
    display: inline-flex;
    border: 1px solid var(--linea);
    border-radius: 999px;
    overflow: hidden;
    background: var(--blanco);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
}

.idioma-op {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--suave);
    font-family: inherit;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .35rem .7rem;
    cursor: pointer;
    line-height: 1.4;
}

.idioma-op:hover { color: var(--verde); }
.idioma-op.activo { background: var(--verde); color: var(--blanco); }
.idioma-op:focus-visible { outline: 3px solid var(--amarillo); outline-offset: -3px; }

/* Menu plegado tras el boton MENU. No depende del ancho sino de si los ocho
   enlaces caben en un renglon junto al logotipo: en español las etiquetas son
   mas largas y a la misma anchura ya no entran. La clase la pone el script
   despues de medir. */
.cabecera .envoltorio { position: relative; }

.cabecera.compacto .boton-menu { display: inline-flex; }

/* El menu ocupa la pantalla entera por debajo de la cabecera fija, sobre
   fondo teal para que se distinga de la pagina, que es blanca. El alto
   arranca en --alto-fijo, la medida real de la cabecera, asi que el
   logotipo, el boton de cerrar y las lineas de crisis siguen a la vista. */
.cabecera.compacto .navegacion {
    display: none;
    position: fixed;
    top: var(--alto-fijo);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020;
    background: var(--verde);
    padding: var(--s5) 0 var(--s7);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cabecera.compacto .navegacion.abierto { display: block; }

.cabecera.compacto .menu {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--s5);
}

/* Renglones altos: en un movil el dedo necesita blanco donde apoyarse. */
.cabecera.compacto .menu li + li { border-top: 1px solid rgba(255, 255, 255, .22); }

/* Renglones altos y texto grande: es una pantalla entera, no una lista
   apretada, y el dedo necesita blanco donde apoyarse. */
.cabecera.compacto .menu a {
    color: var(--blanco);
    font-size: 1.0625rem;
    letter-spacing: .03em;
    padding: var(--s4) var(--s3);
    border-bottom: 0;
    border-left: 3px solid transparent;
}

.cabecera.compacto .menu a:hover,
.cabecera.compacto .menu a:focus-visible,
.cabecera.compacto .menu a.activo {
    color: var(--blanco);
    border-bottom: 0;
    border-left-color: var(--amarillo);
    background: rgba(255, 255, 255, .08);
}

/* Con el menu abierto la pagina de detras no se mueve. */
body.menu-abierto,
body.visor-abierto { overflow: hidden; }

.redes { display: flex; gap: var(--s3); }
.redes a { color: var(--suave); font-size: 1.05rem; text-decoration: none; }
.redes a:hover { color: var(--morado); text-decoration: none; }

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

section { padding: var(--s7) 0; }

/* Los anclajes del menu tienen que dejar sitio a la cabecera fija; si no, al
   pulsar "Services" el titulo de la seccion queda debajo de la barra. */
section[id] { scroll-margin-top: calc(var(--alto-fijo) + var(--s4)); }

/* El sitio alterna blanco y teal de seccion en seccion. Se conserva ese
   ritmo: es lo que hace que la pagina se lea como suya. */
section.alterna { background: var(--teal); color: var(--blanco); }
section.alterna h2, section.alterna h3, section.alterna h4 { color: var(--blanco); }
section.alterna a { color: var(--blanco); text-decoration: underline; }
section.alterna .dato-contacto { color: var(--blanco); }

/* Los iconos sociales son iconos, no texto: ni subrayado ni morado sobre
   teal, que se volvia casi invisible. */
section.alterna .redes a { color: var(--blanco); text-decoration: none; }
section.alterna .redes a:hover { color: var(--amarillo); }

/* Dentro de una tarjeta o una ficha el fondo vuelve a ser blanco, asi que los
   colores vuelven a los de siempre. Sin esto, texto blanco sobre blanco. */
section.alterna .tarjeta, section.alterna .ficha { color: var(--texto); }
section.alterna .tarjeta h3 { color: var(--azul); }
section.alterna .tarjeta h4, section.alterna .ficha h4 { color: var(--tinta); }
section.alterna .tarjeta a, section.alterna .ficha a { color: var(--verde); text-decoration: none; }
section.alterna .ficha .cargo { color: var(--morado); }
section.alterna .tarjeta .lista li::before { background: var(--verde); }
/* Los botones dentro de una tarjeta en seccion teal: la regla de arriba
   "section.alterna .tarjeta a" (0,2,2) le ganaba a "section.alterna .boton"
   (0,2,1) y pintaba el texto en teal sobre un boton teal, o sea invisible.
   Es lo que dejaba "View in Google Maps" como un bloque sin texto. */
section.alterna .boton,
section.alterna .tarjeta .boton,
section.alterna .ficha .boton { color: var(--blanco); text-decoration: none; }

section.alterna .boton.hueco,
section.alterna .tarjeta .boton.hueco,
section.alterna .ficha .boton.hueco { color: var(--texto); }

/* Titulo en teal con el subrayado amarillo corto: la firma visual del sitio.
   Cambia solo la alineacion, de centrada a la izquierda. */
.titulo { margin: 0 0 var(--s5); }

.titulo h2 {
    display: inline-block;
    position: relative;
    color: var(--verde);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    padding-bottom: var(--s3);
}

.titulo h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: var(--amarillo);
}

/* Subtitulo de un bloque dentro de una seccion (Staff, Board of Directors).
   Sin barra amarilla y mas pequeño: son un escalon por debajo del titulo de
   seccion, y con el mismo tratamiento la jerarquia quedaba plana. */
.subtitulo {
    position: relative;
    display: inline-block;
    margin: var(--s6) 0 var(--s5);
    padding-bottom: var(--s2);
    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    font-weight: 600;
    color: var(--verde);
}

.subtitulo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    background: var(--amarillo);
}

section.alterna .subtitulo { color: var(--blanco); }
.subtitulo.sin-aire { margin-top: 0; }

.entradilla { margin-bottom: var(--s6); }

/* Titulo dentro de una columna: el .apilado ya separa sus hijos. */
.apilado > .titulo { margin-bottom: 0; }

/* Los titulos de la seccion del equipo van centrados. La barra amarilla se
   centra con left/right/margin auto, que es como la centra el sitio original. */
#team .titulo,
#team .subtitulo { text-align: center; display: block; }

#team .titulo h2 { display: inline-block; }

#team .titulo h2::after,
#team .subtitulo::after {
    left: 0;
    right: 0;
    margin-inline: auto;
}

#team .subtitulo { position: relative; }
.entradilla.rejilla { align-items: start; }

/* --- rejillas ------------------------------------------------------------ */

.rejilla { display: grid; gap: var(--s5); }
.rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Texto junto a una foto: centrado vertical, para que no quede un hueco
   muerto debajo del parrafo cuando la imagen es mas alta. */
.rejilla.centrada { align-items: center; }

/* Fichas de personas. Se usa flex y no grid a proposito: el numero de
   personas cambia con el tiempo y ninguna cifra de columnas divide siempre.
   Con flex, la ultima fila incompleta queda CENTRADA y se lee como algo
   querido, en vez de un hueco a la derecha. */
.rejilla.equipo,
.rejilla.junta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s4);
}

/* 196px es lo que hace que a 1072px entren 5 por fila y las 10 fichas
   queden en 5+5 exactas. Con 210 caian a 4 por fila y dejaban 4+4+2. */
.rejilla.equipo > * { flex: 0 1 196px; }
.rejilla.junta  > * { flex: 0 1 320px; }

/* Una sola fila para los documentos: con 1, 2 o 7 informes nunca queda media
   fila suelta, y el tope de ancho evita que un unico PDF se estire de lado a
   lado de la pagina. */
.rejilla.documentos {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
    max-width: 46rem;
}

/* --- tarjetas ------------------------------------------------------------ */

.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: var(--s5);
}

.tarjeta h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--s3);
    color: var(--verde);
}

.tarjeta p { margin-bottom: var(--s3); }
.tarjeta > :last-child { margin-bottom: 0; }

/* Las tarjetas de servicio recuperan el titulo subrayado del sitio original:
   22px, teal, con una linea de 4px bajo el texto que se enciende al pasar el
   raton. */
.servicio h3 {
    display: inline-block;
    font-size: 1.375rem;
    padding-bottom: var(--s2);
    border-bottom: 4px solid #e9edee;
    transition: border-color .2s ease;
}

.servicio:hover h3 { border-color: var(--verde); }
.servicio p { color: var(--texto); }

.apodo { color: var(--suave); margin-bottom: var(--s3); }

/* --- fichas de personal --------------------------------------------------- */

.ficha {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.ficha .retrato {
    aspect-ratio: 3 / 4;
    width: 100%;
    object-fit: cover;
    object-position: top center;
    background: #eef1f2;
}

/* El cuerpo crece para llenar la ficha y los datos se pegan abajo: asi el
   telefono y el correo quedan alineados entre fichas de la misma fila,
   aunque un cargo ocupe dos lineas y otro una. */
.ficha .cuerpo {
    padding: var(--s3) var(--s3) var(--s4);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ficha h4 { font-size: 1.125rem; font-weight: 700; margin-bottom: 2px; }
.ficha .cargo { display: block; color: var(--morado); font-size: .875rem; font-style: italic; line-height: 1.35; margin-bottom: var(--s2); }
.ficha .cargo + .dato { margin-top: auto; }
.ficha .dato { font-size: .875rem; margin: 0; word-break: break-word; }
.ficha .dato a { color: var(--suave); }
.ficha .dato a:hover { color: var(--verde); }

.ficha.sin-foto { justify-content: center; }
.ficha.sin-foto .cuerpo { padding: var(--s4) var(--s3); }
.ficha.sin-foto .cargo { margin-bottom: 0; }

/* La ficha del director general va sola: en horizontal y a fila completa, en
   vez de una tarjeta estrecha con el resto de la fila vacia. */
/* La ficha del director no ocupa el ancho entero: con solo nombre, cargo,
   telefono y correo, a 1072px quedaban 435px muertos a la derecha y la
   tarjeta salia en proporcion 2,5:1, como una franja vacia. Acotada a 720px
   y centrada -igual que la rejilla del personal, que tambien va centrada- el
   hueco se reparte en margenes simetricos. */
.rejilla.lider {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
    margin-inline: auto;
}

.ficha.destacada {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    text-align: left;
}

.ficha.destacada .retrato { height: 100%; min-height: 320px; aspect-ratio: auto; }
/* En la ficha del director el cuerpo no es columna flexible: asi el telefono
   y el correo, que son inline-block, se colocan uno al lado del otro en vez
   de apilarse y dejar la mitad derecha de la tarjeta vacia. */
.ficha.destacada .cuerpo { display: block; padding: var(--s6) var(--s7); align-self: center; }
.ficha.destacada h4 {
    position: relative;
    display: inline-block;
    font-size: 1.875rem;
    padding-bottom: var(--s3);
    margin-bottom: var(--s3);
}

.ficha.destacada h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    background: var(--amarillo);
}
.ficha.destacada .cargo { font-size: 1.1875rem; margin-bottom: var(--s4); }
.ficha.destacada .dato { display: inline-block; font-size: 1.0625rem; margin-right: var(--s5); }
.ficha.destacada .cargo + .dato { margin-top: 0; }

/* --- listas de comprobacion ---------------------------------------------- */

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { position: relative; padding-left: 1.6rem; margin-bottom: var(--s3); }
.lista li:last-child { margin-bottom: 0; }

.lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--verde);
}

section.alterna .lista li::before { background: var(--amarillo); }

/* La lista anidada llevaba el disco negro del navegador al lado de los puntos
   propios. Se le da su propia marca, mas pequeña y del mismo color. */
.lista ul { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.lista ul li { padding-left: 1.1rem; margin-bottom: var(--s1); }
.lista ul li::before {
    width: .3125rem;
    height: .3125rem;
    top: .72em;
    border-radius: 50%;
    opacity: .65;
}

/* --- mito / dato ---------------------------------------------------------- */

.mito { border-left: 3px solid var(--amarillo); padding-left: var(--s4); margin-bottom: var(--s4); }
.mito:last-child { margin-bottom: 0; }

/* --- botones -------------------------------------------------------------- */

.boton {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    background: var(--verde);
    color: var(--blanco);
    border: 1px solid var(--verde);
    border-radius: 6px;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
}

.boton:hover { background: var(--verde-oscuro); border-color: var(--verde-oscuro); color: var(--blanco); text-decoration: none; }

/* El secundario se pintaba con --fondo-alt, que al pasar a teal dejaba los
   dos botones identicos al posar el raton. */
.boton.hueco { background: transparent; color: var(--texto); border-color: var(--linea); }
.boton.hueco:hover { background: #f2f5f6; border-color: #c9d2d4; color: var(--tinta); }
.boton.ancho { width: 100%; justify-content: flex-start; font-size: .9375rem; padding: .75rem 1rem; }

/* Los dos botones de una misma tarjeta miden igual, en ingles y en español. */
.acciones { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.acciones .boton { flex: 1 1 auto; justify-content: center; }

/* --- carruseles ----------------------------------------------------------- */

.image-carousel { border-radius: var(--radio); overflow: hidden; }
.image-carousel .carousel-item img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Las dos fotos de esta galeria son 600x200, o sea 3:1. Metidas en la caja
   4/3 del resto, el recorte se comia mas de la mitad del ancho y ampliaba lo
   que quedaba; ademas estiraba la columna izquierda 227px por debajo de los
   mitos de la derecha. Con su propia proporcion se ven enteras y las dos
   columnas quedan parejas. */
#sexual-assault-facts .image-carousel .carousel-item img { aspect-ratio: 3 / 1; }

.carousel-counter {
    position: absolute;
    z-index: 3;
    /* Sin esto el contador se come el control "siguiente", que queda debajo. */
    pointer-events: none;
    right: var(--s3);
    top: var(--s3);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .75rem;
    padding: 2px 8px;
    border-radius: 20px;
}

/* --- visor de documentos ------------------------------------------------- */

.visor {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s5);
}

.visor[hidden] { display: none; }

.visor-fondo {
    position: absolute;
    inset: 0;
    background: rgba(29, 34, 38, .72);
}

.visor-caja {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1000px, 100%);
    height: min(90vh, 100%);
    background: var(--blanco);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.visor-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--linea);
    background: var(--blanco);
}

.visor-barra h4 { font-size: 1.0625rem; margin: 0; }
.visor-acciones { display: flex; gap: var(--s2); flex: 0 0 auto; }
.visor-cerrar { padding: .5rem .7rem; }

.visor iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: #f2f5f6;
}

/* GLightbox toma el alt de la imagen como titulo de la diapositiva y lo pinta
   encima de la foto ampliada. Los alt estan para los buscadores y los lectores
   de pantalla, no para salir como pie. Venia de main.css, que esta pagina ya
   no carga (commit 5fef663). */
.gslide-description,
.gslide-title,
.gdesc-inner { display: none !important; }

/* --- pie ------------------------------------------------------------------ */

.pie {
    background: var(--blanco);
    border-top: 1px solid var(--linea);
    color: var(--verde);
    padding: var(--s6) 0;
    text-align: center;
    font-size: .875rem;
}

.pie a { color: var(--verde); }
.pie a:hover { color: var(--morado); }
.pie strong { color: var(--verde); }
.pie .redes { justify-content: center; margin-bottom: var(--s3); }
.pie .redes a { color: var(--verde); font-size: 1.15rem; }
.pie .redes a:hover { color: var(--morado); }

/* Hueco para que la pastilla flotante no se apoye sobre el aviso de copyright. */
.pie { padding-bottom: calc(var(--s6) + 2.5rem); }

/* --- utilidades ----------------------------------------------------------- */

.mapa { width: 100%; height: 100%; min-height: 300px; border: 0; border-radius: var(--radio); display: block; }
.apilado > * + * { margin-top: var(--s4); }
.dato-contacto { font-size: 1.05rem; font-weight: 600; color: var(--tinta); }
.direccion { font-style: normal; margin-bottom: var(--s3); }

/* ---------------------------------------------------------------------------
   Puntos de ruptura. Antes solo habia uno, en 860px, y a 768 la pagina entera
   caia a una columna: las seis tarjetas de servicio se apilaban a 720px de
   ancho cada una y la pagina crecia un 41%.
--------------------------------------------------------------------------- */

/* Tablet: 6 servicios en 2 columnas son 3 filas exactas. Las .dos son pares
   de tarjetas de texto largo, que a 336px por columna ya no se leen. */
@media (max-width: 860px) {
    :root { --alto-fijo: 104px; }
    .rejilla.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rejilla.dos { grid-template-columns: minmax(0, 1fr); }

    /* Al apilarse, el texto va antes que la foto tambien en #history: antes
       una seccion apilaba texto-foto y la otra foto-texto. */
    .orden-texto { order: -1; }
    .ficha.destacada { grid-template-columns: 240px minmax(0, 1fr); }
    .ficha.destacada .cuerpo { padding: var(--s5) var(--s6); }
    .ficha.destacada h4 { font-size: 1.625rem; }
    .ficha.destacada .cargo { font-size: 1.0625rem; }

    .cabecera .envoltorio { gap: var(--s3); }
    .cabecera .logo { flex: 0 0 auto; }
    .cabecera .logo img { width: 224px; height: 64px; }

    /* Aqui ya no caben las dos lineas de crisis en un renglon: cada una ocupa
       el suyo, centrada, y sobran los separadores. */
    .emergencia .envoltorio { gap: 2px; }
    .emergencia .linea { flex: 1 0 100%; }
    .emergencia .separa, .emergencia .saludo { display: none; }

}

/* Movil grande / tablet en vertical estrecha */
@media (max-width: 620px) {
    :root { --s7: 2.5rem; --alto-fijo: 132px; }

    .rejilla.tres { grid-template-columns: minmax(0, 1fr); }
    .rejilla.equipo > * { flex: 0 1 150px; }
    .rejilla.junta > * { flex: 0 1 150px; }

    /* La ficha del director se queda en horizontal tambien en movil, con la
       foto estrecha. El original es vertical (271x379): metida en una caja
       apaisada 4/3, el recorte cortaba justo bajo la barbilla y ampliaba la
       cara. A 3/4 la proporcion es casi la del archivo, asi que no recorta
       casi nada, y ademas la ficha ocupa menos que apilada. */
    .ficha.destacada { grid-template-columns: 148px minmax(0, 1fr); text-align: left; }
    .ficha.destacada .retrato { aspect-ratio: 3 / 4; height: auto; min-height: 0; }
    .ficha.destacada .cuerpo { padding: var(--s3) var(--s4); }
    .ficha.destacada h4 { font-size: 1.25rem; }
    .ficha.destacada .cargo { font-size: .9375rem; margin-bottom: var(--s2); }
    .ficha.destacada .dato { display: block; margin-right: 0; font-size: .875rem; }
    .ficha.destacada .cuerpo { padding: var(--s4) var(--s4); }

    .cabecera .logo img { width: 188px; height: 54px; }
    .cabecera .envoltorio { padding-top: var(--s1); padding-bottom: var(--s1); }
    /* Franja de utilidad: el texto puede ir un punto mas pequeño. Importa en
       español, donde los rotulos son bastante mas largos y la banda se comia
       casi un cuarto de la pantalla. */
    .emergencia .envoltorio { font-size: .6875rem; padding-top: var(--s1); padding-bottom: var(--s1); }
    .idioma-op { font-size: .6875rem; padding: .3rem .6rem; }
    .ficha h4 { font-size: 1rem; }
    .ficha .cargo, .ficha .dato { font-size: .8125rem; }
    .servicio h3 { font-size: 1.25rem; }
    .acciones .boton { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}