/* El verde de WhatsApp y el degradado de Instagram se pasaron al dorado:
   la página va solo en negro y dorado. Los iconos se siguen reconociendo. */
/* ==========================================================================
   INICIO.css — Página pública de presentación
   Usa los mismos colores y tipografías de la app (estilos.css)
   ========================================================================== */

body.sitio{padding-bottom:0;background:var(--fondo)}

/* ------------------------------- cabecera ------------------------------- */
.cab-sitio{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;
  padding:12px 20px;background:rgba(10,10,10,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.marca-sitio img{height:38px;width:auto;display:block}
.menu-sitio{margin-left:auto;display:flex;align-items:center;gap:22px}
.menu-sitio a{
  color:#c9c4b8;text-decoration:none;font-family:var(--titulo);font-size:12.5px;
  text-transform:uppercase;letter-spacing:1.3px;transition:.15s;
}
.menu-sitio a:hover{color:var(--azul)}
.menu-sitio a.btn{color:var(--sobre-acento);text-decoration:none}
@media(max-width:680px){
  .menu-sitio a:not(.btn){display:none}
  .marca-sitio img{height:32px}
}

/* -------------------------------- portada ------------------------------- */
.portada{
  display:grid;gap:0;grid-template-columns:1fr;
  background:var(--carbon);position:relative;overflow:hidden;
}
@media(min-width:900px){.portada{grid-template-columns:1fr 1fr;min-height:78vh}}

/* En el celular la foto ocupaba poco alto y 'center' le cortaba la cabeza.
   Se le da más altura y se ancla arriba, que es donde está la cara. */
.portada-foto{
  min-height:96vw;max-height:82vh;
  background:#141414 no-repeat;background-size:cover;background-position:center 18%;
  position:relative;
}
@media(min-width:900px){
  .portada-foto{min-height:100%;max-height:none;order:2;background-position:center 22%}
}
.portada-foto.sin-foto::after{
  content:'Aquí va la foto del entrenador';
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  color:#5a554c;font-family:var(--titulo);font-size:13px;text-transform:uppercase;
  letter-spacing:2px;border:2px dashed #2e2b25;
}

/* ---------------------- carrusel de la portada -------------------------
   Hasta cuatro fotos que se cruzan en el mismo sitio. Con una sola foto
   JavaScript no pinta puntos ni mueve nada: se ve igual que cuando la
   portada era una imagen fija. El encuadre (`background-position`) es el
   mismo que tenía `.portada-foto`, porque la cara sigue estando arriba. */
.portada-capa{
  position:absolute;inset:0;
  background:no-repeat center 18%/cover;
  opacity:0;transition:opacity .8s ease;
}
.portada-capa.visible{opacity:1}
@media(min-width:900px){.portada-capa{background-position:center 22%}}

/* Una sombra suave debajo para que los puntos se vean también sobre una
   foto clara. Va detrás de ellos y no tapa la imagen. */
.portada-puntos::before{
  content:'';position:absolute;left:0;right:0;bottom:-16px;height:90px;
  background:linear-gradient(to top,rgba(10,10,10,.55),transparent);
  pointer-events:none;
}
.portada-puntos{
  position:absolute;left:0;right:0;bottom:14px;z-index:2;
  display:flex;justify-content:center;gap:2px;
}
/* El botón mide 30px para que se pueda tocar con el dedo; el punto que se
   ve es el círculo de dentro. */
.portada-punto{
  width:30px;height:30px;padding:0;border:0;background:transparent;
  cursor:pointer;display:grid;place-items:center;position:relative;
}
.portada-punto::after{
  content:'';width:10px;height:10px;border-radius:50%;
  border:1.5px solid var(--azul);background:transparent;
  transition:background .25s ease,transform .25s ease;
}
.portada-punto.activo::after{background:var(--azul);transform:scale(1.25)}
.portada-punto:focus-visible{outline:2px solid var(--azul);outline-offset:-4px;border-radius:50%}

@media(prefers-reduced-motion:reduce){
  .portada-capa,.portada-punto::after{transition:none}
}

.portada-texto{padding:56px 24px;display:flex;flex-direction:column;justify-content:center;gap:18px}
@media(min-width:900px){.portada-texto{padding:64px 56px}}
.antetitulo{
  font-family:var(--titulo);font-size:12px;text-transform:uppercase;
  letter-spacing:3px;color:var(--azul);font-weight:600;
}
.portada h1{
  font-size:clamp(34px,6.5vw,60px);line-height:1.04;color:#fff;letter-spacing:.5px;
}
.portada p{color:#b5afa2;font-size:16px;line-height:1.65;max-width:46ch}
.portada-botones{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.portada-botones .btn{text-decoration:none}

/* --------------------------------- franja ------------------------------- */
.franja{
  background:var(--azul);color:var(--sobre-acento);
  display:flex;justify-content:center;gap:0;flex-wrap:wrap;
}
.franja div{padding:18px 26px;text-align:center}
.franja b{
  display:block;font-family:var(--titulo);font-size:30px;font-weight:700;line-height:1;
}
.franja span{
  font-family:var(--titulo);font-size:10.5px;text-transform:uppercase;
  letter-spacing:1.8px;opacity:.75;
}

/* -------------------------------- secciones ----------------------------- */
.seccion{padding:64px 20px;max-width:1160px;margin:0 auto}
.seccion.oscura{background:var(--carbon);max-width:none}
.seccion.oscura > *{max-width:1160px;margin-left:auto;margin-right:auto}
.seccion-cab{text-align:center;margin-bottom:40px}
.seccion-cab h2{font-size:clamp(26px,4.5vw,40px);margin:8px 0 12px;color:var(--texto)}
.seccion.oscura .seccion-cab h2{color:#fff}
.seccion-cab p{color:var(--texto2);max-width:56ch;margin:0 auto;line-height:1.65}

/* ----------------------------- transformaciones ------------------------- */
/* Las transformaciones van en un carril que se desliza de lado. Con pocas se
   ven todas de una; con muchas, se pasan con el dedo o con las flechas. */
.carril-envoltura{position:relative}
.transformaciones{
  display:flex;gap:20px;overflow-x:auto;padding:4px 4px 14px;
  /* Sin scroll-snap a propósito: cuando lo que sobra de ancho es menor que una
     tarjeta, el navegador clava el carril en un extremo y las flechas dejan de
     responder. Desplazamiento libre, que además se siente mejor con el dedo. */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--borde2) transparent;
}
.transformaciones::-webkit-scrollbar{height:7px}
.transformaciones::-webkit-scrollbar-thumb{background:var(--borde2);border-radius:99px}
.transformaciones::-webkit-scrollbar-track{background:transparent}
.transformaciones > .trans{
  flex:0 0 min(86vw,340px);
}
@media(min-width:1000px){.transformaciones > .trans{flex-basis:330px}}
.transformaciones > .sin-transformaciones{flex:1 1 100%}

.pista-carril{
  text-align:center;margin-top:6px;color:var(--texto3);font-size:12px;
  font-family:var(--titulo);text-transform:uppercase;letter-spacing:1.4px;
}
@media(min-width:1000px){.pista-carril{display:none}}

.flechas{display:none;justify-content:space-between;pointer-events:none}
.flechas button{
  position:absolute;top:38%;transform:translateY(-50%);pointer-events:auto;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:var(--carbon);color:var(--azul);border:1.5px solid var(--borde2);
  font-size:26px;line-height:1;display:grid;place-items:center;
  box-shadow:var(--sombra);transition:.15s;
}
.flechas button:hover:not(:disabled){background:var(--azul);color:var(--sobre-acento);border-color:var(--azul)}
.flechas button:disabled{opacity:.25;cursor:default}
.flechas .izq{left:-8px}
.flechas .der{right:-8px}
@media(max-width:760px){.flechas{display:none!important}}

.trans{
  background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sombra);
}
.trans-fotos{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--borde);position:relative}
.trans-fotos figure{margin:0;position:relative;background:var(--superficie2)}
.trans-fotos img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.trans-fotos .sin-img{width:100%;aspect-ratio:3/4;background:var(--superficie2)}

/* Foto que ya trae el antes y el después juntos: se muestra completa, sin
   recortar, porque el recorte se comería justo la comparación. */
.trans-unica{background:#0d0d0d;display:grid;place-items:center}
.trans-unica img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block}
.trans-fotos figcaption{
  position:absolute;top:10px;left:10px;background:rgba(0,0,0,.65);color:#fff;
  padding:3px 9px;border-radius:999px;font-family:var(--titulo);font-size:10px;
  text-transform:uppercase;letter-spacing:1.2px;
}
.trans-cuerpo{padding:16px}
.trans-cuerpo h3{font-size:17px;margin-bottom:4px}
.trans-meta{
  font-family:var(--titulo);font-size:11px;text-transform:uppercase;
  letter-spacing:1.2px;color:var(--azul);margin-bottom:8px;
}
.trans-cuerpo p{color:var(--texto2);font-size:13.5px;line-height:1.6}

.sin-transformaciones{
  grid-column:1/-1;text-align:center;padding:52px 24px;color:var(--texto3);
  border:2px dashed var(--borde2);border-radius:var(--r);
}

/* -------------------------------- servicios ----------------------------- */
.servicios{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:640px){.servicios{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.servicios{grid-template-columns:repeat(4,1fr)}}
.servicios article{
  background:var(--superficie2);border:1px solid var(--borde);
  border-radius:var(--r);padding:22px;
}
.servicios .ico{font-size:30px;display:block;margin-bottom:12px}
.servicios h3{font-size:16px;margin-bottom:8px;color:#fff}
.servicios p{color:var(--texto2);font-size:13.5px;line-height:1.6}

/* -------------------------------- contacto ------------------------------ */
.contacto-botones{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.contacto-botones a{text-decoration:none}

/* ---------------------------------- pie --------------------------------- */
.pie-sitio{
  background:var(--carbon);text-align:center;padding:40px 20px;
  border-top:1px solid rgba(255,255,255,.08);
}
.pie-sitio img{height:44px;width:auto;margin-bottom:14px}
.pie-sitio p{color:#7e7a72;font-size:13px;margin-bottom:14px}
.pie-sitio a{
  color:var(--azul);text-decoration:none;font-family:var(--titulo);
  font-size:12.5px;text-transform:uppercase;letter-spacing:1.4px;
}

/* ------------------------- Redes y botón de WhatsApp -------------------- */
.btn-wa{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:var(--azul);color:var(--sobre-acento);border:none;border-radius:var(--pill);
  padding:13px 24px;font-family:var(--titulo);font-size:14px;font-weight:600;
  text-transform:uppercase;letter-spacing:1.1px;transition:.15s;min-height:48px;
}
.btn-wa:hover{background:var(--azul-osc)}
.btn-wa svg{width:22px;height:22px;fill:currentColor;flex:0 0 auto}

.redes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:18px 0}

/* Instagram al final: solo el logo, sin texto */
.red-icono{
  display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:1.5px solid var(--borde2);color:var(--texto2);transition:.18s;text-decoration:none;
}
.red-icono svg{width:24px;height:24px;fill:currentColor}
.red-icono.ig:hover{
  color:#fff;border-color:transparent;
  background:var(--azul);
}
.red{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--superficie2);border:1.5px solid var(--borde);
  border-radius:var(--pill);padding:9px 18px;color:var(--texto2);
  font-size:13px;transition:.15s;
}
.red svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
.red.ig:hover{color:var(--azul);border-color:var(--azul)}
.red.wa:hover{color:var(--azul);border-color:var(--azul)}
.pie-sitio .red{background:transparent}

/* Burbuja flotante: siempre visible, sin tapar el contenido */
.burbuja-wa{
  position:fixed;right:16px;bottom:16px;z-index:60;
  width:58px;height:58px;border-radius:50%;background:var(--azul);
  display:grid;place-items:center;box-shadow:0 6px 22px rgba(0,0,0,.45);
  transition:.18s;
}
.burbuja-wa svg{width:32px;height:32px;fill:var(--sobre-acento)}
.burbuja-wa:hover{transform:scale(1.06);background:var(--azul-osc)}
@media(max-width:520px){
  .burbuja-wa{width:54px;height:54px;right:14px;bottom:14px}
  .burbuja-wa svg{width:29px;height:29px}
}

/* Enlace a la política de datos: discreto pero siempre alcanzable */
.pie-legal{margin-top:14px}
.pie-legal a{
  font-size:11.5px;letter-spacing:.4px;color:var(--texto3);
  text-decoration:underline;text-underline-offset:3px;
}
.pie-legal a:hover{color:var(--azul)}