/* Páginas públicas e indexables (/spots, /especies), 2026-10-08.
   Se carga DESPUÉS de costaviva.css y solo usa sus tokens (Amanecer):
   degradado en la cabecera y en la llamada a la acción; datos sobrios,
   tinta oscura sobre claro. Móvil primero, sin JavaScript. */

body.publica { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--f-texto); line-height: 1.55; font-size: 16px; }
.publica a { color: var(--acento); }
.cabecera-publica {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--mar); padding: 10px 16px 14px; position: relative;
}
.cabecera-publica::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--degradado); }
.cabecera-publica .enlace-marca { align-items: center; gap: 8px; text-decoration: none; }
.cabecera-publica .logotipo { font-size: 20px; letter-spacing: -0.3px; }
.nav-publica { display: flex; gap: 6px; }
.nav-publica a {
  color: var(--blanco); text-decoration: none; font-weight: 800; font-size: 14px;
  background: var(--mar-2); border-radius: 999px; padding: 7px 12px;
}
.nav-publica a:hover, .nav-publica a:focus-visible { background: var(--mar-3); }

.contenido { max-width: 760px; margin: 0 auto; padding: 8px 16px 40px; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 12px 0 0; font-size: 13px; color: var(--tinta-2); }
.migas li + li::before { content: "›"; margin-right: 4px; color: var(--tinta-2); }
.migas a { color: var(--tinta-2); }
.publica h1 { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(24px, 6.5vw, 34px); line-height: 1.15; margin: 14px 0 8px; letter-spacing: -0.5px; }
.publica h2 { font-family: var(--f-titulo); font-weight: 700; font-size: 19px; margin: 28px 0 10px; line-height: 1.25; }
.publica h2 small { font-family: var(--f-texto); font-weight: 600; font-size: 13px; color: var(--tinta-2); }
.publica h3 { font-size: 15px; margin: 14px 0 6px; }
.intro { font-size: 15.5px; color: var(--tinta-3); margin: 0 0 12px; }
.cientifico { margin: -2px 0 10px; color: var(--tinta-2); }
.nota { color: var(--tinta-2); font-size: 13px; }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; padding: 4px 16px 12px; margin: 16px 0;
}
.tarjeta.aviso { background: var(--aviso-fondo); border-color: var(--aviso-borde); color: var(--aviso-texto); }
.tarjeta h2 { margin-top: 14px; }

/* Condiciones de hoy */
.hoy { background: var(--mar); border: 0; color: var(--blanco); }
.hoy h2 { color: var(--blanco); }
.hoy h2 small { color: var(--gris-mar); }
.hoy a { color: var(--sol); }
.hoy .nota { color: var(--gris-mar); }
.indice-nota { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.indice .nota-nivel { font-size: 26px; padding: 4px 14px; }
.indice-etq { font-weight: 700; }
.motivos { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-size: 14.5px; }
.motivos li { display: grid; grid-template-columns: 2.2em 1fr; }
.motivos .flecha { font-weight: 800; }
.motivos .sube .flecha { color: var(--nivel-bueno); }
.motivos .baja .flecha { color: var(--nivel-malo); }
.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 6px; }
.dato { background: var(--mar-2); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.dato-etq { font-size: 12px; color: var(--gris-mar); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.dato-val { font-family: var(--f-titulo); font-weight: 700; font-size: 17px; }
.dato-det { font-size: 12.5px; color: var(--gris-mar); }

/* Especies por modalidad */
.modalidades { display: grid; gap: 4px; }
.modalidad h3 { margin-bottom: 4px; }
.especies { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.especies li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--superficie); border: 1px solid var(--linea); }
.especies li.temporada { border-color: var(--acento); box-shadow: inset 4px 0 0 var(--acento); }
.especies a { font-weight: 700; color: var(--tinta); text-decoration: none; }
.especies .meses { font-size: 13px; color: var(--tinta-2); white-space: nowrap; }

.chips, .lista-spots, .lista-especies { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li, .lista-spots li a, .lista-especies li { font-size: 14px; }
.chips li a, .lista-spots li a {
  display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--linea);
  color: var(--tinta); text-decoration: none; font-weight: 600;
}
.chips li:not(:has(a)) { padding: 6px 12px; border-radius: 999px; background: var(--superficie-2); }
.lista-especies { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lista-especies a { font-weight: 700; color: var(--tinta); }
.camaras { padding-left: 18px; margin: 6px 0; }
.modos { padding-left: 18px; }

.tabla-env { overflow-x: auto; }
.publica table { width: 100%; border-collapse: collapse; font-size: 14px; }
.publica th, .publica td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.publica thead th { font-size: 12px; color: var(--tinta-2); text-transform: uppercase; letter-spacing: 0.4px; }
.publica tr.ahora th, .publica tr.ahora td { background: var(--superficie-2); }

/* Llamada a la acción (emoción: degradado) */
.cta { margin: 24px 0; padding: 16px; border-radius: 18px; background: var(--mar); color: var(--blanco); }
.cta-titulo { font-family: var(--f-titulo); font-weight: 800; font-size: 19px; margin: 0 0 8px; }
.cta-lista { margin: 0 0 12px; padding-left: 18px; color: var(--gris-mar); font-size: 14.5px; }
.cta-boton {
  display: block; text-align: center; text-decoration: none; padding: 14px 16px; border-radius: 999px;
  background: var(--degradado-fuerte); color: var(--sobre-acento) !important; font-weight: 800; font-size: 16px;
  box-shadow: 0 6px 18px rgba(190, 24, 93, 0.3);
}
.cta-sub { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--gris-mar); }

.pie-publico { border-top: 1px solid var(--linea); padding: 16px; max-width: 760px; margin: 0 auto; font-size: 13.5px; }
.pie-publico .nota { font-size: 12px; }
.publica a:focus-visible { outline: 3px solid var(--violeta); outline-offset: 2px; border-radius: 6px; }

@media (min-width: 640px) {
  .datos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .modalidades { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .especies li { flex-direction: column; gap: 0; }
}