/* PescaRadar · páginas de aterrizaje.
 *
 * No son "páginas de texto SEO": son páginas de producto que explican una parte
 * concreta de la aplicación y llevan al mapa. Por eso usan los mismos tokens,
 * la misma cabecera y el mismo pie que la portada, y no una hoja aparte con su
 * propia paleta.
 *
 * La medida de línea está limitada a propósito. Un párrafo de 120 caracteres de
 * ancho no se lee: se abandona.
 */

.seoPagina {
  background: var(--pr-surface, #041016);
  color: var(--pr-text, #e9f6fb);
}

/* ---- Migas ------------------------------------------------------------------ */

.seoMigas {
  padding: 14px 0 0;
  font-size: var(--pr-caption, 12px);
  color: var(--pr-text-faint, #6f8b97);
}
.seoMigas .landWrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.seoMigas a { color: var(--pr-text-soft, #a3bcc7); text-decoration: none }
.seoMigas a:hover { color: var(--pr-primary, #35b6d8); text-decoration: underline }
.seoMigas [aria-current] { color: var(--pr-text-faint, #6f8b97) }

/* ---- Artículo --------------------------------------------------------------- */

.seoArticulo {
  padding-block: clamp(20px, 4vw, 40px) clamp(48px, 8vw, 88px);
}

.seoArticulo h1 {
  max-width: 20ch;
  margin: 0 0 18px;
  font-size: clamp(30px, 5.2vw, 50px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.seoEntrada {
  max-width: 62ch;
  margin: 0 0 26px;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.62;
  color: var(--pr-text-soft, #a3bcc7);
}
.seoEntrada strong { color: var(--pr-text, #e9f6fb) }

.seoArticulo h2 {
  max-width: 26ch;
  margin: clamp(38px, 5vw, 56px) 0 14px;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.seoArticulo h3 {
  max-width: 34ch;
  margin: 28px 0 8px;
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--pr-text, #e9f6fb);
}

.seoArticulo p {
  max-width: 66ch;
  margin: 0 0 14px;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.7;
  color: var(--pr-text-soft, #a3bcc7);
}
.seoArticulo p strong { color: var(--pr-text, #e9f6fb) }
.seoArticulo a { color: var(--pr-primary, #35b6d8) }
.seoArticulo a:hover { color: var(--pr-primary-hover, #4fcaea) }

.seoLista {
  max-width: 66ch;
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--pr-text-soft, #a3bcc7);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.7;
}
.seoLista li { margin-bottom: 6px }
.seoLista li::marker { color: var(--pr-primary, #35b6d8) }

/* Los matices y los límites del producto. Van en su propia caja porque son lo
   que separa una página honesta de un folleto. */
.seoNota {
  max-width: 66ch;
  margin: 18px 0 !important;
  padding: 13px 16px;
  border-left: 3px solid var(--pr-border-strong, rgba(120, 170, 190, .34));
  border-radius: 0 10px 10px 0;
  background: var(--pr-surface-1, #071a23);
  font-size: var(--pr-caption, 14px) !important;
  color: var(--pr-text-faint, #6f8b97) !important;
}

.seoCta { margin: 22px 0 !important }
.seoCtaPrincipal { margin: 0 0 8px !important }
.seoCta .prBtn { display: inline-flex; align-items: center }

/* ---- Preguntas frecuentes ---------------------------------------------------- */

.seoFaqs { max-width: 72ch; display: grid; gap: 8px }
.seoFaq {
  border: 1px solid var(--pr-border, rgba(120, 170, 190, .18));
  border-radius: 14px;
  background: var(--pr-surface-1, #071a23);
  overflow: hidden;
}
.seoFaq summary {
  padding: 15px 18px;
  cursor: pointer;
  font-weight: 800;
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--pr-text, #e9f6fb);
  list-style: none;
}
.seoFaq summary::-webkit-details-marker { display: none }
.seoFaq summary::after {
  content: "+";
  float: right;
  color: var(--pr-primary, #35b6d8);
  font-weight: 900;
}
.seoFaq[open] summary::after { content: "−" }
.seoFaq p { margin: 0 !important; padding: 0 18px 16px }

/* ---- Cierre y páginas relacionadas ------------------------------------------- */

.seoCierre {
  margin-top: clamp(44px, 6vw, 70px);
  padding: clamp(22px, 3.5vw, 34px);
  border-radius: 20px;
  border: 1px solid var(--pr-border, rgba(120, 170, 190, .18));
  background: var(--pr-grad-mapa, linear-gradient(160deg, #0a2733, #061821));
}
.seoCierre h2 { max-width: 30ch; margin: 0 0 16px }

.seoRelacionadas { margin-top: clamp(40px, 6vw, 64px) }
.seoRelacionadas h2 { margin-top: 0 }
.seoRelacionadas ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.seoRelacionadas a {
  display: block;
  height: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--pr-border, rgba(120, 170, 190, .18));
  background: var(--pr-surface-1, #071a23);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.seoRelacionadas a:hover,
.seoRelacionadas a:focus-visible {
  border-color: var(--pr-primary, #35b6d8);
  transform: translateY(-2px);
}
.seoRelacionadas b { display: block; font-size: 15px; color: var(--pr-text, #e9f6fb) }
.seoRelacionadas small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--pr-text-faint, #6f8b97);
}

@media (prefers-reduced-motion: reduce) {
  .seoRelacionadas a { transition: none }
  .seoRelacionadas a:hover { transform: none }
}

/* ---- Móvil ------------------------------------------------------------------- */

@media (max-width: 640px) {
  .seoArticulo h1 { max-width: none }
  .seoCierre { padding: 20px 18px; border-radius: 16px }
}

/* Índice del blog. Mismas tarjetas que "sigue por aquí": es la misma idea
   -elegir a dónde ir- y no hay razón para que se vea distinto. */
.seoIndiceBlog {
  display: grid;
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.seoIndiceBlog a {
  display: block;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--pr-border, rgba(120, 170, 190, .18));
  background: var(--pr-surface-1, #071a23);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease;
}
.seoIndiceBlog a:hover,
.seoIndiceBlog a:focus-visible { border-color: var(--pr-primary, #35b6d8) }
.seoIndiceBlog b {
  display: block;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.3;
  color: var(--pr-text, #e9f6fb);
}
.seoIndiceBlog small {
  display: block;
  margin-top: 6px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pr-text-faint, #6f8b97);
}

/* Un artículo se lee de arriba abajo: la medida se estrecha un poco más. */
.seoPost p, .seoPost .seoLista { max-width: 62ch }

/* ---------------------------------------------------------------------------
   Formulario de contacto

   Una sola columna y campos anchos: se rellena mucho más desde el móvil que
   desde un escritorio, y dos columnas ahí solo estrechan los campos.
   --------------------------------------------------------------------------- */
.contactoForm {
  display: grid;
  gap: var(--pr-4, 16px);
  max-width: 46rem;
  margin: var(--pr-4, 16px) 0 var(--pr-8, 32px);
}
.contactoCampo { display: grid; gap: 6px }
.contactoCampo label {
  font-size: 14px;
  font-weight: 600;
  color: var(--pr-text-soft, #a3bcc7);
}
.contactoCampo input,
.contactoCampo select,
.contactoCampo textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--pr-r-btn, 12px);
  border: 1px solid var(--pr-border, rgba(120, 170, 190, .18));
  background: var(--pr-surface-1, #071a23);
  color: var(--pr-text, #e9f6fb);
  /* 16px o más: por debajo de eso, Safari en iPhone hace zoom al enfocar el
     campo y descoloca la página. */
  font: inherit;
  font-size: 16px;
}
.contactoCampo textarea { resize: vertical; min-height: 9rem; line-height: 1.55 }
.contactoCampo input:focus-visible,
.contactoCampo select:focus-visible,
.contactoCampo textarea:focus-visible {
  outline: 2px solid var(--pr-primary, #35b6d8);
  outline-offset: 1px;
  border-color: transparent;
}
.contactoCampo small { font-size: 13px; color: var(--pr-text-faint, #6f8b97) }
.contactoCampo small.contactoCorto { color: var(--pr-warning, #e0a83c) }

/* El campo trampa. No se usa `display:none` ni `hidden`: los robots que se
   molestan en mirar el estilo saltan justo lo que está oculto de esa forma.
   Así queda fuera de la pantalla y fuera del recorrido del tabulador, pero es
   un campo normal para quien solo lee el HTML. */
.contactoTrampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contactoForm button { justify-self: start }
.contactoAviso { margin: 0; font-size: 15px; min-height: 1.4em }
.contactoAviso.contactoMal { color: var(--pr-danger, #e06172) }
.contactoHecho {
  margin: 0;
  padding: var(--pr-4, 16px);
  border-radius: var(--pr-r-card, 16px);
  border: 1px solid var(--pr-success, #3fbd7a);
  background: rgba(63, 189, 122, .1);
  color: var(--pr-text, #e9f6fb);
}