:root { --sp-red:#E03624; --sp-red-dark:#B22819; --sp-red-soft:#FDEAE7; --text:#111111; }
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial;color:rgba(0,0,0,.9)}
a{text-decoration:none;color:inherit} img{max-width:100%;display:block} .container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border-bottom:1px solid var(--sp-red-soft)}
.header-inner{height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}.brand__name{color:var(--sp-red);font-weight:600;letter-spacing:.04em}
.nav{display:none;gap:24px;font-size:14px;align-items:center}.nav a{padding-bottom:6px;border-bottom:2px solid transparent}.nav a:hover{opacity:.85}.nav .active{border-color:var(--sp-red);color:var(--sp-red)}
.btn-call{background:var(--sp-red);color:#fff;padding:8px 16px;border-radius:999px;font-weight:600}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px;border:1px solid rgba(0,0,0,.1);border-radius:8px;background:#fff}
.mobile-menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 10px 25px rgba(0,0,0,.06)}
.mobile-menu a{display:block;padding:8px 16px}
@media(min-width:768px){.nav{display:flex}.menu-btn,.mobile-menu{display:none}}
.section{padding:64px 0}.section--alt{background:var(--sp-red-soft)}.section__title{font-size:clamp(28px,2.8vw,40px);color:var(--text);margin:0 0 8px}.section__desc{color:rgba(0,0,0,.7);margin:0}
.hero{position:relative;overflow:hidden;background:var(--sp-red);color:#fff}.hero__inner{padding:80px 0;display:grid;gap:32px}.hero__kicker{text-transform:uppercase;letter-spacing:.25em;color:rgba(255,255,255,.8);font-size:12px;margin:0 0 8px}.hero__title{font-size:clamp(36px,6vw,64px);margin:0;line-height:1.1}.hero__buttons{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;padding:12px 20px;border-radius:14px;font-weight:700}.btn--light{background:#fff;color:#000;box-shadow:0 4px 10px rgba(0,0,0,.15)}.btn--outline{border:1px solid rgba(255,255,255,.5);color:#fff}
.hero-card{background:#fff;padding:8px;border-radius:24px;box-shadow:0 25px 40px rgba(0,0,0,.15);overflow:hidden}
@media(min-width:768px){.hero__inner{grid-template-columns:1fr 1fr;align-items:center}}
.grid{display:grid;gap:24px}@media(min-width:640px){.grid--2{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.grid--3{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--sp-red-soft);border-radius:16px;padding:24px;box-shadow:0 1px 2px rgba(0,0,0,.04)}.card:hover{box-shadow:0 6px 16px rgba(0,0,0,.08)}
.map-frame{border:0;width:100%;height:320px;border-radius:16px}@media(min-width:768px){.map-frame{height:450px}}.badge{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.7)}.box{background:rgba(255,255,255,.06);padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,.15);color:#fff}
.footer{background:var(--sp-red);color:#fff;padding:24px 0}.footer__row{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}.footer a{color:#fff;opacity:.9}.footer a:hover{opacity:1}
.tabs{display:flex;flex-wrap:wrap;gap:8px}.tab{padding:8px 16px;border-radius:999px;border:1px solid var(--sp-red-soft);background:transparent;cursor:pointer}.tab--active{background:var(--sp-red);color:#fff}
.table-wrap{overflow-x:auto;border:1px solid var(--sp-red-soft);border-radius:16px}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.06);white-space:nowrap}thead{background:rgba(224,54,36,.06)}
.card-kv{border:1px solid var(--sp-red-soft);border-radius:12px;padding:12px}.card-kv__row{display:flex;justify-content:space-between;gap:12px;padding:6px 0}.card-kv__key{font-size:12px;color:rgba(0,0,0,.5);text-transform:uppercase;letter-spacing:.08em}.card-kv__val{font-weight:600}
.search{display:flex;gap:8px;align-items:center;border:1px solid var(--sp-red-soft);border-radius:12px;padding:8px 12px;width:100%;max-width:340px}.search input{border:0;outline:none;width:100%;background:transparent}.empty{text-align:center;color:rgba(0,0,0,.5);padding:24px 0}
/* Galería */
/* === Galería moderna, sin frameworks === */
.gallery-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:24px;
}

/* Tarjeta base (ocupando todo el “tile”) */
.gallery-card{
    position: relative;
    border: 1px solid var(--sp-red-soft);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    background: #fff;
    aspect-ratio: 4 / 3;     /* para fotos horizontales */
}

/* Para fotos verticales */
.gallery-card--tall{
    aspect-ratio: 3 / 4;
}

/* Para destacar una foto más grande (desktop) */
@media (min-width: 1024px){
    .gallery-card--span-2{ grid-column: span 2; }
}

/* Imagen siempre llenando la tarjeta */
.gallery-card img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;           /* recorta suave para llenar */
    object-position: center;
}

/* En móvil, que no se rompa el grid de 2 columnas */
@media (max-width: 640px){
    .gallery-card--span-2{ grid-column: span 1; }
}