/* =============================================================
   EL CLUB DE LA GRÚA — hoja de estilos principal
   Los colores/fuentes reales vienen de variables CSS que genera
   el panel (wp_head). Aquí solo se referencian: cambiar en el
   panel cambia todo el sitio.
   ============================================================= */

:root{
    --ecdlg-primario:#007BFF; --ecdlg-secundario:#BDBDBD; --ecdlg-oscuro:#10151C;
    --ecdlg-fuente-titulos:"Bebas Neue",sans-serif; --ecdlg-fuente-cuerpo:"Inter",sans-serif;
    --ecdlg-tam-titulos:44px; --ecdlg-tam-cuerpo:16px; --ecdlg-tam-botones:16px;
    --ecdlg-radio:14px; --ecdlg-sombra:0 14px 40px rgba(16,21,28,.14);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ecdlg-fuente-cuerpo);font-size:var(--ecdlg-tam-cuerpo);
     color:var(--ecdlg-oscuro);background:#F4F6F9;line-height:1.6}
img{max-width:100%;height:auto}
.contenedor{width:min(1180px,92%);margin-inline:auto}
.saltar-contenido{position:absolute;left:-9999px}

/* ------------------------- Botones ------------------------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--ecdlg-primario);
     color:#fff;border:2px solid var(--ecdlg-primario);padding:.7rem 1.4rem;border-radius:999px;
     font-weight:700;font-size:var(--ecdlg-tam-botones);text-decoration:none;cursor:pointer;
     transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(var(--ecdlg-primario-rgb),.35)}
.btn-grande{padding:1rem 2.2rem;font-size:calc(var(--ecdlg-tam-botones) + 2px)}
.btn-linea{background:#fff;color:var(--ecdlg-primario)}
.btn-fantasma{background:transparent;color:inherit;border-color:currentColor}
.btn-wsp{background:#17c35b;border-color:#17c35b}
.inline{display:inline}

/* ------------------------- Cabecera ------------------------ */
.ecdlg-cabecera{background:#fff;position:sticky;top:0;z-index:60;box-shadow:var(--ecdlg-sombra)}
.ecdlg-cabecera-int{display:flex;align-items:center;gap:1.5rem;padding:.8rem 0}
.ecdlg-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ecdlg-oscuro);
            font-family:var(--ecdlg-fuente-titulos);font-size:1.6rem;letter-spacing:.04em}
.ecdlg-logo em{color:var(--ecdlg-primario);font-style:normal}
.ecdlg-nav{margin-left:auto}
.ecdlg-nav ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0}
.ecdlg-nav a{color:var(--ecdlg-oscuro);text-decoration:none;font-weight:600}
.ecdlg-nav a:hover{color:var(--ecdlg-primario)}
.ecdlg-cabecera-acciones{display:flex;align-items:center;gap:.6rem}
.ecdlg-chip{background:var(--ecdlg-secundario);padding:.3rem .8rem;border-radius:999px;font-size:.85rem;font-weight:700}
.chip-pionero{background:var(--ecdlg-primario);color:#fff}
.ecdlg-hamburguesa{display:none;font-size:1.6rem;background:none;border:0;cursor:pointer}
/* Franja diagonal decorativa (colores de marca) */
.ecdlg-franja{height:8px;background:repeating-linear-gradient(-45deg,
    var(--ecdlg-primario) 0 18px, var(--ecdlg-secundario) 18px 36px)}

/* --------------------------- Hero --------------------------- */
.ecdlg-hero{position:relative;overflow:hidden;color:#fff;
    background:linear-gradient(135deg,var(--ecdlg-oscuro) 0%,#1c2b45 55%,var(--ecdlg-primario) 140%)}
.ecdlg-hero-fondo{position:absolute;inset:0;opacity:.16;
    background:repeating-linear-gradient(-45deg,transparent 0 46px,var(--ecdlg-secundario) 46px 92px);
    animation:ecdlg-deslizar 18s linear infinite}
@keyframes ecdlg-deslizar{to{background-position:512px 0}}
.ecdlg-hero-int{position:relative;padding:5.5rem 0 4.5rem}
.ecdlg-kicker{letter-spacing:.35em;font-weight:800;color:var(--ecdlg-secundario);margin:0 0 .6rem}
.ecdlg-hero h1{font-family:var(--ecdlg-fuente-titulos);font-size:clamp(2.6rem,7vw,var(--ecdlg-tam-titulos));
               line-height:1.02;margin:.2rem 0 1rem}
.ecdlg-resaltado{color:var(--ecdlg-primario);text-shadow:0 6px 30px rgba(var(--ecdlg-primario-rgb),.6)}
.ecdlg-sub{max-width:56ch;color:#dfe6f0}
.ecdlg-hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}
.ecdlg-pioneros-caja{display:inline-flex;gap:1rem;align-items:center;margin-top:2.2rem;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);
    padding:1rem 1.4rem;border-radius:var(--ecdlg-radio);max-width:60ch}
.ecdlg-pioneros-caja strong{font-family:var(--ecdlg-fuente-titulos);font-size:2.6rem;color:var(--ecdlg-primario)}

/* Cinta deslizante tipo marquee */
.ecdlg-cinta{background:var(--ecdlg-primario);color:#fff;overflow:hidden;font-family:var(--ecdlg-fuente-titulos);
             font-size:1.3rem;letter-spacing:.12em;padding:.5rem 0}
.ecdlg-cinta-pista{display:inline-flex;gap:1.2rem;white-space:nowrap;animation:ecdlg-marquee 26s linear infinite}
@keyframes ecdlg-marquee{to{transform:translateX(-50%)}}

/* ----------------------- Secciones ------------------------- */
section{padding:3.2rem 0}
.ecdlg-titulo-seccion{font-family:var(--ecdlg-fuente-titulos);font-size:calc(var(--ecdlg-tam-titulos)*.8);
    letter-spacing:.03em;margin:0 0 .4rem;position:relative;padding-left:1.1rem}
.ecdlg-titulo-seccion::before{content:"";position:absolute;left:0;top:.35em;bottom:.15em;width:.45rem;
    background:var(--ecdlg-primario);border-radius:4px}
.ecdlg-seccion-sub{color:#49566b;margin-top:0}

/* Carrusel de anuncios */
.ecdlg-carrusel{position:relative}
.ecdlg-carrusel-pista{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem 0 1rem}
.ecdlg-anuncio{flex:0 0 min(520px,86%);scroll-snap-align:start;background:#fff;border-radius:var(--ecdlg-radio);
    box-shadow:var(--ecdlg-sombra);overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.ecdlg-anuncio img{width:100%;height:220px;object-fit:cover;display:block}
.ecdlg-anuncio-texto{padding:1.2rem 1.4rem}
.ecdlg-carrusel-btn{position:absolute;top:40%;width:44px;height:44px;border-radius:50%;border:0;
    background:var(--ecdlg-primario);color:#fff;font-size:1.5rem;cursor:pointer;z-index:2}
.ecdlg-carrusel-btn.prev{left:-14px}.ecdlg-carrusel-btn.next{right:-14px}

/* Servicios */
.ecdlg-grid-servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.ecdlg-tarjeta-servicio{background:#fff;border-radius:var(--ecdlg-radio);padding:1.6rem;
    box-shadow:var(--ecdlg-sombra);transition:transform .2s ease, border-color .2s;
    border-top:6px solid var(--ecdlg-secundario)}
.ecdlg-tarjeta-servicio:hover{transform:translateY(-6px) rotate(-.5deg);border-top-color:var(--ecdlg-primario)}
.ecdlg-servicio-icono{margin-bottom:.6rem}
.ecdlg-precio{font-family:var(--ecdlg-fuente-titulos);font-size:1.9rem;color:var(--ecdlg-primario);margin:.4rem 0 0}
.ecdlg-gratis{background:var(--ecdlg-primario);color:#fff;padding:.15rem .6rem;border-radius:999px;font-size:1rem}

/* Videos */
.ecdlg-grid-videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.ecdlg-video-mini{position:relative;aspect-ratio:16/9;border-radius:var(--ecdlg-radio);border:0;cursor:pointer;
    background:linear-gradient(160deg,var(--ecdlg-oscuro),#23345a);color:#fff;
    display:flex;align-items:flex-end;padding:1rem;font-weight:700;transition:transform .2s}
.ecdlg-video-mini:hover{transform:scale(1.03)}
.ecdlg-play{position:absolute;inset:0;display:grid;place-items:center;font-size:2.4rem;
    color:var(--ecdlg-primario)}
.ecdlg-modal-video{width:min(880px,94vw);border:0;border-radius:var(--ecdlg-radio);padding:1rem}
.ecdlg-modal-video::backdrop{background:rgba(10,14,20,.8)}
.ecdlg-modal-marco{aspect-ratio:16/9}
.ecdlg-modal-marco iframe,.ecdlg-modal-marco video{width:100%;height:100%;border:0;border-radius:8px}
.ecdlg-cerrar{margin-bottom:.6rem;cursor:pointer}

/* Membresía */
.ecdlg-membresia{background:linear-gradient(120deg,var(--ecdlg-oscuro),#173b6e);color:#fff}
.ecdlg-precio-grande{font-family:var(--ecdlg-fuente-titulos);font-size:3.4rem;color:var(--ecdlg-primario)}
.ecdlg-precio-grande small{font-size:1.2rem;color:var(--ecdlg-secundario)}
.ecdlg-lista-beneficios{list-style:none;padding:0;display:grid;gap:.5rem;margin:1.2rem 0 1.6rem}

/* Pie */
.ecdlg-pie{background:var(--ecdlg-oscuro);color:#cfd6e0;margin-top:3rem}
.ecdlg-pie-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;padding:2.6rem 0}
.ecdlg-pie-marca{font-family:var(--ecdlg-fuente-titulos);font-size:1.2rem;letter-spacing:.06em}
.ecdlg-redes{display:flex;gap:1rem;align-items:center}
.ecdlg-redes a{transition:transform .15s}.ecdlg-redes a:hover{transform:scale(1.15)}
.ecdlg-pie-legal{text-align:center;border-top:1px solid #2a3442;padding:1rem;margin:0;font-size:.85rem}

/* WhatsApp flotante */
.ecdlg-wsp-flotante{position:fixed;right:18px;bottom:18px;z-index:80;width:60px;height:60px;border-radius:50%;
    background:#17c35b;display:grid;place-items:center;box-shadow:0 10px 30px rgba(23,195,91,.5);
    animation:ecdlg-latido 2.4s ease-in-out infinite}
@keyframes ecdlg-latido{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Formularios y páginas */
.ecdlg-pagina{padding:3rem 0}
.ecdlg-pagina-angosta{max-width:520px;margin-inline:auto}
.ecdlg-titulo-pagina{font-family:var(--ecdlg-fuente-titulos);font-size:calc(var(--ecdlg-tam-titulos)*.85)}
.ecdlg-form{background:#fff;padding:2rem;border-radius:var(--ecdlg-radio);box-shadow:var(--ecdlg-sombra)}
.ecdlg-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ecdlg-form label{display:grid;gap:.3rem;font-weight:600;font-size:.92rem}
.ecdlg-form input,.ecdlg-form select{padding:.75rem .9rem;border:2px solid var(--ecdlg-secundario);
    border-radius:10px;font:inherit;background:#fbfcfe}
.ecdlg-form input:focus,.ecdlg-form select:focus{outline:3px solid rgba(var(--ecdlg-primario-rgb),.35);
    border-color:var(--ecdlg-primario)}
.ecdlg-alerta{background:#fdecec;color:#b3261e;padding:.8rem 1rem;border-radius:10px;font-weight:600}
.ecdlg-exito{background:#e7f8ee;color:#0c7a3d;padding:.8rem 1rem;border-radius:10px;font-weight:600}
.ecdlg-nota{color:#5a6577;font-size:.86rem}

/* Mi cuenta */
.ecdlg-grid-cuenta{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.4rem}
.ecdlg-tarjeta{background:#fff;border-radius:var(--ecdlg-radio);padding:1.6rem;box-shadow:var(--ecdlg-sombra)}
.ecdlg-tarjeta-ancho{grid-column:1/-1}
.ecdlg-tarjeta h2{font-family:var(--ecdlg-fuente-titulos);margin-top:0}
.ecdlg-ok{color:#0c7a3d;font-weight:700}.ecdlg-pendiente{color:#b26a00;font-weight:700}
.ecdlg-fila-servicio{display:flex;align-items:center;gap:1rem;padding:.9rem 0;border-bottom:1px solid #edf0f4}
.ecdlg-fila-servicio div{flex:1;display:grid}
.ecdlg-fila-servicio small{color:#5a6577}

/* Tabla de precios (shortcode) */
.ecdlg-tabla-precios{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--ecdlg-radio);overflow:hidden}
.ecdlg-tabla-precios th,.ecdlg-tabla-precios td{padding:.8rem 1rem;border-bottom:1px solid #edf0f4;text-align:left}
.ecdlg-tabla-precios th{background:var(--ecdlg-primario);color:#fff}

/* Badge tienda WooCommerce */
.ecdlg-badge-tienda{display:inline-block;background:var(--ecdlg-primario);color:#fff;border-radius:999px;
    padding:.15rem .7rem;font-size:.8rem;font-weight:800;margin-bottom:.4rem}

/* Animación de aparición (reveal) */
.ecdlg-reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.ecdlg-reveal.ecdlg-visible{opacity:1;transform:none}

/* Responsive */
@media (max-width:860px){
    .ecdlg-nav{position:fixed;inset:64px 0 auto 0;background:#fff;box-shadow:var(--ecdlg-sombra);
        transform:translateY(-140%);transition:transform .25s;padding:1rem 5%}
    .ecdlg-nav.abierta{transform:none}
    .ecdlg-nav ul{flex-direction:column}
    .ecdlg-hamburguesa{display:block}
    .ecdlg-grid-cuenta,.ecdlg-grid-2{grid-template-columns:1fr}
}
/* ============ PANEL DE ESTADO DEL MIEMBRO ============ */
.ecdlg-estado-miembro{display:grid;gap:1.4rem}
.ecdlg-estado-cabecera{display:flex;align-items:center;gap:1.2rem;background:#fff;
    border-radius:var(--ecdlg-radio);padding:1.4rem 1.6rem;box-shadow:var(--ecdlg-sombra);
    border-left:6px solid var(--ecdlg-primario);flex-wrap:wrap}
.ecdlg-estado-avatar{width:64px;height:64px;border-radius:50%;background:rgba(var(--ecdlg-primario-rgb),.12);
    display:grid;place-items:center;flex-shrink:0}
.ecdlg-estado-info{flex:1;min-width:240px}
.ecdlg-estado-nombre{margin:0;font-family:var(--ecdlg-fuente-titulos);font-size:1.8rem;letter-spacing:.02em}
.ecdlg-estado-detalle{margin:.2rem 0 .6rem;color:#5a6577}
.ecdlg-placa{background:var(--ecdlg-secundario);padding:.1rem .5rem;border-radius:6px;
    font-family:monospace;letter-spacing:.08em}
.ecdlg-estado-etiquetas{display:flex;gap:.5rem;flex-wrap:wrap}
.ecdlg-etiqueta{font-size:.75rem;font-weight:800;padding:.25rem .7rem;border-radius:999px;letter-spacing:.04em}
.etiqueta-pionero{background:var(--ecdlg-primario);color:#fff}
.etiqueta-miembro{background:var(--ecdlg-secundario);color:var(--ecdlg-oscuro)}
.etiqueta-activa{background:#17c35b;color:#fff}
.etiqueta-inactiva{background:#f59e0b;color:#fff}

.ecdlg-estado-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem}
.ecdlg-tarjeta-estado{background:#fff;border-radius:var(--ecdlg-radio);padding:1.4rem;
    box-shadow:var(--ecdlg-sombra);display:flex;flex-direction:column;gap:.8rem}
.tarjeta-pionero{border:2px solid var(--ecdlg-primario);
    background:linear-gradient(160deg,#fff 60%,rgba(var(--ecdlg-primario-rgb),.06))}
.tarjeta-servicios,.tarjeta-historial,.tarjeta-accesos{grid-column:1/-1}
.ecdlg-tarjeta-titulo{margin:0;font-family:var(--ecdlg-fuente-titulos);font-size:1.3rem;
    display:flex;align-items:center;gap:.5rem;letter-spacing:.03em}
.ecdlg-estado-dato{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed #e2e7ee;
    padding:.45rem 0}
.ecdlg-dato-label{color:#5a6577;font-size:.9rem}
.ecdlg-dato-valor{font-weight:700}

/* Progreso de cupos pioneros */
.ecdlg-progreso-pionero{height:12px;border-radius:999px;background:#eef1f5;overflow:hidden}
.ecdlg-progreso-barra{height:100%;border-radius:999px;width:var(--progreso,0%);
    background:linear-gradient(90deg,var(--ecdlg-primario),var(--ecdlg-secundario));
    transition:width .8s ease}

/* Filas de servicios */
.ecdlg-servicio-fila{display:flex;align-items:center;gap:1rem;padding:.8rem 0;
    border-bottom:1px solid #edf0f4}
.ecdlg-servicio-fila:last-child{border-bottom:none}
.ecdlg-servicio-icono-mini{width:44px;height:44px;background:rgba(var(--ecdlg-primario-rgb),.08);
    border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.ecdlg-servicio-info{flex:1;display:grid;gap:.1rem}
.ecdlg-servicio-info small{color:#5a6577}
.btn-sm{padding:.45rem .9rem;font-size:.9rem}

/* Lista de vehículos */
.ecdlg-lista-vehiculos{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ecdlg-lista-vehiculos li{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;
    border:2px solid #e2e7ee;border-radius:12px;background:#fbfcfe}
.ecdlg-lista-vehiculos li.vehiculo-activo{border-color:var(--ecdlg-primario);
    background:rgba(var(--ecdlg-primario-rgb),.05)}
.ecdlg-vehiculo-info{flex:1}

/* Tabla de historial */
.ecdlg-tabla-historial{width:100%;border-collapse:collapse;font-size:.92rem}
.ecdlg-tabla-historial th,.ecdlg-tabla-historial td{padding:.55rem .7rem;text-align:left;
    border-bottom:1px solid #edf0f4}
.ecdlg-tabla-historial th{background:#f4f6f9;font-weight:700;color:#49566b}

/* Accesos rápidos */
.ecdlg-accesos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem}
.ecdlg-acceso{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;
    padding:1rem .8rem;border-radius:12px;background:#fbfcfe;border:2px solid #e2e7ee;
    text-decoration:none;color:var(--ecdlg-oscuro);font-weight:600;font-size:.9rem;
    transition:border-color .2s,transform .2s}
.ecdlg-acceso:hover{border-color:var(--ecdlg-primario);transform:translateY(-3px)}
.ecdlg-acceso span{line-height:1.3}

@media (max-width:640px){
    .ecdlg-estado-cabecera{flex-direction:column;align-items:flex-start}
    .ecdlg-estado-grid{grid-template-columns:1fr}
}