@layer paginas {
  /* Carrusel de cabecera: las diapositivas se apilan en la misma celda y se funden. */
  .carrusel {
    position: relative;
    display: grid;
  }

  /* Cabecera de la portada (home/partials/postales.html): las postales del día a toda la pantalla y, encima y fijos,
     qué es Oceanaria y el buscador; abajo, la playa de cada postal con sus cuatro datos de hoy. Un velo oscuro arriba y
     abajo deja leer el texto blanco sea la foto clara u oscura. */
  .portada {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: min(92vh, 860px);
    background: var(--color-marino-fondo);
    color: var(--color-texto-invertido);
  }

  /* Las postales, apiladas en la misma celda debajo de la cabeza; su foto y su velo, a toda la cabecera */
  .portada__postales {
    flex: 1;
    display: grid;
  }

  .portada__postal {
    display: grid;
    align-content: end;
  }

  .portada__foto {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .portada__postal::before {  /* por encima de la foto */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(to top, color-mix(in srgb, black 82%, transparent), color-mix(in srgb, black 40%, transparent) 42%, transparent 62%),
      linear-gradient(to bottom, color-mix(in srgb, black 72%, transparent), color-mix(in srgb, black 35%, transparent) 40%, transparent 58%);
  }

  .portada__pie {
    position: relative;
    z-index: 2;
    padding-top: var(--espacio-6);
    padding-bottom: calc(var(--espacio-6) + 48px);
  }

  .portada__sitio,
  .portada__marca {
    margin: 0 0 var(--espacio-2);
    color: var(--color-acento);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: var(--sombra-texto-barra);
  }

  .portada__playa {
    margin: 0;
    font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem);
    font-weight: 700;
    line-height: 1.05;
    text-shadow: var(--sombra-texto);
  }

  .portada__datos {
    display: flex;
    gap: var(--espacio-4) var(--espacio-6);
    margin: var(--espacio-5) 0 0;
    padding: 0;
    list-style: none;
  }

  .portada__datos li {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 var(--espacio-2);
    align-items: center;
  }

  .portada__datos .icono-dato {
    grid-row: span 2;
    width: 26px;
    height: 26px;
    color: var(--color-acento);
  }

  .portada__datos b {
    font-size: 1.35rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    text-shadow: var(--sombra-texto-barra);
  }

  .portada__datos span {
    font-size: var(--paso--1);
    opacity: 0.85;
  }

  .portada__nota {
    justify-self: start;
    padding: 1px var(--espacio-2);
    border-radius: 6px;
    color: var(--color-texto-sobre-color);
    text-shadow: none;
  }

  .portada__nota--bueno { background: var(--mapa-bueno); }
  .portada__nota--regular { background: var(--mapa-regular); }
  .portada__nota--malo { background: var(--mapa-malo); }

  .portada__enlace {
    display: inline-block;
    margin-top: var(--espacio-5);
    padding: var(--espacio-2) var(--espacio-5);
    border-radius: 999px;
    background: var(--color-acento);
    color: var(--color-texto-sobre-color);
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--transicion);
  }

  .portada__enlace:hover {
    background: var(--color-acento-oscuro);
  }

  .portada__cabeza {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    padding-top: calc(var(--alto-barra) + var(--espacio-5));
    text-align: center;
  }

  .portada__titulo {
    margin: 0;
    color: inherit;
    font-size: clamp(2rem, 1.1rem + 3.4vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-shadow: var(--sombra-texto);
  }

  .portada__texto {
    max-width: 52ch;
    margin: var(--espacio-4) 0 0;
    font-size: var(--paso-1);
    line-height: 1.55;
    text-shadow: var(--sombra-texto-barra);
  }

  .portada__buscador {
    width: 100%;
    max-width: 620px;
    margin-top: var(--espacio-5);
    text-align: left;
  }

  .portada__buscador .buscador-playas__pregunta {  /* la pregunta ya es el título: solo para lectores de pantalla */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .portada__buscador input {
    color: var(--color-texto);  /* no el blanco de la cabecera */
    box-shadow: var(--sombra-levantada);
  }

  /* En el móvil, los cuatro datos en una fila: el icono encima de cada cifra */
  @media (max-width: 768px) {
    .portada {
      min-height: 88svh;
    }

    .portada__pie {
      padding-bottom: calc(var(--espacio-5) + 44px);
    }

    .portada__texto {
      font-size: var(--paso-0);
    }

    .portada__datos {
      display: grid;
      grid-template-columns: repeat(4, auto);
      justify-content: space-between;
      gap: 0;
      max-width: 360px;
    }

    .portada__datos li {
      grid-template-columns: auto;
      justify-items: start;
      gap: 2px;
    }

    .portada__datos .icono-dato {
      grid-row: auto;
      width: 20px;
      height: 20px;
    }

    .portada__datos b {
      font-size: 1.05rem;
      white-space: nowrap;
    }

    .portada__datos span {
      font-size: 0.75rem;
      white-space: nowrap;
    }
  }

  /* Lo que han visto hoy los socorristas: la tarjeta de playa de los mapas (.playa-mapa, componentes/mapa-playas.css)
     y, debajo de la bandera, lo visto de medusas, algas y natas con el punto del color de su nivel. */
  .socorristas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));  /* como las tarjetas de playa de los municipios */
    gap: var(--espacio-4);
    margin: var(--espacio-5) 0 0;
    padding: 0;
    list-style: none;
  }

  @media (max-width: 768px) {  /* en el móvil, en fila, deslizando con el dedo */
    .socorristas {
      display: flex;
      margin-inline: calc(-1 * var(--margen-lateral));
      padding-inline: var(--margen-lateral);
      overflow-x: auto;
      scroll-padding-inline: var(--margen-lateral);
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }

    .socorristas > li {
      flex: 0 0 78%;
      scroll-snap-align: start;
    }
  }

  @media (min-width: 769px) and (max-width: 1080px) {
    .socorristas {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .socorristas__foto {
    position: relative;
  }

  .socorristas .playa-mapa img {
    display: block;
    aspect-ratio: 16 / 10;
  }

  .socorristas__bandera {  /* sobre la foto, abajo a la izquierda */
    position: absolute;
    left: var(--espacio-2);
    bottom: var(--espacio-2);
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 2px var(--espacio-2) 2px 6px;
    border-radius: 999px;
    background: var(--color-fondo);
    box-shadow: var(--sombra);
    font-size: 0.75rem;
  }

  .socorristas__bandera::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--punto);
  }

  .socorristas__cosas {
    display: grid;
    gap: 2px;
    margin: var(--espacio-1) 0 0;
    padding: 0;
    list-style: none;
    color: var(--color-texto-suave);
    font-size: var(--paso--1);
  }

  .socorristas__cosas li {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .socorristas__cosas li::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--punto);
  }

  /* Aprende: los tres temas en tarjetas grandes de foto, con el título y una línea encima. */
  .aprende {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .aprende__tema {
    position: relative;
    display: grid;
    align-content: end;
    gap: var(--espacio-1);
    aspect-ratio: 4 / 5;
    padding: var(--espacio-5);
    overflow: hidden;
    border-radius: 14px;
    background: var(--color-marino-fondo);
    color: var(--color-texto-invertido);
    text-decoration: none;
    isolation: isolate;
  }

  .aprende__tema img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--foco, 50% 50%);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .aprende__tema::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, color-mix(in srgb, black 78%, transparent), transparent 60%);
  }

  .aprende__tema:hover img {
    transform: scale(1.04);
  }

  .aprende__titulo {
    font-size: var(--paso-3);
    font-weight: 700;
    line-height: 1.1;
    text-shadow: var(--sombra-texto);
  }

  .aprende__texto {
    max-width: 34ch;
    text-shadow: var(--sombra-texto-barra);
  }

  .aprende__texto::after {
    content: " →";
    color: var(--color-acento);
    font-weight: 700;
  }

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

    .aprende__tema {
      aspect-ratio: 16 / 10;
      padding: var(--espacio-4);
    }
  }

  .carrusel__diapositiva {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s;
  }

  .carrusel__diapositiva--activa {
    opacity: 1;
    visibility: visible;
  }

  .carrusel__puntos {
    position: absolute;
    z-index: 2;
    inset: auto 0 var(--espacio-5);
    display: flex;
    justify-content: center;
    gap: var(--espacio-2);
  }

  .carrusel__punto {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .carrusel__punto::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: auto;
    border-radius: 50%;
    background: var(--color-punto-carrusel);
    transition: background-color var(--transicion);
  }

  .carrusel__punto[aria-current="true"]::before {
    background: var(--color-texto-invertido);
  }
}