/* =========================================================
   secciones.css — acomodo de la página
   Encabezado, portada, secciones, pie y ajustes para celular.
   ========================================================= */

/* ---------- Encabezado ---------- */

.encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* el menú ya trae 10px de relleno por enlace; se descuentan para alinear con el margen */
  padding: 10px calc(var(--margen) - 10px);
}

/* ---------- Portada ---------- */

.portada {
  display: grid;
  grid-template-columns: 100%;
  align-content: center;
  justify-items: center;
  min-height: min(calc(100svh - 92px), 720px);
  padding-block: 32px 24px;
  text-align: center;
}

/* El logotipo es un SVG (img/logo-delio.svg); aquí solo se decide su tamaño */
.marca {
  width: min(72vw, 640px);
}

.marca img {
  display: block;
  width: 100%;
  height: auto;
}

/* Logo animado (js/logo.js): el lienzo ocupa el lugar de la imagen, y la imagen
   se esconde de la vista pero se queda en la página para que su "alt" siga
   diciéndole a buscadores y lectores de pantalla que aquí dice Delio. */
.marca--viva {
  position: relative;
}

.marca__lienzo {
  display: block;
  width: 100%;
  aspect-ratio: 360 / 126;
}

.marca--viva img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

/* Por si el lienzo no llegó a dibujarse estando en modo nocturno: la imagen es
   oscura y no se vería sobre el fondo oscuro, así que se aclara con un filtro. */
:root[data-tema="oscuro"] .marca:not(.marca--viva) img {
  filter: invert(0.65);
}

.portada__onda {
  display: block;
  width: 100%;
  height: clamp(96px, 13vw, 168px);
  margin-top: clamp(4px, 1vw, 12px);
  color: var(--tinta);
}

/* Sin JavaScript no hay dibujo: queda una línea recta en su lugar */
html:not(.con-js) .portada__onda {
  background: linear-gradient(var(--tinta), var(--tinta)) center / 100% 2px no-repeat;
}

.portada__lema {
  margin-top: clamp(8px, 1.5vw, 20px);
  padding-inline: var(--margen);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.portada__texto {
  max-width: calc(46ch + 2 * var(--margen));
  margin-top: 6px;
  padding-inline: var(--margen);
  text-wrap: balance;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin-top: 28px;
  padding-inline: var(--margen);
}

/* ---------- Secciones ---------- */

.seccion {
  padding-top: var(--aire);
}

.seccion__titulo {
  margin-bottom: 28px;
  padding-inline: var(--margen);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
}

.seccion__entrada {
  max-width: calc(var(--ancho-formulario) + 2 * var(--margen));
  margin: -12px auto 28px;
  padding-inline: var(--margen);
  text-align: center;
  text-wrap: balance;
}

.seccion__cierre {
  display: flex;
  justify-content: center;
  margin-top: 28px;
  padding-inline: var(--margen);
}

/* ---------- Qué incluye ---------- */

.detalle {
  max-width: calc(var(--ancho-lista) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* El selector no sirve sin JavaScript, así que solo se muestra con él */
html:not(.con-js) .selector {
  display: none;
}

.incluye {
  padding-top: 28px;
  /* al llegar desde un mosaico, deja a la vista el título y el selector */
  scroll-margin-top: 140px;
}

.incluye__titulo {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.filas {
  margin-top: 12px;
  border-top: var(--linea) solid var(--tinta);
}

.incluye__accion {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* ---------- Contacto ---------- */

.formulario {
  max-width: calc(var(--ancho-formulario) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* ---------- Pie ---------- */

.pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: var(--aire);
  /* el espacio extra de abajo es para que el muelle no tape el texto del pie */
  padding: 24px var(--margen) 88px;
  border-top: var(--linea) solid var(--tinta);
  font-size: 0.875rem;
  font-weight: 700;
}

.pie__marca {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Pantallas angostas ---------- */

@media (max-width: 719px) {
  /* WhatsApp y Correo ya están en la sección de contacto */
  .nav--directo {
    display: none;
  }

  .nav a {
    padding: 14px 8px;
    font-size: 0.9375rem;
  }

  .encabezado {
    padding: 6px calc(var(--margen) - 8px);
  }
}

@media (max-width: 599px) {
  .fila {
    grid-template-columns: minmax(0, 1fr);
  }

  .portada__acciones {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
  }
}