/* ==========================================================================
   EROS FITNESS — VALORACIÓN GRATIS (valoracion.html)
   Portada con Eros + mini app "Empieza gratis" (empieza.css) → comunidad en la pista (video) →
   contacto directo.
   Mobile-first: los @media (min-width) agregan tablet y escritorio.
   ========================================================================== */

/* ---------- Portada y mini app ---------- */
.valoracion { overflow: hidden; }
.valoracion__grid { display: grid; gap: 26px; }
.valoracion__pasos { margin-top: 20px; border-top: 1px solid var(--line-claro); }
.valoracion__pasos li { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-claro); color: var(--t-medio); font-size: .95rem; }
.valoracion__pasos span { font: italic 500 1.05rem/1 var(--f-serif); color: var(--gold-ink); min-width: 24px; }
/* El titular nunca pasa por debajo de la foto: "CUÉNTAME" mide ~3,85 em,
   así que el tamaño se limita al ancho real de su columna (25cqi ≈ 96 %). */
.valoracion__lado .portada__cabeza { container-type: inline-size; }
.valoracion__lado .pagina-hero__titulo { font-size: min(clamp(2.7rem, 1.5rem + 5.2vw, 6.2rem), 25cqi); }
@media (min-width: 1024px) {
  .valoracion__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: start; }
  .valoracion__lado { position: sticky; top: calc(var(--nav-h) + 24px); }
  /* Título y foto lado a lado; la foto crece con la pantalla sin quitarle espacio al titular */
  .valoracion__lado.portada { grid-template-columns: minmax(0, 1fr) clamp(150px, 15vw, 220px); grid-template-areas: "cabeza foto" "cuerpo cuerpo"; column-gap: clamp(16px, 2vw, 28px); align-items: end; }
  .valoracion__lado > .retrato { width: 100%; margin: 0 0 14px; }
}

/* ---------- Comunidad / pista ---------- */
.comunidad { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.comunidad__media { position: relative; aspect-ratio: 16 / 10; background: var(--ink-3); border-bottom: 1px solid var(--line); }
.comunidad__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.comunidad__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11, 10, 8, .6)); pointer-events: none; }
.comunidad__velo { display: none; }
.comunidad__texto { padding-block: 36px var(--sec); }
.comunidad__texto .lead { margin: 18px 0 26px; }
@media (min-width: 1024px) {
  .comunidad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 5vw; padding: var(--sec) max(var(--gutter), calc((100vw - var(--max)) / 2)); background: radial-gradient(50% 60% at 80% 50%, rgba(233, 169, 58, .14), transparent 70%), var(--ink); }
  .comunidad__media { order: 2; max-width: 760px; border-radius: 24px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .9); }
  .comunidad__texto { order: 1; padding: 0; }
  .comunidad__texto .lead { max-width: 30em; }
}

/* ---------- Contacto ---------- */
.contacto__grid { display: grid; gap: 26px; }
.contacto__lista { display: grid; gap: 10px; }
.contacto__lista a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 18px; border-radius: 18px; background: rgba(255, 252, 245, .78); border: 1px solid var(--line-claro); transition: border-color .3s, transform .5s var(--ease); }
.contacto__lista a:hover { border-color: var(--gold-ink); transform: translateY(-2px); }
.contacto__lista svg { width: 26px; height: 26px; flex: none; color: var(--gold-ink); }
.contacto__lista span { display: grid; gap: 4px; }
.contacto__lista small { font-size: .9rem; color: var(--t-medio); }
.contacto__lista b { font: 400 1.15rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--t-oscuro); }
.contacto__lista strong { color: var(--gold-ink); }
@media (min-width: 760px) { .contacto__lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .contacto__grid { grid-template-columns: .8fr 1.2fr; align-items: center; gap: 6vw; } }