/* ==========================================================================
   sections.css — Maquetación de cada sección
   Mobile-first: los estilos base son para móvil y los media queries (min-width) amplían.
   Breakpoints: 600px (tablet) · 900px (escritorio)
   ========================================================================== */

/* ---------- 1. Portada ----------
   Móvil: texto, foto y selector de canales apilados.
   Escritorio: texto a la izquierda y foto vertical a la derecha con el selector superpuesto. */
.hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(4rem, 9vw, 6rem); }
.hero .wrap { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 1.35fr 1fr; } }

.hero__copy { display: grid; gap: var(--space-5); min-width: 0; }
.hero h1 { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.045em; line-height: .9; }
.hero h1 span { color: var(--color-primary); }
.hero__claim { max-width: 28ch; font-size: clamp(1.125rem, 1rem + .8vw, 1.5rem); font-weight: 500; color: var(--paper-70); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }

.hero__media { position: relative; min-width: 0; }
.hero__photo {
  aspect-ratio: 1; object-position: center 25%;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--line-dark), var(--shadow-lg);
}
.hero__media .channels { margin-top: var(--space-3); }

@media (min-width: 600px) {
  .hero__photo { aspect-ratio: 4 / 5; }
  /* El selector se superpone a la parte baja de la foto con fondo translúcido */
  .hero__media .channels {
    position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); margin: 0;
    background: rgb(0 0 0 / .62);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
}

/* ---------- 2. Erklärung ----------
   Tres paneles: "Was ist…" y "Wie funktioniert…" en dos columnas,
   y "Was ist noch möglich?" como banda negra a todo el ancho. */
.bento { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .bento { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }

.panel__img { aspect-ratio: 16 / 9; margin-bottom: var(--space-2); }

/* Foto que rellena el resto del panel "So funktioniert's"
   para que termine a la misma altura que el panel de la izquierda. */
.panel__img--fill { margin: var(--space-2) 0 0; object-position: center 30%; }
@media (min-width: 900px) {
  .panel--how { display: flex; flex-direction: column; }
  .panel__img--fill { flex: 1 1 0; height: 0; min-height: 200px; aspect-ratio: auto; }
}

/* Banda "Was ist noch möglich?": foto | texto | experiencia + botón */
.panel--more { grid-column: 1 / -1; gap: var(--space-6); }
@media (min-width: 900px) { .panel--more { grid-template-columns: .8fr 1.4fr 1fr; align-items: center; gap: var(--space-7); } }
.panel--more > div { display: grid; gap: var(--space-4); min-width: 0; }
.panel--more__img { aspect-ratio: 16 / 10; object-position: center 25%; box-shadow: 0 0 0 1px var(--line-dark); }
@media (min-width: 900px) { .panel--more__img { aspect-ratio: 4 / 5; } }
/* Los tipos de evento se resaltan dentro del propio párrafo, sin cambiar el texto */
.panel--more em { font-style: normal; font-weight: 700; color: var(--color-white); }
.panel--more .btn { justify-self: start; }

.experience { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; }
.experience b { font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; color: var(--color-primary); }
.panel--more .experience p { color: var(--color-white); font-size: .9375rem; font-weight: 600; }

/* ---------- 3. Vorteile ---------- */
.benefits { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .benefits { grid-template-columns: 1fr 1fr; } }

/* ---------- 4. Preise ---------- */
.prices-section { background: var(--tint); }
.prices { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .prices { grid-template-columns: repeat(3, 1fr); } }

/* Franja de condiciones bajo las tarjetas */
.terms {
  display: grid; gap: var(--space-5); margin-top: var(--space-6); padding: var(--space-6);
  border: 1px dashed rgb(0 0 0 / .2); border-radius: var(--radius-lg);
}
@media (min-width: 900px) { .terms { grid-template-columns: repeat(3, 1fr) auto; align-items: center; } }
.term b { display: block; font-weight: 700; }
.term span { font-size: var(--fs-small); color: var(--ink-70); }

/* ---------- 5. Kontakt ---------- */
.contact { display: grid; gap: var(--space-7); }
@media (min-width: 900px) { .contact { grid-template-columns: 1.1fr 1fr; gap: var(--space-9); align-items: start; } }
.contact > * { min-width: 0; }
.contact__text { display: grid; gap: var(--space-4); }
.contact h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.02em; }