/* ===========================================================================
   BoxServis Carpas — hoja de estilo única
   Colores extraídos del logotipo: antracita #333535 y azul #3E94C8
   Sin dependencias externas: ni fuentes de Google, ni frameworks, ni CDN.
   =========================================================================== */

:root{
  --antracita:#333535;
  --antracita-claro:#4a4d4d;
  --azul:#3E94C8;
  --azul-oscuro:#2f7aa8;
  --azul-panel:#eaf3f9;
  --texto:#242829;
  --texto-suave:#5d6b72;
  --fondo:#ffffff;
  --gris:#f5f7f9;
  --borde:#e0e7eb;
  --sombra:0 2px 10px rgba(51,53,53,.07);
  --sombra-alta:0 12px 32px rgba(51,53,53,.16);
  --radio:7px;
  --ancho:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--texto);background:var(--fondo);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul-oscuro)}
.contenedor{width:min(var(--ancho),92vw);margin-inline:auto}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------- Cabecera */
header.principal{
  position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--borde);box-shadow:var(--sombra);
}
.barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0}
.marca{display:flex;align-items:center;flex:0 0 auto}
/* El logotipo se muestra a su TAMAÑO ORIGINAL (375x75): reducirlo al 61%
   como estaba antes lo dejaba pequeño y perdía definición del trazo.
   En móvil sí se reduce, porque 375 px no caben en una pantalla de 360. */
.marca img{height:75px;width:auto}
@media(max-width:820px){.marca img{height:56px}}
@media(max-width:560px){.marca img{height:44px}}

nav.menu ul{display:flex;gap:1.6rem;list-style:none;align-items:center}
nav.menu a{
  color:var(--antracita);text-decoration:none;font-weight:600;font-size:.95rem;
  padding:.35rem 0;border-bottom:2px solid transparent;transition:.18s;white-space:nowrap;
}
nav.menu a:hover,nav.menu a:focus-visible,nav.menu a[aria-current="page"]{
  color:var(--azul-oscuro);border-bottom-color:var(--azul);
}
.tel-cabecera{
  display:inline-flex;align-items:center;gap:.45rem;background:var(--azul);color:#fff;
  padding:.55rem 1.1rem;border-radius:var(--radio);text-decoration:none;
  font-weight:700;font-size:.93rem;white-space:nowrap;transition:.18s;
}
.tel-cabecera:hover{background:var(--azul-oscuro);color:#fff}

/* Menú en móvil: casilla oculta + etiqueta, sin JavaScript */
#abrir-menu{display:none}
.hamburguesa{display:none;cursor:pointer;padding:.4rem;border-radius:5px}
.hamburguesa span{display:block;width:25px;height:2px;background:var(--antracita);margin:5px 0;transition:.2s}
@media(max-width:900px){
  .hamburguesa{display:block}
  nav.menu{
    position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--borde);box-shadow:var(--sombra-alta);
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  nav.menu ul{flex-direction:column;gap:0;padding:.4rem 0}
  nav.menu li{width:100%}
  nav.menu a{display:block;padding:.8rem 6vw;border-bottom:1px solid var(--borde)}
  #abrir-menu:checked ~ nav.menu{max-height:80vh}
  #abrir-menu:checked ~ .hamburguesa span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #abrir-menu:checked ~ .hamburguesa span:nth-child(2){opacity:0}
  #abrir-menu:checked ~ .hamburguesa span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------------------------------------------------- Portada */
.hero{
  position:relative;color:#fff;
  background:var(--antracita) center/cover no-repeat;
  padding:clamp(3.5rem,10vw,7rem) 0;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(51,53,53,.82) 0%,rgba(47,122,168,.62) 100%);
}
.hero .contenedor{position:relative;z-index:1}
.hero .etiqueta{
  display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:#bfe0f2;border:1px solid rgba(191,224,242,.45);
  padding:.35rem .85rem;border-radius:100px;margin-bottom:1.3rem;
}
.hero h1{
  font-size:clamp(1.9rem,5vw,3.3rem);line-height:1.14;font-weight:800;
  letter-spacing:-.02em;max-width:20ch;margin-bottom:1rem;
  text-shadow:0 1px 14px rgba(20,25,28,.45);
}
.hero p{
  font-size:clamp(1rem,2vw,1.2rem);color:#dbe9f2;max-width:58ch;margin-bottom:2rem;
  text-shadow:0 1px 10px rgba(20,25,28,.4);
}
.acciones{display:flex;flex-wrap:wrap;gap:.85rem}
.boton{
  display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.7rem;border-radius:var(--radio);
  text-decoration:none;font-weight:700;font-size:1rem;transition:.18s;border:1.5px solid transparent;
}
.boton.principal{background:var(--azul);color:#fff}
.boton.principal:hover{background:#4aa5db;transform:translateY(-1px)}
.boton.secundario{color:#fff;border-color:rgba(255,255,255,.5)}
.boton.secundario:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* Cabecera interior de las páginas */
.cabecera-pagina{
  position:relative;color:#fff;background:var(--antracita) center/cover no-repeat;
  padding:clamp(2.6rem,7vw,4.6rem) 0;
}
.cabecera-pagina::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(51,53,53,.78),rgba(47,122,168,.55));
}
.cabecera-pagina .contenedor{position:relative;z-index:1}
.cabecera-pagina h1{
  font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800;letter-spacing:-.02em;
  text-shadow:0 1px 12px rgba(20,25,28,.45);
}
.miga{font-size:.88rem;color:#c8dfee;margin-bottom:.5rem}
.miga a{color:#c8dfee;text-decoration:none;border-bottom:1px solid rgba(200,223,238,.4)}
.miga a:hover{color:#fff}

/* ---------------------------------------------------- Secciones */
section{padding:clamp(2.8rem,6vw,4.5rem) 0}
section.claro{background:var(--gris)}
.titulo{max-width:64ch;margin:0 auto clamp(2rem,4vw,3rem);text-align:center}
.titulo .sobre{
  font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--azul-oscuro);margin-bottom:.6rem;
}
.titulo h2{
  font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:800;letter-spacing:-.02em;
  color:var(--antracita);line-height:1.22;margin-bottom:.7rem;
}
.titulo p{color:var(--texto-suave)}

.texto{max-width:74ch;margin-inline:auto}
.texto p{margin-bottom:1.05rem}
.texto p:last-child{margin-bottom:0}
.texto h2,.texto h3{color:var(--antracita);margin:1.8rem 0 .8rem;line-height:1.3}
.texto h2{font-size:1.45rem}
.texto h3{font-size:1.2rem}
.texto ul,.texto ol{margin:0 0 1.05rem 1.3rem}
.texto li{margin-bottom:.4rem}
.texto strong{color:var(--antracita)}

/* ---------------------------------------------------- Rejilla de sectores */
.rejilla{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.tarjeta{
  background:#fff;border:1px solid var(--borde);border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .22s,box-shadow .22s,border-color .22s;
  text-decoration:none;color:inherit;
}
.tarjeta:hover,.tarjeta:focus-visible{
  transform:translateY(-4px);box-shadow:var(--sombra-alta);border-color:#c6d8e2;
}
.tarjeta .imagen{aspect-ratio:16/10;background:var(--antracita);overflow:hidden}
.tarjeta .imagen img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tarjeta:hover .imagen img{transform:scale(1.05)}
.tarjeta .cuerpo{padding:1.1rem 1.2rem 1.3rem;flex:1;display:flex;flex-direction:column}
.tarjeta h3{font-size:1.08rem;color:var(--antracita);margin-bottom:.4rem;font-weight:700}
.tarjeta p{font-size:.92rem;color:var(--texto-suave);flex:1}
.tarjeta .mas{
  margin-top:.9rem;font-size:.88rem;font-weight:700;color:var(--azul-oscuro);
  display:inline-flex;align-items:center;gap:.35rem;
}
.tarjeta .contador{
  font-size:.78rem;color:var(--texto-suave);background:var(--azul-panel);
  padding:.15rem .55rem;border-radius:100px;display:inline-block;margin-bottom:.5rem;
}

/* ---------------------------------------------------- Galería */
.galeria{
  display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.galeria button{
  padding:0;border:0;background:var(--antracita);cursor:zoom-in;
  border-radius:5px;overflow:hidden;aspect-ratio:13/9;display:block;
}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .35s,opacity .2s}
.galeria button:hover img,.galeria button:focus-visible img{transform:scale(1.06);opacity:.92}
.galeria button:focus-visible{outline:3px solid var(--azul);outline-offset:2px}

/* Visor de imágenes */
.visor{
  position:fixed;inset:0;z-index:200;background:rgba(20,24,26,.95);
  display:none;align-items:center;justify-content:center;
}
.visor[open],.visor.abierto{display:flex}
.visor img{max-width:94vw;max-height:86vh;object-fit:contain;border-radius:4px}
.visor .cerrar,.visor .anterior,.visor .siguiente{
  position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;
  cursor:pointer;border-radius:50%;width:46px;height:46px;font-size:1.4rem;
  display:grid;place-items:center;transition:.18s;
}
.visor .cerrar:hover,.visor .anterior:hover,.visor .siguiente:hover{background:rgba(255,255,255,.28)}
.visor .cerrar{top:1.1rem;right:1.1rem}
.visor .anterior{left:1.1rem;top:50%;transform:translateY(-50%)}
.visor .siguiente{right:1.1rem;top:50%;transform:translateY(-50%)}
.visor .cuenta{
  position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);
  color:#cfd8dd;font-size:.9rem;background:rgba(0,0,0,.4);padding:.3rem .8rem;border-radius:100px;
}
@media(max-width:600px){
  .visor .anterior{left:.4rem}.visor .siguiente{right:.4rem}
  .visor .cerrar{top:.5rem;right:.5rem}
}

/* ---------------------------------------------------- Contacto */
.contacto-rejilla{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.bloque h3{
  font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--azul-oscuro);margin-bottom:1rem;padding-bottom:.55rem;border-bottom:2px solid var(--borde);
}
.linea{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1rem}
.linea svg{width:19px;height:19px;flex:0 0 19px;margin-top:.3rem;stroke:var(--azul-oscuro);
  fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.linea .et{display:block;font-size:.78rem;color:var(--texto-suave);text-transform:uppercase;letter-spacing:.05em}
.linea a,.linea address{color:var(--texto);text-decoration:none;font-style:normal;font-weight:600}
.linea a:hover{color:var(--azul-oscuro);text-decoration:underline}

form.contacto{display:grid;gap:1rem}
form.contacto label{display:block;font-size:.88rem;font-weight:600;color:var(--antracita);margin-bottom:.3rem}
form.contacto input,form.contacto textarea{
  width:100%;padding:.7rem .85rem;border:1px solid #c9d6dd;border-radius:var(--radio);
  font:inherit;background:#fff;
}
form.contacto input:focus,form.contacto textarea:focus{
  outline:2px solid var(--azul);outline-offset:1px;border-color:var(--azul);
}
form.contacto textarea{min-height:130px;resize:vertical}
form.contacto button{
  background:var(--azul);color:#fff;border:0;padding:.8rem 2rem;border-radius:var(--radio);
  font-weight:700;font-size:1rem;cursor:pointer;justify-self:start;transition:.18s;
}
form.contacto button:hover{background:var(--azul-oscuro)}
.trampa{position:absolute;left:-9999px;top:-9999px}
.aviso{padding:.85rem 1.1rem;border-radius:var(--radio);font-size:.94rem}
.aviso.ok{background:#e8f6ed;border:1px solid #b6e0c4;color:#1d6b38}
.aviso.mal{background:#fdecec;border:1px solid #f3c2c2;color:#a02222}

/* ---------------------------------------------------- Pie */
footer.principal{background:var(--antracita);color:#a8b4b8;padding:2.8rem 0 1.6rem;font-size:.92rem}
.pie-rejilla{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-bottom:2rem}
footer.principal h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.9rem}
footer.principal ul{list-style:none}
footer.principal li{margin-bottom:.45rem}
footer.principal a{color:#a8b4b8;text-decoration:none}
footer.principal a:hover{color:#fff;text-decoration:underline}
footer.principal img.logo-pie{height:38px;margin-bottom:.9rem}
.pie-abajo{
  border-top:1px solid rgba(255,255,255,.12);padding-top:1.2rem;
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;font-size:.86rem;
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* El antracita del logo es el MISMO color del pie (#333535), así que sobre el
   pie desaparecería. Se pone sobre un panel claro en lugar de recolorearlo:
   así el logotipo se respeta tal cual, sin inventar colores de marca. */
footer.principal img.logo-pie{
  background:#fff;padding:.55rem .75rem;border-radius:6px;height:auto;max-width:280px;
}