/* BOGAMAR — hoja de estilos
   Colores de marca (manual): teal #0688A0, azul profundo #06232B,
   espuma #DCEDF1. Tipografía: Lato 300 / 400 / 700 / 900.
   El arena #F0EADF del manual ya no se usa como fondo: se sustituyó por un
   teal muy claro. Sigue estando en el manual de marca por si hace falta.
   Rojo, amarillo y verde NO se usan en la web: quedan reservados para
   la señalización de seguridad. */

:root {
  --teal: #0688A0;
  --teal-claro: #7FD0DE;

  /* Colores por función. Son los que cambian en modo oscuro (bloque del final
     de esta hoja); los de marca de arriba se quedan como están.
       --acento    teal para texto y filetes
       --teal-hover  el teal del ratón encima
       --fondo     fondo de la página
       --superficie tarjetas, cabecera, bloques claros
       --tinta     texto principal */
  --acento: #0688A0;
  --teal-hover: #05778C;
  --fondo: #E4F1F5;          /* teal muy claro: es el fondo de la página */
  --superficie: #FFFFFF;
  --superficie-suave: #C6E2E9; /* un punto más de teal, para separar bloques */
  --tinta: #06232B;
  --tinta-media: #3D5157;
  --tinta-suave: #4A5C61;
  --borde-suave: #DCEDF1;
  --hueco-a: #D2E7ED;
  --hueco-b: #E4F1F5;
  --pendiente-borde: #A9C6CF;
  --profundo: #06232B;
  --profundo-mas: #04191F;
  --espuma: #DCEDF1;
  --blanco: #FFFFFF;
  --gris: #9AA8AC;
  --borde: #E2E6E4;
  --ancho: 1280px;
  --margen: 40px;
  --alto-cabecera: 130px; /* franja de utilidad + fila del logo (medido) */
  --alto-franja: 62px;    /* la franja teal de los tres argumentos (fija, ver .franja li) */

  /* Franja de arriba de la cabecera, bloque de contacto y pie. En claro van en
     tonos claros; en oscuro, en azul profundo (bloque del final de la hoja). */
  --utilidad-fondo: #DCEDF1;
  --utilidad-texto: #06232B;
  --utilidad-suave: #4A5C61;
  --bloque-fondo: #F4FAFB;
  --bloque-brillo: rgba(6, 136, 160, 0.14);
  --bloque-texto: #06232B;
  --bloque-texto-suave: #3D5157;
  --bloque-acento: #0688A0;
  --bloque-linea: rgba(6, 35, 43, 0.12);
  --bloque-tarjeta: #FFFFFF;
  --bloque-sombra: 0 30px 60px -30px rgba(6, 35, 43, 0.28);
  --bloque-campo: #F2F8F9;
  --bloque-campo-foco: #FFFFFF;
  --bloque-campo-borde: rgba(6, 35, 43, 0.16);
  --bloque-placeholder: #8A9CA1;
  --icono-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%230688A0'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icono-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2306232B'/%3E%3Cpath d='M12 7v6.5M12 16.6v.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --pie-fondo: #DCEDF1;
  --pie-texto: #4A5C61;

  /* Portada (la foto de arriba) y la lista de argumentos de debajo en móvil.
     En claro: velo claro sobre la foto y textos oscuros. En oscuro: velo
     azul profundo y textos claros (listas del final de la hoja).
     --portada-velo es un color en R, G, B para poder darle transparencia. */
  --portada-velo: 244, 250, 251;
  --portada-texto: #06232B;
  --portada-texto-suave: #3D5157;
  --portada-acento: #0688A0;
  --portada-borde: rgba(6, 35, 43, 0.28);
  --portada-borde-fuerte: rgba(6, 35, 43, 0.6);
  --portada-cristal: rgba(255, 255, 255, 0.55);
  --portada-cristal-hover: rgba(255, 255, 255, 0.85);
  --portada-sombra-texto: 0 1px 18px rgba(255, 255, 255, 0.6);
  --portada-sombra-icono: rgba(255, 255, 255, 0.7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Así el pie se queda pegado abajo aunque el contenido sea corto, que es lo
     que pasa en el 404. En las páginas largas no cambia nada. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--tinta);
  font-family: Lato, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

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

a { color: var(--acento); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--teal-hover); }

/* Quien navega con teclado ve dónde está: un aro teal alrededor de lo enfocado */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

h1, h2, h3 { margin: 0; }
p { margin: 0; }

/* ---------- piezas reutilizables ---------- */

.boton {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 2px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.boton--grande { font-size: 17px; padding: 17px 30px; }
/* Con el ratón encima el botón se levanta un par de píxeles y echa sombra;
   al pulsarlo vuelve abajo, como un botón de verdad. */
.boton:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(6, 35, 43, 0.18); }
.boton:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(6, 35, 43, 0.15); transition-duration: .08s; }

/* Botones con icono delante: la ola de la marca en "pedir presupuesto" y el
   teléfono en "llamar ahora". La ola es un SVG blanco porque el botón va en
   teal; el teléfono hereda el color del texto con currentColor, así que
   acompaña también al pasar el ratón. */
.boton--icono { display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.boton__ola { width: 28px; height: auto; flex: 0 0 auto; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.boton__icono { width: 19px; height: 19px; flex: 0 0 auto; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
/* Al pasar el ratón la ola se mece y el teléfono vibra un poco */
.boton--icono:hover .boton__ola { transform: translateY(-2px) rotate(-8deg); }
.boton--icono:hover .boton__icono { transform: rotate(-12deg) scale(1.1); }
.boton--relleno { background: var(--teal); color: var(--blanco); }
.boton--relleno:hover { background: var(--teal-hover); color: var(--blanco); }
.boton--linea {
  border: 1px solid rgba(220, 237, 241, 0.5);
  color: var(--espuma);
  padding: 16px 30px;
}
.boton--linea:hover { border-color: var(--espuma); color: var(--blanco); }

.etiqueta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
}
.etiqueta--clara { color: var(--teal-claro); }

.antetitulo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-claro);
  margin-bottom: 18px;
}

/* Hueco de foto de la sección Zona. Bórralo cuando tengas la imagen. */
.hueco {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hueco--claro {
  background: repeating-linear-gradient(135deg, var(--hueco-a) 0 14px, var(--hueco-b) 14px 28px);
  color: var(--gris);
}

.pendiente {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 12px;
  border: 1px dashed var(--pendiente-borde);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
}
/* Antes era la versión para fondo oscuro; ahora el contacto cambia con el modo */
.pendiente--oscuro { border-color: var(--pendiente-borde); color: var(--gris); }

/* ---------- cabecera ---------- */

/* Franja de utilidad: teléfono, email e idiomas. Solo en escritorio. */
.utilidad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 9px var(--margen);
  background: var(--utilidad-fondo);
  color: var(--utilidad-texto);
  font-size: 13px;
  font-weight: 300;
}
.utilidad__datos { display: flex; align-items: center; gap: 26px; }
.utilidad__acciones { display: flex; align-items: center; gap: 20px; }
.utilidad a { color: var(--utilidad-texto); }
.utilidad a:hover { color: var(--acento); }
.utilidad__tel { font-weight: 700; }

/* Se queda pegada arriba: se esconde al bajar y vuelve al subir.
   Lo gobierna js/cabecera.js con el atributo data-oculta. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  padding: 0;
  transition: transform .28s ease, box-shadow .28s ease;
}
.cabecera[data-oculta="true"] { transform: translateY(-100%); }
/* En cuanto se baja un poco, la cabecera echa una sombra suave para separarse
   del contenido que pasa por debajo. Lo pone js/efectos.js. */
.cabecera[data-bajado="true"] { box-shadow: 0 6px 24px rgba(6, 35, 43, 0.10); }
/* Cristal esmerilado: la cabecera deja entrever, borroso, lo que pasa por
   debajo. Solo donde el navegador lo soporta; si no, se queda opaca. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecera {
    background: color-mix(in srgb, var(--superficie) 86%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
  }
}
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  padding: 18px var(--margen);
}
.cabecera__logo img { height: 48px; width: auto; transition: transform .25s ease; }
.cabecera__logo:hover img { transform: scale(1.03); }

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.nav a { color: var(--tinta); }
.nav a:hover { color: var(--acento); }
/* Debajo de cada enlace hay una raya teal que se dibuja de izquierda a derecha
   al pasar el ratón, y que se queda puesta en la sección que se está viendo
   (aria-current, lo pone js/efectos.js). */
.nav a:not(.boton) { position: relative; padding: 4px 0; }
.nav a:not(.boton)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.nav a:not(.boton):hover::after,
.nav a:not(.boton)[aria-current="true"]::after { transform: scaleX(1); }
.nav a:not(.boton)[aria-current="true"] { color: var(--acento); }
/* El botón de presupuesto es un <a> dentro del nav: su texto va en blanco
   siempre, también con el ratón encima. Estas dos van las últimas a propósito. */
.nav a.boton, .nav a.boton:hover { color: var(--blanco); }

/* Botón "Pedir presupuesto" del menú: degradado teal, el isotipo de BOGAMAR
   delante y un brillo que lo cruza al pasar el ratón. Se usa en el menú de
   escritorio y en el móvil. */
.boton--menu {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 18px 9px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--teal) 0%, #0A9FB8 100%);
  box-shadow: 0 8px 20px -8px rgba(6, 136, 160, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.boton--menu:hover { background: linear-gradient(135deg, var(--teal-hover) 0%, var(--teal) 100%); }
.boton--menu__logo {
  width: 26px;
  height: auto;
  flex: 0 0 auto;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.boton--menu:hover .boton--menu__logo { transform: translateY(-1px) rotate(-8deg) scale(1.08); }
.boton--menu::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}
.boton--menu:hover::after { left: 120%; }

/* Botón de claro / oscuro. Enseña la luna cuando la web está en claro (lo que
   se puede hacer es pasar a oscuro) y el sol cuando está en oscuro. */
.tema {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 5px;
  margin: 0;
  cursor: pointer;
  color: inherit;
  line-height: 0;
}
.tema svg { width: 17px; height: 17px; }
.tema:hover { color: var(--acento); }
.tema__sol { display: none; }
.tema--cabecera { display: none; }

.idiomas {
  margin: 0;
  display: flex;
  gap: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--utilidad-suave);
}
.idiomas a { color: var(--utilidad-suave); }
.idiomas a:hover { color: var(--acento); }
.idiomas__activo { color: var(--utilidad-texto); }

.hamburguesa {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 10px 2px;
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--tinta);
  transition: transform .18s ease, opacity .18s ease;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-movil__idiomas { display: none; }

/* El menú cuelga por debajo de .cabecera__fila, fuera de su padding, así que
   necesita su propio margen lateral para alinearse con el logo. */
.menu-movil {
  display: none;
  flex-direction: column;
  padding: 6px var(--margen) 22px;
  /* La cabecera va pegada arriba: en pantallas bajas el menú se desplaza
     por dentro en lugar de salirse. */
  max-height: calc(100vh - var(--alto-cabecera));
  overflow-y: auto;
}
/* Solo los enlaces de primer nivel llevan raya debajo. Los de idioma van
   dentro de un <p> y se estilan aparte, más pequeños y sin borde. */
.menu-movil > a {
  font-size: 19px;
  font-weight: 700;
  color: var(--tinta);
  padding: 14px 0;
  border-bottom: 1px solid var(--borde);
}
.menu-movil > a:hover { color: var(--acento); }
.menu-movil .boton:hover { color: var(--blanco); }
.menu-movil .boton { margin-top: 18px; border-bottom: 0; color: var(--blanco); padding: 15px 20px; }
.menu-movil .boton--menu { gap: 12px; font-size: 16px; }
.menu-movil .boton--menu__logo { width: 30px; }

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

/* overflow hidden: la foto se mueve en paralaje (js/efectos.js) y no tiene
   que asomar por fuera. El -40px de arriba es la holgura para ese movimiento:
   sin ella, al empezar a bajar se vería una franja vacía por encima. */
.portada {
  position: relative;
  overflow: hidden;
  background: var(--profundo);
  color: var(--portada-texto);
  /* La portada, con su ola, y la franja teal de los tres argumentos llenan
     justas la primera pantalla por debajo de la cabecera: se ve todo sin
     bajar, en cualquier tamaño de ventana. Para que el contenido quepa en
     ventanas bajas, el titular y los huecos se reducen (bloque "portada en
     ventanas bajas", más abajo). La línea de vh es para navegadores que no
     conocen svh. */
  min-height: calc(100vh - var(--alto-cabecera) - var(--alto-franja));
  min-height: calc(100svh - var(--alto-cabecera) - var(--alto-franja));
  isolation: isolate;
  display: grid;
}
/* La foto sobresale 40px por arriba (holgura del paralaje) y 4px por abajo:
   así nunca queda una rendija sin foto al redondear medios píxeles (Safari). */
.portada__media { position: absolute; inset: -40px 0 -4px; z-index: 0; will-change: transform; }
/* El velo oscuro sobre la foto va en su propia capa, que cubre la portada
   entera con margen. Antes iba pegado a la caja del texto y en iPhone podía
   quedar una línea de foto sin oscurecer en el borde de abajo. */
.portada::after {
  content: "";
  position: absolute;
  inset: 0 0 -4px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(var(--portada-velo), 0.85) 0%, rgba(var(--portada-velo), 0) 35%),
    linear-gradient(90deg, rgba(var(--portada-velo), 0.94) 0%, rgba(var(--portada-velo), 0.78) 38%, rgba(var(--portada-velo), 0.25) 72%, rgba(var(--portada-velo), 0.10) 100%);
}
.portada__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La foto es vertical: este encuadre deja a la vista el aro y el tubo */
  object-position: center 62%;
  /* Un punto más de contraste y color: la foto aguanta el velo sin apagarse */
  filter: saturate(1.1) contrast(1.05);
  /* Al cargar, la foto se acerca muy despacio hasta quedarse quieta */
  animation: bogamar-acercar 14s ease-out both;
}
@keyframes bogamar-acercar { from { transform: scale(1.09); } to { transform: scale(1); } }

/* La ola al pie de la portada. Es del mismo teal que la franja de abajo, así
   que las dos cosas se leen como una: la franja sube en forma de ola. Las dos
   olas van a distinta velocidad y en sentido contrario, como en el 404. */
.portada__olas {
  position: absolute;
  z-index: 3;   /* por encima del velo oscuro */
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: 48px;
  display: block;
  fill: var(--teal);
  pointer-events: none;
}
/* La de delante avanza hacia la izquierda y la de detrás hacia la derecha
   mientras sube y baja, así se cruzan y parece oleaje de verdad. Cada
   animación recorre un periodo entero de la onda (120), así no hay salto. */
.portada__ola { animation: bogamar-marea 5s linear infinite; }
.portada__ola--fondo { opacity: 0.5; animation: bogamar-resaca 7s ease-in-out infinite; }
@keyframes bogamar-marea { to { transform: translateX(-120px); } }
@keyframes bogamar-resaca {
  0%   { transform: translate(-120px, 0); }
  50%  { transform: translate(-60px, 5px); }
  100% { transform: translate(0, 0); }
}
/* El velo oscuro va de lado a lado de la pantalla, como la cabecera: si se
   quedara en el ancho del contenido dejaría dos cortes verticales sobre la
   foto. El texto sí sigue alineado con el resto de la web, con el mismo
   apaño de padding que usan .contacto y .pie. */
.portada__texto {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-block: 40px 110px;   /* abajo, sitio para la ola y la flecha */
  padding-inline: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen)));
  /* El velo oscuro ya no va aquí: está en .portada::after, más arriba. Uno de
     izquierda a derecha, que oscurece donde va el texto y deja ver la foto a
     la derecha, y otro de abajo arriba, para que la ola asiente. */
  z-index: 2;
}

/* El antetítulo, en una etiqueta de cristal con un punto teal que late */
.portada__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--portada-borde);
  background: var(--portada-cristal);
  color: var(--portada-acento);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  margin-bottom: 24px;
  font-size: 12px;
}
.portada__chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--portada-acento);
  box-shadow: 0 0 0 0 rgba(127, 208, 222, 0.7);
  animation: bogamar-latido 2.2s ease-out infinite;
}
@keyframes bogamar-latido {
  0%   { box-shadow: 0 0 0 0 rgba(127, 208, 222, 0.7); }
  70%  { box-shadow: 0 0 0 9px rgba(127, 208, 222, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 208, 222, 0); }
}

/* Flecha de "sigue bajando": solo el icono, sin círculo, abajo del todo justo
   encima de la ola. Sube y baja despacio. */
.portada__bajar {
  position: absolute;
  left: 50%;
  bottom: 48px;
  z-index: 3;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--portada-texto);
  animation: bogamar-flotar 2.4s ease-in-out infinite;
  transition: color .2s ease;
}
.portada__bajar svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 6px var(--portada-sombra-icono)); }
.portada__bajar:hover { color: var(--portada-acento); }
@keyframes bogamar-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.portada h1 {
  font-size: 64px;
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-bottom: 22px;
  text-shadow: var(--portada-sombra-texto);
}

/* El alemán encadena palabras muy largas (Rettungsschwimmer, Veranstaltung):
   el titular necesita más caja y algo menos de cuerpo para no comerse la
   portada entera. */
html[lang="de"] .portada h1 { font-size: 52px; max-width: 24ch; }

.portada__entradilla {
  font-size: 21px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--portada-texto-suave);
  max-width: 46ch;
  margin-bottom: 38px;
}
.portada__botones { display: flex; gap: 14px; flex-wrap: wrap; }
/* Botones de la portada con las esquinas del formulario de contacto. El de
   llamar, de cristal: deja ver la foto a través. */
.portada__botones .boton { border-radius: 6px; }
.portada__botones .boton--relleno { box-shadow: 0 12px 28px -10px rgba(6, 136, 160, 0.7); }
.portada__botones .boton--linea {
  background: var(--portada-cristal);
  border-color: var(--portada-borde);
  color: var(--portada-texto);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.portada__botones .boton--linea:hover {
  background: var(--portada-cristal-hover);
  border-color: var(--portada-borde-fuerte);
  color: var(--portada-texto);
}

/* ---------- portada en ventanas bajas ----------
   Tres escalones según el alto de la ventana, para que el contenido quepa
   y la ola y la franja sigan a la vista sin bajar. Solo en escritorio. */
@media (min-width: 941px) and (max-height: 860px) {
  .portada__texto { padding-block: 24px 92px; }
  .portada__chip { margin-bottom: 16px; }
  .portada h1 { font-size: 50px; margin-bottom: 16px; }
  html[lang="de"] .portada h1 { font-size: 42px; }
  .portada__entradilla { font-size: 19px; margin-bottom: 26px; }
  .portada__bajar { bottom: 44px; }
}
@media (min-width: 941px) and (max-height: 720px) {
  .portada__texto { padding-block: 16px 80px; }
  .portada__chip { margin-bottom: 12px; padding-block: 6px; }
  .portada h1 { font-size: 40px; margin-bottom: 12px; }
  html[lang="de"] .portada h1 { font-size: 34px; }
  .portada__entradilla { font-size: 17px; margin-bottom: 20px; }
  .portada__botones .boton--grande { font-size: 15px; padding: 13px 22px; }
  .portada__botones .boton--linea { padding: 12px 22px; }
  .portada__olas { height: 40px; }
  .portada__bajar { bottom: 38px; }
}
@media (min-width: 941px) and (max-height: 620px) {
  .portada__texto { padding-block: 12px 70px; }
  .portada h1 { font-size: 34px; }
  html[lang="de"] .portada h1 { font-size: 29px; }
  .portada__entradilla { font-size: 16px; line-height: 1.4; margin-bottom: 16px; }
  .portada__bajar { bottom: 32px; }
}

/* ---------- franja de argumentos ---------- */

.franja {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  background: var(--teal);
  color: var(--blanco);
}
/* Alto fijo (--alto-franja): la portada cuenta con él para que portada y
   franja quepan justas en la primera pantalla. Si un texto no cabe en una
   línea (el alemán, en ventanas estrechas), va en dos, con la letra un punto
   más pequeña, sin que la franja crezca. */
.franja li {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--alto-franja);
  padding: 0 20px;
  text-align: center;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.01em;
}
@media (min-width: 941px) and (max-width: 1300px) {
  .franja li { font-size: 13.5px; padding: 0 14px; }
}
.franja li + li { border-left: 1px solid rgba(255, 255, 255, 0.22); }
/* Cada argumento lleva un tic delante, en blanco sobre el teal */
.franja li::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--blanco);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.8 12.3l2.8 2.8 5.6-5.8'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.8 12.3l2.8 2.8 5.6-5.8'/%3E%3C/svg%3E") no-repeat center / contain;
}

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

.seccion, .presentacion {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 76px var(--margen);
}
.seccion--fondo { background: var(--fondo); }

/* Estas dos ocupan todo el ancho de la pantalla para que el color llegue de
   borde a borde. El contenido va dentro de una caja del ancho de siempre, y
   el hueco lateral se lo pone esa caja, NO la sección: si lo pusiera la
   sección, se sumaría al centrado y el contenido empezaría más adentro que
   en el resto de secciones. */
.seccion--suave { background: var(--superficie-suave); max-width: none; padding-block: 64px; padding-inline: 0; }
.seccion--clara { background: var(--superficie); max-width: none; padding-inline: 0; }
.seccion--suave > *,
.seccion--clara > * {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion h2, .zona h2 {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.seccion__entradilla {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--tinta-suave);
  max-width: 52ch;
  margin-bottom: 40px;
}

/* Quiénes somos: una tarjeta partida en dos. A la izquierda el logo de la
   marca tal cual, sobre la misma superficie de la tarjeta; una línea fina lo
   separa del texto de la derecha. */
.presentacion { padding-block: 96px; }
.presentacion__tarjeta {
  display: grid;
  grid-template-columns: minmax(260px, 5fr) 8fr;
  border-radius: 16px;
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid color-mix(in srgb, var(--acento) 14%, transparent);
  box-shadow: 0 40px 80px -40px rgba(6, 35, 43, 0.35);
}
.presentacion__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  border-right: 1px solid color-mix(in srgb, var(--acento) 14%, transparent);
}
.presentacion__marca img {
  width: min(100%, 280px);
  height: auto;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.presentacion__tarjeta:hover .presentacion__marca img { transform: scale(1.04); }

.presentacion__contenido {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 56px 60px;
}
.presentacion__contenido .presentacion__titulo {
  font-size: 44px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--tinta);
  margin: 0;
}
/* Rayita teal debajo del título */
.presentacion__titulo::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--teal-claro));
}
.presentacion__texto {
  font-size: 23px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--tinta);
}

.rejilla-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
/* Cada servicio es una tarjeta. Con el ratón encima sube, echa sombra y se
   dibuja una raya teal arriba de izquierda a derecha. */
.servicio {
  position: relative;
  overflow: hidden;
  padding: 42px 30px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--superficie);
  border: 1px solid color-mix(in srgb, var(--acento) 14%, transparent);
  border-radius: 10px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.servicio::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-claro));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.servicio:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(6, 35, 43, 0.40); }
.servicio:hover::before { transform: scaleX(1); }
/* El icono va en un cuadrado de esquinas suaves, teñido de teal. Con el ratón
   encima se llena de teal y el icono pasa a blanco. */
.servicio__icono {
  width: 72px;
  height: 72px;
  padding: 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  color: var(--acento);
  flex: 0 0 auto;
  margin-bottom: 2px;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.servicio:hover .servicio__icono {
  transform: rotate(-6deg);
  background: var(--teal);
  color: var(--blanco);
  box-shadow: 0 10px 24px rgba(6, 136, 160, 0.30);
}
.servicio h3 { font-size: 23px; line-height: 1.25; font-weight: 700; transition: color .2s ease; }
.servicio:hover h3 { color: var(--acento); }
.servicio p, .publico p, .paso p, .nota {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--tinta-suave);
}
.nota { margin-top: 26px; max-width: 70ch; }
.nota a { font-weight: 700; }

.rejilla-publico {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 40px;
}
.publico { border-left: 2px solid var(--acento); padding-left: 16px; }
.publico h3 { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.publico p { font-size: 15px; line-height: 1.55; color: var(--tinta-media); }

/* Los pasos son una línea de tiempo: cada número va en un círculo y una línea
   discontinua los une por detrás (solo en escritorio, donde van en fila). */
.rejilla-pasos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  padding-top: 8px;
}
@media (min-width: 941px) {
  .rejilla-pasos::before {
    content: "";
    position: absolute;
    top: 44px;
    left: calc(100% / 6);
    right: calc(100% / 6);
    height: 2px;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--acento) 45%, transparent) 0 8px, transparent 8px 16px);
  }
}
.paso { padding: 0 16px; display: flex; flex-direction: column; gap: 12px; }
.paso p { font-size: 17px; color: var(--tinta-media); }
/* Cada paso lleva su número grande y tenue encima (01, 02, 03). Lo cuenta el
   CSS solo: si añades un cuarto paso, sale el 04 sin tocar nada. */
.rejilla-pasos { counter-reset: paso; }
.paso { counter-increment: paso; }
.paso::before {
  content: counter(paso, decimal-leading-zero);
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 50%;
  border: 2px solid var(--acento);
  background: var(--superficie);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: var(--acento);
  transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.paso:hover::before {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--blanco);
  transform: scale(1.08);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--teal) 15%, transparent);
}

/* Foto que ocupa el ancho de la sección, recortada en apaisado para que no
   se coma media pantalla: las fotos de móvil vienen en vertical. */
/* margin-bottom a secas: el atajo 'margin' borraría el margin-inline: auto
   que centra la figura dentro de la sección. */
.foto-ancha { margin-bottom: 56px; overflow: hidden; border-radius: 12px; box-shadow: 0 30px 60px -30px rgba(6, 35, 43, 0.45); }
.foto-ancha:hover img { transform: scale(1.04); }
/* Dentro de "Cómo trabajamos" las secciones dan relleno lateral a cada hijo.
   A la foto no: si no, la sombra y las esquinas quedarían en una caja más
   ancha que la imagen. El ancho se lo damos a mano, con el mismo margen. */
.seccion--clara > .foto-ancha {
  padding-inline: 0;
  width: min(calc(var(--ancho) - 2 * var(--margen)), calc(100% - 2 * var(--margen)));
}
.foto-ancha img {
  width: 100%;
  object-fit: cover;
  object-position: center 42%;
  height: 380px;
  transition: transform .8s ease;
}

/* Sección centrada. Ahora la usa "Cómo trabajamos"; si algún día quieres
   centrar otra, le añades seccion--centrada y ya está. */
.seccion--centrada { text-align: center; }
/* La entradilla y la nota tienen ancho máximo, así que hay que centrar
   también la caja, no solo el texto de dentro */
.seccion--centrada .seccion__entradilla,
.seccion--centrada .nota { margin-inline: auto; }
/* El filete de "trabajamos para" está a la izquierda de cada bloque; con el
   texto centrado quedaría descolgado, así que pasa a ser una rayita corta
   encima y centrada. */
/* Cada público es una tarjeta translúcida sobre el fondo teal suave. Con el
   ratón encima se vuelve sólida y sube un poco. */
.seccion--centrada .publico {
  border-left: 0;
  padding: 32px 24px 30px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--superficie) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--superficie) 80%, transparent);
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.seccion--centrada .publico:hover {
  background: var(--superficie);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -22px rgba(6, 35, 43, 0.35);
}
/* Cada público lleva su icono encima, en un cuadrado teñido de teal que se
   llena de teal con el ratón encima (igual que los servicios). */
.publico__icono {
  display: block;
  width: 56px;
  height: 56px;
  padding: 12px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  color: var(--acento);
  transition: background-color .25s ease, color .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.seccion--centrada .publico:hover .publico__icono {
  background: var(--teal);
  color: var(--blanco);
  transform: rotate(-6deg);
}

/* En los pasos y los servicios, el contenido va al centro de su columna */
.seccion--centrada .paso,
.seccion--centrada .servicio { align-items: center; }


/* ---------- zona ---------- */

/* Fondo claro de siempre con un brillo teal muy suave detrás del texto */
.zona {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background:
    radial-gradient(ellipse 55% 70% at 15% 30%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 70%),
    var(--fondo);
}
/* La columna de texto es media pantalla, así que el hueco de la izquierda hay
   que calcularlo sobre el ancho de la ventana para que cuadre con las demás
   secciones. Por debajo de 1280px, max() se queda en el margen normal. */
.zona__texto {
  padding-block: 96px;
  /* El margen grande solo a la izquierda, para alinear con las demás secciones.
     A la derecha basta un respiro normal: si fuera el mismo, en pantallas
     anchas el texto se quedaba en una columna estrechísima. */
  padding-inline-start: max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen)));
  padding-inline-end: clamp(var(--margen), 4vw, 72px);
  align-self: center;
}
/* Etiqueta pequeña encima del título, con una rayita delante */
.zona__etiqueta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.zona__etiqueta::before { content: ""; width: 28px; height: 2px; background: var(--acento); }
.zona h2 { font-size: 44px; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 14px; }

.zona__media { min-height: 380px; }

/* La foto va dentro de una figura. contain: size hace que no empuje la altura
   de la sección: la marca el texto y la foto rellena ese alto recortándose. */
.zona__figura {
  position: relative;
  margin: 0;
  /* Mientras la foto carga se ve un cielo y un mar en degradado, con los
     colores de la propia foto, en lugar de un hueco oscuro */
  background: linear-gradient(to bottom, #8FC3E6 0%, #CFE6F2 22%, #1F6FB8 34%, #0E5FA8 60%, #3AA7C9 100%);
  overflow: hidden;
  max-height: 720px;
  contain: size;
  align-self: stretch;
}
.zona__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 78%;
  transition: transform 1.2s ease;
}
.zona__figura:hover .zona__foto { transform: scale(1.04); }
/* Velo oscuro abajo, para que la tarjeta se lea sobre cualquier foto */
.zona__figura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 35, 43, 0.55), rgba(6, 35, 43, 0) 45%);
  pointer-events: none;
}

/* Tarjeta flotante sobre la foto: "Nuestra base · Jávea". Colores fijos
   (blanco y profundo) porque va encima de una foto, no del fondo de la web. */
.zona__base {
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--profundo);
  box-shadow: 0 18px 40px -12px rgba(6, 35, 43, 0.45);
}
.zona__base-icono {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--teal);
  color: var(--blanco);
  position: relative;
}
.zona__base-icono svg { width: 20px; height: 20px; }
/* Onda que sale del icono cada pocos segundos, como un radar */
.zona__base-icono::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--teal);
  animation: bogamar-pulso 2.6s ease-out infinite;
}
@keyframes bogamar-pulso {
  from { transform: scale(1); opacity: 0.7; }
  to   { transform: scale(1.9); opacity: 0; }
}
.zona__base-etiqueta {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0688A0;
  margin-bottom: 2px;
}
.zona__base strong { font-size: 17px; font-weight: 900; }

/* Municipios: una lista a dos columnas, como un índice. Cada uno lleva su
   número delante (01, 02...) y una línea debajo. La base, el primero, va
   marcado con un fondo teal que se desvanece. Con el ratón encima el nombre
   se desplaza y se tiñe. */
.municipios {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  counter-reset: municipio;
  border-top: 1px solid color-mix(in srgb, var(--acento) 22%, transparent);
}
.municipios li {
  counter-increment: municipio;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 10px;
  font-size: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--acento) 22%, transparent);
  transition: transform .2s ease, color .2s ease, background-color .2s ease;
}
.municipios li::before {
  content: counter(municipio, decimal-leading-zero);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--acento);
  opacity: 0.7;
}
/* Va con el li delante para ganarle a .municipios li por especificidad. */
.municipios li.municipios__principal {
  font-weight: 900;
  color: var(--acento);
  background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 16%, transparent), transparent);
  box-shadow: inset 3px 0 0 var(--teal);
}
.municipios li.municipios__principal::before { opacity: 1; }
.municipios li:hover { transform: translateX(6px); color: var(--acento); }

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

/* Fondo con dos brillos teal muy suaves, uno arriba a la derecha, detrás del
   formulario, y otro abajo a la izquierda. En modo claro el fondo es claro y
   en oscuro es azul profundo: los colores salen de las variables --bloque-*. */
.contacto {
  position: relative;
  background:
    radial-gradient(ellipse 60% 70% at 85% 10%, var(--bloque-brillo), transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, color-mix(in srgb, var(--bloque-brillo) 55%, transparent), transparent 70%),
    var(--bloque-fondo);
  color: var(--bloque-texto);
  padding-block: 96px;
  padding-inline: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen)));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 64px;
  align-items: center;
}
/* Filete teal arriba del todo, que se apaga hacia los lados */
.contacto::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bloque-acento) 55%, transparent), transparent);
}
.contacto h2 { font-size: 44px; line-height: 1.08; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 18px; }
.contacto__entradilla {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--bloque-texto-suave);
  max-width: 38ch;
  margin-bottom: 36px;
}
.contacto__telefono { font-size: 44px; font-weight: 900; letter-spacing: -0.01em; margin: 8px 0 28px; }
.contacto .etiqueta--clara { color: var(--bloque-acento); }
.contacto__telefono a { color: var(--bloque-texto); }
.contacto__telefono a:hover { color: var(--bloque-acento); }
/* Debajo del teléfono se dibuja una raya de izquierda a derecha */
.contacto__telefono a {
  background-image: linear-gradient(var(--bloque-acento), var(--bloque-acento));
  background-size: 0% 3px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .3s ease, color .18s ease;
}
.contacto__telefono a:hover { background-size: 100% 3px; }

/* Email e Instagram: cada uno con su icono en un círculo. Con el ratón
   encima el círculo se llena de teal y la línea se desplaza un poco. */
.canales { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.canal {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 17px;
  font-weight: 400;
  color: var(--bloque-texto-suave);
  transition: color .18s ease, transform .2s ease;
}
.canal__icono {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--bloque-acento) 40%, transparent);
  color: var(--bloque-acento);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.canal__icono svg { width: 19px; height: 19px; }
.canal:hover { color: var(--bloque-texto); transform: translateX(4px); }
.canal:hover .canal__icono { background: var(--teal); border-color: var(--teal); color: var(--blanco); }

/* El formulario es una tarjeta: blanca en claro y de cristal en oscuro, esquinas algo redondeadas,
   sombra profunda y una raya teal arriba. Nombre y teléfono van en dos
   columnas; municipio y mensaje ocupan el ancho entero. */
.formulario {
  position: relative;
  display: grid;
  /* minmax(0, 1fr) y no 1fr: los campos traen un ancho mínimo propio (el del
     navegador, unos 20 caracteres) y con 1fr las columnas no bajaban de ahí,
     así que en ventanas estrechas los campos se salían de la tarjeta. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  background: var(--bloque-tarjeta);
  border: 1px solid var(--bloque-linea);
  border-radius: 8px;
  padding: 36px 32px 28px;
  box-shadow: var(--bloque-sombra);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.formulario::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-claro));
}
.formulario__ancho,
.formulario .boton,
.formulario__estado,
.formulario__aviso { grid-column: 1 / -1; }

.formulario label {
  display: flex;
  flex-direction: column;
  min-width: 0;   /* que la etiqueta pueda encoger con su columna */
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bloque-texto);
  transition: color .18s ease;
}
.formulario label:focus-within { color: var(--bloque-acento); }
.formulario input, .formulario textarea {
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  width: 100%;    /* nunca más ancho que su columna */
  min-width: 0;
  color: var(--bloque-texto);
  background: var(--bloque-campo);
  border: 1px solid var(--bloque-campo-borde);
  border-radius: 6px;
  padding: 14px 16px;
  resize: vertical;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.formulario input::placeholder, .formulario textarea::placeholder { color: var(--bloque-placeholder); }
.formulario input:hover, .formulario textarea:hover { border-color: color-mix(in srgb, var(--bloque-texto) 32%, transparent); }
/* Al entrar en un campo: borde teal claro y un halo suave alrededor */
.formulario input:focus, .formulario textarea:focus {
  outline: none;
  border-color: var(--bloque-acento);
  background: var(--bloque-campo-foco);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bloque-acento) 20%, transparent);
}

/* Avisos propios de los campos (los pone js/formulario.js). Sin rojo: el
   manual de marca lo reserva para la señalización de seguridad. El campo mal
   se marca con un borde más fuerte y el aviso lleva el icono de exclamación. */
.formulario input[aria-invalid="true"] {
  border-color: var(--bloque-texto);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bloque-texto) 12%, transparent);
}
.formulario input[aria-invalid="true"]:focus {
  border-color: var(--bloque-texto);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bloque-texto) 16%, transparent);
}
.campo__aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--bloque-texto);
  animation: bogamar-aviso .25s ease both;
}
.campo__aviso[hidden] { display: none; }
.campo__aviso::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: var(--icono-error) no-repeat center / contain;
}
@keyframes bogamar-aviso { from { opacity: 0; transform: translateY(-4px); } }
.campo--tiembla { animation: bogamar-tiembla .4s ease; }
@keyframes bogamar-tiembla {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

/* Botón a todo el ancho, con una flecha que avanza con el ratón encima.
   La flecha va en CSS y no en el HTML porque js/formulario.js cambia el
   texto del botón al enviar, y se llevaría por delante un icono. */
.formulario .boton {
  margin-top: 4px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.formulario .boton::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .25s ease;
}
.formulario .boton:hover::after { transform: translateX(4px); }
.formulario .boton:disabled::after { display: none; }

.formulario__aviso { font-size: 13px; line-height: 1.5; font-weight: 300; color: var(--bloque-texto-suave); opacity: 0.8; text-align: center; }
.formulario__aviso a { color: var(--bloque-acento); text-decoration: underline; text-underline-offset: 2px; }
.formulario__aviso a:hover { color: var(--bloque-texto); }

/* Campo trampa para bots: fuera de la pantalla, no display:none, porque
   algunos bots se saltan lo que está con display none. */
.formulario__trampa { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Mensaje de "enviando", "recibido" o "no se ha podido". Sin rojo ni verde,
   que el manual de marca los reserva para señalización: se distingue por el
   icono y por el texto. */
.formulario__estado {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--bloque-acento);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bloque-acento) 12%, transparent);
  color: var(--bloque-texto);
  font-size: 15px;
  line-height: 1.5;
  animation: bogamar-estado .3s ease both;
}
.formulario__estado[hidden] { display: none; }
.formulario__estado::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: no-repeat center / 20px;
}
/* Enviando: un aro que gira. Recibido: un tic. Error: una exclamación.
   Los iconos van dibujados en SVG en las variables --icono-ok y --icono-error,
   una versión para cada modo. */
.formulario__estado[data-tipo="enviando"]::before {
  border: 2px solid color-mix(in srgb, var(--bloque-acento) 35%, transparent);
  border-top-color: var(--bloque-acento);
  animation: bogamar-girar .8s linear infinite;
}
.formulario__estado[data-tipo="ok"]::before { background-image: var(--icono-ok); }
.formulario__estado[data-tipo="error"] { border-left-color: var(--bloque-texto-suave); background: color-mix(in srgb, var(--bloque-texto) 7%, transparent); }
.formulario__estado[data-tipo="error"]::before { background-image: var(--icono-error); }
.formulario .boton:disabled::after { display: none; }

.formulario__aviso { font-size: 13px; line-height: 1.5; font-weight: 300; color: var(--bloque-texto-suave); opacity: 0.8; text-align: center; }
.formulario__aviso a { color: var(--bloque-acento); text-decoration: underline; text-underline-offset: 2px; }
.formulario__aviso a:hover { color: var(--bloque-texto); }

/* Campo trampa para bots: fuera de la pantalla, no display:none, porque
   algunos bots se saltan lo que está con display none. */
.formulario__trampa { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Mensaje de "enviando", "recibido" o "no se ha podido". Sin rojo ni verde,
   que el manual de marca los reserva para señalización: se distingue por el
   icono y por el texto. */
.formulario__estado {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--bloque-acento);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bloque-acento) 12%, transparent);
  color: var(--bloque-texto);
  font-size: 15px;
  line-height: 1.5;
  animation: bogamar-estado .3s ease both;
}
.formulario__estado[hidden] { display: none; }
.formulario__estado::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: no-repeat center / 20px;
}
/* Enviando: un aro que gira. Recibido: un tic. Error: una exclamación.
   Los iconos van dibujados en SVG en las variables --icono-ok y --icono-error,
   una versión para cada modo. */
.formulario__estado[data-tipo="enviando"]::before {
  border: 2px solid color-mix(in srgb, var(--bloque-acento) 35%, transparent);
  border-top-color: var(--bloque-acento);
  animation: bogamar-girar .8s linear infinite;
}
.formulario__estado[data-tipo="ok"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%237FD0DE'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%2306232B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.formulario__estado[data-tipo="error"] { border-left-color: var(--espuma); background: rgba(220, 237, 241, 0.08); }
.formulario__estado[data-tipo="error"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23DCEDF1'/%3E%3Cpath d='M12 7v6.5M12 16.6v.6' fill='none' stroke='%2306232B' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.formulario .boton:disabled { opacity: 0.7; cursor: progress; transform: none; box-shadow: none; }
/* Recibido: el formulario se apaga un poco para que el mensaje mande */
.formulario[data-estado="ok"] label:not(.formulario__trampa),
.formulario[data-estado="ok"] .boton { opacity: 0.55; }
.formulario[data-estado="ok"] label:not(.formulario__trampa):focus-within { opacity: 1; }

@keyframes bogamar-estado { from { opacity: 0; transform: translateY(6px); } }
@keyframes bogamar-girar { to { transform: rotate(360deg); } }

/* ---------- línea de progreso y botón de subir ---------- */

/* Una raya teal de 3px pegada arriba del todo que crece de izquierda a
   derecha según se baja. js/efectos.js le pone el scaleX. */
.progreso {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 200;
  pointer-events: none;
  will-change: transform;
}
/* Donde el navegador lo sabe hacer, la línea la mueve el propio scroll, sin
   JavaScript: va pegada al dedo, sin retraso. js/efectos.js lo detecta y en
   ese caso no la toca. */
@supports (animation-timeline: scroll()) {
  .progreso {
    animation: bogamar-progreso linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes bogamar-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Botón redondo abajo a la derecha. Empieza escondido y js/efectos.js lo saca
   cuando se ha bajado casi una pantalla. El [hidden] hace falta porque el
   display de abajo le ganaría al atributo. */
.arriba {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--teal);
  color: var(--blanco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(6, 35, 43, 0.25);
  z-index: 90;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .24s ease, transform .24s ease, background-color .18s ease;
}
.arriba[hidden] { display: none; }
.arriba svg { width: 22px; height: 22px; }
.arriba[data-visible="true"] { opacity: 1; transform: none; }
.arriba:hover { background: var(--teal-hover); transform: translateY(-3px); }

/* ---------- páginas de texto (aviso legal, privacidad, 404) ---------- */

.pagina {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px var(--margen) 88px;
}
.pagina h1 {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.015em;
  margin-bottom: 26px;
}
.pagina h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 38px 0 10px;
}
.pagina p, .pagina li {
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--tinta-media);
}
.pagina p + p { margin-top: 12px; }
.pagina ul { margin: 12px 0 0; padding-left: 20px; }
.pagina li { margin-bottom: 6px; }
.pagina strong { font-weight: 700; color: var(--tinta); }
.pagina__nota {
  border-left: 2px solid var(--acento);
  padding-left: 14px;
  margin-bottom: 26px;
}
.pagina__volver { margin-top: 44px; font-weight: 700; }

/* ---------- página de error ---------- */

.error {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px var(--margen) 110px;
  text-align: center;
}
.error__numero {
  font-size: clamp(96px, 17vw, 190px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--acento);
}
.error h1 {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.015em;
  margin-top: 30px;
}
.error__texto {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--tinta-suave);
  margin: 14px auto 34px;
  max-width: 46ch;
}

/* Las dos olas van a distinta velocidad: así el movimiento no se ve
   mecánico, como cuando miras el agua de verdad. */
.error__olas {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 6px;
  overflow: hidden;
  fill: none;
  stroke: var(--acento);
  stroke-width: 2;
  stroke-linecap: round;
}
.error__ola { animation: bogamar-oleaje 7s linear infinite; }
.error__ola--dos { opacity: 0.45; animation-duration: 11s; animation-direction: reverse; }

@keyframes bogamar-oleaje {
  from { transform: translateX(0); }
  to   { transform: translateX(-60px); }   /* un ciclo entero de la onda */
}

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

.pie {
  position: relative;
  background: var(--pie-fondo);
  color: var(--pie-texto);
  padding-block: 44px;
  padding-inline: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 300;
}
/* Filete teal arriba, igual que el del bloque de contacto */
.pie::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acento) 40%, transparent), transparent);
}
.pie img { height: 38px; width: auto; opacity: 0.9; transition: opacity .2s ease; }
.pie img:hover { opacity: 1; }
.pie__enlaces { display: flex; gap: 22px; }
/* Los enlaces legales se subrayan de izquierda a derecha */
.pie a {
  color: var(--pie-texto);
  background-image: linear-gradient(var(--acento), var(--acento));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: color .18s ease, background-size .25s ease;
}
.pie a:hover { color: var(--acento); background-size: 100% 1px; }

/* ---------- cabecera en pantallas medianas ----------
   Con "Quiénes somos" el menú de escritorio necesita, medido con los textos
   actuales, 1016px en español, 930px en inglés y 1033px en alemán. Entre el
   corte de móvil (940px) y 1100px no cabría, así que ahí la cabecera se
   compacta: logo algo más bajo, menos hueco entre enlaces y letra un punto
   menor. Por encima de 1100px todo va a su tamaño normal. */
@media (min-width: 941px) and (max-width: 1100px) {
  :root { --alto-cabecera: 122px; } /* franja de arriba + fila compacta, medida */
  /* La columna del formulario se queda estrecha: nombre y teléfono, que en
     pantallas grandes van lado a lado, pasan a una sola columna. */
  .formulario { grid-template-columns: minmax(0, 1fr); }
  .cabecera__fila { gap: 22px; }
  .cabecera__logo img { height: 40px; }
  .nav { gap: 20px; font-size: 14px; }
  .boton--menu { padding: 8px 14px 8px 11px; gap: 7px; }
  .boton--menu__logo { width: 22px; }
}

/* ---------- móvil ----------
   El corte está en 940px y no en un número redondo por casualidad: es el ancho
   a partir del cual el menú de escritorio deja de caber al lado del logo.
   Medido con los textos actuales, la cabecera necesita 856px en español,
   811px en inglés y 914px en alemán, que es el que manda. Antes el corte
   estaba en 860px y en alemán el menú se caía a una segunda línea.

   Si alargas los textos del menú o añades un idioma con palabras más largas,
   este número hay que subirlo. */
@media (max-width: 940px) {
  :root { --margen: 20px; --alto-cabecera: 103px; } /* cabecera de móvil con la franja de contacto (38px), medida */

  .cabecera { padding: 0; }
  /* En móvil la fila va en tres: hamburguesa a la izquierda, logo centrado y
     botón de claro/oscuro a la derecha. Los dos botones ocupan el mismo ancho
     fijo, que es lo que deja el logo centrado de verdad y no aproximado. */
  .cabecera__fila {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px var(--margen);
  }
  /* En móvil la franja de arriba se queda solo con el contacto: teléfono a
     la izquierda y correo a la derecha, cada uno con su icono. Los idiomas y
     el botón de claro/oscuro no van aquí: están en el menú y en la cabecera. */
  .utilidad { padding: 8px var(--margen); font-size: 13px; }
  .utilidad__acciones { display: none; }
  .utilidad__datos { width: 100%; justify-content: space-between; gap: 12px; }
  .utilidad__datos a { display: inline-flex; align-items: center; gap: 7px; padding: 3px 0; }
  .utilidad__datos a::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    background: var(--acento);
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
  }
  .utilidad__datos a.utilidad__tel::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.28-.28.68-.36 1.02-.25 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.34.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.28-.28.68-.36 1.02-.25 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.34.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E"); }
  .utilidad__datos a:not(.utilidad__tel)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E"); }
  .cabecera__logo { flex: 1 1 auto; display: flex; justify-content: center; margin: 0; }
  .menu-movil__idiomas {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 16px 0 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--gris);
  }
  /* Zona pulsable decente sin descuadrar el ES, que es un <span> */
  .menu-movil__idiomas a,
  .menu-movil__idiomas .idiomas__activo { padding: 6px 0; }
  .menu-movil__idiomas a { color: var(--gris); }
  .menu-movil__idiomas .idiomas__activo { color: var(--teal); }
  .menu-movil__idiomas a:hover { color: var(--teal); }
  .cabecera__logo img { height: 34px; }
  .nav { display: none; }
  .hamburguesa { display: flex; flex: 0 0 40px; align-items: center; padding: 10px 0; }
  .tema--cabecera { display: inline-flex; flex: 0 0 40px; justify-content: flex-end; padding: 6px 0; }
  .tema--cabecera svg { width: 21px; height: 21px; }
  .menu-movil[data-abierto="true"],
  .menu-movil[data-cerrando="true"] { display: flex; }

  /* La portada llena todo el alto del móvil por debajo de la cabecera.
     Se usa lvh, el alto con las barras del navegador ESCONDIDAS: es la
     pantalla entera, así que cuando Safari recoge sus barras al hacer
     scroll (o las pinta flotando sobre la página, como en iOS 26) no asoma
     la sección siguiente por abajo. La línea de vh es para navegadores
     antiguos. Si el contenido es más alto (alemán, móviles pequeños), la
     portada crece. */
  .portada {
    min-height: calc(100vh - var(--alto-cabecera));
    min-height: calc(100lvh - var(--alto-cabecera));
  }
  .portada__texto {
    /* Abajo ya no hay que dejar sitio para la ola ni para la flecha */
    /* El contenido va hacia abajo, cerca de la flecha, y la foto luce arriba.
       Abajo deja sitio para la flecha y, con las barras de Safari visibles,
       para lo que tapan (100lvh - 100svh). */
    justify-content: flex-end;
    padding-block: 36px 92px;
  }
  /* En vertical el velo lateral no sirve: el texto ocupa todo el ancho */
  .portada::after {
    background: linear-gradient(to top, rgba(var(--portada-velo), 0.95) 40%, rgba(var(--portada-velo), 0.6) 75%, rgba(var(--portada-velo), 0.3) 100%);
  }
  /* La flecha de bajar, abajo y centrada, pero con aire: en iPhone la barra
     del navegador flota sobre el borde inferior y la cortaba. Se suma además
     la zona segura de la pantalla (la raya de inicio de los iPhone). */
  .portada__bajar { bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }
  /* Con las barras del navegador visibles, la pantalla útil es más baja que
     la portada: la diferencia (100lvh - 100svh) es lo que tapan las barras.
     Se suma para que la flecha quede siempre por encima de ellas. */
  @supports (height: 100lvh) {
    .portada__bajar { bottom: calc(36px + env(safe-area-inset-bottom, 0px) + (100lvh - 100svh)); }
    .portada__texto { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px) + (100lvh - 100svh)); }
  }
  .portada__bajar svg { width: 28px; height: 28px; }
  .portada h1 { font-size: 36px; }
  html[lang="de"] .portada h1 { font-size: 30px; max-width: none; }
  .portada__entradilla { font-size: 18px; }
  /* En móvil los botones van a su ancho, no a todo el de la pantalla, y algo
     más compactos. Si no caben en una línea, el segundo baja debajo. */
  .portada__botones { gap: 10px; }
  .portada__botones .boton { flex: 0 0 auto; font-size: 15px; padding: 13px 18px; gap: 10px; }
  .portada__botones .boton--linea { padding: 12px 18px; }
  .portada__botones .boton__ola { width: 24px; }
  .portada__botones .boton__icono { width: 17px; height: 17px; }

  .seccion h2, .zona h2, .contacto h2 { font-size: 28px; }
  .presentacion { padding-block: 48px; }
  .presentacion__tarjeta { grid-template-columns: 1fr; border-radius: 12px; }
  .presentacion__marca { padding: 36px 24px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--acento) 14%, transparent); }
  .presentacion__marca img { width: 200px; }
  .presentacion__contenido { padding: 32px 24px 36px; gap: 16px; }
  .presentacion__texto { font-size: 19px; }
  .presentacion__contenido .presentacion__titulo { font-size: 30px; }
  .servicio { padding: 34px 22px 30px; }
  .municipios { grid-template-columns: 1fr; }
  .seccion, .zona__texto, .contacto { padding-block: 56px; }

  .foto-ancha { margin-bottom: 40px; }
  .foto-ancha img { height: 230px; }

  .rejilla-pasos { gap: 40px; }
  .paso { padding: 0; }

  .contacto__telefono { font-size: 34px; }
  .contacto { gap: 44px; }
  .zona h2 { font-size: 28px; }
  .zona__figura { contain: none; min-height: 320px; }
  .zona__base { left: 16px; bottom: 16px; padding: 10px 18px 10px 10px; }
  .zona__base-icono { width: 36px; height: 36px; }
  .formulario { grid-template-columns: 1fr; padding: 28px 20px 22px; }
  /* En móvil no hay ola: la portada acaba en recto y justo debajo, fuera de
     la foto, van los tres argumentos en una lista con tics sobre azul
     profundo. En escritorio siguen en la franja teal. */
  .portada__olas { display: none; }
  .franja {
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 8px var(--margen);
    background: var(--bloque-fondo);
    color: var(--bloque-texto);
    border-bottom: 1px solid var(--bloque-linea);
  }
  .franja li {
    flex: 0 0 auto;
    height: auto;
    line-height: 1.35;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 0;
    text-align: left;
    font-size: 15px;
  }
  .franja li + li { border-left: 0; border-top: 1px solid var(--bloque-linea); }
  .franja li::before { background: var(--bloque-acento); }
  .paso::before { width: 60px; height: 60px; font-size: 19px; }
  .arriba { right: 16px; bottom: 16px; width: 42px; height: 42px; }
  .pagina { padding-block: 48px 64px; }
  .pagina h1 { font-size: 28px; }
  .error { padding-block: 56px 72px; }
  .error h1 { font-size: 24px; }
  .error__texto { font-size: 16px; }
  .error__olas { height: 32px; }
  /* En móvil el pie va en columna y centrado: logo, la línea de
     "socorrismo y actividades acuáticas" aparte, y debajo los enlaces. */
  .pie {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 18px;
  }
}

/* ---------- movimiento ----------
   Varias cosas independientes entre sí. Si alguna no convence, se borra su
   bloque y las demás siguen funcionando:
     1. Scroll suave entre secciones (enlaces del menú)
     2. Fundido al cambiar de página (idiomas, aviso legal, privacidad)
     3. Despliegue del menú móvil
     4. Aparición de cada sección al llegar a ella, con sus piezas entrando
        una detrás de otra
     5. Cambio de modo claro / oscuro
     6. Entrada de la portada al cargar
   Todo se desactiva solo si el sistema pide menos movimiento. */

/* 1. Scroll suave */
html { scroll-behavior: smooth; }
/* Aire por encima del título al aterrizar en una sección, contando con que
   la cabecera está pegada arriba */
[id] { scroll-margin-top: calc(var(--alto-cabecera) + 14px); }

/* 2. Cambio de página.
   Chrome, Edge y Safari lo aplican; en Firefox la navegación es la de
   siempre, sin fundido. Necesita servidor (Live Server), con file:// no
   se activa. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: bogamar-salir .2s ease both; }
::view-transition-new(root) { animation: bogamar-entrar .32s ease both; }

@keyframes bogamar-salir  { to   { opacity: 0; } }
@keyframes bogamar-entrar { from { opacity: 0; transform: translateY(10px); } }

/* 3. Menú móvil: se despliega al abrir y se recoge al cerrar.
   El panel entero entra y sale, y los enlaces van apareciendo escalonados,
   uno detrás de otro. Quien cronometra el cierre es js/menu.js: espera a que
   termine la animación antes de esconder el menú del todo. */
.menu-movil[data-abierto="true"] { animation: bogamar-menu-entra .24s ease both; }
.menu-movil[data-cerrando="true"] { animation: bogamar-menu-sale .18s ease both; }

@keyframes bogamar-menu-entra { from { opacity: 0; transform: translateY(-10px); } }
@keyframes bogamar-menu-sale  { to   { opacity: 0; transform: translateY(-10px); } }

.menu-movil[data-abierto="true"] > * { animation: bogamar-menu-linea .3s ease both; }
.menu-movil[data-abierto="true"] > *:nth-child(1) { animation-delay: .05s; }
.menu-movil[data-abierto="true"] > *:nth-child(2) { animation-delay: .09s; }
.menu-movil[data-abierto="true"] > *:nth-child(3) { animation-delay: .13s; }
.menu-movil[data-abierto="true"] > *:nth-child(4) { animation-delay: .17s; }
.menu-movil[data-abierto="true"] > *:nth-child(5) { animation-delay: .21s; }

@keyframes bogamar-menu-linea { from { opacity: 0; transform: translateY(-6px); } }

/* 4. Entrada de cada componente al llegar a él.
   js/transiciones.js elige qué entra y cómo, y pone las clases .entra y
   .entra--<efecto>; nunca el HTML, así que si el JavaScript falla la página se
   ve entera. Cuando el componente ya ha entrado, el script le quita las clases
   y vuelve a mandar su propio estilo (los hover, por ejemplo).
   Efectos:
     sube       aparece subiendo
     izquierda  entra desde la izquierda
     derecha    entra desde la derecha
     zoom       crece un poco mientras aparece
     pop        crece desde pequeño con un rebote
     destapa    se descubre de izquierda a derecha, como una cortina
   El retraso de cada uno (--retraso) lo calcula el script para que las piezas
   de un mismo grupo entren una detrás de otra. */
/* La transición solo va en el estado visible: al esconder las piezas al
   cargar, desaparecen de golpe (no se ven, están más abajo) y al llegar a
   ellas entran animadas. */
.entra.entra--visible {
  transition:
    opacity .75s cubic-bezier(.2, .7, .2, 1),
    transform .75s cubic-bezier(.2, .7, .2, 1),
    clip-path 1s cubic-bezier(.7, 0, .2, 1) !important;
  transition-delay: var(--retraso, 0s) !important;
}
.entra--pop.entra--visible { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1) !important; }
.entra:not(.entra--visible) { transition: none !important; }
.entra:not(.entra--visible) { opacity: 0; }
.entra--sube:not(.entra--visible)      { transform: translateY(36px); }
.entra--izquierda:not(.entra--visible) { transform: translateX(-48px); }
.entra--derecha:not(.entra--visible)   { transform: translateX(48px); }
.entra--zoom:not(.entra--visible)      { transform: scale(.9); }
.entra--pop:not(.entra--visible)       { transform: scale(.5); }
/* Destapar recorta lo de DENTRO y no la caja: si la caja estuviera recortada
   del todo, el navegador no detectaría nunca que ha llegado a la pantalla. */
.entra--destapa:not(.entra--visible)   { opacity: 1; }
.entra--destapa:not(.entra--visible) > * { clip-path: inset(0 100% 0 0); }
/* El velo oscuro de la foto de zona es un ::after, que no se recorta con lo
   de dentro: se esconde hasta que la foto está destapada */
.entra--destapa:not(.entra--visible)::after { opacity: 0; }
.entra--destapa.entra--visible::after { transition: opacity .6s ease .5s; }
.entra--destapa.entra--visible > * {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s cubic-bezier(.7, 0, .2, 1), transform .8s ease;
  transition-delay: var(--retraso, 0s);
}
.entra--visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* Lo que entra de lado no puede abrir una barra de scroll horizontal mientras
   está fuera de su sitio. 'clip' no crea contenedor de scroll, así que no
   estropea nada más. */
main, .pie { overflow-x: clip; }

/* 5. Cambio de modo claro / oscuro.
   Los colores no saltan de golpe: se funden. La transición solo existe
   mientras dura el cambio, porque js/tema.js pone la clase .cambiando-tema en
   <html> y la quita al terminar. Si estuviera siempre puesta, cualquier hover
   arrastraría media página consigo y la web iría más pesada.

   Va con !important porque tiene que ganarle a las transiciones propias de
   cada pieza (botones, enlaces, cabecera) durante esa fracción de segundo. */
html.cambiando-tema,
html.cambiando-tema *,
html.cambiando-tema *::before,
html.cambiando-tema *::after {
  transition: background-color .32s ease, color .32s ease, border-color .32s ease,
              fill .32s ease, filter .32s ease !important;
}

/* El icono del botón entra girando, para que se note qué has pulsado */
html.cambiando-tema .tema__luna,
html.cambiando-tema .tema__sol { animation: bogamar-icono-tema .38s ease both; }
@keyframes bogamar-icono-tema { from { opacity: 0; transform: rotate(-50deg) scale(.6); } }

/* 6. Entrada de la portada.
   El antetítulo, el titular, la entradilla y los botones suben uno detrás de
   otro nada más cargar. */
.portada__texto > * { animation: bogamar-sube .8s cubic-bezier(.22, .8, .3, 1) both; }
.portada__texto > :nth-child(1) { animation-delay: .10s; }
.portada__texto > :nth-child(2) { animation-delay: .22s; }
.portada__texto > :nth-child(3) { animation-delay: .34s; }
.portada__texto > :nth-child(4) { animation-delay: .46s; }
@keyframes bogamar-sube { from { opacity: 0; transform: translateY(22px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.cambiando-tema,
  html.cambiando-tema *,
  html.cambiando-tema *::before,
  html.cambiando-tema *::after { transition: none !important; }
  html.cambiando-tema .tema__luna,
  html.cambiando-tema .tema__sol { animation: none; }
  .entra, .entra--visible, .entra--destapa > * { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .portada__ola, .portada__foto, .portada__texto > *, .portada__chip::before, .portada__bajar { animation: none; }
  .formulario__estado, .formulario__estado[data-tipo="enviando"]::before { animation: none; }
  .campo__aviso, .campo--tiembla { animation: none; }
  .boton:hover, .arriba:hover, .municipios li:hover, .servicio:hover .servicio__icono,
  .boton--icono:hover .boton__ola, .boton--icono:hover .boton__icono,
  .cabecera__logo:hover img, .foto-ancha:hover img, .paso:hover::before,
  .presentacion__tarjeta:hover .presentacion__marca img { transform: none; }
  .servicio:hover, .seccion--centrada .publico:hover,
  .seccion--centrada .publico:hover .publico__icono { transform: none; }
  .servicio, .servicio::before, .seccion--centrada .publico, .pie a { transition: none; }
  .arriba, .servicio__icono, .foto-ancha img, .municipios li, .nav a:not(.boton)::after,
  .contacto__telefono a, .cabecera, .canal, .formulario .boton::after { transition: none; }
  .zona__base-icono::after { animation: none; display: none; }
  .zona__foto { transition: none; }
  .zona__figura:hover .zona__foto { transform: none; }
  .canal:hover, .formulario .boton:hover::after { transform: none; }
  .boton--menu::after { display: none; }
  .boton--menu:hover .boton--menu__logo { transform: none; }
}

/* ---------- modo oscuro ----------
   Tres estados, y este es el orden en que mandan:
     1. Sin elegir nada: manda el ajuste del sistema del visitante.
     2. Si pulsa el botón de la cabecera, manda su elección y se guarda en el
        navegador (js/tema.js pone data-tema en la etiqueta <html>).
     3. Sin JavaScript sigue funcionando el punto 1.

   Solo se redefinen los colores por función; los de marca (teal, espuma,
   profundo) no se tocan, y por eso el logo, los botones y las franjas siguen
   siendo los mismos. La portada es oscura en los dos modos. La franja de
   arriba de la cabecera, el bloque de contacto y el pie van en tonos claros en
   modo claro y en azul profundo en oscuro: sus colores son las variables
   --utilidad-*, --bloque-*, --icono-* y --pie-* de las listas de abajo.

   OJO: la lista de colores está dos veces a propósito, una para el sistema y
   otra para la elección manual. Si tocas una, toca la otra. */

/* 1. Lo que pide el sistema, salvo que el visitante haya elegido claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --acento: #5FC3D6;      /* el teal sube de tono: sobre fondo oscuro el de
                               marca se apaga y no se lee bien */
    --teal-hover: #7FD0DE;  /* aquí el hover aclara, en vez de oscurecer */
    --fondo: #041A20;
    --superficie: #0A2A33;
    --superficie-suave: #0D323C;
    --tinta: #DCEDF1;
    --tinta-media: #B7CBD1;
    --tinta-suave: #A3BAC1;
    --borde: #173A44;
    --borde-suave: #163A45;
    --hueco-a: #0C303A;
    --hueco-b: #0A2A33;
    --pendiente-borde: #3A555D;
    --gris: #8397A0;

    --utilidad-fondo: #06232B;
    --utilidad-texto: #DCEDF1;
    --utilidad-suave: #7A8F95;
    --bloque-fondo: #06232B;
    --bloque-brillo: rgba(6, 136, 160, 0.30);
    --bloque-texto: #FFFFFF;
    --bloque-texto-suave: #DCEDF1;
    --bloque-acento: #7FD0DE;
    --bloque-linea: rgba(220, 237, 241, 0.14);
    --bloque-tarjeta: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    --bloque-sombra: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
    --bloque-campo: rgba(4, 25, 31, 0.55);
    --bloque-campo-foco: rgba(4, 25, 31, 0.8);
    --bloque-campo-borde: rgba(220, 237, 241, 0.16);
    --bloque-placeholder: #7E959C;
    --icono-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%237FD0DE'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%2306232B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icono-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23DCEDF1'/%3E%3Cpath d='M12 7v6.5M12 16.6v.6' fill='none' stroke='%2306232B' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    --pie-fondo: #04191F;
    --pie-texto: #7A8F95;
    --portada-velo: 6, 35, 43;
    --portada-texto: #FFFFFF;
    --portada-texto-suave: #DCEDF1;
    --portada-acento: #7FD0DE;
    --portada-borde: rgba(220, 237, 241, 0.5);
    --portada-borde-fuerte: #DCEDF1;
    --portada-cristal: rgba(255, 255, 255, 0.06);
    --portada-cristal-hover: rgba(255, 255, 255, 0.14);
    --portada-sombra-texto: 0 2px 24px rgba(6, 35, 43, 0.35);
    --portada-sombra-icono: rgba(6, 35, 43, 0.5);
  }

  :root:not([data-tema="claro"]) .cabecera__logo img,
  :root:not([data-tema="claro"]) .pie img,
  :root:not([data-tema="claro"]) .presentacion__marca img { filter: brightness(0) invert(1); }
  :root:not([data-tema="claro"]) .tema__luna { display: none; }
  :root:not([data-tema="claro"]) .tema__sol { display: block; }
}

/* 2. Lo que ha elegido el visitante con el botón */
:root[data-tema="oscuro"] {
    --acento: #5FC3D6;      /* el teal sube de tono: sobre fondo oscuro el de
                               marca se apaga y no se lee bien */
    --teal-hover: #7FD0DE;  /* aquí el hover aclara, en vez de oscurecer */
    --fondo: #041A20;
    --superficie: #0A2A33;
    --superficie-suave: #0D323C;
    --tinta: #DCEDF1;
    --tinta-media: #B7CBD1;
    --tinta-suave: #A3BAC1;
    --borde: #173A44;
    --borde-suave: #163A45;
    --hueco-a: #0C303A;
    --hueco-b: #0A2A33;
    --pendiente-borde: #3A555D;
    --gris: #8397A0;

    --utilidad-fondo: #06232B;
    --utilidad-texto: #DCEDF1;
    --utilidad-suave: #7A8F95;
    --bloque-fondo: #06232B;
    --bloque-brillo: rgba(6, 136, 160, 0.30);
    --bloque-texto: #FFFFFF;
    --bloque-texto-suave: #DCEDF1;
    --bloque-acento: #7FD0DE;
    --bloque-linea: rgba(220, 237, 241, 0.14);
    --bloque-tarjeta: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    --bloque-sombra: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
    --bloque-campo: rgba(4, 25, 31, 0.55);
    --bloque-campo-foco: rgba(4, 25, 31, 0.8);
    --bloque-campo-borde: rgba(220, 237, 241, 0.16);
    --bloque-placeholder: #7E959C;
    --icono-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%237FD0DE'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%2306232B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icono-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23DCEDF1'/%3E%3Cpath d='M12 7v6.5M12 16.6v.6' fill='none' stroke='%2306232B' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    --pie-fondo: #04191F;
    --pie-texto: #7A8F95;
    --portada-velo: 6, 35, 43;
    --portada-texto: #FFFFFF;
    --portada-texto-suave: #DCEDF1;
    --portada-acento: #7FD0DE;
    --portada-borde: rgba(220, 237, 241, 0.5);
    --portada-borde-fuerte: #DCEDF1;
    --portada-cristal: rgba(255, 255, 255, 0.06);
    --portada-cristal-hover: rgba(255, 255, 255, 0.14);
    --portada-sombra-texto: 0 2px 24px rgba(6, 35, 43, 0.35);
    --portada-sombra-icono: rgba(6, 35, 43, 0.5);
}

/* El logo de la cabecera es teal sobre blanco. En oscuro se pasa a blanco:
   es la misma marca, y así se lee. */
html[data-tema="oscuro"] .cabecera__logo img,
html[data-tema="oscuro"] .pie img,
html[data-tema="oscuro"] .presentacion__marca img { filter: brightness(0) invert(1); }

/* El botón del tema pasa a enseñar el sol */
html[data-tema="oscuro"] .tema__luna { display: none; }
html[data-tema="oscuro"] .tema__sol { display: block; }