/* ===========================================================
   Arkaitz S.L. — hoja de estilos compartida
   Paleta alineada con la identidad de marca (mismo rojo que
   usan los PDFs y el modo oscuro de Gestver: #8B2020).
   =========================================================== */

:root {
    --marca-900: #3F0E0E;
    --marca-800: #5A1515;
    --marca-700: #6E1A1A;
    --marca-600: #8B2020; /* color de marca */
    --marca-500: #A5302F;
    --marca-400: #C84F4F;
    --marca-200: #E7B9B6;
    --marca-100: #F1D6D4;
    --marca-50:  #FBF1F0;

    --stone-900: #211C19;
    --stone-700: #4B433C;
    --stone-500: #6B6057; /* oscurecido desde #7A7067 (contraste 4,08:1 sobre --stone-100, por debajo del 4.5:1 de WCAG AA) */
    --stone-300: #D9CFC3;
    --stone-200: #E8E0D5;
    --stone-100: #F2EBE0;
    --stone-50:  #FAF7F2;

    --whatsapp: #25D366;
    --whatsapp-dark: #1DA851;
    --white: #ffffff;

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Work Sans', 'Segoe UI', Tahoma, sans-serif;

    --radius: 10px;
    --shadow-sm: 0 2px 10px rgba(33, 28, 25, 0.08);
    --shadow-md: 0 10px 30px rgba(33, 28, 25, 0.12);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--stone-900);
    background: var(--stone-50);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

/* ---------- Header ---------- */
header {
    background: var(--white);
    padding: 14px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.logo img { height: 42px; width: auto; display: block; }

.lang-selector {
    display: flex;
    gap: 6px;
    background: var(--stone-100);
    padding: 4px;
    border-radius: 8px;
}

.lang-btn {
    background: none;
    border: none;
    padding: 6px 13px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 6px;
    color: var(--stone-500);
    text-decoration: none;
    font-family: var(--font-body);
    transition: 0.2s;
}

.lang-btn.active,
.lang-btn:hover { background: var(--marca-600); color: var(--white); }

/* ---------- Hero ----------
   2 tamaños de la foto (hero-mobile.jpg a 960px para pantallas
   estrechas, hero.jpg a 1920px desde el breakpoint general de
   768px) + AVIF con fallback a JPEG vía image-set() -- la foto es
   grava con mucho detalle/ruido, así que AVIF no gana tanto como en
   una foto lisa, pero igual pesa un ~20-25% menos sin pérdida
   visible comprobada a simple vista. La doble declaración de
   `background-image` es a propósito: si el navegador no entiende
   `image-set()`, ni siquiera intenta parsear esa línea y conserva la
   anterior (solo JPEG) en vez de quedarse sin imagen. */
.hero {
    position: relative;
    padding: 70px 20px 60px;
    background-image:
        linear-gradient(170deg, rgba(63,14,14,0.86), rgba(33,28,25,0.72)),
        url('hero-mobile.jpg');
    background-image:
        linear-gradient(170deg, rgba(63,14,14,0.86), rgba(33,28,25,0.72)),
        image-set(
            url('hero-mobile.avif') type('image/avif'),
            url('hero-mobile.jpg') type('image/jpeg')
        );
    background-size: cover;
    background-position: center 40%;
    color: var(--white);
    text-align: center;
    min-height: 58vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero .eyebrow {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--marca-200);
    margin-bottom: 14px;
}

.hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    max-width: 760px;
    margin-bottom: 1.4rem;
    line-height: 1.32;
    text-wrap: balance;
}

.hero p.lead { font-size: 1rem; margin-bottom: 2.1rem; opacity: 0.92; font-weight: 500; }

.btn-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 300px;
}

.btn {
    padding: 15px;
    text-decoration: none;
    border-radius: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.82rem;
    color: var(--white);
    text-align: center;
    transition: 0.2s;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
}

.btn-primary { background: var(--marca-600); }
.btn-primary:hover { background: var(--marca-700); }
.btn-whatsapp { background: var(--whatsapp); }
.btn-whatsapp:hover { background: var(--whatsapp-dark); }
.btn:active { transform: scale(0.98); }

/* ---------- Secciones genéricas ---------- */
.section-padding { padding: 56px 20px; }
.section-alt { background: var(--stone-100); }

h2.section-title {
    font-family: var(--font-display);
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.55rem;
    font-weight: 600;
}

p.section-subtitle {
    text-align: center;
    color: var(--stone-500);
    font-size: 0.92rem;
    max-width: 560px;
    margin: 0 auto 34px;
}

.divider {
    width: 44px;
    height: 3px;
    background: var(--marca-600);
    margin: 14px auto 30px;
    border-radius: 2px;
}

/* ---------- Valores / tarjetas de servicio ---------- */
.values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 1000px;
    margin: 0 auto;
}

.value-card {
    background: var(--white);
    border: 1px solid var(--stone-200);
    border-radius: var(--radius);
    padding: 26px 22px;
    text-align: left;
}

.value-card .num {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--marca-500);
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.value-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.value-card p { font-size: 0.9rem; color: var(--stone-700); }

/* ---------- Autorizaciones ---------- */
.auth-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
}

.auth-card {
    background: var(--white);
    border: 1px solid var(--stone-200);
    border-left: 4px solid var(--marca-600);
    border-radius: var(--radius);
    padding: 20px 22px;
}

.auth-card .label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--marca-600);
    display: block;
    margin-bottom: 6px;
}

.auth-card .value {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--stone-900);
    display: block;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

.auth-card .desc { font-size: 0.85rem; color: var(--stone-500); }

/* ---------- Contacto ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: center;
    margin-bottom: 36px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.contact-item b {
    display: block;
    color: var(--marca-600);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.contact-item a,
.contact-item p { font-size: 1rem; color: var(--stone-900); text-decoration: none; }
.contact-item a:hover { color: var(--marca-600); }

.full-map {
    width: 100%;
    max-width: 1000px;
    height: 300px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin: 0 auto 36px;
}
.full-map iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Formulario ---------- */
.contact-form-wrapper {
    max-width: 560px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--stone-200);
    border-radius: var(--radius);
    padding: 34px 28px;
    box-shadow: var(--shadow-sm);
    /* "Solicitar información" enlaza aquí directamente (no solo a
       #contacto) -- sin esto, el salto quedaba a la altura del mapa y
       el formulario aparecía fuera de pantalla. El margen deja hueco
       para la cabecera, que es sticky. */
    scroll-margin-top: 110px;
}

.contact-form-wrapper h3 {
    font-family: var(--font-display);
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 22px;
}

.form-group { margin-bottom: 15px; }

.form-group label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--marca-600);
    margin-bottom: 6px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--stone-300);
    border-radius: 7px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--stone-900);
    background: var(--stone-50);
    transition: border-color 0.2s, background 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--marca-600);
    background: var(--white);
}

.form-group textarea { resize: vertical; min-height: 100px; }

.form-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.8rem;
    color: var(--stone-500);
    margin-bottom: 20px;
    line-height: 1.45;
}
.form-consent input { width: auto; margin-top: 2px; flex-shrink: 0; }
.form-consent a { color: var(--marca-600); }

.btn-submit {
    width: 100%;
    padding: 15px;
    background: var(--marca-600);
    color: var(--white);
    border: none;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: 0.2s;
    font-family: var(--font-body);
}
.btn-submit:hover { background: var(--marca-700); }
.btn-submit:active { transform: scale(0.98); }

.form-success {
    display: none;
    text-align: center;
    padding: 20px;
    background: #F0FAF4;
    border: 1px solid #B2DFCA;
    border-radius: var(--radius);
    color: #1A7A4A;
    font-size: 0.95rem;
}

/* ---------- Footer ---------- */
footer {
    background: var(--stone-900);
    color: var(--stone-300);
    padding: 30px 20px;
    text-align: center;
    font-size: 0.78rem;
}
footer a { color: var(--stone-300); text-decoration: none; }
footer a:hover { color: var(--marca-400); }
.footer-links { margin-top: 12px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- WhatsApp flotante ---------- */
.wa-float {
    position: fixed; bottom: 22px; right: 22px; z-index: 1500;
    display: flex; align-items: center;
    background: var(--whatsapp); color: #fff;
    height: 58px; border-radius: 29px; padding: 0 16px 0 0;
    text-decoration: none; overflow: hidden;
    box-shadow: 0 4px 14px rgba(37,211,102,0.5);
    transition: all 0.3s ease; animation: wa-pulse 2.4s infinite;
}
.wa-float .wa-icon {
    width: 58px; height: 58px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.wa-float .wa-label {
    font-weight: 700; font-size: 0.88rem; white-space: nowrap;
    max-width: 140px; opacity: 1; padding-right: 6px; transition: all 0.3s ease;
}
@media (min-width: 768px) {
    .wa-float .wa-label { max-width: 0; opacity: 0; padding-right: 0; }
    .wa-float:hover .wa-label { max-width: 140px; opacity: 1; padding-right: 6px; }
}
.wa-float:hover { box-shadow: 0 6px 20px rgba(37,211,102,0.7); animation: none; }
@keyframes wa-pulse {
    0%   { box-shadow: 0 4px 14px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0.6); }
    70%  { box-shadow: 0 4px 14px rgba(37,211,102,0.5), 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 4px 14px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0); }
}

/* ---------- Banner de cookies ---------- */
#cookie-banner{
    position:fixed;bottom:0;left:0;right:0;z-index:2000;
    background:var(--stone-900);color:var(--stone-200);padding:18px 20px;
    box-shadow:0 -2px 15px rgba(0,0,0,.3);
    display:none;flex-direction:column;gap:14px;
    font-size:.85rem;line-height:1.5;
}
#cookie-banner.show{display:flex}
#cookie-banner a{color:var(--marca-200);text-decoration:underline} /* marca-400 solo daba 3,76:1 sobre este fondo oscuro, por debajo del 4.5:1 de WCAG AA */
.cookie-btns{display:flex;gap:10px;flex-wrap:wrap}
.cookie-btns button{
    flex:1;min-width:130px;padding:11px 16px;border:none;border-radius:7px;
    font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;
    font-family:inherit;transition:.2s;
}
.ck-accept{background:var(--marca-600);color:#fff}
.ck-accept:hover{background:var(--marca-700)}
.ck-reject{background:var(--stone-700);color:#eee}
.ck-reject:hover{background:#5c5248}

.map-placeholder{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    height:100%;background:var(--stone-100);color:var(--stone-500);text-align:center;padding:20px;gap:12px;
}
.map-placeholder button{
    padding:10px 18px;background:var(--marca-600);color:#fff;border:none;
    border-radius:7px;font-weight:700;cursor:pointer;font-size:.8rem;font-family:inherit;
}

/* ---------- Páginas legales ---------- */
.legal-header {
    background: var(--white);
    padding: 14px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
    gap: 10px;
}
.legal-header img { height: 40px; width: auto; }

main.legal {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 20px 60px;
}
main.legal h1 {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    margin-bottom: 8px;
}
main.legal h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 30px 0 10px;
    color: var(--marca-600);
}
main.legal p, main.legal li { font-size: 0.95rem; margin-bottom: 10px; color: var(--stone-700); }
main.legal ul { padding-left: 22px; }
main.legal a { color: var(--marca-600); }
main.legal table { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 0.85rem; }
main.legal th, main.legal td { border: 1px solid var(--stone-200); padding: 9px; text-align: left; }
main.legal th { background: var(--stone-100); }
.back-link { display: inline-block; margin-top: 30px; font-size: 0.85rem; color: var(--marca-600); }

/* ---------- Responsive ≥768px ---------- */
@media (min-width: 768px) {
    header { flex-direction: row; justify-content: space-between; padding: 1rem 8%; }
    .logo img { height: 60px; }
    .hero {
        background-image:
            linear-gradient(170deg, rgba(63,14,14,0.86), rgba(33,28,25,0.72)),
            url('hero.jpg');
        background-image:
            linear-gradient(170deg, rgba(63,14,14,0.86), rgba(33,28,25,0.72)),
            image-set(
                url('hero.avif') type('image/avif'),
                url('hero.jpg') type('image/jpeg')
            );
    }
    .hero h1 { font-size: 2.3rem; }
    .hero p.lead { font-size: 1.1rem; }
    .btn-container { flex-direction: row; max-width: none; justify-content: center; }
    .btn { width: 250px; }
    .values-grid { grid-template-columns: repeat(3, 1fr); }
    .auth-grid { grid-template-columns: repeat(4, 1fr); }
    .contact-grid { grid-template-columns: repeat(4, 1fr); }
    .full-map { height: 420px; }
    h2.section-title { font-size: 1.9rem; }
}