/* =============================================
   COWORKING CARRÚS — ELCHE
   style.css v4 — Paleta sofisticada
   ============================================= */

* { margin:0; padding:0; box-sizing:border-box; }

:root {
    /* Paleta sofisticada: carbón profundo + dorado cálido + crema */
    --primario: #2c3e35;        /* Verde carbón oscuro */
    --primario-claro: #3d5548;  /* Verde carbón medio */
    --acento: #c9a84c;          /* Dorado cálido */
    --acento-claro: #e8c97a;    /* Dorado suave */
    --carbon: #1c1c1c;          /* Negro carbón */
    --texto: #2a2a2a;           /* Texto principal */
    --texto-suave: #6b6b6b;     /* Texto secundario */
    --crema: #f8f5f0;           /* Fondo crema */
    --crema-oscuro: #ede9e2;    /* Crema más oscuro */
    --blanco: #ffffff;
    --borde: rgba(0,0,0,0.09);
    --borde-acento: rgba(201,168,76,0.3);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
    color: var(--texto);
    background: var(--blanco);
    line-height: 1.65;
}

img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

/* =============================================
   NAVEGACIÓN
   ============================================= */
header { position:sticky; top:0; z-index:1000; }

nav {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 5%;
    background:rgba(255,255,255,0.97);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--borde-acento);
    box-shadow:0 1px 16px rgba(0,0,0,0.06);
}

.logo-img {
    height:54px;
    width:auto;
    object-fit:contain;
}

.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a {
    color:var(--texto-suave); font-size:0.88rem; font-weight:500;
    letter-spacing:0.3px; transition:color 0.2s;
}
.nav-links a:hover { color:var(--primario); }

.nav-cta {
    background:var(--primario); color:var(--blanco) !important;
    padding:10px 24px; border-radius:4px;
    font-size:0.84rem; font-weight:500; letter-spacing:0.4px;
    transition:all 0.2s; border:1px solid transparent;
}
.nav-cta:hover {
    background:transparent; color:var(--primario) !important;
    border-color:var(--primario);
}

.btn-hamburguesa { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.btn-hamburguesa span { display:block; width:24px; height:1.5px; background:var(--carbon); border-radius:2px; transition:all 0.3s; }

.menu-movil { display:none; background:var(--blanco); border-bottom:1px solid var(--borde); padding:20px 5%; }
.menu-movil ul { list-style:none; display:flex; flex-direction:column; gap:14px; }
.menu-movil ul a { font-size:0.95rem; font-weight:500; color:var(--texto); display:block; padding:4px 0; }
.menu-movil ul a:hover { color:var(--primario); }
.menu-movil.abierto { display:block; }

/* =============================================
   HERO
   ============================================= */
#hero {
    min-height:85vh;
    display:flex; flex-direction:column;
    justify-content:center; align-items:center; text-align:center;
    padding:90px 5% 70px;
    background: var(--crema);
    position:relative; overflow:hidden;
}

#hero::before {
    content:'';
    position:absolute; top:0; right:0;
    width:45%; height:100%;
    background: linear-gradient(135deg, transparent 0%, rgba(201,168,76,0.05) 100%);
    pointer-events:none;
}

/* Línea decorativa superior */
#hero::after {
    content:'';
    position:absolute; top:0; left:5%; right:5%;
    height:1px;
    background: linear-gradient(90deg, transparent, var(--acento), transparent);
}

.hero-contenido { position:relative; z-index:1; max-width:820px; }

.hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:transparent;
    border:1px solid var(--borde-acento);
    border-radius:2px; padding:7px 20px;
    color:var(--acento); font-size:0.72rem; font-weight:500;
    letter-spacing:2px; margin-bottom:28px; text-transform:uppercase;
}

.hero-dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--acento); animation:pulso 2s infinite;
}

@keyframes pulso {
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:0.4; transform:scale(1.5); }
}

#hero h1 {
    font-family:'Cormorant Garamond', Georgia, serif;
    font-size:clamp(2.6rem,6vw,4.8rem);
    color:var(--carbon);
    line-height:1.1; margin-bottom:22px; font-weight:600;
    letter-spacing:-0.5px;
}

.hero-highlight {
    color:var(--primario);
    position:relative;
}

/* Subrayado decorativo dorado bajo la segunda línea */
.hero-highlight::after {
    content:'';
    position:absolute; bottom:-4px; left:0; right:0;
    height:2px;
    background:linear-gradient(90deg, var(--acento), transparent);
}

#hero p {
    font-size:1.05rem; color:var(--texto-suave);
    max-width:500px; margin:0 auto 40px;
    font-weight:300; line-height:1.8;
}

.hero-btns { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

.btn-hero { padding:14px 36px; font-size:0.9rem; font-weight:500; letter-spacing:0.5px; transition:all 0.25s; }

.btn-hero-primario { background:var(--primario); color:var(--blanco); border:1px solid var(--primario); border-radius:4px; }
.btn-hero-primario:hover { background:var(--primario-claro); transform:translateY(-2px); box-shadow:0 8px 24px rgba(44,62,53,0.25); }

.btn-hero-secundario { background:transparent; border:1px solid var(--acento); color:var(--acento); border-radius:4px; }
.btn-hero-secundario:hover { background:var(--acento); color:var(--blanco); transform:translateY(-2px); }

/* =============================================
   STATS BAR
   ============================================= */
.stats-wrapper { padding:0 5%; max-width:960px; margin:0 auto; }

.stats-bar {
    display:flex; background:var(--blanco);
    border:1px solid var(--borde-acento);
    border-top:3px solid var(--acento);
    overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.07);
    position:relative; z-index:10; flex-wrap:wrap;
}

.stat-item { flex:1; min-width:130px; padding:24px 20px; text-align:center; border-right:1px solid var(--borde); }
.stat-item:last-child { border-right:none; }
.stat-num { font-family:'Cormorant Garamond',serif; font-size:1.8rem; color:var(--primario); font-weight:600; }
.stat-label { font-size:0.72rem; color:var(--texto-suave); margin-top:4px; letter-spacing:0.5px; text-transform:uppercase; }

/* =============================================
   HELPERS
   ============================================= */
.sec-label {
    font-size:0.7rem; font-weight:500; text-transform:uppercase;
    letter-spacing:3px; color:var(--acento); margin-bottom:14px;
}
.sec-titulo {
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(2rem,3.5vw,3rem);
    color:var(--carbon); margin-bottom:16px;
    line-height:1.15; font-weight:600; letter-spacing:-0.3px;
}
.sec-sub { color:var(--texto-suave); font-size:0.97rem; max-width:520px; font-weight:300; line-height:1.75; }

/* =============================================
   SERVICIOS
   ============================================= */
#servicios { padding:100px 5%; background:var(--blanco); text-align:center; }

.grid-servicios {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
    gap:16px; max-width:920px; margin:0 auto;
}

.servicio-item {
    background:var(--crema); border-radius:2px;
    padding:30px 16px; text-align:center;
    border:1px solid var(--crema-oscuro);
    transition:all 0.3s;
}

.servicio-item:hover {
    transform:translateY(-3px);
    border-color:var(--borde-acento);
    box-shadow:0 8px 24px rgba(201,168,76,0.1);
}

.servicio-icon {
    width:50px; height:50px;
    border:1px solid var(--borde-acento);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 14px; font-size:1.2rem; color:var(--acento);
}

.servicio-item p { font-size:0.82rem; color:var(--texto-suave); font-weight:500; letter-spacing:0.3px; }

/* =============================================
   TARIFAS
   ============================================= */
#tarifas { padding:100px 5%; background:var(--crema); text-align:center; }

.grid-tarifas { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:52px; }

.tarjeta {
    background:var(--blanco); padding:34px 26px;
    width:240px; text-align:left;
    border:1px solid var(--borde);
    border-top:3px solid var(--crema-oscuro);
    transition:all 0.3s; position:relative; display:flex; flex-direction:column;
}

.tarjeta:hover {
    transform:translateY(-6px);
    box-shadow:0 20px 50px rgba(0,0,0,0.08);
    border-top-color:var(--acento);
}

.tarjeta.premium {
    border:1px solid var(--borde-acento);
    border-top:3px solid var(--acento);
    background:var(--blanco);
    box-shadow:0 8px 30px rgba(201,168,76,0.1);
}

.tarjeta.premium::before {
    content:'RECOMENDADO'; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    background:var(--acento); color:var(--blanco); padding:4px 18px;
    font-size:0.65rem; font-weight:600; letter-spacing:1.5px; white-space:nowrap;
}

.tarjeta-tag { font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:2px; color:var(--acento); margin-bottom:8px; }
.tarjeta h3 { font-family:'Cormorant Garamond',serif; font-size:1.35rem; margin-bottom:4px; color:var(--carbon); font-weight:600; }
.tarjeta-validez { font-size:0.74rem; color:var(--texto-suave); margin-bottom:16px; }
.tarjeta-precio { font-size:2.6rem; font-weight:700; color:var(--primario); line-height:1; margin-bottom:2px; font-family:'Cormorant Garamond',serif; }
.tarjeta-precio sup { font-size:1rem; font-weight:500; vertical-align:super; }
.tarjeta-precio span { font-size:0.82rem; color:var(--texto-suave); font-weight:400; font-family:'Inter',sans-serif; }

.tarjeta-iva {
    display:inline-block; font-size:0.67rem; font-weight:600;
    color:var(--acento); letter-spacing:0.5px;
    margin-bottom:4px; text-transform:uppercase;
}

.tarjeta-divider { height:1px; background:var(--borde); margin:18px 0; }

.tarjeta ul { list-style:none; flex-grow:1; }
.tarjeta ul li {
    font-size:0.84rem; color:var(--texto-suave);
    margin-bottom:10px; display:flex; align-items:flex-start; gap:10px; line-height:1.5;
}
.tarjeta ul li::before { content:'—'; color:var(--acento); font-weight:400; flex-shrink:0; margin-top:1px; }

.tarjeta-btn { display:block; margin-top:22px; text-align:center; padding:12px; font-weight:500; font-size:0.86rem; transition:all 0.2s; letter-spacing:0.3px; }

.btn-outline { border:1px solid var(--primario); color:var(--primario); background:transparent; }
.btn-outline:hover { background:var(--primario); color:var(--blanco); }

.btn-solid { background:var(--acento); color:var(--blanco); border:1px solid var(--acento); }
.btn-solid:hover { background:#b8962a; box-shadow:0 8px 24px rgba(201,168,76,0.35); transform:translateY(-1px); }

/* Domiciliación */
.domiciliacion-banner {
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    max-width:820px; margin:44px auto 0;
    background:var(--blanco); border:1px solid var(--borde-acento);
    border-left:4px solid var(--acento);
    padding:24px 28px;
}

.domiciliacion-icono {
    width:46px; height:46px;
    border:1px solid var(--borde-acento);
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; color:var(--acento); flex-shrink:0;
}

.domiciliacion-texto { flex:1; min-width:180px; text-align:left; }
.domiciliacion-texto strong { color:var(--carbon); font-size:0.93rem; }
.domiciliacion-texto p { color:var(--texto-suave); font-size:0.83rem; margin-top:4px; }

.btn-domiciliacion {
    background:transparent; color:var(--acento);
    border:1px solid var(--acento); padding:10px 22px;
    font-size:0.83rem; font-weight:500; white-space:nowrap; transition:all 0.2s;
}
.btn-domiciliacion:hover { background:var(--acento); color:var(--blanco); }

/* BONO — Ahora es un enlace clickable */
.bono-pill {
    display:inline-flex; align-items:center; gap:12px;
    margin-top:28px; background:var(--blanco);
    border:1px dashed var(--acento); padding:14px 30px;
    font-size:0.88rem; color:var(--texto-suave);
    transition:all 0.2s; cursor:pointer;
}
.bono-pill:hover {
    background:var(--acento); color:var(--blanco); border-style:solid;
    transform:translateY(-2px); box-shadow:0 6px 20px rgba(201,168,76,0.25);
}
.bono-pill:hover strong { color:var(--blanco); }
.bono-pill strong { color:var(--carbon); transition:color 0.2s; }
.bono-cta { font-weight:600; color:var(--acento); margin-left:4px; transition:color 0.2s; }
.bono-pill:hover .bono-cta { color:var(--blanco); }

/* =============================================
   GALERÍA
   ============================================= */
#galeria { padding:100px 5%; background:var(--blanco); }

.galeria-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    grid-template-rows:220px 220px; gap:10px; margin-top:44px;
}

.galeria-grid .foto { overflow:hidden; }
.galeria-grid .foto:first-child { grid-column:span 2; grid-row:span 2; }
.galeria-grid .foto img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s ease; }
.galeria-grid .foto:hover img { transform:scale(1.05); }

/* =============================================
   CONTACTO
   ============================================= */
#contacto { padding:100px 5%; background:var(--crema); }

.contacto-inner {
    max-width:1100px; margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;
}

.contacto-desc { color:var(--texto-suave); font-weight:300; line-height:1.85; margin-bottom:28px; }

.info-item { display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.info-icon {
    width:40px; height:40px;
    border:1px solid var(--borde-acento);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; font-size:1rem;
}
.info-label { font-weight:500; font-size:0.85rem; color:var(--carbon); letter-spacing:0.2px; }
.info-texto p:last-child { font-size:0.84rem; color:var(--texto-suave); }
.info-texto a { color:var(--primario); }
.info-texto a:hover { color:var(--acento); }

.mapa-wrapper {
    margin-top:28px; overflow:hidden;
    border:1px solid var(--borde-acento);
}
.mapa-wrapper iframe { display:block; width:100%; height:220px; border:none; }
.mapa-footer {
    background:var(--blanco); padding:12px 16px;
    display:flex; align-items:center; gap:10px;
    border-top:1px solid var(--borde);
}
.mapa-footer span { font-size:0.8rem; color:var(--texto-suave); }
.mapa-footer a { font-size:0.8rem; color:var(--acento); font-weight:500; margin-left:auto; }
.mapa-footer a:hover { opacity:0.8; }

.btn-wa {
    display:inline-flex; align-items:center; gap:10px; margin-top:24px;
    background:#25d366; color:var(--blanco); padding:14px 28px;
    font-weight:500; font-size:0.93rem; transition:all 0.2s;
}
.btn-wa:hover { background:#1eb956; transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,0.3); }
.btn-wa i { font-size:1.2rem; }

/* Formulario */
.formulario {
    background:var(--blanco); padding:38px;
    border:1px solid var(--borde);
    border-top:3px solid var(--acento);
}
.form-titulo {
    font-family:'Cormorant Garamond',serif;
    font-size:1.5rem; color:var(--carbon); margin-bottom:24px; font-weight:600;
}

.formulario input, .formulario select, .formulario textarea {
    width:100%; padding:13px 16px;
    border:1px solid #e0ddd8; border-radius:0;
    font-family:'Inter',sans-serif; font-size:0.9rem; color:var(--texto);
    margin-bottom:14px; transition:border-color 0.2s; background:#fafaf8;
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus {
    outline:none; border-color:var(--acento); background:var(--blanco);
}
.formulario textarea { resize:vertical; min-height:110px; }
.formulario button {
    width:100%; padding:15px; background:var(--primario); color:var(--blanco);
    border:none; font-family:'Inter',sans-serif; font-size:0.93rem;
    font-weight:500; cursor:pointer; transition:all 0.2s; letter-spacing:0.5px;
}
.formulario button:hover { background:var(--primario-claro); transform:translateY(-1px); box-shadow:0 8px 24px rgba(44,62,53,0.2); }

/* =============================================
   FOOTER
   ============================================= */
footer { background:var(--carbon); color:rgba(255,255,255,0.65); padding:64px 5% 24px; }

.footer-grid {
    display:grid; grid-template-columns:2fr 1fr 1fr;
    gap:48px; max-width:1100px; margin:0 auto 52px;
}

.footer-logo-img {
    height:50px; width:auto; object-fit:contain; margin-bottom:16px;
    filter:brightness(0) invert(1);
}
.footer-desc { font-size:0.84rem; line-height:1.75; max-width:280px; }

.footer-redes { display:flex; gap:10px; margin-top:22px; }
.red-icon {
    width:36px; height:36px; border:1px solid rgba(255,255,255,0.15);
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.6); font-size:0.88rem; transition:all 0.2s;
}
.red-icon:hover { border-color:var(--acento); color:var(--acento); }

.footer-col h4 { color:var(--blanco); font-size:0.85rem; font-weight:500; margin-bottom:18px; letter-spacing:0.5px; }
.footer-col ul { list-style:none; }
.footer-col ul li { font-size:0.83rem; margin-bottom:9px; }
.footer-col a { color:rgba(255,255,255,0.55); transition:color 0.2s; }
.footer-col a:hover { color:var(--acento); }

.footer-bottom {
    border-top:1px solid rgba(255,255,255,0.07);
    padding-top:24px; text-align:center; font-size:0.78rem;
    max-width:1100px; margin:0 auto;
}

/* =============================================
   WHATSAPP FLOTANTE
   ============================================= */
.wa-float {
    position:fixed; bottom:28px; right:28px; z-index:1500;
    background:#25d366; color:var(--blanco); padding:12px 22px;
    display:flex; align-items:center; gap:10px;
    font-weight:500; font-size:0.9rem;
    box-shadow:0 4px 20px rgba(37,211,102,0.4);
    animation:wa-pulse 2.5s infinite; transition:background 0.2s;
}
.wa-float:hover { background:#1eb956; }
.wa-icon { font-size:1.3rem; }
@keyframes wa-pulse {
    0%,100%{ box-shadow:0 4px 20px rgba(37,211,102,0.4); }
    50%{ box-shadow:0 4px 32px rgba(37,211,102,0.7); }
}

/* =============================================
   BOTÓN SUBIR
   ============================================= */
#btn-subir {
    display:none; position:fixed; bottom:96px; right:33px; z-index:1400;
    border:1px solid rgba(255,255,255,0.2); background:var(--primario); color:var(--blanco);
    cursor:pointer; width:44px; height:44px; font-size:0.9rem;
    transition:all 0.3s; box-shadow:0 4px 12px rgba(0,0,0,0.2);
}
#btn-subir:hover { background:var(--primario-claro); transform:translateY(-4px); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width:900px) {
    .nav-links { display:none; }
    .nav-cta { display:none; }
    .btn-hamburguesa { display:flex; }
    .contacto-inner { grid-template-columns:1fr; gap:44px; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}

@media (max-width:600px) {
    #hero h1 { font-size:2.2rem; }
    #hero { min-height:70vh; padding:70px 5% 50px; }
    .galeria-grid { grid-template-columns:1fr 1fr; grid-template-rows:180px 180px 180px; }
    .galeria-grid .foto:first-child { grid-column:span 2; grid-row:span 1; }
    .stats-bar { flex-direction:column; }
    .stat-item { border-right:none; border-bottom:1px solid var(--borde); }
    .stat-item:last-child { border-bottom:none; }
    .footer-grid { grid-template-columns:1fr; }
    .wa-float span { display:none; }
    .wa-float { padding:14px; border-radius:50%; }
    .tarjeta { width:100%; max-width:340px; }
    .domiciliacion-banner { flex-direction:column; }
    .bono-pill { flex-direction:column; gap:6px; }
}