/* =====================================================================
   PANTALLA · Web pública · INICIO → ADICIONALES, PREGUNTAS,
   EN MEMORIA y WHATSAPP FLOTANTE
   Qué hace:    los testimonios y las invitaciones reales (solo si hay),
                «Ver adicionales» desplegable (con sus precios de la
                Política de precios), las preguntas frecuentes (se abren de a
                una), la franja oscura y sobria de En memoria (imágenes a la
                izquierda, texto a la derecha). Solo tokens del sistema (§4).
   Quién la usa: index.html (la portada de la web)
   Depende de:  tokens.css, base.css, componentes (icono, boton)
   Requisitos:  R-WEB-01, 04, 12, 14
   ===================================================================== */

/* ---------- Adicionales ---------- */
.web-inicio__adicionales {
  max-width: 44rem;
  margin: var(--espacio-5) auto 0;
  text-align: left;
}

.web-inicio__adicionales[hidden] {
  display: none;
}

.web-inicio__adicionales-titulo,
.web-inicio__pregunta-titulo {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  cursor: pointer;
  list-style: none;
}

.web-inicio__adicionales-titulo::-webkit-details-marker,
.web-inicio__pregunta-titulo::-webkit-details-marker {
  display: none;
}

.web-inicio__adicionales-titulo {
  justify-content: center;
  color: var(--color-acento);
  font-weight: 600;
}

.web-inicio__pregunta-flecha {
  flex: none;
  color: var(--color-acento);
  transition: rotate var(--duracion-media) var(--curva-salida);
}

[open] > summary .web-inicio__pregunta-flecha {
  rotate: 180deg;
}

.web-inicio__adicionales-lista {
  display: grid;
  margin: var(--espacio-3) 0 0;
  padding: 0;
  list-style: none;
}

.web-inicio__adicional {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  border-top: 1px solid var(--color-borde);
}

.web-inicio__adicional-precio {
  flex: none;
  color: var(--color-acento);
  font-variant-numeric: tabular-nums;
}

/* ---------- Testimonios e invitaciones reales (solo si hay) ---------- */
.web-inicio__testimonios {
  padding-block: var(--espacio-7) var(--espacio-8);
  text-align: center;
}

.web-inicio__testimonios[hidden],
.web-inicio__reales[hidden] {
  display: none;
}

.web-inicio__testimonios-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--espacio-4);
  max-width: 64rem;
  margin: var(--espacio-6) auto 0;
  text-align: left;
}

.web-inicio__testimonio {
  margin: 0;
}

.web-inicio__estrellas {
  margin: 0;
  color: var(--color-acento);
}

.web-inicio__testimonio-autor {
  color: var(--color-texto-suave);
  font-size: var(--tamano-suave);
}

.web-inicio__reales-titulo {
  margin: var(--espacio-7) 0 0;
  font-size: var(--tamano-l);
  font-weight: 400;
}

.web-inicio__real {
  display: grid;
  gap: var(--espacio-2);
  color: var(--color-texto);
  text-decoration: none;
}

.web-inicio__real-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-control);
  object-fit: cover;
}

/* ---------- Preguntas frecuentes ---------- */
.web-inicio__preguntas,
.web-inicio__memoria {
  padding-block: var(--espacio-7) var(--espacio-8);
  text-align: center;
}

.web-inicio__preguntas-lista {
  display: grid;
  gap: var(--espacio-3);
  max-width: 44rem;
  margin: var(--espacio-6) auto 0;
  text-align: left;
}

.web-inicio__pregunta {
  padding: var(--espacio-2) var(--espacio-4);
  border-radius: var(--radio-tarjeta);
  background: var(--color-superficie);
}

.web-inicio__pregunta-titulo {
  font-weight: 600;
}

.web-inicio__pregunta-respuesta {
  margin: 0 0 var(--espacio-3);
  color: var(--color-texto-suave);
}

/* ---------- En memoria: una franja oscura y sobria (otra sección), con el título arriba, las
   imágenes a la izquierda y el texto a la derecha (al revés que el catálogo). Dentro de la franja se
   cambian los colores de texto y borde por los de la banda sobria (tokens.css), así los
   componentes (botón, título) se leen bien sin tocarlos. ---------- */
.web-inicio__memoria {
  --color-texto: var(--color-banda-sobria-texto);
  --color-texto-suave: var(--color-banda-sobria-suave);
  --color-borde-campo: var(--color-banda-sobria-borde);
  display: grid;
  gap: var(--espacio-6);
  align-items: center;
  background: var(--color-banda-sobria-fondo);
  box-shadow: 0 0 0 100vmax var(--color-banda-sobria-fondo);
  clip-path: inset(0 -100vmax);
  color: var(--color-texto);
}

/* Sobre la franja oscura, el marco negro del celular se perdería: un borde fino lo recorta */
.web-inicio__memoria .telefono {
  box-shadow: 0 0 0 1px var(--color-banda-sobria-borde), var(--sombra-media);
}

.web-inicio__memoria-titulo {
  grid-column: 1 / -1;
  margin: 0;
}

.web-inicio__memoria .web-inicio__seccion-bajada {
  margin-top: 0;
}

@media (min-width: 48rem) {
  .web-inicio__memoria {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    row-gap: var(--espacio-5);
  }

  .web-inicio__memoria-texto {
    text-align: left;
  }
}

.web-inicio__memoria-boton {
  margin: 0;
}