/* =====================================================================
   ESTILOS — Perfil de Conchi Portillo · Estética "cultura del vino"
   Los colores y tipografías se inyectan como variables desde index.php
   (editables desde el panel). Aquí definimos valores de reserva.
   ===================================================================== */

:root{
    --vino:#6E1423; --oro:#C8A24B; --crema:#F7F3EC; --oliva:#7A7A52; --texto:#221A1C;
    --fuente-titulos:'Playfair Display',serif;
    --fuente-cuerpo:'Inter',sans-serif;
    --blanco:#FFFFFF;
    --gris-suave:#EDE6DA;
    --sombra:0 10px 40px rgba(34,26,28,.08);
    --sombra-fuerte:0 20px 60px rgba(110,20,35,.18);
    --radio:14px;
    --ancho:1120px;
    --trans:.35s cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET BÁSICO ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:var(--fuente-cuerpo);
    color:var(--texto);
    background:var(--crema);
    line-height:1.7;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--enlace,var(--vino));text-decoration:none;transition:color var(--trans)}
a:hover{color:var(--oro)}
h1,h2,h3,h4{font-family:var(--fuente-titulos);font-weight:600;line-height:1.2;color:var(--titulos,var(--texto))}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px}

/* ---------- BOTONES ---------- */
.btn{
    display:inline-block;padding:14px 30px;border-radius:50px;
    font-weight:600;font-size:.95rem;letter-spacing:.3px;cursor:pointer;
    border:1.5px solid transparent;transition:all var(--trans);
    font-family:var(--fuente-cuerpo);
}
.btn-primario{background:var(--boton-fondo,var(--vino));color:var(--boton-texto,#fff);box-shadow:0 8px 24px rgba(110,20,35,.28)}
.btn-primario:hover{background:#57101c;color:#fff;transform:translateY(-2px);box-shadow:var(--sombra-fuerte)}
.btn-secundario{background:transparent;color:var(--vino);border-color:var(--vino)}
.btn-secundario:hover{background:var(--vino);color:#fff}

/* ---------- NAVEGACIÓN ---------- */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(247,243,236,.85);backdrop-filter:blur(10px);
    border-bottom:1px solid transparent;transition:all var(--trans);
}
.nav.scrolled{border-bottom-color:var(--gris-suave);box-shadow:0 4px 20px rgba(34,26,28,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.nav-logo{font-family:var(--fuente-titulos);font-weight:700;font-size:1.25rem;color:var(--texto);display:flex;align-items:center;gap:8px}
.nav-logo-icono{font-size:1.4rem}
.nav-logo-img{height:40px;width:auto}
.nav-links{display:flex;gap:28px}
.nav-links a{color:var(--texto);font-size:.9rem;font-weight:500;position:relative;padding:4px 0}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--oro);transition:width var(--trans)}
.nav-links a:hover{color:var(--vino)}
.nav-links a:hover::after{width:100%}
.nav-toggle{display:none;background:none;border:none;font-size:1.5rem;color:var(--vino);cursor:pointer}

/* ---------- HERO ---------- */
.hero{
    position:relative;min-height:100vh;display:flex;align-items:center;
    text-align:center;color:var(--texto);padding:120px 0 80px;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,12,.55),rgba(20,10,12,.75))}
.hero:has(.hero-bg){color:#fff}
.hero:has(.hero-bg) .hero-titulo,.hero:has(.hero-bg) .hero-frase{color:#fff}
.hero-inner{position:relative;z-index:1;max-width:820px;margin:0 auto}
.hero-foto{
    width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto 28px;
    border:4px solid var(--oro);box-shadow:var(--sombra-fuerte);
}
.hero-eyebrow{color:var(--oro);font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:.85rem;margin-bottom:18px}
.hero-titulo{font-size:clamp(2.6rem,6vw,4.6rem);margin-bottom:20px}
.hero-frase{font-size:clamp(1.05rem,2.2vw,1.4rem);font-weight:300;max-width:640px;margin:0 auto 36px;opacity:.95}
.hero-botones{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---------- SECCIONES GENERALES ---------- */
.seccion{padding:90px 0;position:relative}
.seccion:nth-child(even){background:var(--blanco)}
.seccion-cabecera{text-align:center;max-width:680px;margin:0 auto 56px}
.seccion-eyebrow{color:var(--oro);font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:.8rem;margin-bottom:12px}
.seccion-titulo{font-size:clamp(1.9rem,4vw,2.8rem);position:relative;display:inline-block;padding-bottom:16px}
.seccion-titulo::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:60px;height:3px;background:var(--oro);border-radius:2px}

/* ---------- TEXTO ---------- */
.bloque-texto{max-width:760px;margin:0 auto;font-size:1.08rem}
.bloque-texto h3{margin:24px 0 12px;color:var(--vino)}
.bloque-texto p{margin-bottom:18px}

/* ---------- TIMELINE (experiencia) ---------- */
.timeline{max-width:760px;margin:0 auto;position:relative;padding-left:36px}
.timeline::before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--oro),var(--gris-suave))}
.timeline-item{position:relative;margin-bottom:38px}
.timeline-punto{position:absolute;left:-32px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--vino);border:3px solid var(--crema);box-shadow:0 0 0 2px var(--oro)}
.timeline-periodo{display:inline-block;background:var(--gris-suave);color:var(--oliva);font-size:.78rem;font-weight:600;padding:3px 12px;border-radius:20px;margin-bottom:8px}
.timeline-cont h3{font-size:1.25rem}
.timeline-empresa{color:var(--oro);font-weight:600;margin-bottom:8px}

/* ---------- TARJETAS ---------- */
.grid-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.tarjeta{background:var(--blanco);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);transition:transform var(--trans),box-shadow var(--trans);border:1px solid var(--gris-suave)}
.tarjeta:hover{transform:translateY(-6px);box-shadow:var(--sombra-fuerte)}
.tarjeta-img{height:190px;background-size:cover;background-position:center;background-color:var(--gris-suave)}
.tarjeta-cuerpo{padding:24px}
.tarjeta-cuerpo h3{font-size:1.2rem;margin-bottom:6px}
.tarjeta-sub{color:var(--oro);font-weight:600;font-size:.85rem;margin-bottom:10px}
.tarjeta-enlace{display:inline-block;margin-top:12px;font-weight:600}

/* ---------- SERVICIOS ---------- */
.grid-servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.servicio{background:var(--crema);border:1px solid var(--gris-suave);border-radius:var(--radio);padding:34px 28px;text-align:center;transition:all var(--trans)}
.seccion:nth-child(even) .servicio{background:var(--crema)}
.servicio:hover{border-color:var(--oro);transform:translateY(-4px);box-shadow:var(--sombra)}
.servicio-icono{font-size:2.6rem;margin-bottom:16px}
.servicio h3{font-size:1.2rem;margin-bottom:10px;color:var(--vino)}

/* ---------- FORMACIÓN ---------- */
.lista-formacion{max-width:720px;margin:0 auto}
.formacion-item{display:flex;gap:22px;padding:20px 0;border-bottom:1px solid var(--gris-suave)}
.formacion-item:last-child{border-bottom:none}
.formacion-anio{flex:0 0 70px;font-family:var(--fuente-titulos);font-weight:700;color:var(--oro);font-size:1.3rem}
.formacion-info h3{font-size:1.15rem}
.formacion-info>p{color:var(--oliva);font-weight:500}
.formacion-desc{font-size:.95rem;margin-top:6px;color:var(--texto)}

/* ---------- SKILLS ---------- */
.lista-skills{max-width:720px;margin:0 auto;display:grid;gap:22px}
.skill-cab{display:flex;justify-content:space-between;font-weight:600;margin-bottom:8px;font-size:.95rem}
.skill-barra{height:9px;background:var(--gris-suave);border-radius:10px;overflow:hidden}
.skill-relleno{height:100%;width:0;background:linear-gradient(90deg,var(--vino),var(--oro));border-radius:10px;transition:width 1.2s ease}
.skill-relleno.animado{width:var(--nivel)}

/* ---------- IDIOMAS ---------- */
.grid-idiomas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;max-width:760px;margin:0 auto}
.idioma{background:var(--blanco);border:1px solid var(--gris-suave);border-radius:var(--radio);padding:20px 24px;display:flex;justify-content:space-between;align-items:center}
.idioma-nombre{font-weight:600;display:flex;align-items:center;gap:6px}
.idioma-bandera{font-size:1.3rem;line-height:1}
.idioma-nivel{color:var(--oro);font-weight:600;font-size:.88rem}

/* ---------- TESTIMONIOS ---------- */
.grid-testimonios{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}
.testimonio{background:var(--blanco);border-radius:var(--radio);padding:34px 30px;box-shadow:var(--sombra);position:relative;border-top:3px solid var(--oro)}
.testimonio blockquote{font-style:italic;font-size:1.05rem;margin-bottom:18px;position:relative}
.testimonio blockquote::before{content:'“';font-family:var(--fuente-titulos);font-size:3rem;color:var(--oro);opacity:.4;position:absolute;left:-8px;top:-24px}
.testimonio figcaption{display:flex;align-items:center;gap:12px}
.testimonio-foto{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--oro);flex:0 0 auto}
.testimonio-datos{display:flex;flex-direction:column}
.testimonio figcaption strong{color:var(--vino)}
.testimonio figcaption span{font-size:.85rem;color:var(--oliva)}

/* ---------- GALERÍA ---------- */
.grid-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.grid-galeria img{border-radius:10px;height:220px;width:100%;object-fit:cover;transition:transform var(--trans)}
.grid-galeria img:hover{transform:scale(1.03)}

/* ---------- CONTACTO ---------- */
.contacto-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;max-width:960px;margin:0 auto;align-items:start}
.contacto-info{font-size:1.05rem}
.contacto-info p{margin-top:14px}
.contacto-form{background:var(--blanco);padding:32px;border-radius:var(--radio);box-shadow:var(--sombra);border:1px solid var(--gris-suave)}
.campo{margin-bottom:18px}
.campo label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
.campo input,.campo textarea{
    width:100%;padding:13px 15px;border:1.5px solid var(--gris-suave);border-radius:10px;
    font-family:var(--fuente-cuerpo);font-size:.95rem;background:var(--crema);transition:border var(--trans);
}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--oro);background:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- PIE ---------- */
.pie{background:var(--pie-fondo,#2A1418);color:var(--pie-texto,#e8ddd8);padding:44px 0}
.pie-inner{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.pie-marca{font-family:var(--fuente-titulos);font-size:1.3rem;display:flex;align-items:center;gap:8px}
.pie-redes{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.pie-redes a{color:var(--oro);font-weight:500}
.pie-redes a:hover{color:#fff}
.pie-legal{font-size:.82rem;opacity:.7}

/* ---------- AVISO (toast) ---------- */
.toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);
    background:var(--vino);color:#fff;padding:15px 26px;border-radius:50px;
    box-shadow:var(--sombra-fuerte);z-index:200;font-weight:500;transition:transform .45s ease;max-width:90%;
}
.toast.error{background:#8a1c1c}
.toast.visible{transform:translateX(-50%) translateY(0)}

/* ---------- BOTONES FLOTANTES (WhatsApp / Calendly) ---------- */
.flot-whatsapp{position:fixed;right:20px;bottom:20px;z-index:250;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.28);transition:transform .3s}
.flot-whatsapp:hover{transform:scale(1.08);color:#fff}
.flot-calendly{position:fixed;left:20px;bottom:20px;z-index:250;background:var(--vino);color:#fff;padding:12px 20px;border-radius:50px;font-weight:600;font-size:.9rem;box-shadow:0 6px 20px rgba(110,20,35,.3);transition:transform .3s}
.flot-calendly:hover{transform:translateY(-2px);color:#fff}
@media(max-width:600px){.flot-calendly{padding:10px 15px;font-size:.8rem}}

/* ---------- AVISO DE COOKIES ---------- */
.cookie-aviso{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:260;background:#2A1418;color:#fff;padding:14px 20px;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.3);display:flex;align-items:center;gap:16px;max-width:92%;font-size:.88rem;flex-wrap:wrap;justify-content:center}
.cookie-aviso[hidden]{display:none}   /* respeta el atributo hidden (si no, display:flex lo mostraría siempre) */
.cookie-aviso a{color:var(--oro)}
.cookie-aviso .btn{padding:8px 18px;font-size:.85rem}

/* ---------- WIDGET TRADUCTOR ---------- */
.traductor-widget{position:fixed;top:80px;right:14px;z-index:240}

/* ---------- CASOS DE ÉXITO ---------- */
.grid-casos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.caso{background:var(--blanco);border:1px solid var(--gris-suave);border-radius:var(--radio);padding:26px;box-shadow:var(--sombra);border-top:3px solid var(--oro)}
.caso-cab{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.caso-logo{width:56px;height:56px;object-fit:contain;border-radius:8px;background:#fff}
.caso-cab h3{font-size:1.15rem}
.caso-sector{font-size:.82rem;color:var(--oliva)}
.caso-reto,.caso-resultado{margin-bottom:8px;font-size:.95rem}
.caso-resultado{color:var(--vino)}

/* ---------- ENLACES LEGALES EN EL PIE ---------- */
.pie-legales{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.pie-legales a{color:#cbb9b0;font-size:.82rem}
.pie-legales a:hover{color:var(--oro)}

/* ---------- CASILLA DE CONSENTIMIENTO ---------- */
.campo-consent{display:flex;align-items:flex-start;gap:8px;font-size:.85rem;margin-bottom:16px;color:var(--texto)}
.campo-consent input{margin-top:3px}

/* ---------- AVISO MODO EN CONSTRUCCIÓN (solo admin) ---------- */
.aviso-construccion{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:300;background:#2A1418;color:#fff;padding:12px 22px;border-radius:50px;box-shadow:0 12px 40px rgba(0,0,0,.3);font-size:.88rem;display:flex;gap:12px;align-items:center;max-width:94%;border:1px solid var(--oro)}
.aviso-construccion a{color:var(--oro);font-weight:700;white-space:nowrap}
.aviso-construccion a:hover{color:#fff}

/* ---------- ANIMACIÓN AL HACER SCROLL ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
    html{scroll-behavior:auto}
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
    .nav-toggle{display:block}
    .nav-links{
        position:absolute;top:70px;left:0;right:0;background:var(--crema);
        flex-direction:column;gap:0;padding:10px 24px;box-shadow:var(--sombra);
        max-height:0;overflow:hidden;transition:max-height var(--trans)
    }
    .nav-links.abierto{max-height:400px}
    .nav-links a{padding:14px 0;border-bottom:1px solid var(--gris-suave)}
    .contacto-grid{grid-template-columns:1fr;gap:28px}
    .seccion{padding:64px 0}
    .hero{min-height:88vh}
}