/* ============================================================
   NEREO — Ajustes personalizados (v1)
   ------------------------------------------------------------
   Se carga DESPUÉS de los CSS del tema hijo blocksy-nereo,
   así que sobrescribe sin romper nada.
   Reversible: borra este bloque (o el archivo) y el sitio
   vuelve exactamente al estado actual.
   ============================================================ */

/* ── 1. Contraste de textos atenuados (accesibilidad AA) ─────
   #475569 sobre el fondo #060c1a daba 2.58:1 → por debajo del
   mínimo legible (4.5:1). Con #93a6bf sube a 7.86:1.
   Afecta a: etiquetas de las mini-stats, tagline y copyright
   del footer, texto secundario de las tarjetas de fauna.
   Se usa `html:root` (mayor especificidad que `:root`) para
   ganar aunque este CSS se cargue ANTES que el del tema hijo.  */
html:root {
    --nereo-text-muted:     #93a6bf;
    --nereo-text-secondary: #aab9cc;
}

/* ── 2. Anclas con header fijo ───────────────────────────────
   El header es position:fixed, así que al pulsar "Ver
   capacidades" (#que-es-nereo) el título de la sección quedaba
   tapado por la barra. scroll-margin-top lo desplaza.           */
:target,
.nereo-section {
    scroll-margin-top: 96px;
}

/* ── 3. Foco visible al navegar con teclado ──────────────────
   Ahora mismo no hay ningún indicador de foco definido en el
   tema hijo; sin esto, navegar con Tab es imposible de seguir.  */
.nereo-site :is(a, button, input, textarea, select):focus-visible {
    outline: 2px solid var(--nereo-cyan);
    outline-offset: 3px;
    border-radius: var(--nereo-radius-sm);
}

/* ── 4. Selección de texto con el color de marca ───────────── */
.nereo-site ::selection {
    background: var(--nereo-cyan);
    color: var(--nereo-bg-deep);
}

/* ── 5. Coherencia de botones ────────────────────────────────
   El design system usa forma "pill" (--nereo-radius-full),
   pero Stackable trae --stk-button-border-radius: 0, así que
   los botones de los bloques salían cuadrados frente a los
   redondeados del tema. Aquí se unifican.                       */
.nereo-site .stk-button,
.nereo-site .wp-block-button__link,
.nereo-site input[type="submit"] {
    border-radius: var(--nereo-radius-full);
    font-family: var(--nereo-font-heading);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ── 6. Hero en pantallas bajas ──────────────────────────────
   min-height:100svh empuja todo el contenido fuera de pantalla
   en portátiles (1366x768). Se limita la altura máxima.
   OJO: solo para la PORTADA (`body.home`). Los heroes de las
   páginas interiores tienen su propia altura en la sección 17;
   si esta regla les afectara, se estirarían a 820px y dejarían
   un vacío enorme antes de la sección siguiente.                 */
@media (min-width: 992px) {
    body.home .nereo-hero {
        min-height: min(100svh, 820px);
    }
}

/* ── 7. Reduce movimiento si el usuario lo pide ──────────────
   El tema anima scanlines, cursor de escritura, glows y
   reveals. Quien tiene "reducir movimiento" activado en el
   sistema no debería verlas.                                    */
@media (prefers-reduced-motion: reduce) {
    .nereo-site *,
    .nereo-site *::before,
    .nereo-site *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .nereo-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── 8. Tipografía: evita líneas huérfanas ───────────────────
   text-wrap:balance en titulares y "pretty" en subtítulos
   reparte mejor las palabras sin tocar los tamaños.             */
.nereo-site h1,
.nereo-site h2,
.nereo-site h3,
.nereo-section__title,
.nereo-hero__title {
    text-wrap: balance;
}

.nereo-section__subtitle,
.nereo-what__body,
.nereo-ai-step__desc {
    text-wrap: pretty;
}

.nereo-hero__subtitle {
    max-width: 640px;
}

/* ── 9. Header SIEMPRE sólido (nunca transparente) ───────────
   El tema dejaba la barra transparente arriba del todo y la
   ponía translúcida al bajar: rgba(6, 12, 26, 0.92) + blur.
   Con eso se veía el contenido de la página a través de ella.
   Aquí la barra es OPACA en todo momento, arriba y al bajar.   */
.nereo-header,
.nereo-header.scrolled {
    background: #070e1d;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--nereo-glass-border);
}

/* Sombra solo al bajar, para despegarla del contenido */
.nereo-header.scrolled {
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
}

/* ── 10. Logo del footer: tamaño correcto ────────────────────
   El archivo del logo es un SVG CUADRADO (50x50, viewBox
   "0 0 50 50"), pero en el footer el <img> tenía
   width="100" height="30". Como no había ninguna altura
   definida en CSS, el navegador respetaba la proporción real
   del SVG (1:1) y lo pintaba a 100x100, enorme.
   Se fija a 28px de alto y ancho proporcional, como en la
   cabecera (que sí lo tenía acotado a 36px).                  */
.nereo-footer__brand img {
    height: 28px;
    width: auto;
}

/* ── 11. Fotos del equipo (página Nosotros) ──────────────────
   El tema usa `object-position: top center` (y=0%). Las cuatro
   fotos son verticales (relación de 0,67 a 0,80), así que al
   recortarlas en cuadrado pegado arriba quedaba solo la cara,
   sin hombros: encuadres muy cerrados y distintos entre sí.
   Peor aún: el propio tema pone encima un degradado oscuro que
   cubre el 45% inferior del hueco, y con el recorte actual ese
   degradado caía sobre la barbilla y el cuello.
   Con y=35% las cuatro quedan en cabeza y hombros, y el
   degradado cae sobre el pecho, que es donde debe ir.            */
.nereo-team-card__photo {
    object-position: 50% 35%;
}

/* ── 11b. Foto de Pablo: solo a él ───────────────────────────
   Su foto es un plano muy abierto: cielo y montañas arriba (0-22%),
   lago claro (23-51%), él (54-80%) y agua oscura abajo (82-100%).
   Es decir, más de la mitad de la foto no es él. Se recorta
   pegando al borde inferior (fuera cielo y orilla) y se acerca
   un 30% desde ese mismo borde, con lo que el encuadre pasa a
   cubrir del 45% al 100% de la foto: él llena el hueco.
   Se selecciona por el nombre del archivo, no por posición.     */
.nereo-team-grid .nereo-team-card__photo[src*="2025-10-29"] {
    object-position: 50% 100%;
    transform: scale(1.3);
    transform-origin: 50% 100%;
}

/* Pablo conserva su acercamiento fijo, pero NO cambia al pasar el ratón:
   hay que reafirmarlo aquí porque, si no, el :hover del tema (scale 1.04)
   sustituiría su escala base (1.3) y la foto pegaría un salto. */
.nereo-team-grid .nereo-team-card:hover .nereo-team-card__photo[src*="2025-10-29"] {
    transform: scale(1.3);
}

/* ── 12. Quitar el parpadeo al pasar el ratón por el equipo ──
   La tarjeta lleva la clase .nereo-glass, que aplica
   `backdrop-filter: blur(16px)`. Sobre un fondo plano y oscuro
   ese desenfoque NO se aprecia, pero hace que el navegador
   recalcule el fondo borroso en cada fotograma.
   Al pasar el ratón ocurren tres cosas a la vez: la tarjeta
   sube, la foto se agranda y la foto pasa de gris a color. Con
   el desenfoque de por medio, ese recálculo continuo provoca
   los destellos.
   Se desactiva el desenfoque (no aportaba nada visualmente) y
   se promociona la foto a su propia capa gráfica para que el
   zoom se componga sin repintar.                              */
.nereo-team-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.nereo-team-card .nereo-team-card__photo-wrap {
    isolation: isolate;
    transform: translateZ(0);
}

.nereo-team-card .nereo-team-card__photo {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ── 13. Bloque final "¿Quieres colaborar?" ──────────────────
   Sus estilos están en `nereo-home.css`, que SOLO se carga en la
   portada. En /about, /contact y /privacidad el bloque se queda
   sin estilos, y por eso se veía así:
     - el título heredaba el tamaño genérico: 40px, muy grande;
     - sin espaciado entre elementos, el botón quedaba PEGADO al
       texto (separación real medida: 0px).
   Aquí se le dan los estilos que le faltan. Se limita a las
   páginas que NO son la portada (`body:not(.home)`) para no
   alterar el bloque de la home, que sí tiene sus estilos.        */
body:not(.home) .nereo-cta {
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

body:not(.home) .nereo-cta__title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);   /* 32px máx. en vez de 40px */
    line-height: 1.2;
    font-weight: 700;
    max-width: 620px;
}

body:not(.home) .nereo-cta__subtitle {
    font-size: 1rem;
    color: var(--nereo-text-secondary);
    max-width: 540px;
    line-height: 1.7;
}

body:not(.home) .nereo-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 0.75rem;   /* despega el botón del texto */
}

/* ── 14. El "mapa" de la sección Cobertura ───────────────────
   `map.svg` no es un mapa: es un icono de 55x51 (un mapa doblado
   con un pin). El HTML lo declara como 900x500, pero su relación
   real es casi cuadrada y con `height:auto` se renderizaba a
   868x805 px: un icono ampliado 16 veces, ocupando la sección
   entera (1436px de alto).
   Se limita a 190px y el panel se ajusta a lo que contiene.      */
.nereo-coverage__map-wrap {
    width: auto;
    max-width: 100%;
    padding: 2.5rem 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nereo-coverage__map {
    width: 190px;
    height: auto;
    opacity: 0.85;
}

/* Un poco más de aire entre las etiquetas de zonas */
.nereo-coverage__zones {
    gap: 1rem;
}

/* ── 15. Tarjetas del equipo: quietas al pasar el ratón ──────
   El tema hacía dos movimientos al pasar el ratón por encima:
   la tarjeta subía 6px y la foto se agrandaba un 4%.
   Aquí se anulan los dos: la tarjeta y la foto se quedan
   exactamente igual. Se conserva solo el cambio de COLOR (el
   borde se ilumina y la foto pasa de gris a color), que no
   mueve nada de sitio.                                          */
.nereo-team-grid .nereo-team-card:hover {
    transform: none;
}

.nereo-team-grid .nereo-team-card:hover .nereo-team-card__photo {
    transform: none;
}

/* ── 16. Logo de IWC en el pie, junto al de NEREO ────────────
   El logo de la International Whaling Commission se coloca al
   lado del de NEREO, en la misma fila. Es una marca blanca muy
   marca blanca muy apaisada (542 x 83), así que se fija a 26px de alto y el ancho
   lo calcula el navegador solo (unos 170px).
   La imagen del pie en general está forzada a 28px por la regla
   de la sección 10; por eso aquí hace falta un selector más
   específico para dejarla en 26px.                              */
.nereo-footer__logos {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.nereo-footer__brand .nereo-footer__iwc {
    display: block;
    line-height: 0;
    transition: opacity 0.2s ease;
}

.nereo-footer__brand .nereo-footer__iwc:hover {
    opacity: 0.75;
}

.nereo-footer__brand .nereo-footer__iwc img {
    height: 26px;
    width: auto;
}

/* ── 17. Heroes de páginas interiores ───────────────────────
   Estas reglas viven en `nereo-about.css`, que SOLO se carga en
   /about. En /contact el hero se quedaba sin padding (el texto
   pegado a la cabecera) y con la altura mínima de la sección 6
   (820px) → medio metro de vacío antes de la sección siguiente.
   Aquí se replican tal cual están en about.css: /about queda
   igual que estaba y /contact pasa a verse igual que /about.    */
.nereo-hero--page {
    min-height: 60svh;
    padding-block: 7rem 4rem;
}

/* ── 18. "Mapa" del bloque de contacto ──────────────────────
   Es el MISMO icono de 55x51 que en /about (map.svg) y aquí se
   renderizaba a 461x427 px. Se limita a 150px y el panel se
   ajusta a lo que contiene.                                     */
.nereo-contact-map {
    width: fit-content;
    max-width: 100%;
    align-self: center;
    padding: 2rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nereo-contact-map__img {
    width: 150px;
    height: auto;
    opacity: 0.85;
}

/* ── 19. Conmutador de idioma (cabecera) ─────────────────────
   Los dos botones van dentro de una misma pastilla, para que se
   lean como UN solo control y no como dos enlaces sueltos.
   Los márgenes negativos compensan los 32px de hueco general de
   la cabecera y lo acercan al menú y al botón.                   */
.nereo-lang {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 3px;
    border: 1px solid var(--nereo-glass-border);
    border-radius: var(--nereo-radius-full);
    background: rgba(255, 255, 255, 0.04);
    font-family: var(--nereo-font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-inline: -0.5rem;
}

.nereo-lang__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 0.3rem 0.45rem;
    border-radius: var(--nereo-radius-full);
    color: var(--nereo-text-muted);
    text-decoration: none;
    transition: var(--nereo-transition);
}

.nereo-lang__btn:hover {
    color: var(--nereo-text-primary);
    background: var(--nereo-cyan-dim);
}

.nereo-lang__btn.is-active {
    color: var(--nereo-cyan);
    background: var(--nereo-cyan-dim);
}

/* ── 20. Logo de SEASHORE en el pie ──────────────────────────
   Va junto al de la comisión ballenera y enlaza a su web.
   Necesita selector propio porque la sección 10 fuerza 28px
   a todas las imágenes del pie.                                 */
.nereo-footer__brand .nereo-footer__seashore {
    display: block;
    line-height: 0;
    transition: opacity 0.2s ease;
}

.nereo-footer__brand .nereo-footer__seashore:hover {
    opacity: 0.75;
}

.nereo-footer__brand .nereo-footer__seashore img {
    height: 44px;
    width: auto;
}

/* ============================================================
   OPCIONAL — descomenta el bloque que te guste y avísame.
   (Están comentados para no cambiar la estética sin tu OK.)
   ============================================================ */

/* A. Acento menos "neón", más corporativo
:root {
    --nereo-cyan:        #38bdf8;
    --nereo-teal:        #2dd4bf;
    --nereo-purple:      #6366f1;
    --nereo-cyan-glow:   0 0 20px rgba(56, 189, 248, 0.35);
    --nereo-cyan-dim:    rgba(56, 189, 248, 0.10);
}
*/

/* B. Titulares algo más grandes y con tracking negativo
.nereo-hero__title {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    letter-spacing: -0.02em;
}
.nereo-section__title {
    letter-spacing: -0.015em;
}
*/

/* C. Tarjetas con más aire
.nereo-benefit-card { padding: 2rem 1.75rem; }
.nereo-fauna-card   { padding: 1.875rem 1.25rem; }
*/

/* D. Cabecera con el glass siempre visible (no solo al hacer scroll)
.nereo-header {
    background: rgba(6, 12, 26, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nereo-glass-border);
}
*/

/* E. Menos altura de sección (sitio más compacto)
:root {
    --nereo-section-py: clamp(3rem, 6vw, 5.5rem);
}
*/