/* ============================================================
   muvi-modern.css · Clínica MuVi · capa de estilo compartida
   Se carga DESPUÉS del <style> de cada página y refina la base.
   Paleta: azul profundo #152e3e · azul #263f50 · verde MuVi #147c6c
           verde claro #8fe2c8 · fondo #f4f7f8 · borde #dce5e8
   ============================================================ */

:root{
  --primary:#263f50;
  --primary-dark:#152e3e;
  --accent:#147c6c;
  --accent-dark:#0e5f53;
  --accent-light:#8fe2c8;
  --bg:#f4f7f8;
  --border:#dce5e8;
  --shadow:0 6px 22px rgba(21,46,62,.07);
  --shadow-lg:0 14px 40px rgba(21,46,62,.12);
  --accent-grad:linear-gradient(120deg,#147c6c 0%,#0e5f53 100%);
  --primary-grad:linear-gradient(135deg,#152e3e 0%,#263f50 100%);
  --ring:0 0 0 1px rgba(20,124,108,.25);
}

/* ---- Corrección: las cabeceras internas de artículos no heredan
       la posición fija/sticky de la cabecera de navegación ---- */
main header, article header, .article-head{
  position:static !important;
  top:auto;
  z-index:auto;
  background:transparent;
}

/* ---- Base y accesibilidad ---- */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
a:focus-visible, .btn:focus-visible{outline-offset:3px}
html{scroll-padding-top:90px}
body{overflow-x:hidden}
img{height:auto}

/* ---- Botones: un solo lenguaje en todo el sitio ---- */
.btn{border-radius:12px}
.btn-primary{background:var(--accent);box-shadow:0 4px 14px rgba(20,124,108,.28)}
.btn-primary:hover{background:var(--accent-dark)}
.btn-secondary{border-color:var(--primary);color:var(--primary-dark)}

/* ---- Tarjetas: bordes suaves, sombras discretas, sin rebotes ---- */
.service-card,.price-card,.online-card,.post-card,.review-card,
.fit-card,.what-card,.team-card,.card,.why-item,.trust-item,
.faq-item,.method-step,.step{
  border-radius:16px;
}
.price-card:hover,.service-card:hover,.post-card:hover{
  transform:none;
  box-shadow:var(--shadow);
  border-color:rgba(20,124,108,.35);
}

/* ============================================================
   HÉROE RENOVADO (index.html y en.html)
   Azul profundo, texto blanco, detalle verde, foto en columna.
   ============================================================ */
.hero.mv-hero{
  background:var(--primary-dark);
  background:linear-gradient(160deg,#152e3e 0%,#1a3849 62%,#263f50 100%);
  color:#fff;
  padding:64px 0 56px;
}
.mv-hero .mv-hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:center;
}
.mv-kicker{
  color:var(--accent-light);
  font-weight:700;
  font-size:14px;
  letter-spacing:.4px;
  margin-bottom:16px;
}
.mv-hero h1{
  color:#fff;
  font-size:clamp(34px,5.4vw,54px);
  line-height:1.08;
  letter-spacing:-.6px;
}
.mv-hero h1 .hl{color:var(--accent-light)}
.mv-hero p.lead{
  color:rgba(255,255,255,.85);
  font-size:clamp(16px,2vw,19px);
  margin:20px 0 28px;
  max-width:560px;
}
.mv-hero .hero-trust{color:rgba(255,255,255,.78)}
.mv-hero .hero-trust span{color:rgba(255,255,255,.78)}
.mv-hero .hero-rating{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.82);
  box-shadow:none;
}
.mv-hero .hero-rating strong{color:#fff}
.mv-hero .btn-secondary{
  border-color:rgba(255,255,255,.55);
  color:#fff;
  background:transparent;
}
.mv-hero .btn-secondary:hover{background:rgba(255,255,255,.12);color:#fff}

/* Fotografía real de Pedro: esquina superior derecha más redondeada */
.mv-hero-photo{
  margin:0;
  justify-self:center;
  max-width:400px;
  width:100%;
}
.mv-hero-photo img{
  width:100%;
  border-radius:22px 96px 22px 22px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  object-fit:cover;
}
.mv-hero-photo figcaption{
  margin-top:14px;
  padding-left:4px;
  display:flex;
  flex-direction:column;
  gap:2px;
  border-left:3px solid var(--accent);
  padding-left:14px;
}
.mv-hero-photo .mv-cap-tag{
  font-size:11px;
  font-weight:800;
  letter-spacing:1.4px;
  color:var(--accent-light);
}
.mv-hero-photo strong{
  color:#fff;
  font-size:17px;
  font-weight:800;
}
.mv-hero-photo .mv-cap-place{
  color:rgba(255,255,255,.7);
  font-size:13px;
}
@media(min-width:900px){
  .hero.mv-hero{padding:88px 0 76px}
  .mv-hero .mv-hero-grid{grid-template-columns:1.15fr .85fr;gap:64px}
  .mv-hero-photo{justify-self:end}
}

/* ============================================================
   RESUMEN DE PRIMERA VALORACIÓN (banda bajo la portada)
   ============================================================ */
.mv-first-visit{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:40px 0;
}
.mv-first-visit h2{
  font-size:clamp(19px,2.4vw,23px);
  color:var(--primary-dark);
  margin-bottom:18px;
}
.mv-first-visit ul{
  list-style:none;
  display:grid;
  gap:12px 28px;
  grid-template-columns:1fr;
  margin:0;
  padding:0;
}
.mv-first-visit li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:15.5px;
  color:var(--text,#1f2a35);
}
.mv-first-visit .check{
  flex:0 0 22px;width:22px;height:22px;border-radius:50%;
  background:rgba(20,124,108,.14);color:var(--accent-dark);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;
}
@media(min-width:760px){
  .mv-first-visit ul{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){
  .mv-first-visit{padding:46px 0}
  .mv-first-visit ul{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================
   CONDICIONES DE BONOS (visible en la zona de precios)
   ============================================================ */
.mv-cond-link{
  display:inline-block;
  margin:10px 0 14px;
  font-size:13.5px;
  font-weight:600;
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}
.mv-cond-link:hover{color:var(--primary-dark)}
.mv-conditions{
  max-width:820px;
  margin:34px auto 0;
  background:#fff;
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:16px;
  padding:30px 30px 26px;
  text-align:left;
  box-shadow:var(--shadow);
}
.mv-conditions h3{
  font-size:19px;
  color:var(--primary-dark);
  margin:0 0 14px;
}
.mv-conditions h4{
  font-size:15.5px;
  color:var(--primary-dark);
  margin:20px 0 8px;
}
.mv-conditions p{
  font-size:14.5px;
  color:var(--muted,#5d6b7a);
  line-height:1.65;
  margin:0 0 10px;
}
.mv-conditions .mv-example{
  background:var(--bg);
  border-radius:10px;
  padding:12px 16px;
  font-size:14px;
}
.mv-conditions:target{box-shadow:0 0 0 3px rgba(20,124,108,.30)}
@media(max-width:560px){.mv-conditions{padding:22px 18px}}

/* ============================================================
   ANIMACIÓN DE ENTRADA (IntersectionObserver, una sola vez)
   El contenido es visible por defecto; solo se oculta si el JS
   añade .mv-reveal, y siempre respeta reduced motion.
   ============================================================ */
.mv-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease, transform .55s ease;
  transition-delay:var(--mv-delay,0s);
}
.mv-reveal.mv-in{
  opacity:1;
  transform:none;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mv-reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}