/* assets/css/index.css */

/* ───────────────── Fondo base ───────────────── */
body {
    background: #fff; /* neutro, el color lo tienen los containers */
}

/* Antiderrame global */
img { max-width: 100%; height: auto; display: block; }
.service-card, .uniform-card { overflow: hidden; box-sizing: border-box; }

/* ──────────────── HERO portada ──────────────── */
.hero-section {
    color: #fff;
    text-align: center;
    min-height: 100svh;
    display: flex;
    align-items: stretch;                 /* permite que el .container ocupe todo el alto */
    padding: 140px 0 0;                   /* espacio superior por la navbar; sin padding abajo */
    background:
            linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.28)),
            url('/assets/img/hero-bg.jpg') center/cover no-repeat;
}
/* Título y subtítulo en blanco */
.hero-section h1 {
    color: #ffffff;
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,.3);
    margin-bottom: .8rem;
}
.hero-section .lead {
    color: #f3f6f8; /* blanco suave distinto al título */
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    text-shadow: 1px 1px 2px rgba(0,0,0,.3);
    margin-bottom: 1.6rem;
}

/* ▼ Coloca el bloque de texto casi al fondo (SIN recuadro) */
.hero-section > .container{
    display:flex;
    flex-direction: column;
    justify-content: flex-end;            /* ↓ baja el bloque */
    min-height: calc(100svh - 140px);     /* altura útil tras el padding-top */
    padding-bottom: clamp(56px, 14vh, 168px); /* aire inferior para que no quede apretado */
}

/* Responsive */
@media (max-width: 991px){
    .hero-section { min-height: 65vh; padding: 120px 0 0; } /* navbar fija */
    .hero-section > .container{
        min-height: calc(65vh - 120px);
        padding-bottom: clamp(40px, 12vh, 120px);
    }
}

/* ──────────────── Containers de color ──────────────── */
.container-green {
    background: rgba(223, 243, 164, 0.57);
    border-radius: 20px;
    padding: 48px 28px;
    margin: 40px 0;
}
.container-pink {
    background: rgba(252, 210, 232, 0.58);
    border-radius: 20px;
    padding: 48px 28px;
    margin: 40px 0;
}

/* ──────────────── Miniaturas uniformes ──────────────── */
:root { --thumb-size: 180px; }

.thumb-square {
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 14px;
    overflow: hidden;
    margin: 0 auto 16px;
}
.thumb-square img {
    width: 100%; height: 100%; object-fit: cover;
}

/* ──────────────── Servicios ──────────────── */
.service-card {
    background: #fff;
    border-radius: 15px;
    padding: 26px;
    margin-bottom: 28px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    transition: transform .25s ease, box-shadow .25s ease;
    text-align: center;
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(0,0,0,.12);
}

/* ──────────────── About ──────────────── */
.about-section {
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(3px);
    border-radius: 16px;
    padding: 60px 22px;
}
.about-image {
    width: 100%; height: auto;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    opacity: .95;
}

/* ──────────────── Equipo equino ──────────────── */
.uniform-card {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    height: 100%;
    text-align: center;
}
.uniform-card h4, .uniform-card h5 { margin: 0 0 10px; }
.uniform-card p { font-size: .95rem; }

/* Texto bajo imagen */
.horse-desc {
    background: rgba(255,255,255,.8);
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 12px;
    font-size: .95rem;
}

/* Namasté memoria más translúcido */
.memory-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 100%);
    box-shadow: 0 6px 20px rgba(180,139,139,0.12);
}
.memory-desc {
    background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.5) 100%);
    color: #5c4a4a;
}
.memory-card .years { font-weight: 600; color: #8f6f6f; }

/* ──────────────── CTA inferior ──────────────── */
.section-cta {
    background: var(--secondary);
    border-radius: 16px;
    padding: 48px 22px;
}

/* Igualar alturas en las tarjetas de "Els nostres serveis" */
.services-grid > [class*="col-"] { display: flex; }
.services-grid .service-card { display: flex; flex-direction: column; width: 100%; }
.services-grid .service-card .btn { margin-top: auto; } /* empuja el botón al fondo */

/* ===== Cookies + WhatsApp (Zen + paleta) ===== */
:root{
    --rosa: rgba(252,210,232,.58);
    --verd: rgba(223,243,164,.57);
    --text-dark: #2C3E50;
    --whats: #25D366;
    --cookie-h: 0px; /* altura del banner; la ajusta el JS */
}

/* Banner de cookies */
.cookie-banner{
    position: fixed; left: 12px; right: 12px; bottom: 12px;
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    z-index: 9999;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    padding: 14px 16px;
    font-family: "Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.cookie-text{ color: var(--text-dark); }
.cookie-text strong{ font-family:"Zen Antique Soft", Georgia, serif; }
.cookie-link{ color:#0d6efd; text-decoration: underline; }
.cookie-actions{ margin-left: auto; display:flex; gap:8px; }
.btn-cookie{
    border-radius: 10px; padding: 8px 14px; cursor: pointer;
    font-weight: 600; border: 1px solid transparent;
}
.btn-cookie.accept{ background: var(--verd); color:#1d3b1d; }
.btn-cookie.accept:hover{ filter: brightness(.96); }
.btn-cookie.later{ background: transparent; border-color: rgba(0,0,0,.12); color: var(--text-dark); }
.btn-cookie.later:hover{ background: rgba(0,0,0,.04); }

@media (max-width: 575.98px){
    .cookie-banner{ left:8px; right:8px; bottom:8px; }
    .cookie-actions{ width:100%; justify-content:flex-end; }
}

/* Botón flotante de WhatsApp */
.whatsapp-float{
    position: fixed; right: 16px;
    bottom: calc(16px + var(--cookie-h)); /* sube si hay banner */
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--whats); color:#fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 14px 28px rgba(0,0,0,.18);
    z-index: 9998; text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, bottom .2s ease;
}
.whatsapp-float:hover{
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 18px 42px rgba(0,0,0,.22);
}
.whatsapp-float i, .whatsapp-float svg{ display:block; font-size: 28px; }
/* Contenidor més estret per no ocupar massa */
.container-narrow { max-width: min(1080px, 94vw); }