/* ============================================================
   ELITE FUT ACADEMY — /us/ (Houston) · estilos específicos
   Complementa css/styles.css (identidad Elite) y css/market.css.
   Solo lo que la landing US necesita y no existe en la web ES.
   ============================================================ */

/* ---- Fotos en las tarjetas de metodología (en US no hay vídeo) ---- */
.metodo__media--img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 3. Perceive → Decide → Execute (fondo blanco) ---- */
.different__grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 760px) { .different__grid { grid-template-columns: repeat(3, 1fr); } }
.different__card {
  position: relative; background: #fff; border: 1px solid rgba(18,50,188,0.12);
  border-radius: var(--radio, 14px); padding: 1.8rem 1.6rem 1.6rem;
  box-shadow: 0 10px 30px rgba(10,14,26,0.06);
}
.different__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--azul, #1232BC), var(--azul-electric, #2E5BFF));
  color: #fff; font-family: var(--font-display, 'Anton', sans-serif); font-size: 1.15rem; margin-bottom: 0.9rem;
}
.different__card h3 { margin: 0 0 0.5rem; color: var(--azul, #1232BC); }
.different__card p { margin: 0; color: var(--gris-suave, #565b67); }
.different__nota { max-width: 62ch; margin: 2rem auto 0; text-align: center; font-weight: 600; color: var(--azul, #1232BC); }

/* ---- 5. How it works sobre fondo claro (los .paso están pensados para navy) ---- */
.pasos--light .paso { background: #fff; border: 1px solid rgba(18,50,188,0.12); box-shadow: 0 10px 30px rgba(10,14,26,0.06); }
.pasos--light .paso h3 { color: var(--azul, #1232BC); }
.pasos--light .paso p { color: var(--gris-suave, #565b67); }
.pasos--light .paso__num { background: linear-gradient(135deg, var(--azul, #1232BC), var(--azul-electric, #2E5BFF)); color: #fff; }
@media (min-width: 1000px) { .pasos__grid--5 { grid-template-columns: repeat(5, 1fr); } }

/* ---- 6. Tarjeta de la evaluación ($95): la puerta de entrada ---- */
.assessment-card {
  display: grid; gap: 1.4rem; align-items: center;
  background: linear-gradient(135deg, var(--azul, #1232BC), var(--azul-electric, #2E5BFF)); color: #fff;
  border-radius: var(--radio, 14px); padding: clamp(1.6rem, 4vw, 2.4rem); margin: 1.5rem 0 2.2rem;
  box-shadow: 0 18px 44px rgba(46,91,255,0.35);
}
@media (min-width: 860px) { .assessment-card { grid-template-columns: 1.6fr 1fr; } }
.assessment-card .precio__badge { position: static; display: inline-block; margin-bottom: 0.8rem; background: #fff; color: var(--azul, #1232BC); }
.assessment-card .precio__nombre, .assessment-card .precio__precio { color: #fff; }
.assessment-card .precio__precio span { color: rgba(255,255,255,0.75); }
.assessment-card .precio__desc { color: rgba(255,255,255,0.88); }
.assessment-card .precio__desc strong { color: #fff; }
.precios__sub { text-align: center; color: rgba(255,255,255,0.7); font-size: 0.9rem; margin: 0 0 1rem; letter-spacing: 0.3px; }
.precios__sub strong { color: #fff; }

/* ---- 7. Video analysis (fondo blanco) ---- */
.va-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 760px) { .va-grid { grid-template-columns: repeat(3, 1fr); } }
.va-card {
  position: relative; background: #fff; border: 1px solid rgba(18,50,188,0.12);
  border-radius: var(--radio, 14px); padding: 1.8rem 1.6rem; box-shadow: 0 10px 30px rgba(10,14,26,0.06);
}
.va-card__tag {
  position: absolute; top: -0.7rem; left: 1.2rem; background: var(--azul, #1232BC); color: #fff;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 999px;
}
.va-card h3 { margin: 0 0 0.5rem; color: var(--azul, #1232BC); }
.va-card__price { font-family: var(--font-display, 'Anton', sans-serif); font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1; color: #14161c; margin-bottom: 0.7rem; }
.va-card__price span { font-family: var(--font-body, 'Inter', sans-serif); font-size: 0.9rem; color: var(--gris-suave, #565b67); margin-left: 0.3rem; }
.va-card p { margin: 0; color: var(--gris-suave, #565b67); }

/* ---- 8. Why Spain (navy) ---- */
.why-spain__hero {
  margin: 1.6rem 0 2rem; padding: 1.6rem 1.8rem;
  border-left: 4px solid var(--azul-electric, #2E5BFF); background: rgba(255,255,255,0.05);
  border-radius: 0 var(--radio, 14px) var(--radio, 14px) 0;
  font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.5; color: rgba(255,255,255,0.9);
}
.why-spain__hero strong { color: #fff; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
@media (min-width: 860px) { .facts { grid-template-columns: repeat(2, 1fr); } }
.facts li {
  background: rgba(255,255,255,0.04); border: 1px solid var(--linea-oscura, rgba(255,255,255,0.1));
  border-radius: var(--radio, 14px); padding: 1.1rem 1.3rem;
  color: rgba(255,255,255,0.8); font-size: 0.95rem; line-height: 1.55;
}
.facts li strong { color: #fff; display: block; margin-bottom: 0.25rem; }
.facts li em { color: rgba(255,255,255,0.55); font-style: normal; font-size: 0.85rem; }
.founder {
  display: grid; gap: 1.4rem; align-items: center; margin-top: 2.4rem; padding-top: 2rem;
  border-top: 1px solid var(--linea-oscura, rgba(255,255,255,0.1));
}
@media (min-width: 760px) { .founder { grid-template-columns: 220px 1fr; } }
.founder__foto { width: 100%; max-width: 220px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio, 14px); }
.founder__texto h3 { color: #fff; margin: 0.2rem 0 0.8rem; }
.founder__texto ul { margin: 0; padding-left: 1.1rem; color: rgba(255,255,255,0.8); line-height: 1.6; }

/* ---- 9. Where we train ---- */
.where__grid { display: grid; gap: 1.6rem; margin-top: 1.4rem; }
@media (min-width: 860px) { .where__grid { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.where__mapa { width: 100%; min-height: 320px; border: 0; border-radius: var(--radio, 14px); }
.where__body h3 { margin: 0 0 0.6rem; }

/* ---- 10. Formulario ---- */
.form-consent--nota { display: block; }
.contacto__nota { color: var(--gris-suave, #565b67); font-size: 0.9rem; margin-top: 1rem; }

/* ---- Our coaches (dentro de Why Spain, navy) ---- */
.coaches { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--linea-oscura, rgba(255,255,255,0.1)); }
.coaches__grid { display: grid; gap: 1.4rem; margin-top: 1rem; }
.coach {
  display: grid; gap: 1.2rem; align-items: start;
  background: rgba(255,255,255,0.04); border: 1px solid var(--linea-oscura, rgba(255,255,255,0.1));
  border-radius: var(--radio, 14px); padding: 1.4rem;
}
@media (min-width: 760px) { .coach { grid-template-columns: 220px 1fr; } }
.coach__foto { width: 100%; max-width: 220px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio, 14px); background: rgba(255,255,255,0.06); }
.coach__texto h4 { color: #fff; margin: 0 0 0.25rem; font-size: 1.2rem; }
.coach__rol { color: var(--azul-claro, #6f8cff); font-weight: 600; font-size: 0.9rem; margin: 0 0 0.7rem; }
.coach__texto ul { margin: 0; padding-left: 1.1rem; color: rgba(255,255,255,0.8); line-height: 1.55; font-size: 0.93rem; }

/* ---- Testimonials (fondo blanco): nota de idioma ---- */
.testimonios__idioma { display: block; margin-top: 0.4rem; font-size: 0.9rem; opacity: 0.75; }

/* ---- Subtítulos "virales" sobre los testimonios ----
   Los pinta el script de us/index.html leyendo las pistas WebVTT (la pista nativa queda en modo hidden).
   Anton en mayúsculas, blanco con borde negro, en la franja inferior para no pisar los rótulos grabados. */
.subs-overlay {
  position: absolute; left: 6%; right: 6%; bottom: 9%;
  display: none; text-align: center; pointer-events: none; z-index: 2;
  font-family: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  font-size: clamp(1.15rem, 5.2cqw, 1.9rem);
  line-height: 1.12; letter-spacing: 0.02em; text-transform: uppercase;
  color: #7d9bff; /* azul claro de marca, un punto más vivo, para que destaque sobre césped y cielo */
  -webkit-text-stroke: 0.045em #0a0e1a; paint-order: stroke fill;
  text-shadow:
    0 0 0.06em #0a0e1a, 0.06em 0 #0a0e1a, -0.06em 0 #0a0e1a, 0 0.06em #0a0e1a, 0 -0.06em #0a0e1a,
    0 0.18em 0.45em rgba(0,0,0,0.7);
}
.video-play { container-type: inline-size; }
.subs-overlay.activo { display: block; }
/* Con controles nativos visibles, subimos un poco para no chocar con la barra */
.video-play.reproduciendo .subs-overlay { bottom: 15%; }