/* =============================================================================
   Diego Cleves Entretenimiento — la hoja única del sitio
   =============================================================================
   Noche de evento: fondos oscuros, el rojo del logo y el dorado de su estrella.
   La barra de arriba va en blanco porque el logo trae partes negras y se usa
   tal cual, sin retoques.

   Lo arma scripts/sitios/armar_diegocleves.py junto con las páginas.
   ========================================================================== */

@font-face{font-family:'Unbounded'; font-display:swap; font-weight:200 900; src:url('fuentes/Unbounded.woff') format('woff')}
@font-face{font-family:'Manrope'; font-display:swap; font-weight:200 800; src:url('fuentes/Manrope.woff') format('woff')}

:root{
  --negro:#0d0d12; --negro-2:#16161d; --negro-3:#20202a;
  --rojo:#e3261b; --rojo-osc:#b81a11; --oro:#f5b800;
  --blanco:#fff; --claro:#f6f4f1; --texto:#2a2a33; --suave:#b9b9c6; --linea:#e4e1dc;
  --titulo:'Unbounded','Arial Black',Arial,sans-serif;
  --letra:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --barra:86px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip}
body{margin:0; background:var(--negro); color:var(--texto); font-family:var(--letra); font-size:17px; line-height:1.7; overflow-x:hidden}
img,video{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--titulo); font-weight:700; line-height:1.12; margin:0; letter-spacing:-.02em}
p{margin:0}
p + p{margin-top:14px}
.in{max-width:1180px; margin:0 auto; padding:0 24px}
main{display:block; background:var(--blanco)}
section{padding:64px 0; position:relative}

/* Franjas */
.oscuro{background:var(--negro); color:#e9e9f0}
.oscuro-2{background:var(--negro-2); color:#e9e9f0}
.claro{background:var(--claro)}
.blanco{background:var(--blanco)}

/* Rótulo pequeño sobre cada título */
.kicker{display:flex; width:fit-content; align-items:center; gap:10px; margin:0 0 16px; font-family:var(--letra); font-size:13px;
        font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--rojo)}
.kicker::before{content:''; width:34px; height:2px; background:currentColor}
.oscuro .kicker,.oscuro-2 .kicker{color:var(--oro)}
.titulo{font-size:clamp(28px,3.6vw,46px); color:var(--negro); margin-bottom:22px}
.oscuro .titulo,.oscuro-2 .titulo{color:#fff}
.titulo em{font-style:normal; color:var(--rojo)}
.oscuro .titulo em,.oscuro-2 .titulo em{color:var(--oro)}
.centro{text-align:center}
.centro .kicker{justify-content:center; margin-left:auto; margin-right:auto}
.centro .kicker::after{content:''; width:34px; height:2px; background:currentColor}
.lead{font-size:19px; max-width:760px}
.centro .lead{margin-left:auto; margin-right:auto}
.oscuro .lead,.oscuro-2 .lead{color:var(--suave)}

/* Botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 30px; border-radius:999px;
     border:2px solid var(--rojo); background:var(--rojo); color:#fff; font-family:var(--letra); font-size:15px;
     font-weight:800; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; cursor:pointer;
     transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease}
.btn:hover,.btn:focus-visible{transform:translateY(-2px); box-shadow:0 10px 26px rgba(227,38,27,.45); background:var(--rojo-osc); border-color:var(--rojo-osc)}
.btn-linea{background:transparent; border-color:rgba(255,255,255,.75)}
.btn-linea:hover,.btn-linea:focus-visible{background:#fff; border-color:#fff; color:var(--negro); box-shadow:0 10px 26px rgba(0,0,0,.35)}
.btn-oscuro{background:var(--negro); border-color:var(--negro)}
.btn-oscuro:hover,.btn-oscuro:focus-visible{background:#000; border-color:#000; box-shadow:0 10px 26px rgba(0,0,0,.3)}
.btn[disabled]{opacity:.6; cursor:wait; transform:none}
.botones{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.centro .botones{justify-content:center}

/* ───────────────────────────── LA BARRA ───────────────────────────── */
.barra{position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--barra); background:rgba(255,255,255,.97);
       backdrop-filter:saturate(1.4) blur(8px); border-bottom:3px solid var(--rojo); transition:box-shadow .2s ease}
.barra.con-sombra{box-shadow:0 6px 24px rgba(0,0,0,.18)}
.barra .in{height:100%; display:flex; align-items:center; gap:20px; max-width:1240px}
.barra-logo{flex:0 0 auto; line-height:0}
.barra-logo img{height:68px; width:auto}
.menu{display:flex; flex:1; justify-content:flex-end; align-items:center; gap:4px}
.menu a{position:relative; padding:10px 15px; font-family:var(--letra); font-size:15px; font-weight:800; letter-spacing:.1em;
        text-transform:uppercase; color:var(--negro); text-decoration:none}
.menu a::after{content:''; position:absolute; left:15px; right:15px; bottom:4px; height:2px; background:var(--rojo);
               transform:scaleX(0); transform-origin:left; transition:transform .2s ease}
.menu a:hover::after,.menu a:focus-visible::after,.menu a.aqui::after{transform:scaleX(1)}
.menu a.aqui{color:var(--rojo)}
.menu a.menu-cta{margin-left:10px; padding:10px 22px; border-radius:999px; background:var(--rojo); color:#fff}
.menu a.menu-cta::after{display:none}
.menu a.menu-cta:hover,.menu a.menu-cta:focus-visible{background:var(--rojo-osc)}
.ham{display:none; margin-left:auto; width:46px; height:42px; padding:10px 9px; border:0; border-radius:6px; background:var(--negro); cursor:pointer}
.ham span{display:block; height:3px; margin:0 0 6px; border-radius:2px; background:#fff; transition:transform .2s ease, opacity .2s ease}
.ham span:last-child{margin:0}
.barra.abierta .ham span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.barra.abierta .ham span:nth-child(2){opacity:0}
.barra.abierta .ham span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ───────────────────────────── PORTADA ───────────────────────────── */
.hero{min-height:100vh; min-height:100svh; padding:calc(var(--barra) + 60px) 0 90px; display:flex; align-items:center;
      color:#fff; overflow:hidden; background:var(--negro)}
.hero-fotos{position:absolute; inset:0}
.hero-fotos span{position:absolute; inset:0; background:center / cover no-repeat; opacity:0; transform:scale(1.08);
                 transition:opacity 1.6s ease, transform 8s linear}
.hero-fotos span.activa{opacity:1; transform:scale(1)}
.hero::before{content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(13,13,18,.94) 0%, rgba(13,13,18,.72) 45%, rgba(13,13,18,.25) 100%),
             linear-gradient(0deg, rgba(13,13,18,.9) 0%, rgba(13,13,18,0) 35%)}
.hero .in{position:relative; z-index:2; width:100%}
.hero h1{font-size:clamp(38px,6.4vw,86px); line-height:1.02; max-width:960px; letter-spacing:-.03em; font-weight:800}
.hero h1 em{font-style:normal; color:var(--rojo); display:block}
.hero .lead{margin-top:24px; font-size:clamp(17px,1.6vw,21px); color:#e3e3ea; max-width:640px}
.hero-puntos{position:absolute; z-index:2; left:50%; bottom:28px; transform:translateX(-50%); display:flex; gap:10px}
.hero-puntos button{width:34px; height:4px; padding:0; border:0; border-radius:2px; background:rgba(255,255,255,.35); cursor:pointer}
.hero-puntos button.activa{background:var(--oro)}

/* La cinta de servicios que pasa sola */
.cinta{background:var(--rojo); color:#fff; overflow:hidden; padding:16px 0; border-top:3px solid var(--oro)}
.cinta-pista{display:flex; width:max-content; animation:cinta 38s linear infinite}
.cinta span{display:inline-flex; align-items:center; gap:26px; padding-right:26px; font-family:var(--titulo); font-size:18px;
            font-weight:600; letter-spacing:.02em; white-space:nowrap}
.cinta span::after{content:'★'; color:var(--oro); font-size:16px}
@keyframes cinta{to{transform:translateX(-50%)}}

/* ───────────────────────────── VIDEO ───────────────────────────── */
.dos{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.dos-ancho{grid-template-columns:5fr 6fr}
.video{position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000;
       box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06)}
.video video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* El de 2012 se muestra en su propia proporción: sin franjas negras. */
.video-nativo{aspect-ratio:640/444; max-width:640px; margin:0 auto}
.galeria-sep{margin-top:70px}
.sonido{position:absolute; right:14px; bottom:14px; width:48px; height:48px; padding:0; display:flex; align-items:center;
        justify-content:center; border:0; border-radius:50%; background:rgba(0,0,0,.6); cursor:pointer; transition:background .15s ease}
.sonido:hover,.sonido:focus-visible{background:var(--rojo)}
.sonido svg{width:24px; height:24px; fill:#fff}
.sonido svg[hidden]{display:none}
.video-pie{margin-top:14px; font-size:14px; color:var(--suave); text-align:center}
.cifras{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px}
.cifra{padding:18px 16px; border-radius:12px; background:var(--negro-3); border-left:3px solid var(--oro)}
.cifra b{display:block; font-family:var(--titulo); font-size:26px; font-weight:700; color:#fff; line-height:1.1}
.cifra span{display:block; margin-top:4px; font-size:14px; line-height:1.4; color:var(--suave)}

/* ───────────────────────────── SERVICIOS ───────────────────────────── */
.tarjetas{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px}
.tarjeta{position:relative; padding:34px 28px 30px; border-radius:16px; background:#fff; border:1px solid var(--linea);
         box-shadow:0 10px 30px rgba(13,13,18,.06); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; overflow:hidden}
.tarjeta::before{content:''; position:absolute; left:0; top:0; right:0; height:4px; background:linear-gradient(90deg,var(--rojo),var(--oro));
                 transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.tarjeta:hover{transform:translateY(-6px); box-shadow:0 22px 44px rgba(13,13,18,.14); border-color:transparent}
.tarjeta:hover::before{transform:scaleX(1)}
.tarjeta .icono{width:58px; height:58px; border-radius:14px; display:flex; align-items:center; justify-content:center;
                background:rgba(227,38,27,.09); margin-bottom:20px}
.tarjeta .icono svg{width:30px; height:30px; fill:none; stroke:var(--rojo); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tarjeta h3{font-size:19px; color:var(--negro); margin-bottom:10px}
.tarjeta p{font-size:16px; line-height:1.65; color:#55555f}

/* Servicios, página: cada uno con su foto */
.servicio{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.servicio + .servicio{margin-top:64px}
.servicio:nth-child(even) .servicio-foto{order:2}
.servicio-foto{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:#222 center / cover no-repeat;
               box-shadow:0 24px 50px rgba(13,13,18,.22)}
.servicio-foto::after{content:''; position:absolute; inset:auto 0 0 0; height:6px; background:linear-gradient(90deg,var(--rojo),var(--oro))}
/* Una foto vertical se muestra en su proporción: recortada a lo ancho perdería la escena. */
.servicio-foto-alta{aspect-ratio:3/4; max-width:420px; width:100%; justify-self:center}
.servicio .num{font-family:var(--titulo); font-size:60px; font-weight:800; line-height:1; color:transparent;
               -webkit-text-stroke:1.5px var(--rojo); margin-bottom:8px}
.servicio h2{font-size:clamp(24px,2.8vw,34px); color:var(--negro); margin-bottom:16px}
.servicio ul{margin:18px 0 0; padding:0; list-style:none}
.servicio li{position:relative; padding-left:28px; margin-top:8px}
.servicio li::before{content:'★'; position:absolute; left:0; top:0; color:var(--oro)}

/* Los pasos */
.pasos{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:48px; counter-reset:paso}
.paso{position:relative; padding:30px 24px 26px; border-radius:16px; background:var(--negro-3); border:1px solid rgba(255,255,255,.06)}
.paso::before{counter-increment:paso; content:'0' counter(paso); display:block; font-family:var(--titulo); font-size:40px; font-weight:800;
              line-height:1; color:var(--oro); margin-bottom:16px}
.paso h3{font-size:18px; color:#fff; margin-bottom:8px}
.paso p{font-size:15.5px; line-height:1.6; color:var(--suave)}

/* ───────────────────────────── GALERÍA ───────────────────────────── */
.mosaico{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; grid-auto-flow:dense; gap:12px; margin-top:36px}
.mosaico a:nth-child(1){grid-column:span 2; grid-row:span 2}
.mosaico a:nth-child(4){grid-row:span 2}
.foto{position:relative; display:block; overflow:hidden; border-radius:12px; background:#1d1d25; cursor:zoom-in}
.foto img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .3s ease}
.foto::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(227,38,27,.55), rgba(227,38,27,0) 55%);
             opacity:0; transition:opacity .3s ease}
a.foto:hover img,a.foto:focus-visible img{transform:scale(1.07)}
a.foto:hover::after,a.foto:focus-visible::after{opacity:1}
/* La que no se agranda: sin lupa ni efecto. */
.foto-fija{cursor:default}
.galeria{columns:3 300px; column-gap:14px; margin-top:44px}
.galeria .foto{margin:0 0 14px; break-inside:avoid}
.galeria .foto img{height:auto}

/* El visor */
.visor{position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center;
       background:rgba(8,8,11,.95); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease}
.visor.abierto{opacity:1; visibility:visible}
.visor img{max-width:92vw; max-height:84vh; width:auto; height:auto; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.visor button{position:absolute; width:52px; height:52px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.1);
              color:#fff; font-size:28px; line-height:52px; cursor:pointer; transition:background .15s ease}
.visor button:hover,.visor button:focus-visible{background:var(--rojo)}
.visor-cerrar{top:18px; right:18px}
.visor-ant{left:18px; top:50%; transform:translateY(-50%)}
.visor-sig{right:18px; top:50%; transform:translateY(-50%)}
.con-visor .sg-flotante{display:none}
.visor-cuenta{position:absolute; bottom:20px; left:0; right:0; text-align:center; color:var(--suave); font-size:14px; letter-spacing:.1em}

/* ───────────────────────── PATROCINADORES Y AGENDA ───────────────────────── */
.logos{display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin-top:40px}
.logo-pat{display:block; width:190px; height:120px; padding:18px; border-radius:14px; background:#fff center / contain no-repeat;
          background-origin:content-box; border:1px solid var(--linea); box-shadow:0 6px 18px rgba(13,13,18,.06);
          filter:grayscale(.15); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease}
.logo-pat:hover,.logo-pat:focus-visible{transform:translateY(-4px); box-shadow:0 16px 30px rgba(13,13,18,.14); filter:none}
.agenda{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 330px)); justify-content:center; gap:26px; margin-top:44px}
.evento{position:relative; display:flex; flex-direction:column; border-radius:16px; overflow:hidden; background:var(--negro-3);
        color:#fff; text-decoration:none; box-shadow:0 18px 40px rgba(0,0,0,.4); transition:transform .2s ease, box-shadow .2s ease}
a.evento:hover,a.evento:focus-visible{transform:translateY(-6px); box-shadow:0 26px 50px rgba(0,0,0,.55)}
.evento-foto{display:block; aspect-ratio:4/5; background:#2a2a33 center / cover no-repeat}
.evento-fecha{position:absolute; top:14px; left:14px; padding:6px 12px; border-radius:8px; background:var(--rojo);
              font-family:var(--letra); font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.evento-datos{padding:18px 20px 22px}
.evento-nombre{display:block; font-family:var(--titulo); font-size:19px; font-weight:700; line-height:1.2}
.evento-lugar{display:flex; align-items:center; gap:6px; margin-top:8px; font-size:15px; color:var(--suave)}
.evento-lugar::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--oro)}

/* Llamado final */
.llamado{background:linear-gradient(120deg, var(--rojo-osc), var(--rojo) 55%, #f04a23); color:#fff; padding:48px 0; overflow:hidden}
.llamado::before{content:'★'; position:absolute; right:-40px; top:50%; transform:translateY(-50%) rotate(12deg); font-size:380px;
                 line-height:1; color:rgba(255,255,255,.08)}
.llamado .in{position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px}
.llamado h2{font-size:clamp(26px,3.4vw,40px)}
.llamado p{margin-top:8px; font-size:18px; color:rgba(255,255,255,.88)}
.llamado .btn{background:#fff; border-color:#fff; color:var(--rojo)}
.llamado .btn:hover,.llamado .btn:focus-visible{background:var(--negro); border-color:var(--negro); color:#fff; box-shadow:0 10px 26px rgba(0,0,0,.35)}

/* ───────────────────────── CABECERA DE PÁGINA ───────────────────────── */
.cabeza{padding:calc(var(--barra) + 90px) 0 90px; color:#fff; background:var(--negro) center / cover no-repeat; overflow:hidden}
.cabeza::before{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,13,18,.92), rgba(13,13,18,.55))}
.cabeza .in{position:relative}
.cabeza h1{font-size:clamp(36px,5.6vw,68px); font-weight:800}
.cabeza .lead{margin-top:14px; color:#dedee6}
.cabeza .kicker{color:var(--oro)}
.cabeza-nota{margin-top:12px; max-width:760px; font-size:15px; color:#b9b9c4}

/* Lo que nos distingue */
.rasgos{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px}
.rasgo{display:flex; gap:18px; padding:26px; border-radius:14px; background:#fff; border:1px solid var(--linea)}
.rasgo i{flex:0 0 46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--negro);
         color:var(--oro); font-style:normal; font-size:20px}
.rasgo h3{font-size:17px; color:var(--negro); margin-bottom:6px}
.rasgo p{font-size:15.5px; line-height:1.6; color:#55555f}
.foto-grande{border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:#222 center / cover no-repeat; box-shadow:0 24px 50px rgba(13,13,18,.25)}

/* ───────────────────────────── CONTACTO ───────────────────────────── */
/* Solo el formulario: el WhatsApp y la dirección ya están en el pie. */
.contacto{max-width:880px}
.forma{background:#fff; border-radius:18px; padding:38px 38px 32px; box-shadow:0 18px 50px rgba(13,13,18,.1); border-top:5px solid var(--rojo)}
.forma h2{font-size:26px; color:var(--negro); margin-bottom:8px}
.forma > p{color:#55555f; margin-bottom:24px}
.fila{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.forma label{display:block; margin:0 0 16px; font-size:15px; font-weight:600; color:var(--negro)}
.opc{font-weight:400; color:#8a8a95}
.forma input[type=text],.forma input[type=email],.forma input[type=tel],.forma select,.forma textarea{
  display:block; width:100%; margin-top:6px; padding:12px 14px; border:1px solid #d8d4cd; border-radius:10px; background:#fff;
  font:16px/1.5 var(--letra); color:#111; outline:none; transition:border-color .15s ease, box-shadow .15s ease}
.forma textarea{min-height:140px; resize:vertical}
.forma input:focus,.forma select:focus,.forma textarea:focus{border-color:var(--rojo); box-shadow:0 0 0 3px rgba(227,38,27,.18)}
.forma .mal{border-color:#c62828}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.autoriza{margin:4px 0 8px; padding:16px 18px; border-radius:10px; background:var(--claro); text-align:center}
.autoriza p{margin:0 0 12px; font-size:14px; line-height:1.6; color:#3b3b44; text-align:justify}
.autoriza a{color:var(--rojo)}
.forma .casilla{display:flex; justify-content:center; align-items:center; gap:8px; margin:0; cursor:pointer}
.casilla input{width:18px; height:18px; margin:0; accent-color:var(--rojo)}
.estado{min-height:1.4em; margin:10px 0 0; font-size:16px; color:#c62828; text-align:center}
.accion{margin-top:12px; text-align:center}
.lado{border-radius:18px; padding:34px 30px; background:var(--negro); color:#e9e9f0; position:sticky; top:calc(var(--barra) + 24px)}
.lado h3{font-size:20px; color:#fff; margin-bottom:18px}
.dato{display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; color:var(--suave); text-decoration:none; font-size:16px; line-height:1.5}
a.dato:hover{color:#fff}
.dato svg{flex:0 0 22px; width:22px; height:22px; fill:var(--oro); margin-top:2px}
.dato b{display:block; color:#fff; font-weight:600}

/* Documentos legales y gracias */
.legal{max-width:900px; margin:0 auto; padding:calc(var(--barra) + 50px) 24px 70px; overflow-wrap:anywhere; background:#fff}
.gracias{padding:calc(var(--barra) + 110px) 0 120px; text-align:center}
.gracias .titulo{margin-bottom:14px}

/* ───────────────────────────── EL PIE ───────────────────────────── */
.pie{background:var(--negro); color:var(--suave); border-top:4px solid var(--rojo)}
/* Tres bloques centrados a lo alto, como el pie de Weekend: el espacio que
   sobra se reparte por igual entre los dos huecos. Para que el hueco que se ve
   sea el mismo, el logo mide lo que su frase: así el borde del bloque es el
   borde del logo. */
.pie-cols{display:flex; justify-content:space-between; align-items:center; gap:40px; padding:56px 24px 50px}
.pie-marca-bloque{width:280px; flex:0 0 280px}
.pie-logo{display:block; padding:12px 16px; border-radius:12px; background:#fff; line-height:0}
.pie-logo img{width:100%; height:auto}
.pie-lema{margin-top:16px; font-size:14.5px; line-height:1.6}
.pie h4{margin:0 0 16px; font-family:var(--letra); font-weight:800; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--oro)}
/* El contacto, centrado: el WhatsApp y la dirección uno al lado del otro, y
   el botón del mapa debajo, en el centro. */
.pie-contacto{text-align:center}
.pie-datos{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 40px; text-align:left}
.pie .dato{font-size:15px; margin-bottom:12px}
.pie-mapa{display:inline-block; margin-top:4px; padding:7px 18px; border-radius:999px; border:1.5px solid var(--oro); color:var(--oro);
          text-decoration:none; font-size:14px}
.pie-mapa:hover{background:var(--oro); color:var(--negro)}
.pie-explore{text-align:center}
.pie-menu{list-style:none; margin:0; padding:0}
.pie-menu a{display:inline-block; padding:3px 0; color:var(--suave); text-decoration:none; font-size:15px}
.pie-menu a:hover{color:#fff}
.pie-base{background:#08080b}
.pie-base .in{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 24px; padding:16px 24px; font-size:13.5px}
.pie-legal a{color:var(--suave); text-decoration:none; white-space:nowrap}
.pie-legal a:hover{color:#fff; text-decoration:underline}
.pie-legal span{margin:0 4px}
.pie-legal a.sic{font-weight:700; white-space:normal}
/* A la derecha queda el botón de WhatsApp: la marca se corre para que no la tape. */
.pie-marca{margin-right:250px}

/* Entrada suave al bajar */
.aparece{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.aparece.visto{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .aparece{opacity:1; transform:none}
  .cinta-pista{animation:none}
  .hero-fotos span{transition:opacity .6s ease}
}

/* ───────────────────────────── TABLETA ───────────────────────────── */
@media (max-width:980px){
  :root{--barra:68px}
  section{padding:54px 0}
  .barra-logo img{height:48px}
  .ham{display:block}
  .menu{display:none; position:absolute; top:calc(var(--barra) - 3px); left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
        padding:10px 0 18px; background:#fff; box-shadow:0 18px 30px rgba(0,0,0,.18)}
  .barra.abierta .menu{display:flex}
  .menu a{padding:14px 26px; font-size:16px}
  .menu a::after{display:none}
  .menu a.menu-cta{margin:10px 24px 0; text-align:center}
  .dos,.dos-ancho,.servicio{grid-template-columns:1fr; gap:36px}
  .servicio:nth-child(even) .servicio-foto{order:0}
  .tarjetas{grid-template-columns:repeat(2,1fr)}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .mosaico{grid-template-columns:repeat(2,1fr); grid-auto-rows:200px}
  .mosaico a:nth-child(4){grid-row:span 1}
  .mosaico a:nth-child(n+8){display:none}
  /* Tableta: la marca y el menú arriba; el contacto debajo, a todo lo ancho. */
  .pie-cols{flex-wrap:wrap; gap:36px 32px; padding:44px 24px 40px}
  .pie-contacto{flex:0 0 100%; order:3}
  .pie-marca{margin-right:0}
  .foto-grande{max-width:620px; margin:0 auto}
}

/* ───────────────────────────── CELULAR ───────────────────────────── */
@media (max-width:640px){
  body{font-size:16px}
  .in{padding:0 16px}
  section{padding:44px 0}
  .hero{padding-bottom:80px}
  .botones .btn{flex:1 1 100%}
  .cifras{grid-template-columns:1fr}
  .tarjetas,.pasos,.rasgos{grid-template-columns:1fr}
  .mosaico{grid-auto-rows:150px; gap:8px}
  .galeria{columns:2 140px; column-gap:8px}
  .galeria .foto{margin-bottom:8px}
  .logos{gap:12px}
  .logo-pat{width:calc(50% - 6px); height:100px; padding:12px}
  .fila{grid-template-columns:1fr; gap:0}
  .forma{padding:26px 18px 22px}
  .autoriza p{text-align:left}
  /* Celular: una columna, a la izquierda. */
  .pie-cols{flex-direction:column; align-items:flex-start; gap:30px; padding:40px 16px 34px}
  .pie-contacto,.pie-explore{flex:none; order:0; text-align:left}
  .pie-marca-bloque{width:240px; flex:none}
  .pie-datos{display:block}
  .pie-base .in{padding-bottom:90px}
  .visor-ant,.visor-sig{top:auto; bottom:14px; transform:none}
  .visor-cuenta{bottom:30px}
  .llamado::before{font-size:240px}
}