/* ============================================================
   PEZQUIZA — Sistema de diseño
   Fundación sin ánimo de lucro · pezquiza.org
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Paleta primaria
     --azul es EL azul de marca (#0091d0). Es el único azul que se ve en el
     sitio: rellenos, iconos, acentos, bordes y textos sobre fondo oscuro.
     --azul-legible existe solo por accesibilidad: el azul de marca sobre el
     fondo hueso da 3.2:1 y no pasa el mínimo legal de 4.5:1. Se usa
     ÚNICAMENTE en texto pequeño sobre secciones claras. En ningún otro lado. */
  --azul:         #0091d0;
  --azul-legible: #0076aa;
  --negro:       #16181c;
  --negro-2:     #1e2127;
  --negro-3:     #272b33;
  --hueso:       #f4f4f4;
  --blanco:      #ffffff;

  /* Paleta secundaria — una por línea de acción */
  --investigacion: #f0ca4b;
  --educacion:     #8a83b9;
  --restauracion:  #76b087;
  --economia:      #de7769;

  /* Texto */
  --txt:        var(--hueso);
  --txt-suave:  rgba(244,244,244,.62);
  --txt-tenue:  rgba(244,244,244,.55);
  --linea:      rgba(244,244,244,.14);

  /* Tipografía */
  --display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --texto:   'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  /* Escala fluida */
  --t-hero:  clamp(2.6rem, 8.5vw, 8rem);
  --t-xxl:   clamp(2.1rem, 5.4vw, 4.6rem);
  --t-xl:    clamp(1.7rem, 3.6vw, 3rem);
  --t-lg:    clamp(1.25rem, 2.1vw, 1.75rem);
  --t-md:    clamp(1rem, 1.25vw, 1.15rem);
  --t-sm:    .875rem;
  --t-xs:    .75rem;

  /* Ritmo */
  --gutter:  clamp(1.25rem, 5vw, 5rem);
  --seccion: clamp(5rem, 12vh, 10rem);
  --radio:   14px;

  /* Movimiento */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .75s;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--txt);
  font-family: var(--texto);
  font-size: var(--t-md);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--azul); color: var(--blanco); }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Accesibilidad: saltar al contenido */
.skip {
  position: absolute; top: -100px; left: var(--gutter);
  background: var(--azul); color: var(--negro);
  padding: .8rem 1.4rem; border-radius: 0 0 8px 8px;
  z-index: 999; font-size: var(--t-sm); font-weight: 600;
  transition: top .2s;
}
.skip:focus { top: 0; }

/* ---------- 3. Layout ---------- */
.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--estrecho { max-width: 900px; }
.wrap--medio    { max-width: 1140px; }

section { position: relative; }
.seccion { padding-block: var(--seccion); }
.seccion--corta { padding-block: clamp(3rem,7vh,5.5rem); }

.claro { background: var(--hueso); color: var(--negro); }
.claro h1, .claro h2, .claro h3 { color: var(--negro); }
.claro .apartado { color: rgba(22,24,28,.66); }
.claro .lead { color: rgba(22,24,28,.76); }
.claro p { color: rgba(22,24,28,.78); }

/* Islas oscuras dentro de secciones claras.
   Una sección .claro pinta su texto de negro, pero algunos componentes traen
   su propia superficie oscura (tarjetas de proyecto, pastillas sobre foto).
   Sin esto el texto queda negro sobre negro y no se lee. */
.claro .superficie-oscura,
.claro .superficie-oscura h1,
.claro .superficie-oscura h2,
.claro .superficie-oscura h3,
.claro .superficie-oscura h4 { color: var(--txt); }
.claro .superficie-oscura p { color: var(--txt-suave); }
.claro .superficie-oscura .lead { color: var(--txt-suave); }
.claro .superficie-oscura .apartado { color: var(--txt-tenue); }

/* ---------- 4. Tipografía de apoyo ---------- */
.apartado {
  font-family: var(--texto);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--txt-tenue);
  margin-bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.apartado::before {
  content: '';
  width: 22px; height: 1px;
  background: var(--azul);
  flex: none;
}

.lead {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--txt-suave);
  font-weight: 400;
  letter-spacing: -.01em;
}

.azul { color: var(--azul); }

/* Corchete tipográfico — elemento de énfasis de marca */
.corchete { position: relative; display: inline-block; padding-inline: .38em; }
.corchete::before, .corchete::after {
  content: '';
  position: absolute; top: 4%; bottom: 4%;
  width: .17em;
  background: var(--azul);
}
.corchete::before { left: 0;  clip-path: polygon(100% 0, 38% 48%, 100% 100%, 0 100%, 0 0); }
.corchete::after  { right: 0; clip-path: polygon(0 0, 62% 48%, 0 100%, 100% 100%, 100% 0); }

/* ---------- 5. Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--texto);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
  padding: .95rem 1.8rem;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .3s var(--ease);
  white-space: nowrap;
}
.btn svg { transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--primario { background: var(--azul); color: var(--negro); }
.btn--primario:hover { filter: brightness(1.09); transform: translateY(-2px); }

.btn--linea { border-color: var(--linea); color: var(--txt); }
.btn--linea:hover { border-color: var(--azul); color: var(--azul); }

.claro .btn--linea { border-color: rgba(22,24,28,.2); color: var(--negro); }
.claro .btn--linea:hover { border-color: var(--azul); color: var(--azul); }

.btn--sm { padding: .6rem 1.2rem; font-size: var(--t-xs); }
.btn--donar { text-transform: uppercase; letter-spacing: .06em; }

/* Enlace con flecha */
.enlace {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--azul);
  transition: gap .3s var(--ease);
}
.enlace:hover { gap: .8rem; }
.claro .enlace { color: var(--azul-legible); }

/* Enlaces dentro de las fichas de datos (correo, teléfono, Instagram) */
.dato a { color: var(--azul); }
.claro .dato a { color: var(--azul-legible); }

/* ---------- 6. Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.1rem;
  transition: background .4s var(--ease), backdrop-filter .4s, border-color .4s, padding .4s;
  border-bottom: 1px solid transparent;
}
.nav.compacta {
  background: rgba(22,24,28,.82);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--linea);
  padding-block: .7rem;
}
.nav__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.nav__logo img { height: 26px; width: auto; }

.nav__links {
  display: flex; align-items: center; gap: clamp(1rem,2.2vw,2.1rem);
}
.nav__links a {
  font-size: var(--t-sm); font-weight: 500;
  color: var(--txt-suave);
  transition: color .25s;
  position: relative;
}
.nav__links a::after {
  content:''; position:absolute; left:0; bottom:-5px;
  width:0; height:1.5px; background: var(--azul);
  transition: width .3s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--txt); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { width: 100%; }

.nav__acciones { display: flex; align-items: center; gap: .8rem; }

.lang {
  display: flex; align-items: center;
  border: 1px solid var(--linea);
  border-radius: 100px; overflow: hidden;
}
.lang button {
  background: none; border: 0; cursor: pointer;
  font-family: var(--texto); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em;
  padding: .42rem .72rem;
  color: var(--txt-tenue);
  transition: all .25s;
}
.lang button.activo { background: var(--azul); color: var(--negro); }
.lang button:not(.activo):hover { color: var(--txt); }

.nav__burger {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; padding: 8px;
}
.nav__burger span {
  display: block; height: 1.5px; background: var(--txt);
  margin: 5px 0; transition: all .3s var(--ease);
}
.nav__burger.abierto span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.abierto span:nth-child(2) { opacity: 0; }
.nav__burger.abierto span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav__burger { display: block; }
  .nav__links {
    position: fixed; inset: 0;
    background: rgba(22,24,28,.97);
    backdrop-filter: blur(20px);
    flex-direction: column; justify-content: center;
    gap: 1.7rem;
    transform: translateX(100%);
    transition: transform .45s var(--ease);
  }
  .nav__links.abierto { transform: translateX(0); }
  .nav__links a { font-size: var(--t-xl); font-family: var(--display); color: var(--txt); }
  .nav__links a::after { display: none; }
}

/* ---------- 7. Hero con olas animadas ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero--interior { min-height: 46svh; }

/* Lienzo de olas: canvas difuminado que fluye, como el referente de Valar.
   Menos blur y más saturación que la v1 para que las ondas se vean como
   ondas y no como un lavado uniforme. */
.olas {
  position: absolute; inset: -18%;
  z-index: -2;
  filter: blur(38px) saturate(175%) contrast(1.08);
  opacity: 1;
  transform: translateZ(0);
}
.hero--interior .olas { filter: blur(56px) saturate(150%); opacity: .6; }

/* Video de fondo del hero (home). Un solo plano continuo de cardumen, en
   loop y sin audio — el recurso de Coral Gardeners. Va dentro de .hero__fondo
   para no chocar con los pseudo-elementos que ya usa .hero. */
.hero__fondo {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
  background: var(--negro);
}
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* El metraje original es blando y en pantalla grande se le ven los bloques
     del códec. Un desenfoque mínimo más un leve zoom (para que el blur no
     deje borde) los disimula sin que se pierda la lectura del cardumen, y de
     paso acerca el fondo al difuminado del referente. */
  filter: saturate(.72) contrast(1.06) brightness(.9) blur(1.5px);
  transform: scale(1.03);
}
@media (min-width: 1500px) {
  .hero__video { filter: saturate(.72) contrast(1.06) brightness(.9) blur(2.5px); transform: scale(1.045); }
}
/* Capa de color: lleva el metraje al azul de marca */
.hero__fondo::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--azul);
  mix-blend-mode: color;
  opacity: .45;
  pointer-events: none;
}
.hero--video .grano { opacity: .1; }

/* Se oscurece al pasar el mouse, como el referente de Valar */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: rgba(2,8,14,0);
  transition: background .7s var(--ease);
  pointer-events: none;
}
.hero:hover::before { background: rgba(2,8,14,.4); }

/* Viñeta ligera: solo lo necesario para que el texto se lea, sin tapar
   las ondas. La legibilidad del texto se refuerza con text-shadow. */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(6,12,18,.5) 0%, rgba(6,12,18,.26) 26%, rgba(6,12,18,.08) 48%, transparent 70%),
    linear-gradient(to bottom, rgba(6,12,18,.22) 0%, transparent 22%, transparent 62%, rgba(6,12,18,.55) 100%);
  pointer-events: none;
}
@media (max-width: 780px) {
  .hero::after {
    background:
      linear-gradient(to bottom, rgba(6,12,18,.5) 0%, rgba(6,12,18,.24) 40%, rgba(6,12,18,.2) 66%, rgba(6,12,18,.62) 100%);
  }
}

/* Con el video el fondo tiene más detalle, así que el degradado de
   legibilidad pesa un poco más que sobre las olas. */
.hero--video::after {
  background:
    linear-gradient(100deg, rgba(4,10,16,.72) 0%, rgba(4,10,16,.46) 30%, rgba(4,10,16,.2) 55%, rgba(4,10,16,.06) 78%),
    linear-gradient(to bottom, rgba(4,10,16,.4) 0%, transparent 24%, transparent 55%, rgba(4,10,16,.72) 100%);
}
@media (max-width: 780px) {
  .hero--video::after {
    background: linear-gradient(to bottom, rgba(4,10,16,.62) 0%, rgba(4,10,16,.4) 40%, rgba(4,10,16,.4) 64%, rgba(4,10,16,.78) 100%);
  }
}

/* Grano sutil sobre el hero */
.grano {
  position: absolute; inset: 0; z-index: 1;
  opacity: .14; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hero__contenido { position: relative; z-index: 2; width: 100%; padding-block: 10rem 6rem; }

/* Sin halo ni sombra: el logotipo va limpio sobre el fondo. La legibilidad
   la resuelve el degradado del hero (.hero::after), no un aura alrededor
   de la marca. */
.hero__logo {
  width: min(620px, 78vw);
  margin-bottom: 1.6rem;
}
.hero__tagline {
  width: min(250px, 42vw);
  margin-bottom: clamp(2.2rem, 5vh, 3.6rem);
  opacity: .95;
}
.hero__frase {
  font-size: var(--t-xl);
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.14;
  max-width: 18ch;
  margin-bottom: 2.4rem;
  letter-spacing: -.03em;
  text-shadow: 0 2px 4px rgba(2,6,10,.55), 0 12px 34px rgba(2,6,10,.5);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Mismos rasgos que los apartados del resto del sitio: Inter, 700 y el
   mismo espaciado de letra, para que «Sumérgete» se lea como uno más. */
.hero__scroll {
  position: absolute; left: 50%; bottom: 2.2rem;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--texto);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--txt-tenue);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
/* En vez de una línea genérica, el corchete de marca hundiéndose: la misma
   figura que hace de viñeta, girada para que apunte hacia abajo. */
.hero__scroll::after {
  content: ''; width: 13px; height: 26px;
  background: var(--azul);
  clip-path: polygon(0 0, 62% 48%, 0 100%, 38% 100%, 100% 48%, 38% 0);
  transform: rotate(90deg);
  animation: hundirse 2.4s var(--ease) infinite;
}
@keyframes hundirse {
  0%   { transform: rotate(90deg) translateX(-9px); opacity: 0; }
  30%  { transform: rotate(90deg) translateX(0);    opacity: 1; }
  70%  { transform: rotate(90deg) translateX(4px);  opacity: 1; }
  100% { transform: rotate(90deg) translateX(13px); opacity: 0; }
}

/* Hero de páginas interiores */
.hero--interior .hero__contenido { padding-block: 8rem 3rem; }
.hero--interior h1 {
  font-size: clamp(2.4rem, 6vw, 5.2rem); max-width: 16ch;
  text-shadow: 0 2px 4px rgba(2,6,10,.55), 0 12px 34px rgba(2,6,10,.5);
}
.hero--interior .lead { text-shadow: 0 2px 12px rgba(2,6,10,.6); }
.hero--interior .apartado { text-shadow: 0 2px 10px rgba(2,6,10,.7); }

/* ---------- 8. Declaración grande (estilo Valar) ---------- */
.declaracion {
  font-family: var(--display);
  font-size: var(--t-xxl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.032em;
  max-width: 24ch;
}
.declaracion--ancha { max-width: 34ch; }

/* Revelado palabra por palabra */
.reveal-palabra { display: inline-block; overflow: hidden; vertical-align: bottom; }
.reveal-palabra > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .95s var(--ease);
}
.visible .reveal-palabra > span { transform: translateY(0); }

/* ---------- 9. Revelado al hacer scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
}
[data-reveal].visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], .reveal-palabra > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__scroll::after { animation: none; }
  .olas { display: none; }
  .hero { background: linear-gradient(140deg, #0a3550, var(--negro) 62%); }
  .pez-flotante { display: none; }
}

/* Si el JavaScript falla o está desactivado, todo el contenido sigue visible */
.no-js [data-reveal] { opacity: 1; transform: none; }
.no-js .olas { display: none; }
.no-js .hero { background: linear-gradient(140deg, #0a3550, var(--negro) 62%); }

/* ---------- 10. Cifras de impacto ---------- */
.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2.2rem,5vw,4rem) clamp(2.4rem,5vw,4.5rem);
}
.cifra { flex: 1 1 190px; padding-block: .2rem; }
.cifra__num {
  font-family: var(--display);
  font-size: clamp(2.3rem, 4.6vw, 3.9rem);
  font-weight: 800; line-height: 1;
  letter-spacing: -.045em;
  color: var(--azul);
  margin-bottom: .55rem;
  font-variant-numeric: tabular-nums;
}
.cifra__txt { font-size: var(--t-sm); color: var(--txt-suave); line-height: 1.45; }
.claro .cifra__txt { color: rgba(22,24,28,.62); }
.cifra__fuente { font-size: var(--t-xs); color: var(--txt-tenue); margin-top: .5rem; }
.claro .cifra__fuente { color: rgba(22,24,28,.66); }

/* ---------- 11. Las 4 líneas ---------- */
.lineas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1.15rem;
}
.linea {
  --c: var(--azul);
  position: relative;
  background: var(--negro-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 2.1rem 3.1rem 1.9rem 1.7rem;
  overflow: hidden;
  transition: transform .45s var(--ease), border-color .45s, background .45s;
}
.linea > * { position: relative; z-index: 1; }
.linea::before {
  content: ''; position: absolute; inset: 0 0 auto 0;
  height: 3px; background: var(--c);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
/* El fondo de cada tarjeta es el corchete de marca en el color de su línea,
   no un círculo genérico. Va recortado con clip-path y no con una imagen:
   las máscaras con archivo externo no cargan al abrir el HTML con doble
   clic (protocolo file://) y la figura desaparecía. El polígono son las
   proporciones exactas de corchete-blanco.png. */
.linea::after {
  content: ''; position: absolute;
  width: 86px; height: 76%; right: -12px; top: 50%;
  background: var(--c); opacity: .16;
  clip-path: polygon(19.5% 0, 97.6% 0, 81.1% 50%, 97.6% 100%, 19.5% 100%, 1.2% 50%);
  transform: translateY(-50%) scale(1);
  transition: opacity .45s, transform .55s var(--ease);
}
.linea:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.linea:hover::before { transform: scaleX(1); }
.linea:hover::after { opacity: .3; transform: translateY(-50%) scale(1.14); }
.linea__n {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; color: var(--c);
  margin-bottom: 1.1rem; display: block;
}
.linea h3 { font-size: var(--t-lg); margin-bottom: .75rem; }
.linea p { font-size: var(--t-sm); color: var(--txt-suave); margin: 0; }

.linea--investigacion { --c: var(--investigacion); }
.linea--educacion     { --c: var(--educacion); }
.linea--restauracion  { --c: var(--restauracion); }
.linea--economia      { --c: var(--economia); }

/* ---------- 12. Proyectos ---------- */
.proyectos { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }

.proyecto {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--negro-2);
  border: 2px solid var(--linea);
  display: flex; flex-direction: column;
  transition: transform .45s var(--ease), border-color .45s;
}
.proyecto:hover { transform: translateY(-5px); border-color: rgba(0,145,208,.42); }
.proyecto__img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--negro-3); }
.proyecto__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease), filter .6s;
  filter: saturate(.92);
}
.proyecto:hover .proyecto__img img { transform: scale(1.055); filter: saturate(1.05); }
.proyecto__etiqueta {
  position: absolute; top: .85rem; left: .85rem;
  background: rgba(22,24,28,.82);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(244,244,244,.16);
  padding: .34rem .72rem; border-radius: 100px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  color: var(--txt);
}
/* La tarjeta es una isla oscura: fija su propio color de texto pase lo que
   pase en la sección que la contenga. */
.proyecto, .proyecto h3, .proyecto h4 { color: var(--txt); }
.proyecto p { color: var(--txt-suave); }
.proyecto .proyecto__lugar { color: var(--azul); }
.proyecto .proyecto__dato { color: var(--txt); }
.proyecto__cuerpo { padding: 1.5rem 1.4rem 1.6rem; flex: 1; display: flex; flex-direction: column; }
.proyecto__cuerpo h3 { font-size: var(--t-lg); margin-bottom: .5rem; }
.proyecto__lugar { font-size: var(--t-xs); color: var(--azul); letter-spacing: .05em; text-transform: uppercase; font-weight: 600; margin-bottom: .9rem; }
.proyecto__cuerpo p { font-size: var(--t-sm); color: var(--txt-suave); flex: 1; }
.proyecto__dato {
  margin-top: 1.2rem; padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
  font-size: var(--t-sm); font-weight: 600; color: var(--txt);
}
.proyecto__dato strong { color: var(--azul); font-family: var(--display); font-size: 1.15em; }

/* Ficha extendida (página de proyectos) */
.ficha {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vh, 5.5rem);
  border-bottom: 1px solid var(--linea);
}
.ficha:last-child { border-bottom: 0; }
.ficha:nth-child(even) .ficha__media { order: 2; }
.ficha__media { position: relative; }
.ficha__media img { width: 100%; border-radius: var(--radio); aspect-ratio: 4/3; object-fit: cover; }
.ficha__media img + img { margin-top: 1rem; }
.ficha h2 { font-size: var(--t-xl); margin-bottom: .4rem; }
.ficha__meta {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1.5rem;
}
.pastilla {
  --c: var(--azul);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  padding: .3rem .72rem; border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
  color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, transparent);
}
.pastilla--investigacion { --c: var(--investigacion); }
.pastilla--educacion     { --c: var(--educacion); }
.pastilla--restauracion  { --c: var(--restauracion); }
.pastilla--economia      { --c: var(--economia); }

.bloque-detalle { margin-top: 1.7rem; }
.bloque-detalle h4 {
  font-family: var(--texto); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--txt-tenue); margin-bottom: .7rem;
}
.bloque-detalle li {
  font-size: var(--t-sm); color: var(--txt-suave);
  padding-left: 1.15rem; position: relative; margin-bottom: .45rem;
}
/* Viñeta de corchete: el elemento de marca haciendo de bullet */
.bloque-detalle li { padding-left: 1.45rem; }
.bloque-detalle li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: .42em; height: .95em;
  background: var(--azul);
  clip-path: polygon(0 0, 62% 48%, 0 100%, 38% 100%, 100% 48%, 38% 0);
}
.claro .bloque-detalle li::before { background: var(--azul-legible); }

/* Cadena de cambio: Conocimiento → Capacidades → ... */
.cadena {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  margin-top: 1.7rem; padding-top: 1.4rem; border-top: 1px solid var(--linea);
}
.cadena span {
  font-size: var(--t-xs); font-weight: 600;
  padding: .34rem .74rem; border-radius: 100px;
  background: var(--negro-3); color: var(--txt-suave);
}
.claro .cadena span { background: rgba(22,24,28,.07); color: rgba(22,24,28,.7); }
.cadena i { color: var(--azul); font-style: normal; font-size: var(--t-sm); }

@media (max-width: 860px) {
  .ficha { grid-template-columns: 1fr; }
  .ficha:nth-child(even) .ficha__media { order: 0; }
}

/* ---------- 13. Equipo ---------- */
.equipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1.5rem 1.15rem; }
.persona__foto {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radio); background: var(--negro-3);
  margin-bottom: 1rem;
}
.persona__foto img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter .6s var(--ease), transform 1s var(--ease);
}
.persona:hover .persona__foto img { filter: grayscale(0); transform: scale(1.05); }
.persona__foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,145,208,.28), transparent 55%);
  opacity: 0; transition: opacity .6s;
}
.persona:hover .persona__foto::after { opacity: 1; }
.persona h3 { font-size: var(--t-md); margin-bottom: .25rem; letter-spacing: -.015em; transition: color .25s; }
.persona__rol { font-size: var(--t-xs); color: var(--azul); font-weight: 600; letter-spacing: .04em; margin-bottom: .6rem; }
.persona p { font-size: var(--t-sm); color: var(--txt-suave); margin: 0 0 .5rem; }
.claro .persona p { color: rgba(22,24,28,.66); }
.persona__enlace { display: block; color: inherit; }
.persona__enlace:hover h3 { color: var(--azul); }
.persona__correo { margin-top: .2rem; }

/* ---------- 14. Aliados y territorio ---------- */
.territorio {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(2rem,5vw,4.5rem);
  align-items: center;
}
@media (max-width: 860px) { .territorio { grid-template-columns: 1fr; } }
.territorio__mapa { position: relative; text-align: center; }
.territorio__mapa img {
  max-height: clamp(440px, 62vh, 780px); width: auto; margin-inline: auto;
  filter: drop-shadow(0 0 60px rgba(0,145,208,.34));
}

/* El corchete de marca ya no enmarca fotos: enmarcar imágenes lo volvía
   decoración de esquina. Ahora abre las listas, que es donde un corchete
   hace lo que hace en tipografía: señalar que aquí empieza algo. */
.marco-corchete { position: relative; display: block; }

.aliados { display: flex; flex-wrap: wrap; gap: .9rem; }
.aliado {
  flex: 1 1 220px;
  background: var(--negro-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.4rem 1.3rem;
  transition: border-color .35s, transform .35s var(--ease);
}
.claro .aliado { background: #fff; border-color: rgba(22,24,28,.1); }
.aliado:hover { border-color: rgba(0,145,208,.4); transform: translateY(-3px); }
.aliado h4 { font-family: var(--texto); font-size: var(--t-sm); font-weight: 700; margin-bottom: .35rem; }
.aliado p { font-size: var(--t-xs); color: var(--txt-suave); margin: 0; }
.claro .aliado p { color: rgba(22,24,28,.6); }

/* ---------- 15. Tarjetas de acción ---------- */
.acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px,1fr)); gap: 1.15rem; }
.accion {
  background: var(--negro-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 2rem 1.7rem;
  display: flex; flex-direction: column;
  transition: transform .45s var(--ease), border-color .45s, background .45s;
}
.claro .accion { background: #fff; border-color: rgba(22,24,28,.1); }
.accion:hover { transform: translateY(-5px); border-color: rgba(0,145,208,.45); }
.accion__icono {
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(0,145,208,.13);
  display: grid; place-items: center;
  margin-bottom: 1.3rem;
  color: var(--azul);
}
.accion h3 { font-size: var(--t-lg); margin-bottom: .6rem; }
.accion p { font-size: var(--t-sm); color: var(--txt-suave); flex: 1; margin-bottom: 1.4rem; }
.claro .accion p { color: rgba(22,24,28,.68); }

/* ---------- 16. Textura como fondo de sección ----------
   Las fotos de textura (coral, cardumen) se usan como fondo,
   no como decoración recortada: blanco y negro con un ligero
   tinte azul de marca.
   La imagen se elige con una clase modificadora, NO con una variable inline:
   una url() relativa dentro de una custom property la resuelve el navegador
   contra la hoja de estilos, no contra la página, y quedaba apuntando a
   assets/css/assets/img/... Con la ruta escrita aquí no hay ambigüedad. */
.textura-fondo { position: relative; isolation: isolate; overflow: hidden; }
.textura-fondo::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--tex, none);
  background-size: cover; background-position: center;
  filter: grayscale(1) brightness(.42) contrast(1.08);
}
.textura-fondo::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,74,110,.5), rgba(4,10,16,.86));
  mix-blend-mode: multiply;
}
.textura-fondo.claro::after { background: linear-gradient(180deg, rgba(0,84,122,.14), rgba(244,244,244,.9)); }
.textura-fondo.claro { color: var(--negro); }
.textura-fondo.claro h2, .textura-fondo.claro h3 { color: var(--negro); }

/* ---------- 17. Cita destacada ---------- */
.cita {
  position: relative;
  padding: clamp(2.5rem,6vw,4.5rem) 0;
  text-align: center;
}
.cita blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 700; line-height: 1.16;
  letter-spacing: -.03em;
  /* 22ch dejaba la frase en tres o cuatro renglones muy verticales.
     Con 46ch entra en dos y usa el ancho de la página. */
  max-width: 46ch; margin-inline: auto;
}

/* ---------- 18. Tarjetas de frente en construcción (Del territorio) ---------- */
.frentes { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.frente {
  background: var(--negro-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 2rem 1.7rem;
  transition: border-color .4s;
}
.frente:hover { border-color: rgba(0,145,208,.4); }
.frente--destacado { padding: clamp(1.8rem,4vw,2.8rem); }
.frente__etiqueta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--azul); margin-bottom: 1rem;
}
.frente__etiqueta::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); }
.frente h3 { font-size: var(--t-lg); margin-bottom: .7rem; }
.frente > p { font-size: var(--t-sm); color: var(--txt-suave); margin-bottom: 1.3rem; }

.frente__detalle summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--azul);
}
.frente__detalle summary::-webkit-details-marker { display: none; }
.frente__detalle summary::after {
  content: '+'; font-size: 1.1em; line-height: 1; transition: transform .3s var(--ease);
}
.frente__detalle[open] summary::after { transform: rotate(45deg); }
.frente__detalle .frente__panel {
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--linea);
}

.especies { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.especies span {
  font-size: var(--t-xs); font-weight: 600; padding: .38rem .8rem;
  border-radius: 100px; background: var(--negro-3); color: var(--txt-suave);
}

.experiencias { display: grid; gap: .7rem; margin-top: 1.2rem; }
.experiencia {
  border: 1px solid var(--linea); border-radius: 10px;
  padding: 1rem 1.1rem; transition: border-color .3s, background .3s;
}
.experiencia summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: var(--t-sm); font-weight: 600;
}
.experiencia summary::-webkit-details-marker { display: none; }
.experiencia summary .estado {
  font-size: var(--t-xs); font-weight: 600; color: var(--txt-tenue); white-space: nowrap;
}
.experiencia:hover { border-color: rgba(0,145,208,.4); }
.experiencia p { margin-top: .8rem; font-size: var(--t-sm); color: var(--txt-suave); }

/* ---------- 19a-bis. Pestañas (Pesca artesanal responsable) ---------- */
.pestanas__nav { display: flex; gap: .45rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.pestanas__btn {
  background: none; border: 1px solid var(--linea); border-radius: 100px;
  padding: .5rem 1.15rem; font-size: var(--t-sm); font-weight: 600; color: var(--txt-suave);
  cursor: pointer; transition: all .25s; font-family: var(--texto);
}
.pestanas__btn:hover { border-color: rgba(0,145,208,.45); }
.pestanas__btn.activo { background: var(--azul); border-color: var(--azul); color: var(--negro); }
.pestanas__panel[hidden] { display: none; }
.pestanas__panel p { font-size: var(--t-sm); color: var(--txt-suave); }

/* Mapa de restaurantes certificados */
#mapa-restaurantes {
  height: 320px; border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--linea); margin-block: 1.1rem;
  background: var(--negro-2);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--negro-2); color: var(--txt); }
.leaflet-popup-content { font-family: var(--texto); font-size: var(--t-xs); }
.pin-restaurante {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--azul); border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(0,145,208,.35);
}

/* ---------- 19b. Calculadora de pedido (pesca-ordena.html) ---------- */
.calculadora { max-width: 720px; }
.calculadora fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
.calculadora legend {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--txt-tenue); margin-bottom: .9rem; padding: 0;
}
.campo { margin-bottom: 1.3rem; }
.campo label { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: .5rem; }
.campo input[type="text"], .campo input[type="date"], .campo input[type="number"],
.campo input[type="email"], .campo input[type="tel"], .campo select {
  width: 100%; background: var(--negro-2); border: 1px solid var(--linea);
  border-radius: 10px; padding: .8rem 1rem; color: var(--txt);
  font-family: var(--texto); font-size: var(--t-sm);
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--azul); }
.campo select { appearance: none; cursor: pointer; }
.campo input[aria-invalid="true"] { border-color: var(--economia); }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  cursor: pointer; user-select: none;
  border: 1px solid var(--linea); border-radius: 100px;
  padding: .55rem 1.15rem; font-size: var(--t-sm); font-weight: 600;
  color: var(--txt-suave); transition: all .25s;
  background: var(--negro-2);
}
.chip:hover { border-color: rgba(0,145,208,.5); }
.chip.activo { background: var(--azul); border-color: var(--azul); color: var(--negro); }

.stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--linea); border-radius: 100px; overflow: hidden; }
.stepper button {
  width: 42px; height: 42px; background: var(--negro-2); border: 0; color: var(--txt);
  font-size: 1.2rem; cursor: pointer; transition: background .2s;
}
.stepper button:hover { background: var(--negro-3); }
.stepper output { min-width: 64px; text-align: center; font-weight: 700; font-family: var(--display); }

.resumen-pedido {
  background: var(--negro-2); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.6rem 1.7rem; margin-top: 1rem;
}
.resumen-pedido h4 {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--txt-tenue); margin-bottom: .8rem;
}
.resumen-pedido p { font-size: var(--t-md); margin: 0; }
.resumen-pedido .azul { font-weight: 700; }

/* ---------- 19c. El pez ----------
   Uno solo a la vez, siempre el ícono azul. JS calcula la posición y la
   inclinación cuadro a cuadro sobre una curva suave; no hay keyframes.
   Como el dibujo mira a la izquierda y el pez siempre nada hacia la
   izquierda, nunca se voltea. */
.pez-flotante {
  position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none;
  width: clamp(26px, 3.6vw, 46px); height: auto;
  opacity: 0;
  /* dos sombras: una pegada al contorno para despegarlo del azul y otra
     abierta para darle profundidad */
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)) drop-shadow(0 8px 18px rgba(0,0,0,.45));
  will-change: transform, opacity;
}

/* ---------- 19. Franja CTA ---------- */
.franja-cta {
  position: relative;
  background: var(--azul);
  color: var(--negro);
  overflow: hidden;
  isolation: isolate;
}
.franja-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: url('../img/graficos/patron-azul-contorno.png');
  background-size: 620px; opacity: .2; mix-blend-mode: overlay;
}
/* Sobre el azul de marca todo el texto va oscuro */
.franja-cta .apartado { color: rgba(11,20,24,.72); }
.franja-cta .apartado::before { background: rgba(11,20,24,.55); }
.franja-cta h2 { font-size: var(--t-xxl); max-width: 20ch; margin-bottom: 1.3rem; }
.franja-cta p { color: rgba(11,20,24,.82); max-width: 52ch; font-size: var(--t-lg); }
.franja-cta .btn--primario { background: var(--negro); color: #fff; }
.franja-cta .btn--primario:hover { background: #fff; color: var(--negro); filter: none; }
.franja-cta .btn--linea { border-color: rgba(11,20,24,.42); color: var(--negro); }
.franja-cta .btn--linea:hover { border-color: var(--negro); background: rgba(11,20,24,.1); color: var(--negro); }

/* ---------- 20. Datos legales / transparencia ---------- */
/* Antes esto era una grilla con el fondo pintado y separadores de 1px: si la
   última fila quedaba incompleta se veían huecos de color. Ahora las líneas
   son bordes de cada celda, así que una fila a medias no deja agujeros. */
.datos-legales {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px,1fr));
  gap: 0;
  border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
}
.dato {
  background: transparent; padding: 1.4rem 1.35rem;
  border-top: 1px solid var(--linea);
  border-left: 1px solid var(--linea);
}
.dato:first-child { border-left-color: transparent; }
.claro .dato { background: transparent; }
.dato dt {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--txt-tenue); margin-bottom: .45rem;
}
.claro .dato dt { color: rgba(22,24,28,.66); }
.dato dd { margin: 0; font-size: var(--t-sm); font-weight: 500; }

/* ---------- 21. Pie de página ---------- */
.pie { background: var(--negro-2); border-top: 1px solid var(--linea); }
.pie__top {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) repeat(auto-fit, minmax(150px,1fr));
  gap: 2.5rem;
  padding-block: clamp(3rem,6vh,4.5rem);
}
.pie__marca img { height: 30px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 1.2rem; }
.pie__marca p { font-size: var(--t-sm); color: var(--txt-suave); max-width: 34ch; }
.pie h4 {
  font-family: var(--texto); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--txt-tenue); margin-bottom: 1rem;
}
.pie li { margin-bottom: .55rem; }
.pie li a, .pie address a { font-size: var(--t-sm); color: var(--txt-suave); transition: color .25s; }
.pie li a:hover, .pie address a:hover { color: var(--azul); }
.pie address { font-style: normal; font-size: var(--t-sm); color: var(--txt-suave); line-height: 1.85; }

/* Bloque legal — requisito Google for Nonprofits */
.pie__legal {
  border-top: 1px solid var(--linea);
  padding-block: 1.8rem;
  display: flex; flex-wrap: wrap; gap: .8rem 2rem;
  justify-content: space-between; align-items: center;
  font-size: var(--t-xs); color: var(--txt-tenue);
}
.pie__legal p { margin: 0; }
.pie__esal {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--linea); border-radius: 100px;
  padding: .34rem .85rem;
  color: var(--txt-suave); font-weight: 600;
}
.pie__esal::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); }

.redes { display: flex; flex-wrap: wrap; gap: .6rem; }
.redes a, .redes button.compartir__btn {
  /* flex: none es lo que impide que se vuelvan óvalos al angostar la ventana:
     sin él, el contenedor los comprime a lo ancho y dejan de ser círculos. */
  flex: none;
  width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--linea);
  background: none; cursor: pointer;
  display: grid; place-items: center;
  color: var(--txt-suave);
  transition: all .3s var(--ease);
}
.redes a:hover, .redes button.compartir__btn:hover { border-color: var(--azul); color: var(--azul); transform: translateY(-2px); }

/* El avioncito tiene la masa en la cola, así que su centro visual queda a la
   izquierda del centro geométrico. Medido: 2,4 px. Se compensa a mano para
   que ópticamente quede centrado en el círculo. */
.icono-avion { transform: translate(1.7px, -2.2px) rotate(-45deg); }

.compartir { position: relative; }
.compartir__menu {
  position: absolute; bottom: calc(100% + .7rem); left: 50%; transform: translateX(-50%);
  background: var(--negro-2); border: 1px solid var(--linea); border-radius: 12px;
  padding: .4rem; display: flex; flex-direction: column; gap: .1rem;
  min-width: 200px; box-shadow: 0 16px 34px rgba(0,0,0,.45);
  z-index: 20;
}
.compartir__menu[hidden] { display: none; }
.compartir__menu a, .compartir__menu button {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .7rem; border-radius: 8px; border: 0; background: none;
  color: var(--txt); font-size: var(--t-sm); font-family: var(--texto); text-align: left;
  cursor: pointer; width: 100%;
}
.compartir__menu a:hover, .compartir__menu button:hover { background: var(--negro-3); color: var(--azul); }
.claro .compartir__menu { background: #fff; border-color: rgba(22,24,28,.12); }
.claro .compartir__menu a, .claro .compartir__menu button { color: var(--negro); }
.claro .compartir__menu a:hover, .claro .compartir__menu button:hover { background: var(--hueso); }

/* ---------- 21b. Carril de especies + cotización (pesca-ordena.html) ---------- */
.carril { position: relative; display: flex; align-items: center; gap: .8rem; }
.carril__pista {
  display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: .3rem .1rem 1.2rem; scrollbar-width: thin; scrollbar-color: var(--linea) transparent;
  flex: 1;
}
.carril__pista::-webkit-scrollbar { height: 6px; }
.carril__pista::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 100px; }
.carril__flecha {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--linea); background: var(--negro-2); color: var(--txt);
  font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: all .25s var(--ease);
}
.carril__flecha:hover { border-color: var(--azul); color: var(--azul); }
@media (max-width: 640px) { .carril__flecha { display: none; } }

.producto {
  --acento: var(--azul);
  flex: none; width: 208px; scroll-snap-align: start;
  background: var(--negro-2); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.4rem 1.3rem 1.6rem; cursor: pointer;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.producto:hover, .producto:focus-visible { border-color: var(--acento); transform: translateY(-4px); outline: none; }
.producto__icono {
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: 1rem;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--acento) 22%, var(--negro-3));
}
.producto__icono img { width: 26px; height: 26px; object-fit: contain; }
.producto h3 { font-size: var(--t-md); margin-bottom: .45rem; }
.producto__tag {
  font-size: var(--t-xs); color: var(--txt-suave); line-height: 1.5;
  min-height: 2.6em; margin-bottom: 1rem;
}
.producto__precio { font-size: var(--t-sm); color: var(--txt-tenue); margin-bottom: 1rem; }
.producto__precio strong { color: var(--txt); font-family: var(--display); font-size: var(--t-md); font-weight: 600; }
.producto__cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
  color: var(--acento);
}

.drawer__scrim {
  position: fixed; inset: 0; background: rgba(4,8,12,.6); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
}
.drawer__scrim.activo { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--negro-2); border-top: 1px solid var(--linea);
  border-radius: 20px 20px 0 0; box-shadow: 0 -20px 50px rgba(0,0,0,.4);
  padding: 1.4rem clamp(1.3rem, 5vw, 2.6rem) 2rem;
  max-width: 560px; margin-inline: auto;
  transform: translateY(105%); transition: transform .4s var(--ease);
}
.drawer.activo { transform: translateY(0); }
.drawer__asa { width: 40px; height: 4px; border-radius: 100px; background: var(--linea); margin: 0 auto 1.1rem; }
.drawer__cerrar {
  position: absolute; top: 1.1rem; right: 1.3rem; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--linea); background: none; color: var(--txt-suave);
  font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; transition: all .25s;
}
.drawer__cerrar:hover { border-color: var(--azul); color: var(--azul); }
.drawer__cabecera { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.drawer__cabecera .producto__icono { margin-bottom: 0; }
.drawer__cabecera h3 { font-size: var(--t-lg); margin-bottom: .15rem; }
.drawer__cabecera p { font-size: var(--t-sm); color: var(--txt-suave); }
.drawer__campo { margin-bottom: 1.3rem; }
.drawer__etiqueta {
  display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-tenue); margin-bottom: .7rem;
}
.drawer__subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 1.1rem; margin-bottom: 1.3rem; border-top: 1px solid var(--linea);
  font-size: var(--t-sm); color: var(--txt-suave);
}
.drawer__subtotal strong { font-family: var(--display); font-size: var(--t-lg); color: var(--txt); font-weight: 600; }
.drawer__agregar { width: 100%; justify-content: center; }

.cotizacion { margin-bottom: 1rem; }
.cotizacion__vacio { color: var(--txt-suave); font-size: var(--t-sm); }
.cotizacion__item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--linea);
}
.cotizacion__item-info { flex: 1; }
.cotizacion__item-info strong { display: block; font-size: var(--t-sm); margin-bottom: .2rem; }
.cotizacion__item-info span { font-size: var(--t-xs); color: var(--txt-suave); }
.cotizacion__item-precio { font-family: var(--display); font-weight: 600; font-size: var(--t-sm); white-space: nowrap; }
.cotizacion__item-quitar {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linea);
  background: none; color: var(--txt-tenue); cursor: pointer; flex: none;
  display: grid; place-items: center; transition: all .25s;
}
.cotizacion__item-quitar:hover { border-color: var(--economia); color: var(--economia); }
.cotizacion__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 1.2rem; margin-top: .4rem;
  font-size: var(--t-md);
}
.cotizacion__total strong { font-family: var(--display); font-size: var(--t-xl); font-weight: 600; color: var(--azul); }
.claro .cotizacion__item { border-color: rgba(22,24,28,.12); }

/* ---------- 21d. Video incrustado en una sección ---------- */
.video-bloque {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--linea);
  margin-block: 1.3rem;
  background: var(--negro-3);
  /* Alto fijo y ancho completo: con aspect-ratio + max-height el bloque
     se encogía a lo ancho y dejaba un hueco al lado. */
  width: 100%;
  height: clamp(200px, 26vw, 360px);
}
.video-bloque video {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.8) contrast(1.04);
}
.video-bloque::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,10,16,.55), transparent 55%);
  pointer-events: none;
}
.video-bloque__pie {
  position: absolute; left: 1rem; bottom: .8rem; z-index: 2;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  color: var(--txt); text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

/* ---------- 21c. Iconos oficiales de los ODS ---------- */
.ods {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem;
}
.ods li { margin: 0; }
.ods img {
  width: 100%; height: auto; border-radius: 8px; display: block;
  transition: transform .35s var(--ease);
}
.ods img:hover { transform: translateY(-4px); }
@media (max-width: 560px) { .ods { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 23. Selector con panel abajo (Comprar y Proyectos) ----------
   Se ven todas las opciones de entrada, en columnas. Al elegir una, el
   detalle se despliega debajo sin sacar a nadie de la página. */
.selector__fila {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  margin-bottom: 1.6rem;
}
/* Tres frentes: o van los tres en fila o van uno bajo otro. Dos y uno
   dejaba siempre una tarjeta suelta abajo. */
@media (max-width: 900px) { .selector__fila { grid-template-columns: 1fr; } }

.selector__item {
  --c: var(--azul);
  position: relative; text-align: left;
  background: var(--negro-2); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.15rem 1.15rem 1.25rem;
  cursor: pointer; font-family: var(--texto); color: var(--txt);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s;
  display: flex; flex-direction: column; gap: .3rem;
  overflow: hidden;
}
.selector__item::before {
  content: ''; position: absolute; inset: 0 auto auto 0;
  height: 3px; width: 100%; background: var(--c);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.selector__item:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); transform: translateY(-3px); }
.selector__item.activo { background: var(--negro-3); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.selector__item.activo::before { transform: scaleX(1); }
.selector__nombre { font-family: var(--display); font-weight: 700; font-size: var(--t-md); line-height: 1.15; }
.selector__pie { font-size: var(--t-xs); color: var(--txt-suave); }
.selector__estado {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-suave);
  display: inline-flex; align-items: center; gap: .45rem;
}
/* El color de la línea va en un punto, no en el texto: así el rótulo
   conserva el contraste y el color sigue identificando el frente. */
.selector__estado::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c); flex: none;
}
.claro .selector__estado { color: rgba(22,24,28,.66); }
.claro .selector__item { background: #fff; border-color: rgba(22,24,28,.12); color: var(--negro); }
.claro .selector__item.activo { background: #fff; }
.claro .selector__pie { color: rgba(22,24,28,.62); }

.selector__panel {
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  background: var(--negro-2);
}
.claro .selector__panel { background: #fff; border-color: rgba(22,24,28,.12); }
.selector__panel[hidden] { display: none; }
.selector__panel > h3 { font-size: var(--t-xl); margin-bottom: .5rem; }

/* ---------- 24. Líneas de conservación de un proyecto ----------
   No son etiquetas ni botones: es un espectro. Se ven las cuatro líneas
   siempre, y las que el proyecto no toca quedan apagadas. Así se lee de un
   vistazo tanto lo que hace como lo que no. */
.espectro {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-block: 1.5rem; max-width: 520px;
}
.espectro__linea { display: flex; flex-direction: column; gap: .5rem; }
.espectro__barra { height: 3px; border-radius: 2px; background: var(--c); opacity: .16; }
.espectro__linea[data-activa="si"] .espectro__barra { opacity: 1; }
.espectro__txt {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-tenue); line-height: 1.25;
}
.espectro__linea[data-activa="si"] .espectro__txt { color: var(--txt); }
.claro .espectro__txt { color: rgba(22,24,28,.45); }
.claro .espectro__linea[data-activa="si"] .espectro__txt { color: var(--negro); }
.espectro__linea--investigacion { --c: var(--investigacion); }
.espectro__linea--educacion     { --c: var(--educacion); }
.espectro__linea--restauracion  { --c: var(--restauracion); }
.espectro__linea--economia      { --c: var(--economia); }
@media (max-width: 560px) { .espectro { grid-template-columns: repeat(2,1fr); } }

/* ---------- 25. Pedido por pasos ---------- */
.paso { border-top: 1px solid var(--linea); padding-top: 1.6rem; margin-top: 1.6rem; }
.paso:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.paso[aria-disabled="true"] { opacity: .38; pointer-events: none; }
.paso__cabeza { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1rem; }
.paso__n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--negro-3); color: var(--txt-suave);
  font-size: var(--t-xs); font-weight: 700; font-family: var(--display);
}
.paso--listo .paso__n { background: var(--azul); color: var(--negro); }
.paso__titulo { font-family: var(--display); font-weight: 700; font-size: var(--t-md); }
.paso__nota { font-size: var(--t-xs); color: var(--txt-tenue); margin-top: .3rem; }

.especies-fecha { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px,1fr)); gap: .8rem; }
.especie-tarjeta {
  --acento: var(--azul);
  text-align: left; cursor: pointer; font-family: var(--texto);
  background: var(--negro-2); border: 1px solid var(--linea);
  border-radius: 12px; padding: 1rem 1rem 1.1rem; color: var(--txt);
  transition: border-color .3s, transform .3s var(--ease);
  display: flex; flex-direction: column; gap: .35rem;
}
.especie-tarjeta:hover { border-color: var(--acento); transform: translateY(-3px); }
.especie-tarjeta.activo { border-color: var(--acento); background: var(--negro-3); }
.especie-tarjeta__nombre { font-family: var(--display); font-weight: 700; font-size: var(--t-md); }
.especie-tarjeta__precio { font-size: var(--t-sm); color: var(--txt); font-weight: 600; }
.especie-tarjeta__nota { font-size: var(--t-xs); color: var(--txt-suave); }
.especie-tarjeta[disabled] { opacity: .34; cursor: not-allowed; transform: none; }

.confirmacion {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 1.5rem;
  background: rgba(4,8,12,.72);
}
.confirmacion[hidden] { display: none; }
.confirmacion__caja {
  background: var(--negro-2); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: clamp(1.8rem,4vw,2.8rem);
  max-width: 520px; text-align: center;
}
.confirmacion__caja h3 { font-size: var(--t-xl); margin-bottom: .8rem; }
.confirmacion__caja p { font-size: var(--t-sm); color: var(--txt-suave); }
.confirmacion__ok {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 1.2rem;
  display: grid; place-items: center; background: var(--azul); color: var(--negro);
}

/* La ficha de proyecto vive ahora dentro de un panel del selector:
   sin borde inferior ni padding propio, que ya los pone el panel. */
.selector__panel .ficha { border-bottom: 0; padding-block: 0; }
.selector__panel .ficha h3 { font-size: var(--t-xl); margin-bottom: .4rem; }
@media (max-width: 900px) { .selector__panel .ficha { grid-template-columns: 1fr; } }
.selector__panel .ficha__media img { max-height: 340px; object-fit: cover; }

/* Texturas disponibles como fondo de sección */
.textura-fondo--cardumen::before { background-image: url('../img/texturas/textura-02_cardumen-peces.jpg'); }
.textura-fondo--coral::before    { background-image: url('../img/texturas/textura-04_coral-cerebro-detalle.jpg'); }
.textura-fondo--polipos::before  { background-image: url('../img/texturas/textura-01_polipos-coral-verde.jpg'); }
.textura-fondo--cerebro::before  { background-image: url('../img/texturas/textura-03_coral-cerebro.jpg'); }

/* ---------- 26. Come con el ojo puesto ---------- */
.criterios { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 1.6rem 2.2rem; }
.criterio { border-top: 2px solid var(--azul); padding-top: 1.1rem; }
.criterio__n {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; color: var(--azul); display: block; margin-bottom: .7rem;
}
.criterio h3 { font-size: var(--t-lg); margin-bottom: .6rem; }
.criterio p { font-size: var(--t-sm); color: var(--txt-suave); }
.claro .criterio { border-top-color: var(--azul-legible); }
.claro .criterio__n { color: var(--azul-legible); }

/* Cadena de valor en cinco eslabones */
.eslabones { display: grid; gap: 0; counter-reset: eslabon; }
.eslabones li {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.2rem;
  padding: 1.3rem 0; border-top: 1px solid var(--linea);
  align-items: start;
}
.claro .eslabones li { border-top-color: rgba(22,24,28,.12); }
.eslabones li:last-child { border-bottom: 1px solid var(--linea); }
.claro .eslabones li:last-child { border-bottom-color: rgba(22,24,28,.12); }
.eslabon__n {
  font-family: var(--display); font-weight: 700; font-size: var(--t-lg);
  color: var(--azul); line-height: 1;
}
.claro .eslabon__n { color: var(--azul-legible); }
.eslabones h4 { font-size: var(--t-md); margin-bottom: .35rem; }
.eslabones p { font-size: var(--t-sm); color: var(--txt-suave); margin: 0; }
.claro .eslabones p { color: rgba(22,24,28,.7); }
@media (max-width: 560px) { .eslabones li { grid-template-columns: 2.4rem 1fr; gap: .9rem; } }

/* Fichas de especie */
.fichas-especie { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px,1fr)); gap: .9rem; }
.ficha-especie {
  border: 1px solid var(--linea); border-radius: 12px; padding: 1.2rem 1.2rem 1.3rem;
  background: var(--negro-2);
}
.claro .ficha-especie { background: #fff; border-color: rgba(22,24,28,.12); }
.ficha-especie h4 { font-size: var(--t-md); margin-bottom: .4rem; }
.ficha-especie__usar { font-size: var(--t-xs); color: var(--txt-suave); margin-bottom: 1rem; }
.claro .ficha-especie__usar { color: rgba(22,24,28,.68); }
.ficha-especie dl { margin: 0; display: grid; gap: .45rem; }
.ficha-especie dl > div { display: flex; justify-content: space-between; gap: .8rem; font-size: var(--t-xs); }
.ficha-especie dt { color: var(--txt-tenue); letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }
.claro .ficha-especie dt { color: rgba(22,24,28,.66); }
.ficha-especie dd { margin: 0; font-weight: 600; }

/* Cuatro bloques cortos en rejilla: compacta lo que antes eran dos
   secciones apiladas de dos columnas cada una. */
.cuadrantes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 2rem 2.6rem; }
.cuadrantes h3 { font-size: var(--t-md); margin-bottom: .6rem; }
.cuadrantes p { font-size: var(--t-sm); color: var(--txt-suave); margin: 0; }
.claro .cuadrantes p { color: rgba(22,24,28,.75); }

/* ---------- 27. Tarjeta de especie con ilustración ----------
   Un solo componente para las dos páginas: la guía (Come con el ojo puesto)
   y el paso 2 de la cotización. Así las dos se ven iguales. */
.especies-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px,1fr)); gap: .9rem; }
.especie {
  --acento: var(--azul);
  display: flex; flex-direction: column;
  background: var(--negro-2); border: 1px solid var(--linea);
  border-radius: 14px; overflow: hidden;
  text-align: left; font-family: var(--texto); color: var(--txt);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.claro .especie { background: #fff; border-color: rgba(22,24,28,.12); color: var(--negro); }
/* El panel del dibujo va oscuro en los dos temas: los colores de la paleta
   secundaria —el amarillo sobre todo— se lavaban sobre fondo claro. */
.especie__dibujo {
  /* flex con min-height:0 y overflow oculto: así el panel mantiene su
     proporción aunque la lámina sea más alta, y las seis tarjetas quedan
     a la misma altura */
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 15/8; overflow: hidden;
  background: #12141a;
  padding: .6rem .9rem;
}
/* La lámina conserva su proporción: contain, nunca estirada */
.especie__dibujo img {
  min-width: 0; min-height: 0;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
}
.claro .especie__dibujo { background: #12141a; }

/* Cada especie con su color, para reconocerlas antes de leer el nombre */
.especie--atun    { --acento: var(--investigacion); }
.especie--pargo   { --acento: var(--economia); }
.especie--robalo  { --acento: var(--restauracion); }
.especie--sierra  { --acento: var(--educacion); }
.especie--pampano { --acento: var(--azul); }
.especie--cherna  { --acento: var(--azul); }
.especie__cuerpo { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.especie__nombre { font-family: var(--display); font-weight: 700; font-size: var(--t-md); }
.especie__nota { font-size: var(--t-xs); color: var(--txt-suave); }
.claro .especie__nota { color: rgba(22,24,28,.68); }
.especie__precio { font-size: var(--t-sm); font-weight: 600; margin-top: .35rem; }
.especie__datos { margin: .7rem 0 0; display: grid; gap: .4rem; }
.especie__datos > div { display: flex; justify-content: space-between; gap: .7rem; font-size: var(--t-xs); }
.especie__datos dt { color: var(--txt-tenue); letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }
.claro .especie__datos dt { color: rgba(22,24,28,.66); }
.especie__datos dd { margin: 0; font-weight: 600; }

/* Variante seleccionable (cotización) */
button.especie { cursor: pointer; }
button.especie:hover:not([disabled]) { border-color: var(--acento); transform: translateY(-3px); }
button.especie.activo { border-color: var(--acento); background: var(--negro-3); }
.claro button.especie.activo { background: var(--hueso); }
button.especie[disabled] { opacity: .36; cursor: not-allowed; }
button.especie[disabled] .especie__dibujo { filter: grayscale(1); }

/* ---------- 28. Cadena de valor en fila ----------
   Antes eran cinco filas apiladas que dejaban media página vacía a la derecha. */
.eslabones--fila {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem;
  counter-reset: none;
}
.eslabones--fila li {
  display: block; grid-template-columns: none; gap: 0;
  padding: 1.1rem 0 0; border-top: 2px solid var(--azul); border-bottom: 0;
}
.claro .eslabones--fila li { border-top-color: var(--azul-legible); }
.eslabones--fila li:last-child { border-bottom: 0; }
.eslabones--fila .eslabon__n { font-size: var(--t-md); display: block; margin-bottom: .5rem; }
.eslabones--fila h4 { font-size: var(--t-sm); margin-bottom: .3rem; }
.eslabones--fila p { font-size: var(--t-xs); }
@media (max-width: 900px) { .eslabones--fila { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .eslabones--fila { grid-template-columns: 1fr; } }

/* ---------- 29. Paquetes de turismo ---------- */
.paquetes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: .9rem; margin-bottom: 1.6rem; }
.paquete {
  --acento: var(--restauracion);
  text-align: left; cursor: pointer; font-family: var(--texto); color: var(--txt);
  background: var(--negro-2); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.2rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .35rem;
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s;
  position: relative; overflow: hidden;
}
.paquete::before {
  content: ''; position: absolute; inset: 0 auto auto 0; height: 3px; width: 100%;
  background: var(--acento); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.paquete:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acento) 50%, transparent); }
.paquete.activo { background: var(--negro-3); border-color: color-mix(in srgb, var(--acento) 55%, transparent); }
.paquete.activo::before { transform: scaleX(1); }
.paquete__temporada {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--txt-suave); display: inline-flex; align-items: center; gap: .45rem;
}
.paquete__temporada::before { content:''; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); flex: none; }
.paquete__nombre { font-family: var(--display); font-weight: 700; font-size: var(--t-md); line-height: 1.15; }
.paquete__desc { font-size: var(--t-xs); color: var(--txt-suave); }

.actividades { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px,1fr)); gap: .6rem; }
.actividad {
  display: flex; align-items: flex-start; gap: .7rem;
  border: 1px solid var(--linea); border-radius: 11px; padding: .8rem .9rem;
  cursor: pointer; transition: border-color .25s, background .25s;
  font-size: var(--t-sm);
}
.actividad:hover { border-color: rgba(0,145,208,.45); }
.actividad input { margin: .18rem 0 0; accent-color: var(--azul); flex: none; width: 16px; height: 16px; }
.actividad.marcada { border-color: var(--azul); background: var(--negro-3); }
.actividad__txt { display: flex; flex-direction: column; gap: .15rem; }
.actividad__nombre { font-weight: 600; }
.actividad__clima { font-size: var(--t-xs); color: var(--investigacion); }
.actividad[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* ---------- 30. Piezas de Pez ---------- */
.piezas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 1rem; }
.pieza { background: var(--negro-2); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.pieza img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pieza__cuerpo { padding: 1rem 1.1rem 1.2rem; }
.pieza__nombre { font-family: var(--display); font-weight: 700; font-size: var(--t-sm); margin-bottom: .25rem; }
.pieza__precio { font-size: var(--t-sm); font-weight: 600; color: var(--azul); }
.pieza__nota { font-size: var(--t-xs); color: var(--txt-tenue); margin-top: .3rem; }

/* Textura propia por panel del selector, para que cada frente se distinga */
.textura-panel { position: relative; overflow: hidden; isolation: isolate; }
.textura-panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.15) brightness(.42);
  opacity: .3;
}
.textura-panel::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--azul); mix-blend-mode: color; opacity: .5;
}
.textura-panel--cardumen::before { background-image: url('../img/texturas/textura-02_cardumen-peces.jpg'); }
.textura-panel--polipos::before  { background-image: url('../img/texturas/textura-01_polipos-coral-verde.jpg'); }
.textura-panel--cerebro::before  { background-image: url('../img/texturas/textura-03_coral-cerebro.jpg'); }
.textura-panel--coral::before    { background-image: url('../img/texturas/textura-04_coral-cerebro-detalle.jpg'); }
.textura-panel--selva::before    { background-image: url('../img/texturas/textura-07_selva.jpg'); }

/* Fila con el enlace de volver */
.volver-fila { padding-top: 1.6rem; }
.enlace--volver { gap: .5rem; }
.enlace--volver:hover { gap: .5rem; }
.enlace--volver:hover svg { transform: translateX(-3px); }
.enlace--volver svg { transition: transform .3s var(--ease); }

/* Video con controles, un poco más alto */
.video-bloque--alto { height: clamp(240px, 40vw, 520px); }
.video-bloque--alto video { pointer-events: auto; }
.video-bloque--alto::after { content: none; }

/* El rol de cada persona va en azul; la descripción, en gris.
   Va con el selector largo a propósito: `.persona p` pesa más que una
   sola clase y estaba dejando el rol en gris. */
.persona p.persona__rol--azul { color: var(--azul); font-weight: 600; }
.claro .persona p.persona__rol--azul { color: var(--azul-legible); }

/* Celdas que necesitan más ancho (dirección, correo) ocupan dos columnas
   para que el contenido no se parta a mitad de palabra. */
.dato--ancho { grid-column: span 2; }
@media (max-width: 700px) { .dato--ancho { grid-column: span 1; } }
.dato dd { overflow-wrap: anywhere; }

/* La etiqueta de cada proyecto lleva el color de su línea de conservación */
.proyecto__etiqueta { --c: var(--azul); display: inline-flex; align-items: center; gap: .45rem; }
.proyecto__etiqueta::before { content:''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.proyecto__etiqueta--investigacion { --c: var(--investigacion); }
.proyecto__etiqueta--educacion     { --c: var(--educacion); }
.proyecto__etiqueta--restauracion  { --c: var(--restauracion); }
.proyecto__etiqueta--economia      { --c: var(--economia); }

/* ---------- 22. Utilidades ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: clamp(2rem,5vw,4.5rem); }
.grid-2--top { align-items: start; }
.mt-1 { margin-top: 1rem; }  .mt-2 { margin-top: 2rem; }  .mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; }
.centro { text-align: center; }
.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 31. Participa: una sola banda con las dos formas ---------- */
.hero--con-formas { min-height: 0; }
.hero--con-formas .hero__contenido { padding-block: 8rem 5rem; }
.hero--con-formas h1 { font-size: clamp(2.2rem, 5vw, 4.2rem); }
.formas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.15rem;
}
.forma {
  position: relative;
  background: rgba(22, 24, 28, .62);
  backdrop-filter: blur(10px);
  border: 2px solid var(--azul);
  border-radius: var(--radio);
  padding: 2rem 3.1rem 1.9rem 1.7rem;
  overflow: hidden;
  transition: border-color .45s, transform .45s var(--ease);
}
.forma::after {
  content: ''; position: absolute;
  width: 86px; height: 76%; right: -12px; top: 50%;
  background: var(--azul); opacity: .16;
  clip-path: polygon(19.5% 0, 97.6% 0, 81.1% 50%, 97.6% 100%, 19.5% 100%, 1.2% 50%);
  transform: translateY(-50%);
  transition: opacity .45s, transform .55s var(--ease);
}
.forma:hover { border-color: var(--azul); transform: translateY(-4px); }
.forma:hover::after { opacity: .3; transform: translateY(-50%) scale(1.14); }
.forma > * { position: relative; z-index: 1; }
.forma__n {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; color: var(--azul);
  margin-bottom: 1rem; display: block;
}
.forma h2 { font-size: var(--t-xl); margin-bottom: .75rem; letter-spacing: -.02em; }
.forma p { font-size: var(--t-sm); color: var(--txt-suave); margin: 0; }

/* ---------- 32. Comprar: intro pegada a los frentes y planes de turismo ---------- */
.intro-frentes { margin-bottom: 2.6rem; }
.intro-frentes .declaracion { max-width: 30ch; }
.intro-frentes__bajada { font-size: var(--t-lg); color: var(--txt-suave); margin: 0; max-width: 46ch; }

/* Los subtítulos dentro del panel abierto van dos puntos por debajo del
   .lead normal: ahí abajo competían con el título del frente. */
.selector__panel > .lead { font-size: clamp(1.05rem, 1.7vw, 1.38rem); }

/* Los cuatro planes: a la izquierda el de a la medida, a la derecha los de
   temporada, y el detalle del que esté elegido debajo de los dos. */
.planes { display: grid; gap: 1.4rem; }
.planes__mando { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1.4rem; align-items: stretch; }
.planes__grupo { display: flex; flex-direction: column; }
.planes__titulo {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--txt-tenue);
  margin: 0 0 .8rem;
}
.planes__lista { display: grid; gap: .7rem; flex: 1; align-content: start; }
/* El plan a la medida va solo en su columna y no se estira a lo alto: en
   color pleno, un bloque de 500 px era una mancha, no un botón. */
.planes__grupo:first-child .planes__lista { align-content: start; }
/* Botones de verdad: fondo opaco y borde grueso. Sobre el panel con
   textura, un fondo translúcido los volvía sugerencias. */
.plan {
  --c: var(--restauracion);
  display: flex; flex-direction: column; justify-content: flex-start;
  width: 100%; text-align: left; cursor: pointer;
  color: var(--txt);
  background: #12141a; border: 2px solid var(--linea);
  border-radius: var(--radio-sm, 12px); padding: 1.1rem 1.2rem;
  transition: border-color .3s, background .3s, color .3s, transform .3s var(--ease);
}
.claro .plan { color: var(--negro); background: #fff; border-color: rgba(22,24,28,.16); }
.plan:hover { transform: translateY(-2px); border-color: var(--c); }
/* El relleno del plan activo va un punto más claro que el verde de marca:
   con el verde puro, el texto negro se quedaba en 4,39:1 y el mínimo es 4,5. */
.plan { --c-relleno: #86bb95; }
.plan.activo { border-color: var(--c); background: var(--c-relleno); color: var(--negro); }
.claro .plan.activo { background: var(--c-relleno); color: var(--negro); }
.plan__temporada {
  display: block; font-family: var(--display); font-size: var(--t-xs);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c); margin-bottom: .4rem;
}
.plan.activo .plan__temporada { color: var(--negro); opacity: .72; }
.plan__nombre { display: block; font-size: var(--t-md); font-weight: 700; margin-bottom: .2rem; }
.plan__tope { display: block; font-size: var(--t-xs); color: var(--txt-tenue); }
.plan.activo .plan__tope { color: var(--negro); opacity: .74; }
.planes__detalle { min-height: 1px; }
.plan-detalle {
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: clamp(1.2rem, 2.6vw, 1.9rem);
  background: #12141a;
}
.claro .plan-detalle { background: #fff; }
.claro .plan-detalle { border-color: rgba(22,24,28,.12); }
.plan-detalle[hidden] { display: none; }
.plan-detalle h4 { font-size: var(--t-lg); margin-bottom: .5rem; }
.plan-detalle p { font-size: var(--t-sm); color: var(--txt-suave); margin: 0 0 .7rem; }
.plan-detalle__meta {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.plan-detalle__meta span { color: var(--restauracion); }
.plan-detalle__meta span + span { position: relative; padding-left: 1rem; }
.plan-detalle__meta span + span::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px; border-radius: 50%; background: currentColor; transform: translateY(-50%);
}
.plan-detalle__clima { font-size: var(--t-xs) !important; color: var(--txt-tenue) !important; }

@media (max-width: 760px) {
  .planes__mando { grid-template-columns: 1fr; }
}

/* ---------- 33. Botón flotante de volver ---------- */
.volver-flota {
  position: fixed; right: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1rem, 3vw, 2.2rem);
  z-index: 60; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul); color: var(--negro);
  border: 1px solid var(--negro); box-shadow: 0 10px 30px rgba(2, 6, 10, .38);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.volver-flota:hover { transform: translateX(-3px) scale(1.06); box-shadow: 0 14px 38px rgba(2, 6, 10, .46); }
.volver-flota:focus-visible { outline: 3px solid var(--hueso); outline-offset: 3px; }
.volver-flota svg { display: block; }

/* ---------- 34. Fotografía ----------
   Dos formas de meter una foto sin que compita con el texto: una banda
   ancha bajo el titular, o una columna al lado del texto. */
.foto-banda {
  position: relative; border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--linea); margin-block: 1.5rem;
  width: 100%; height: clamp(190px, 24vw, 330px);
}
.claro .foto-banda { border-color: rgba(22,24,28,.12); }
.foto-banda img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-banda__pie {
  position: absolute; left: .9rem; bottom: .8rem; z-index: 2;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  color: #fff; background: rgba(6, 10, 14, .78);
  padding: .34rem .6rem; border-radius: 8px;
}
.foto-banda::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(4,10,16,.6), transparent 55%);
}

.foto-par { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: center; }
.foto-par--invertido { grid-template-columns: .95fr 1.05fr; }
.foto-par__media { position: relative; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); }
.claro .foto-par__media { border-color: rgba(22,24,28,.12); }
.foto-par__media img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; display: block; }
@media (max-width: 820px) {
  .foto-par, .foto-par--invertido { grid-template-columns: 1fr; }
}

/* Texturas nuevas */
.textura-fondo--cardumen-vivo::before { background-image: url('../img/texturas/textura-05_cardumen-vivo.jpg'); }
.textura-fondo--mercado::before       { background-image: url('../img/texturas/textura-06_pescados-mercado.jpg'); }

/* ---------- 35. Mapa animado de la cadena de valor ---------- */
.cadena-mapa { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1.6rem; align-items: stretch; }
/* El mapa se estira hasta donde llegue la lista de los cinco pasos: si no,
   quedaba un hueco en blanco debajo. */
#mapa-cadena {
  height: 100%; min-height: 320px; border-radius: var(--radio);
  border: 1px solid var(--linea); overflow: hidden; background: var(--negro-2);
}
.claro #mapa-cadena { border-color: rgba(22,24,28,.12); }
.cadena-lado { display: flex; flex-direction: column; gap: 1rem; }
.cadena-lado__foto { position: relative; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); flex: 1; min-height: 170px; }
.claro .cadena-lado__foto { border-color: rgba(22,24,28,.12); }
.cadena-lado__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cadena-lado__pie { font-size: var(--t-xs); color: var(--txt-tenue); margin: 0; }
.claro .cadena-lado__pie { color: rgba(22,24,28,.55); }
.leaflet-cadena-etiqueta {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.9); white-space: nowrap;
  background: none; border: 0;
}
@media (max-width: 820px) { .cadena-mapa { grid-template-columns: 1fr; } }

/* ---------- 36. Botón de contorno ----------
   Negro por dentro, contorno azul, y al pasar el mouse se llena de azul
   con el texto en negro. Es el que usan las dos formas de participar,
   para que pesen lo mismo. */
.btn--contorno {
  background: transparent; border-color: var(--azul); color: var(--azul);
}
.btn--contorno:hover {
  background: var(--azul); color: var(--negro);
  border-color: var(--azul); transform: translateY(-2px);
}
.claro .btn--contorno { color: var(--azul-legible); border-color: var(--azul-legible); }
.claro .btn--contorno:hover { background: var(--azul-legible); color: #fff; border-color: var(--azul-legible); }

/* Las dos tarjetas de Participa se leen como pareja: el botón siempre a la
   misma altura y la nota de abajo pegada al piso de la tarjeta. */
.forma { display: flex; flex-direction: column; }
.forma > p:not(.cifra__fuente) { flex: 1; }
.forma .btn { align-self: flex-start; }
.forma .cifra__fuente { min-height: 2.6em; }
.forma h2 { transition: color .25s; }
.forma:hover h2 { color: var(--azul); }

.grid-2--centrado { align-items: center; }

/* El bloque de correo, teléfono, Instagram y dirección se centra con el
   texto de al lado y se corre a la derecha, en vez de pegarse al titular. */
.contacto-datos { margin-left: auto; width: 100%; max-width: 480px; }
@media (max-width: 720px) { .contacto-datos { margin-left: 0; max-width: none; } }

/* ---------- 37. Las dos salidas de pesca artesanal ----------
   Dos pastillas al pie no dejaban claro que son los dos caminos de la
   sección. Ahora son tarjetas con cara de botón: la de comprar manda,
   la de aprender la acompaña. */
.salidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }
.salida {
  position: relative; display: block;
  padding: 1.5rem 3.2rem 1.5rem 1.5rem;
  border-radius: var(--radio); border: 2px solid var(--azul);
  background: var(--negro-2); color: var(--txt);
  transition: background .3s, transform .3s var(--ease), color .3s, border-color .3s;
}
.claro .salida { background: #fff; color: var(--negro); }
.salida:hover { transform: translateY(-3px); background: var(--azul); color: var(--negro); }
.salida--principal { background: var(--azul); color: var(--negro); }
.claro .salida--principal { background: var(--azul); color: var(--negro); }
.salida--principal:hover { filter: brightness(1.08); background: var(--azul); }
.salida__marca {
  display: block; font-family: var(--display); font-size: var(--t-xs);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  opacity: .72; margin-bottom: .55rem;
}
.salida__titulo {
  display: block; font-family: var(--display); font-size: var(--t-lg);
  font-weight: 700; letter-spacing: -.02em; margin-bottom: .5rem;
}
.salida__nota { display: block; font-size: var(--t-sm); opacity: .82; }
.salida__ir {
  position: absolute; right: 1.3rem; top: 1.6rem;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: transform .3s var(--ease);
}
.salida:hover .salida__ir { transform: translateX(3px); }

.btn--grande { padding: 1.1rem 2.2rem; font-size: var(--t-md); }
.planes__ayuda { font-size: var(--t-sm); color: var(--txt-suave); margin: 1rem 0 0; }
.claro .planes__ayuda { color: rgba(22,24,28,.6); }

/* ---------- 38. Hero con foto o video de fondo ----------
   Mismo tratamiento que la portada: la imagen entra como elemento dentro de
   .hero__fondo, no como textura de sección. Las texturas con mix-blend-mode
   dentro del hero no repintaban solas y la foto solo aparecía al mover el
   mouse por encima. */
.hero__imagen {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.7) contrast(1.05) brightness(.8);
  transform: scale(1.02);
}
.hero--con-fondo .hero__video { filter: saturate(.7) contrast(1.05) brightness(.72) blur(1.5px); }
/* El barco está en el tercio superior del plano: si se centra, solo se ve mar. */
.hero--comprar .hero__video { object-position: center 22%; }
.hero--con-fondo::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,10,16,.35), rgba(4,10,16,.82));
}

/* ---------- 39. Fotos y videos: variantes de tratamiento ---------- */
/* Un desenfoque mínimo disimula el códec del metraje sin que se pierda la
   lectura, igual que en el video de la portada. */
.video-bloque--suave video { filter: saturate(.72) contrast(1.06) brightness(.88) blur(2px); transform: scale(1.04); }
.foto-banda--suave img { filter: saturate(.8) contrast(1.04) brightness(.9) blur(1.6px); transform: scale(1.03); }
.foto-banda--bn img { filter: grayscale(1) contrast(1.08) brightness(.92); }
.foto-banda--sin-velo::after { content: none; }

/* Los campos de fecha se ven clicables en toda su superficie, no solo en
   el iconito de la esquina. */
.campo input[type="date"] { cursor: pointer; }
.campo input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .75;
  filter: invert(52%) sepia(93%) saturate(1400%) hue-rotate(170deg) brightness(95%);
}
.claro .campo input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: .6; }

/* ---------- 40. Cadena de valor: el mapa y los pasos, juntos ---------- */
.cadena-mapa { grid-template-columns: 1.15fr 1fr; align-items: start; }
.eslabones--pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.eslabones--pasos li {
  /* el componente base los pone en dos columnas; aquí van apilados */
  display: block; grid-template-columns: none; gap: 0;
  position: relative; padding: .85rem 1rem .85rem 1.05rem;
  border-top: 0; border-bottom: 0;
  border-left: 2px solid var(--linea);
  transition: opacity .45s, border-color .45s, background .45s;
}
.eslabones--pasos li:last-child { border-bottom: 0; }
.eslabones--pasos.animada li { opacity: .42; }
.eslabones--pasos.animada li.activo { opacity: 1; }
.eslabones--pasos li.activo {
  opacity: 1; border-left-color: var(--azul);
  background: linear-gradient(90deg, rgba(0,145,208,.1), transparent 70%);
}
.claro .eslabones--pasos li.activo { background: linear-gradient(90deg, rgba(0,145,208,.14), transparent 70%); }
.eslabones--pasos .eslabon__n {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; color: var(--azul); display: block; margin-bottom: .3rem;
}
.claro .eslabones--pasos .eslabon__n { color: var(--azul-legible); }
.eslabones--pasos h4 { font-size: var(--t-md); margin: 0 0 .25rem; }
.eslabones--pasos p { font-size: var(--t-sm); color: var(--txt-suave); margin: 0; }
.claro .eslabones--pasos p { color: rgba(22,24,28,.62); }

/* ---------- 41. Restaurantes certificados: foto, mapa y texto ---------- */
.restaurantes {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.2rem;
  /* alto fijo para la fila: si no, la foto vertical estira la columna */
  grid-auto-rows: clamp(300px, 32vw, 420px);
}
.restaurantes__foto {
  border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea);
  height: 100%;
}
.claro .restaurantes__foto { border-color: rgba(22,24,28,.12); }
.restaurantes__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.restaurantes #mapa-restaurantes { margin-block: 0; height: 100%; }
@media (max-width: 820px) { .restaurantes { grid-template-columns: 1fr; } }

.btn--bloque { display: flex; width: 100%; justify-content: center; }

/* ---------- 42. Tarjetas de plan de turismo ----------
   Cada plan es la tarjeta y el enlace: foto, temporada, qué incluye y el
   llamado. Se acabó el paso intermedio de volver a escoger. */
.planes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.planes-grid--uno { grid-template-columns: 1fr; }
.plan-tarjeta {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radio); border: 2px solid var(--linea);
  background: #12141a; color: var(--txt);
  transition: border-color .3s, transform .3s var(--ease);
}
.claro .plan-tarjeta { background: #fff; color: var(--negro); border-color: rgba(22,24,28,.16); }
.plan-tarjeta:hover { transform: translateY(-3px); border-color: var(--restauracion); }
.plan-tarjeta__foto { display: block; aspect-ratio: 16/9; overflow: hidden; background: #0d0f13; }
.plan-tarjeta__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.85) contrast(1.08) brightness(1.12);
  transition: transform .5s var(--ease);
}
.plan-tarjeta:hover .plan-tarjeta__foto img { transform: scale(1.04); }
.plan-tarjeta__foto--sin {
  background: linear-gradient(135deg, rgba(0,145,208,.28), rgba(118,176,135,.22));
}
.plan-tarjeta__cuerpo { display: flex; flex-direction: column; gap: .45rem; padding: 1.2rem 1.3rem 1.3rem; flex: 1; }
.plan-tarjeta__temporada {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--restauracion);
}
.plan-tarjeta__nombre { font-family: var(--display); font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; }
.plan-tarjeta__desc { font-size: var(--t-sm); color: var(--txt-suave); flex: 1; }
.claro .plan-tarjeta__desc { color: rgba(22,24,28,.66); }
.plan-tarjeta__meta {
  display: flex; flex-wrap: wrap; gap: .3rem .8rem;
  font-size: var(--t-xs); color: var(--txt-tenue); margin-top: .3rem;
}
.plan-tarjeta__ir {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .8rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--azul);
}
.claro .plan-tarjeta__ir { color: var(--azul-legible); }
.plan-tarjeta--ancha { flex-direction: row; }
.plan-tarjeta--ancha .plan-tarjeta__foto { aspect-ratio: auto; width: 34%; flex: none; }
@media (max-width: 700px) {
  .plan-tarjeta--ancha { flex-direction: column; }
  .plan-tarjeta--ancha .plan-tarjeta__foto { width: 100%; aspect-ratio: 16/9; }
}

/* Los rótulos de grupo respetan el margen que les pide la utilidad */
.planes__titulo.mt-2 { margin-top: 2rem; }
.planes__titulo.mt-3 { margin-top: 3rem; }
/* Mientras llega la foto de «ármalo a tu medida», el hueco lleva el corchete
   de marca en vez de quedar como un bloque vacío. */
.plan-tarjeta__foto--sin { position: relative; }
.plan-tarjeta__foto--sin::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 54px; height: 136px; transform: translate(-50%, -50%);
  background: var(--azul); opacity: .3;
  clip-path: polygon(19.5% 0, 97.6% 0, 81.1% 50%, 97.6% 100%, 19.5% 100%, 1.2% 50%);
}

/* ---------- 43. Ajustes finos de esta ronda ---------- */

/* Las cuatro preguntas de la guía: eran pequeñas y con poco contraste, y el
   bloque quedaba mucho más corto que la foto de al lado. */
.preguntas { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.preguntas li {
  font-size: var(--t-md); color: var(--txt);
  padding-left: 1.7rem; margin-bottom: 1.15rem; line-height: 1.45;
}
.claro .preguntas li { color: var(--negro); }
.preguntas li:last-child { margin-bottom: 0; }
.preguntas li::before { top: .5em; width: .38em; height: .9em; }
.preguntas strong { display: block; font-weight: 700; margin-bottom: .15rem; }
.preguntas span { color: var(--txt-suave); font-size: var(--t-sm); }
.claro .preguntas span { color: rgba(22,24,28,.66); }
.foto-par--igual { align-items: stretch; }
.foto-par--igual .foto-par__media img { max-height: none; }

/* La foto de los criterios sí lleva desenfoque: es la de menor resolución
   de todas y en grande se le ven los bloques. */

/* El panel de Comprar dejaba un socavón negro antes de la banda azul. */
.selector__panel > *:last-child { margin-bottom: 0; }
#frentes { padding-bottom: 0; }

/* Las dos cajas de Participa: el botón sube y el aire se reparte parejo. */
.forma > p:not(.cifra__fuente) { flex: 0 1 auto; margin-bottom: 1.2rem; }
.forma .btn { margin-top: auto; }
.forma .cifra__fuente { min-height: 0; margin-top: .8rem; }
.forma h2 { margin-bottom: .8rem; }

/* La etiqueta de cada proyecto va en el color de su línea, no en gris */
.proyecto__etiqueta--investigacion { background: var(--investigacion); color: var(--negro); border-color: transparent; }
.proyecto__etiqueta--educacion     { background: var(--educacion);     color: var(--negro); border-color: transparent; }
.proyecto__etiqueta--restauracion  { background: var(--restauracion);  color: var(--negro); border-color: transparent; }
.proyecto__etiqueta--economia      { background: var(--economia);      color: var(--negro); border-color: transparent; }
.proyecto__etiqueta {
  backdrop-filter: none; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0; text-align: center;
}
/* El punto de color sobraba: sobre el relleno del mismo color no se veía y
   solo corría la palabra hacia la derecha. */
.proyecto__etiqueta::before { content: none; }
/* La tarjeta toma el borde de su línea de conservación */
.proyecto--restauracion  { border-color: color-mix(in srgb, var(--restauracion) 45%, transparent); }
.proyecto--educacion     { border-color: color-mix(in srgb, var(--educacion) 45%, transparent); }
.proyecto--investigacion { border-color: color-mix(in srgb, var(--investigacion) 45%, transparent); }
.proyecto--economia      { border-color: color-mix(in srgb, var(--economia) 45%, transparent); }
.proyecto--restauracion:hover  { border-color: var(--restauracion); }
.proyecto--educacion:hover     { border-color: var(--educacion); }
.proyecto--investigacion:hover { border-color: var(--investigacion); }
.proyecto--economia:hover      { border-color: var(--economia); }

/* Encuadre más alto y con más movimiento en las tarjetas del home */
.proyecto__img { aspect-ratio: 3/2; }
.proyecto__img img { object-position: center 42%; }
.proyecto:hover .proyecto__img img { transform: scale(1.08) translateY(-1%); }
.proyecto::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--linea-color, var(--azul));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.proyecto:hover::after { transform: scaleX(1); }
.proyecto--restauracion { --linea-color: var(--restauracion); }
.proyecto--educacion    { --linea-color: var(--educacion); }
.proyecto--investigacion{ --linea-color: var(--investigacion); }
.proyecto--economia     { --linea-color: var(--economia); }

/* Las cinco columnas de Proyectos: sin numeración, con más aire y un color
   por proyecto para que no se lean todas iguales. */
.selector__item--proyecto {
  padding: 1.4rem 1.3rem 1.4rem;
  gap: .45rem;
  justify-content: flex-start;
  min-height: 150px;
}
.selector__item--proyecto .selector__nombre {
  /* dos renglones fijos: así MamaOrbe y Absaventour quedan a la altura de
     los nombres que sí ocupan dos líneas */
  min-height: 2.3em; display: flex; align-items: flex-start;
}
.selector__item--proyecto .selector__pie { margin-top: auto; }
.selector__item--proyecto::before { height: 4px; }
.selector__item--proyecto .selector__nombre { font-size: var(--t-md); letter-spacing: -.015em; line-height: 1.2; }
.selector__item--proyecto .selector__pie { font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; }
.selector__item--proyecto::after {
  content: ''; position: absolute; right: -20px; top: 50%;
  width: 70px; height: 128px; transform: translateY(-50%);
  background: var(--c); opacity: .12;
  clip-path: polygon(19.5% 0, 97.6% 0, 81.1% 50%, 97.6% 100%, 19.5% 100%, 1.2% 50%);
  transition: opacity .4s, transform .5s var(--ease);
}
.selector__item--proyecto:hover::after,
.selector__item--proyecto.activo::after { opacity: .28; transform: translateY(-50%) scale(1.12); }
.selector__item--proyecto > * { position: relative; z-index: 1; }
.selector__item--proyecto.activo { background: color-mix(in srgb, var(--c) 10%, var(--negro-3)); }

/* ---------- 44. Celular ----------
   Va al final a propósito: varias rejillas se redefinieron más abajo en la
   hoja y, como las media queries no suman especificidad, esas reglas
   ganaban y dejaban dos columnas en pantallas de 390 px. */
@media (max-width: 860px) {
  .cadena-mapa { grid-template-columns: 1fr; }
  #mapa-cadena { min-height: 300px; }
  .restaurantes { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .restaurantes__foto { height: 260px; }
  .restaurantes #mapa-restaurantes { height: 300px; }
  .foto-par, .foto-par--invertido, .foto-par--igual { grid-template-columns: 1fr; }
  .planes__mando { grid-template-columns: 1fr; }
  .plan-tarjeta--ancha { flex-direction: column; }
  .plan-tarjeta--ancha .plan-tarjeta__foto { width: 100%; aspect-ratio: 16/9; }
  .salidas { grid-template-columns: 1fr; }
  .formas { grid-template-columns: 1fr; }
  .contacto-datos { margin-left: 0; max-width: none; }
}

@media (max-width: 560px) {
  /* En pantallas angostas el titular del hero se comía media pantalla */
  .hero--interior h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .hero--interior .hero__contenido { padding-block: 6.5rem 2.5rem; }
  .declaracion { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .preguntas li { font-size: var(--t-sm); padding-left: 1.4rem; margin-bottom: .9rem; }
  .especies-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .eslabones--pasos li { padding: .7rem .8rem .7rem .9rem; }
  .selector__item--proyecto { min-height: 0; }
  .selector__item--proyecto .selector__nombre { min-height: 0; }
  .selector__item--proyecto::after { display: none; }
  .volver-flota { width: 46px; height: 46px; }
  .piezas { grid-template-columns: repeat(2, 1fr); }
  .ods { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 45. Sellos: logos de proyecto, miembros y aliados ----------
   Todos vienen en blanco sobre transparente y con el mismo peso óptico
   (misma cantidad de tinta, no el mismo alto: un logotipo alargado y un
   emblema cuadrado se ven parejos así). */

/* El logo del proyecto va en el botón de arriba, no en la ficha: ahí le da
   carácter a la columna. Los archivos de esta carpeta vienen recortados al
   contorno del dibujo, así que llenan la caja en vez de flotar dentro de un
   lienzo vacío: es lo que hacía que se vieran diminutos.
   La caja se centra y cada logo crece hasta topar por alto o por ancho, lo
   que llegue primero. Un emblema cuadrado topa por alto; un logotipo
   alargado como Mama Orbe topa por ancho y ocupa el botón entero, que es
   justo lo que necesita por tener menos carga de tinta. */
.selector__logo {
  display: flex; align-items: center; justify-content: center;
  height: 84px; width: 100%; margin-bottom: .75rem;
  opacity: .9; transition: opacity .3s, transform .35s var(--ease);
}
.selector__logo img {
  max-height: 100%; max-width: 100%;
  height: auto; width: auto; object-fit: contain;
}
.selector__item--proyecto:hover .selector__logo,
.selector__item--proyecto.activo .selector__logo { opacity: 1; transform: translateY(-3px); }
/* Con el logo arriba, el nombre y el lugar se centran debajo para que la
   columna se lea como una sola pieza. */
.selector__item--proyecto { text-align: center; align-items: center; }
.selector__item--proyecto .selector__nombre {
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  justify-content: center; min-height: 2.4em;
}
.selector__item--proyecto .selector__pie { text-align: center; }
.ficha__media { position: relative; }

/* La franja del pie iba con demasiado aire negro encima de la línea: se
   recorta el respiro de la fila de arriba y el margen propio. */
.pie__top { padding-bottom: clamp(1.6rem, 3vh, 2.4rem); }
.pie__redes {
  display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 4vw, 3rem);
  padding-top: 1.6rem; padding-bottom: 2.2rem; margin-top: 0;
  border-top: 1px solid var(--linea);
}
.pie__grupo h4 { margin-bottom: .8rem; }
/* Los archivos ya vienen recortados a lo ancho, así que el hueco que se ve
   entre dos logos es exactamente este gap y nada más. Antes cada archivo
   traía su propio aire dentro del lienzo y por eso Red de Juventudes se
   despegaba de ECOP y Mangrove no arrancaba bajo la M de «Miembros». */
.sellos { list-style: none; margin: 0 0 0 -2px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sellos li { margin: 0; display: flex; align-items: center; }
.sellos a { display: flex; align-items: center; }
.sellos img {
  /* Todos vienen en un lienzo del mismo tamaño con la marca ya igualada en
     peso, así que basta con darles la misma altura. */
  height: 74px; width: auto; object-fit: contain;
  opacity: .78; transition: opacity .3s, transform .3s var(--ease);
}
.sellos a:hover img, .sellos a:focus-visible img { opacity: 1; transform: translateY(-2px); }
.sellos a:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; border-radius: 8px; }
@media (max-width: 560px) {
  .sellos { gap: .4rem; }
  .sellos img { height: 62px; }
  .selector__logo { height: 66px; margin-bottom: .6rem; }
  /* En una sola columna ya no hay nada que alinear entre botones, así que
     el hueco reservado de los proyectos que aún no tienen logo se quita.
     Cuando llegue el archivo el hueco vuelve solo. */
  .selector__logo:empty { display: none; }
}

/* La lámina del atún es la más alargada de las seis, así que llenaba todo
   el ancho del panel y se veía mayor que las demás. Se le baja un punto
   para que quede a la misma escala. */
.especie--atun .especie__dibujo img { max-width: 86%; }

/* ---------- 46. Que nada se aplaste al angostar la ventana ----------
   El problema de fondo es siempre el mismo: dentro de un contenedor flex o
   grid, los hijos se dejan comprimir por debajo de su tamaño natural. La
   solución también: flex:none o min-width:0 según el caso, y proporción
   protegida en todo lo que sea imagen. */

/* El logotipo de la barra se estaba encogiendo a 12 px de ancho */
.nav__logo { flex: none; display: flex; align-items: center; }
.nav__logo img { height: 26px; width: auto; max-width: none; flex: none; object-fit: contain; }
.nav__row { flex-wrap: nowrap; }
.nav__acciones { flex: none; }

/* Los logos, siempre con su proporción y sin estirarse */
.hero__logo, .hero__tagline, .pie__marca img, .sellos img, .sello img { object-fit: contain; }

/* El bloque de marca del pie se aplastaba a 7 px de ancho: pasa a ocupar
   toda la fila en cuanto la ventana se angosta. */
@media (max-width: 900px) {
  .pie__top { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem; }
  .pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .pie__top { grid-template-columns: 1fr; }
  .pie__redes { flex-direction: column; gap: 1.6rem; }
}

/* El espectro de líneas de conservación no baja de tamaño legible */
.espectro__txt { font-size: max(11px, var(--t-xs)); }
@media (max-width: 400px) {
  .espectro { grid-template-columns: repeat(2, 1fr); }
}

/* Colchón general: por debajo de 360 px se ajusta el margen lateral para
   que nada se salga ni quede sin aire */
@media (max-width: 380px) {
  :root { --gutter: 1rem; }
  .hero__cta .btn, .btn--bloque { width: 100%; justify-content: center; }
}

/* En pantallas muy angostas la barra no cabe: se compacta el logo, el
   selector de idioma y el botón de donar, en vez de dejar que se desborden. */
@media (max-width: 420px) {
  .nav__row { gap: .6rem; }
  .nav__logo img { height: 22px; }
  .nav__acciones { gap: .45rem; }
  .lang button { padding: .3rem .5rem; font-size: 11px; }
  .nav__acciones .btn--donar { padding: .5rem .75rem; font-size: 11px; letter-spacing: .03em; }
  .nav__burger { margin-left: 0; }
}

/* A 320 px el logotipo medía 166 px de ancho y empujaba las acciones fuera
   de la pantalla. Se fija el ancho y el alto se calcula solo: cambia de
   tamaño sin deformarse. */
@media (max-width: 420px) {
  .nav__logo img { width: clamp(92px, 30vw, 128px); height: auto; }
}
/* Ni el menú fuera de pantalla ni las decoraciones que se salen unos pocos
   píxeles deben generar barra horizontal. Se usa clip y no hidden: clip
   recorta sin crear un contenedor de scroll, así que no rompe lo que esté
   fijo ni pegajoso dentro. */
html, body { overflow-x: clip; }

/* El menú cerrado se queda fuera de pantalla con transform, y un elemento
   fijo desplazado así sigue contando para el ancho del documento. Con
   visibility oculta deja de contar y desaparece la barra horizontal. */
@media (max-width: 940px) {
  .nav__links { visibility: hidden; transition: transform .45s var(--ease), visibility .45s; }
  .nav__links.abierto { visibility: visible; }
}

/* ---------- 47. (libre) ----------
   Aquí vivía la pastilla del cargo. Ahora el cargo va como banda al pie
   de la foto: ver la sección 62. */

/* ---------- 48. La frase del propósito ----------
   Iba al tamaño de una declaración de portada y pesaba más que el resto de
   la sección. Baja un escalón y toma el azul de marca. */
.declaracion--proposito {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  color: var(--azul);
  max-width: 46ch;
  letter-spacing: -.022em;
}
.claro .declaracion--proposito { color: var(--azul-legible); }

/* ---------- 49. El pez cruza la página con profundidad ----------
   El pez ya no pasa por encima de todo. Se queda en una capa intermedia:
   por encima del fondo de cada sección, de las texturas y del texto de
   párrafo —ahí es donde se ve nadar— y por debajo de todo lo que tiene
   cuerpo propio: títulos, tarjetas, imágenes, videos y animaciones.
   La regla es siempre la misma en las nueve páginas, así que el cruce se
   lee como profundidad y no como un error. */
.pez-flotante { z-index: 1; }

/* Lo que el pez debe pasar por detrás */
h1, h2, h3, h4,
.apartado, .declaracion, .cita blockquote,
.linea, .proyecto, .persona, .especie, .especie-tarjeta, .cifra, .criterio,
.plan-tarjeta, .paquete, .pieza, .actividad, .aliado, .paso, .forma,
.selector__item, .selector__panel, .ficha, .bloque-detalle, .frente,
.btn, .enlace, figure, img, video, .grafico, .mapa, [id^="mapa-"] {
  position: relative;
  z-index: 2;
}
/* Cuatro familias de sección se aíslan a propósito (portadas, texturas y la
   franja azul) para que sus fondos no se escapen. Al estar aisladas, nada
   de adentro puede subir de capa por su cuenta, así que la sección entera
   sube: el pez pasa por detrás del bloque completo, que es justo el efecto
   que se busca en piezas gráficas fuertes. */
.hero, .textura-fondo, .textura-panel, .franja-cta { z-index: 2; }

/* Excepciones: lo que ya vivía a propósito en una capa de fondo se queda
   donde estaba. El video y la imagen de portada, sobre todo: si subieran a
   la capa 2 taparían el titular del hero. */
.hero__fondo, .hero__fondo img, .hero__fondo video { z-index: -2; }
/* Estas fotos llevan un velo o una etiqueta encima: si suben a la capa 2 se
   comen la capa que las cubre. El velo azul del equipo se me perdió así. */
.persona__foto img,
.hero__imagen img, .proyecto__img img, .restaurantes__foto img,
.plan-tarjeta__foto img, .foto-banda img { z-index: auto; }

/* ---------- 50. El mapa de restaurantes en su sitio ----------
   Leaflet pinta sus capas en z-index 400–700, muy por encima de cualquier
   cosa de la página, y por eso el mapa se montaba sobre la portada al
   desplazar. Encerrarlo en su propio contexto de apilamiento deja esos
   números encerrados adentro: el mapa vuelve a valer lo mismo que la
   tarjeta que lo contiene. */
#mapa-restaurantes, #mapa-cadena {
  position: relative;
  isolation: isolate;
  z-index: 2;
}
#mapa-restaurantes .leaflet-pane,
#mapa-restaurantes .leaflet-control-container,
#mapa-cadena .leaflet-pane,
#mapa-cadena .leaflet-control-container { z-index: auto; }

/* ---------- 51. Las láminas sin panel negro ----------
   El dibujo se apoya en el fondo de su propia tarjeta: el negro de marca en
   Cotizar mi pedido, el blanco en Come con el ojo puesto. Sobre blanco las
   tintas de la paleta secundaria se lavaban —el amarillo del atún quedaba
   en 1.6 de contraste—, así que en tema claro la lámina se oscurece un
   punto y sube a 3.9, que ya es legible. */
.especie__dibujo { background: transparent; padding: .7rem 1rem; }
.claro .especie__dibujo { background: transparent; }
.claro .especie__dibujo img { filter: brightness(.62) saturate(1.2); }
button.especie[disabled] .especie__dibujo { filter: grayscale(1) opacity(.7); }

/* ---------- 52. Rejillas simétricas ----------
   Nada de cuatro arriba y dos abajo. Donde el número de fichas es fijo se
   fija también el número de columnas; donde es variable, la última fila se
   centra para que el sobrante se lea como decisión y no como hueco. */
.especies-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.especies-fecha { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .especies-grid, .especies-fecha { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .especies-grid, .especies-fecha { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
}

/* Rejillas de número fijo: las columnas se eligen para que el total siempre
   se reparta exacto. Cuatro fichas nunca pasan por tres columnas —ahí es
   donde salía la fila huérfana—: van de cuatro a dos y de dos a una. */
.lineas, .cuadrantes, .piezas { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) {
  .lineas, .cuadrantes, .piezas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .lineas, .cuadrantes, .piezas { grid-template-columns: 1fr; }
}
/* Las cifras son flex, no rejilla: se les fija el ancho de base para que
   caigan de cuatro en cuatro y luego de dos en dos, nunca tres y una. */
.cifras > .cifra { flex: 0 1 calc(25% - clamp(1.8rem, 3.8vw, 3.4rem)); min-width: 150px; }
@media (max-width: 1180px) {
  .cifras > .cifra { flex-basis: calc(50% - clamp(1.2rem, 2.5vw, 2.3rem)); }
}
@media (max-width: 560px) { .cifras > .cifra { flex-basis: 100%; } }

/* Tres fichas: tres columnas o una. Dos dejaría siempre una suelta abajo. */
.criterios, .planes-grid, .salidas { grid-template-columns: repeat(3, 1fr); }
.planes-grid--uno { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .criterios, .planes-grid, .salidas { grid-template-columns: 1fr; }
}

/* Diez actividades: cinco y cinco, luego dos columnas de a cinco filas. */
.actividades { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .actividades { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .actividades { grid-template-columns: 1fr; } }

/* Cinco fichas no se reparten parejo en ninguna cuenta menor que cinco, así
   que en vez de rejilla van en fila flexible: cuando la última no se llena,
   queda centrada y se lee como decisión, no como hueco. */
.equipo, .selector__fila--proyectos {
  display: flex; flex-wrap: wrap; justify-content: center;
}
.equipo > *, .selector__fila--proyectos > * { flex: 0 1 calc(20% - 1.1rem); }
/* Nunca cuatro y uno: de cinco se pasa directo a tres —que deja 3+2, una
   pareja y no un huérfano— y de ahí a dos. */
@media (max-width: 1180px) {
  .equipo > *, .selector__fila--proyectos > * { flex-basis: calc(33.333% - 1.1rem); }
}
@media (max-width: 760px) {
  .equipo > *, .selector__fila--proyectos > * { flex-basis: calc(50% - 1.1rem); }
}
@media (max-width: 430px) {
  .equipo > *, .selector__fila--proyectos > * { flex-basis: 100%; }
}
.aliados, .ods { justify-content: center; }

/* ---------- 53. Comprar: las frases de cierre pesan menos ----------
   Cada frente cierra con una frase; iba al tamaño de un titular y con
   mucho aire negro alrededor, así que separaba el panel del resto. */
[data-cierre] .cita { padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(1.8rem, 4vw, 3rem); }
[data-cierre] .cita blockquote { font-size: clamp(1.35rem, 2.6vw, 1.95rem); max-width: 34ch; }

/* ---------- 54. Sello de alianza en el panel de turismo ----------
   Arriba a la derecha del dashboard, como el sello de quien opera. No compite
   con el título: va en pequeño y con el logo del aliado debajo del rótulo. */
.panel__sello {
  position: absolute; top: clamp(1.1rem, 2.5vw, 1.9rem); right: clamp(1.1rem, 2.5vw, 1.9rem);
  display: flex; flex-direction: column; align-items: flex-end; gap: .3rem;
  z-index: 3; pointer-events: none; max-width: 40%;
}
.panel__sello-texto {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--txt-tenue);
}
.panel__sello img { height: 66px; width: auto; object-fit: contain; opacity: .95; }
.panel__alianza {
  font-size: var(--t-sm); color: var(--txt-suave);
  border-left: 2px solid var(--azul);
  padding-left: .9rem; margin: 0 0 .4rem; max-width: 62ch;
}
@media (max-width: 700px) {
  /* En celular el sello tapaba el título: pasa a ser una línea más del texto */
  .panel__sello {
    position: static; flex-direction: row; align-items: center; gap: .55rem;
    max-width: none; margin-bottom: .9rem;
  }
  .panel__sello img { height: 34px; }
}

/* ---------- 55. La guía, después de confirmar ----------
   Sale del flujo de cotización y aparece cuando el pedido ya está hecho. */
.confirmacion__guia {
  margin-top: 1.6rem; padding-top: 1.3rem;
  border-top: 1px solid var(--linea);
}
.confirmacion__guia p {
  font-size: var(--t-sm); color: var(--txt-suave); margin: 0 0 .9rem;
}

/* Los chips ahora son botones de verdad (teclado y lectores de pantalla),
   así que hay que devolverles la tipografía de la página. */
button.chip { font-family: inherit; line-height: 1.2; }

/* ═══════════════════════════════════════════════════════════
   56. Escala de títulos
   Los titulares de portada de cada página se quedan como están: son la
   entrada y tienen que pesar. Todo lo demás —declaraciones, títulos de
   panel y de tarjeta— baja un 15 % y pasa a una sola escala, para que no
   haya tres tamaños distintos haciendo el mismo papel.
   ═══════════════════════════════════════════════════════════ */
:root {
  --t-titulo-1: clamp(1.79rem, 4.6vw, 3.9rem);    /* declaraciones grandes */
  --t-titulo-2: clamp(1.45rem, 3.06vw, 2.55rem);  /* títulos de panel y ficha */
  --t-titulo-3: clamp(1.06rem, 1.79vw, 1.49rem);  /* títulos de tarjeta */
}

.declaracion,
.franja-cta h2 { font-size: var(--t-titulo-1); }

.cita blockquote,
.selector__panel > h3,
.selector__panel .ficha h3,
.ficha h2,
.forma h2,
.confirmacion__caja h3 { font-size: var(--t-titulo-2); }

.linea h3,
.criterio h3,
.frente h3,
.accion h3,
.proyecto__cuerpo h3,
.plan-detalle h4,
.drawer__cabecera h3 { font-size: var(--t-titulo-3); }

/* Un titular de doscientos caracteres no puede ir al tamaño de uno de cinco
   palabras: entre más largo el renglón, más pequeña la letra. */
.declaracion--larga { font-size: clamp(1.35rem, 2.5vw, 2.1rem); max-width: 46ch; line-height: 1.22; }

/* La frase del propósito se me fue demasiado abajo la ronda pasada: queda
   por debajo de las declaraciones, pero sin verse de otra familia. */
.declaracion--proposito {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  max-width: 42ch;
}

/* ---------- 57. Pie: los dos grupos, separados y distinguibles ----------
   Pegados del todo se leían como una sola fila de siete logos. Este es el
   punto medio: se ven como dos grupos sin volver al hueco de antes. */
.sellos { gap: 1.15rem; }
.pie__redes { gap: clamp(2.4rem, 6vw, 5rem); }
.pie__grupo + .pie__grupo { padding-left: clamp(.6rem, 2vw, 2rem); }
@media (max-width: 560px) {
  .sellos { gap: .9rem; }
  .pie__grupo + .pie__grupo { padding-left: 0; }
}

/* ---------- 58. Comprar: los tres frentes, arriba y con cuerpo ----------
   Sin la banda intermedia, la sección arranca pegada a la portada y los tres
   botones entran en la primera pantalla. Y son más altos: rectángulos con
   cuerpo, no franjas. */
.seccion--frentes { padding-top: clamp(2rem, 5vh, 3.4rem); }
.selector__fila .selector__item:not(.selector__item--proyecto) {
  min-height: 168px;
  padding: 1.5rem 1.4rem 1.4rem;
  justify-content: flex-start;
  gap: .6rem;
}
.selector__fila .selector__item:not(.selector__item--proyecto) .selector__pie { margin-top: auto; }

/* La frase de cierre de cada frente: el mismo aire arriba que abajo, para
   que el bloque quede centrado entre el panel y la franja azul. */
[data-cierre] .cita { padding-block: clamp(2rem, 4.5vw, 3.2rem); }

/* Los dos botones del panel de pesca ocupan el ancho de la foto de arriba.
   Con la rejilla de tres columnas quedaba una vacía a la derecha. */
.salidas { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .salidas { grid-template-columns: 1fr; } }

/* ---------- 59. Sello de Absaventour ----------
   Más grande, y con el texto reservándole el sitio para que no se le meta
   por debajo. */
.panel__sello img { height: 86px; }
.selector__panel .lead { max-width: 62ch; }
@media (min-width: 701px) {
  .textura-panel--selva > h3,
  .textura-panel--selva > .lead { padding-right: clamp(7rem, 11vw, 10.5rem); }
  .textura-panel--selva > .lead { max-width: none; }
}
@media (max-width: 700px) {
  .panel__sello img { height: 44px; }
  .textura-panel--selva > h3, .textura-panel--selva > .lead { padding-right: 0; }
}

/* ---------- 60. Las láminas, un punto más abajo y más pequeñas ---------- */
.especie__dibujo { padding: 1.1rem 1.5rem .8rem; }
.especie__dibujo img { max-width: 88%; max-height: 88%; }
.especie--atun .especie__dibujo img { max-width: 78%; }

/* ---------- 61. Participa: los dos botones más cerca del texto ---------- */
.forma p { margin-bottom: .5rem; }
.forma .btn.mt-2 { margin-top: .8rem; }

/* ---------- 62. El equipo: alineado por renglón ----------
   Sin pastillas. El cargo aparece al pasar el cursor, como una banda azul
   al pie de la foto. Los nombres, las líneas azules y los párrafos caen a
   la misma altura en las cinco fichas porque cada franja tiene su alto
   reservado; si no, cada tarjeta empieza el párrafo donde le toca. */
.persona__foto { position: relative; overflow: hidden; }
.persona__cargo {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: block; margin: 0; white-space: normal;
  display: block; margin: 0;
  background: var(--azul); color: var(--negro);
  font-family: var(--texto);
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  text-align: center; padding: .5rem .4rem;
  transform: translateY(110%);
  transition: transform .35s var(--ease);
  border: 0; border-radius: 0;
}
.persona:hover .persona__cargo,
.persona__enlace:focus-visible .persona__cargo { transform: translateY(0); }

.persona h3 { min-height: 2.4em; display: flex; align-items: flex-start; }
.persona .persona__rol { min-height: 4.9em; }
.claro .persona__cargo { color: var(--negro); }
@media (max-width: 760px) {
  /* En una o dos columnas ya no hay renglones que cuadrar entre fichas */
  .persona h3, .persona .persona__rol { min-height: 0; }
}

/* ---------- 63. Detalles de comportamiento ----------
   La llave de color de los botones de proyecto desaparecía al angostar:
   estaba escondida por la media query de celular, no por el ancho real del
   botón. Vuelve siempre, ajustada al tamaño del botón. */
@media (max-width: 560px) {
  .selector__item--proyecto::after {
    display: block;
    right: -14px; width: 52px; height: 92px;
  }
}

/* El pez conserva su tamaño en cualquier ventana: si encoge con el ancho,
   en pantallas angostas se pierde y deja de leerse como un pez. */
.pez-flotante { width: 40px; }

/* El panel del menú tiene que tapar la página entera, siempre. A anchos muy
   angostos se traslucía: el fondo iba con alfa .97 y encima llevaba
   backdrop-filter, que en un contexto de apilamiento anidado deja de
   aplicarse y la página se veía a través. Con color sólido no depende de
   nada. */
@media (max-width: 940px) {
  .nav__links {
    background: var(--negro);
    backdrop-filter: none;
    z-index: 1;
    overflow-y: auto;
    padding: 6rem 2rem 3rem;
  }
  /* El panel cubre la pantalla entera, incluida la barra: hay que dejar por
     encima el grupo de la derecha o el botón de cerrar queda debajo y no hay
     forma de salir del menú. */
  .nav__acciones { position: relative; z-index: 2; }

  /* ── Esta es la causa real de que el menú saliera recortado ──
     Al bajar, la barra toma su estado compacto, y ese estado llevaba un
     desenfoque de fondo. Un elemento con filtro o desenfoque se convierte
     en el marco de referencia de todo lo que tenga posición fija adentro:
     el panel del menú dejaba de medirse contra la pantalla y pasaba a
     medirse contra la barra, de 70 px de alto. Por eso solo fallaba
     después de desplazar, y por eso se veía cortado y pegado arriba.
     En pantallas angostas la barra va con color sólido y sin desenfoque. */
  .nav, .nav.compacta {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav.compacta { background: var(--negro); }
}

/* Cada aliado del home lleva a su proyecto, ya abierto en Proyectos. Ahora
   son enlaces, así que hay que devolverles el color y quitar el subrayado. */
a.aliado { display: block; color: inherit; text-decoration: none; }
a.aliado:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
a.aliado:hover h4 { color: var(--azul); }
.claro a.aliado:hover h4 { color: var(--azul-legible); }

/* ═══════════════════════════════════════════════════════════
   64. Ajustes de esta tanda
   ═══════════════════════════════════════════════════════════ */

/* La frase del propósito vuelve al tamaño de las demás declaraciones de su
   página: solo cambia el color, no el peso. */
.declaracion--proposito { font-size: var(--t-titulo-1); max-width: 34ch; }

/* La declaración de Nuestro enfoque, en el azul de marca */
.declaracion--azul { color: var(--azul); }
.claro .declaracion--azul { color: var(--azul-legible); }

/* Los tres botones de Comprar quedaron altos: el nombre tenía que crecer
   con ellos o el botón se veía vacío. */
.selector__fila .selector__item:not(.selector__item--proyecto) .selector__nombre {
  font-size: clamp(1.15rem, 1.75vw, 1.5rem);
  line-height: 1.15;
}

/* ---------- 65. Las cuatro líneas, en grande ----------
   La tarjeta es un botón, así que hay que devolverle la tipografía y la
   alineación que un botón pisa por defecto. */
button.linea, a.linea {
  font-family: inherit; color: inherit; text-align: left;
  width: 100%; display: block; cursor: pointer; text-decoration: none;
}
button.linea:focus-visible, a.linea:focus-visible {
  outline: 2px solid var(--azul); outline-offset: 3px;
}

.linea-hoja {
  /* Por encima de la barra: es un panel modal, y con la barra arriba el
     clic en la franja superior no cerraba nada. */
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 5vw, 3rem);
  background: rgba(6, 10, 14, .82);
  opacity: 0; transition: opacity .3s var(--ease);
}
.linea-hoja.visible { opacity: 1; }
.linea-hoja[hidden] { display: none; }
.linea-hoja__caja {
  --c: var(--azul);
  position: relative;
  width: min(760px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--negro-2);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--c);
  border-radius: var(--radio);
  padding: clamp(2.2rem, 4vw, 3.2rem) clamp(1.6rem, 4vw, 3.2rem) clamp(2rem, 4vw, 3rem);
  transform: translateY(14px) scale(.985);
  transition: transform .35s var(--ease);
}
.linea-hoja.visible .linea-hoja__caja { transform: none; }
.linea-hoja__cerrar {
  position: absolute; top: .9rem; right: .9rem;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--linea);
  color: var(--txt); cursor: pointer;
  transition: background .25s, border-color .25s;
}
.linea-hoja__cerrar:hover { background: var(--negro-3); border-color: var(--c); }
.linea-hoja__n {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  letter-spacing: -.02em; color: var(--c);
  margin-bottom: 1rem; padding-right: 3rem;
}
.linea-hoja__texto {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.62; color: var(--txt);
}

/* ---------- 66. «Sumérgete» responde al clic ---------- */
button.hero__scroll {
  background: transparent; border: 0; font-family: var(--texto);
  cursor: pointer; padding: .4rem .6rem;
  transition: color .3s;
}
button.hero__scroll:hover { color: var(--txt); }
button.hero__scroll:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; border-radius: 8px; }

/* ---------- 67. El video se pone en marcha con un clic ----------
   La capa cubre el cuadro menos la franja de abajo, que es donde el
   navegador pinta su barra de controles. */
.video-bloque__toque {
  position: absolute; inset: 0 0 54px 0; z-index: 3;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; appearance: none;
}
.video-bloque__toque:focus-visible { outline: 2px solid var(--azul); outline-offset: -4px; }

/* ---------- 68. Avisos que sí se ven ----------
   Cuando un paquete no corre en esa fecha, o cuando ese día no llega
   pescado, el mensaje es lo que frena la cotización. Iba como pie de nota
   en gris y se perdía: ahora va en el coral de marca, en negrilla y un
   punto más grande, con una barra del mismo color al costado. */
.paso__nota.aviso, .aviso {
  color: var(--economia);
  font-weight: 700;
  /* la nota ya subió un 30 %; el aviso va un 20 % por encima de eso */
  font-size: calc(var(--t-sm) * 1.3 * 1.2);
  line-height: 1.45;
  border-left: 3px solid var(--economia);
  padding: .55rem 0 .55rem .85rem;
  margin-top: .9rem;
}
.claro .aviso { color: #a8442f; border-left-color: #a8442f; }

/* ---------- 69. Cotizar y turismo: tamaños ---------- */
/* El total en azul pesaba más que el titular de la sección */
.cotizacion__total strong { font-size: calc(var(--t-xl) * .85); }
/* Los subtítulos de cada paso estaban por debajo de lo legible */
.paso__nota { font-size: calc(var(--t-sm) * 1.3); }

/* El sello de Absaventour, despegado del rótulo */
.panel__sello { gap: .6rem; }
.panel__sello img { margin-top: .25rem; }

/* ---------- 70. Comprar: las frases de cierre, en una línea ----------
   La frase se partía en dos porque el contenedor estrecho la limitaba a
   764 px de texto y la más larga necesita mil. Se le da el ancho completo
   de la página y un punto menos de letra: entra de corrido.
   El aire de arriba lo ponía el relleno de la sección de los frentes, no
   la cita; por eso quedaba desbalanceado contra la franja azul de abajo. */
[data-cierre] .cita { padding-block: clamp(1.8rem, 3.6vw, 2.6rem); }
[data-cierre] .cita .wrap--estrecho { max-width: none; }
[data-cierre] .cita blockquote {
  max-width: none;
  font-size: clamp(1.25rem, 2.25vw, 1.8rem);
}

/* ---------- 71. Los ODS, enlazados ---------- */
.ods a { display: block; border-radius: 6px; }
.ods a:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

/* ---------- 72. El espectro de líneas no se sale de la tarjeta ----------
   Iba en cuatro columnas fijas, y una columna de rejilla no baja de su
   palabra más larga: «TERRITORIAL» ponía el piso y, al angostarse la ficha,
   la rejilla entera se desbordaba hacia la derecha en vez de ceder.
   Con minmax(0,…) la columna sí puede encoger, y la palabra parte cuando
   hace falta en lugar de empujar. */
.espectro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.espectro__linea { min-width: 0; }
.espectro__txt { overflow-wrap: anywhere; }

/* ═══════════════════════════════════════════════════════════
   73. Seis proyectos
   Con cinco había que evitar el 4+1; con seis el reparto es más amable,
   pero hay que fijarlo igual o el navegador cae en 4+2 o en 5+1.
   Seis arriba → tres y tres → dos, dos y dos → uno debajo de otro.
   ═══════════════════════════════════════════════════════════ */
.selector__fila--proyectos > * { flex-basis: calc(16.666% - 1.1rem); }
@media (max-width: 1180px) {
  .selector__fila--proyectos > * { flex-basis: calc(33.333% - 1.1rem); }
}
@media (max-width: 760px) {
  .selector__fila--proyectos > * { flex-basis: calc(50% - 1.1rem); }
}
@media (max-width: 430px) {
  .selector__fila--proyectos > * { flex-basis: 100%; }
}

/* Las seis fichas de «Dónde trabajamos», tres y tres */
.aliados > * { flex: 0 1 calc(33.333% - .6rem); }
@media (max-width: 760px) { .aliados > * { flex-basis: calc(50% - .5rem); } }
@media (max-width: 430px) { .aliados > * { flex-basis: 100%; } }

/* El título de cada ficha lleva al proyecto: se comporta como enlace pero
   sigue leyéndose como título. */
.ficha__titulo {
  color: inherit; text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .25s, border-color .25s;
}
.ficha__titulo:hover, .ficha__titulo:focus-visible {
  color: var(--azul); border-bottom-color: var(--azul);
}
.claro .ficha__titulo:hover, .claro .ficha__titulo:focus-visible {
  color: var(--azul-legible); border-bottom-color: var(--azul-legible);
}

/* El logotipo de Mama Orbe va en SVG y es mucho más ancho que alto: sin
   tope se comería el botón entero. */
.selector__logo img[src$=".svg"] { max-width: 92%; }

/* ═══════════════════════════════════════════════════════════
   74. La tabla de transparencia, siempre cerrada
   Iba con columnas automáticas y cinco datos: la última fila quedaba a
   medias y el borde de abajo se veía interrumpido. Ahora el número de
   columnas se fija por tramo y el último dato se estira hasta el final,
   así la tabla siempre cierra como un rectángulo completo.
   ═══════════════════════════════════════════════════════════ */
.datos-legales--transparencia { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dato { border-left: 1px solid var(--linea); border-top: 1px solid var(--linea); }
.datos-legales--transparencia > .dato:nth-child(5n + 1) { border-left-color: transparent; }
.datos-legales--transparencia > .dato:nth-child(-n + 5) { border-top-color: transparent; }

@media (max-width: 1180px) {
  .datos-legales--transparencia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datos-legales--transparencia > .dato:nth-child(5n + 1) { border-left-color: var(--linea); }
  .datos-legales--transparencia > .dato:nth-child(2n + 1) { border-left-color: transparent; }
  .datos-legales--transparencia > .dato:nth-child(-n + 5) { border-top-color: var(--linea); }
  .datos-legales--transparencia > .dato:nth-child(-n + 2) { border-top-color: transparent; }
  /* el quinto dato ocupa la fila entera: nunca queda un hueco al lado */
  .datos-legales--transparencia > .dato:last-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .datos-legales { grid-template-columns: 1fr; }
  .dato { border-left-color: transparent !important; }
  .datos-legales > .dato:first-child { border-top-color: transparent; }
  .datos-legales > .dato:nth-child(2) { border-top-color: var(--linea); }
}

/* ═══════════════════════════════════════════════════════════
   75. Que todo se pueda tocar con el dedo
   En pantalla táctil un objetivo de menos de 44 px es una lotería. Estos
   ajustes solo se aplican donde el puntero es grueso —dedo, no ratón—, así
   que la vista de escritorio no cambia en nada.
   ═══════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* El logotipo es el enlace al inicio: su alto seguía al de la imagen y a
     320 px quedaba en 13 px de alto. */
  .nav__logo { display: flex; align-items: center; min-height: 44px; }

  /* El cambio de idioma iba en 22 px */
  .lang button { min-height: 40px; padding-inline: .9rem; }

  /* Botones pequeños, chips y compartir */
  .btn { min-height: 44px; }
  .btn--sm { min-height: 40px; }
  /* Los círculos de redes y compartir llevan alto y ancho fijos, así que
     min-height no bastaba: hay que darles la medida completa. */
  .redes a, .redes button.compartir__btn {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  }
  .chip { min-height: 44px; display: inline-flex; align-items: center; }
  .stepper button { width: 46px; height: 46px; }

  /* Enlaces sueltos que hacen de botón */
  .enlace { display: inline-flex; align-items: center; min-height: 40px; }
}

/* Seis fichas de aliado a 1024 px dejaban columnas de 114 px: el texto
   caía a dos palabras por renglón. De tres columnas se pasa a dos antes.
   El tramo se acota por arriba y por abajo: sin el mínimo, esta regla
   pisaba a la de celular —que va antes en la hoja— y en un teléfono
   seguían saliendo dos columnas de 123 px. */
@media (max-width: 1100px) and (min-width: 431px) {
  .aliados > * { flex-basis: calc(50% - .5rem); }
}


/* ---------- 76. La ficha de contacto, en cuadro ----------
   Son cuatro datos y se leen mejor de dos en dos —correo y teléfono
   arriba, Instagram y dónde estamos abajo— que en una sola columna. En
   celular pasan a uno debajo de otro. */
.datos-legales--contacto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.datos-legales--contacto > .dato { border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.datos-legales--contacto > .dato:nth-child(2n + 1) { border-left-color: transparent; }
.datos-legales--contacto > .dato:nth-child(-n + 2) { border-top-color: transparent; }

@media (max-width: 560px) {
  .datos-legales--contacto { grid-template-columns: 1fr; }
  .datos-legales--contacto > .dato { border-left-color: transparent; border-top-color: var(--linea); }
  .datos-legales--contacto > .dato:first-child { border-top-color: transparent; }
}