/* Base */
:root{
  --brand:#dc2626;
  --brand-dark:#991b1b;
  --bg:#f9f9f9;
  --text:#111;
  --container:1200px;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  max-width:100%;
  overflow-x:hidden;   /* evita scroll horizontal */
}

body{
  font-family:'Roboto',sans-serif;
  background-color:var(--bg);
  color:var(--text);
  scroll-behavior:smooth;
}

a{color:inherit}

/* Layout generales */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:2rem;
}

/* Header / Nav */
.header{
  position:fixed; top:0; left:0; width:100%;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.05);
  z-index:1000;
}
.nav-container{
  max-width:var(--container); margin:0 auto; padding:1rem 2rem;
  display:flex; justify-content:space-between; align-items:center;
}
.logo{
  font-size:1.5rem; font-weight:700; color:var(--brand);
  display:flex; align-items:center; gap:.5rem; text-decoration:none;
}
.logo-icon{ background:var(--brand); color:#fff; padding:.4rem; border-radius:8px; }
.nav-menu{ display:flex; gap:1.5rem; list-style:none; margin:0; padding:0; }
.nav-menu a{ color:#111; font-weight:500; text-decoration:none; }
.nav-menu a:hover{ color:var(--brand); }
.nav-toggle{ display:none; flex-direction:column; cursor:pointer; }
.nav-toggle span{ height:3px; width:25px; background:#333; margin:4px 0; }

/* Hero */
.hero {
  position: relative;
  background-color: rgb(255, 255, 255);
  min-height: 100vh;
  margin-top: 30px; /* 🔹 espacio debajo de la navbar */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 🔹 siempre muestra toda la imagen */
}

.hero .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;

  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: #000;
  padding: 1.5rem 2rem;       /* 🔹 menos padding vertical */
  background-color: rgba(255, 255, 255, 0.826);
  border: 3px solid #c00;
  display: inline-block;
  text-align: center;
}

.hero-logo {
  max-width: 1000px;           /* 🔹 logo más compacto */
  width: 35%;
  height: auto;
  margin-bottom: 0.5rem;      /* 🔹 antes 1rem → menos espacio */
}

.hero-content p {
  margin: 0.25rem 0 0.75rem;  /* 🔹 espacio reducido arriba y abajo */
  font-size: 1rem;
}


@media (max-width: 768px) {
  .hero-logo {
    max-width: 120px;
    width: 50%;
  }
}

/* 🔹 En tablets y móviles usamos contain */
@media (max-width: 992px) {
  .hero {
    background-size: contain;   /* la imagen se ve completa */
    background-position: top;   /* empieza desde arriba */
    height: auto;               /* deja que crezca según la imagen */
    min-height: 100vh;          /* como mínimo ocupa la pantalla */
  }
}

/* Por defecto (escritorio y tablets): mostrar la imagen */
.hero-bg {
  display: block;
}

/* En móviles pequeños: ocultar la imagen de fondo */
@media (max-width: 768px) {
  .hero-bg {
    display: none;
  }

  .hero {
    background-color: #111; /* o el color que prefieras */
    min-height: 100vh;
    padding: 100px 20px 60px; /* espacio para navbar y márgenes */
    text-align: center;
  }

  .hero-content {
    max-width: 90%;
    margin: 0 auto;
  }
}

/* Sección Sobre Nosotros */
.about {
  background: #fff;
  padding: 4rem 0;
}

.about .container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}

.about-content {
  text-align: center;
  line-height: 1.8;
  font-size: 1.1rem;
  color: #333;
}

.about-content p + p {
  margin-top: 1.5rem;
}

/* Secciones */
.section-title{
  text-align:center; font-size:2.5rem; margin-bottom:2rem; color:var(--brand);
}

/* Grid de servicios */
/* Sección de servicios */
.services {
  background: #fdfdfd;
}

/* Contenedor centrado de servicios */
.services .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
  text-align: center;
}

/* Grid de servicios */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: stretch;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: stretch;
}

/* Grid del carrusel de testimonios (sin cambios) */
.testimonials-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

/* ≤ 1024px: 2 columnas */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ≤ 640px: 1 columna */
@media (max-width: 640px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

.service-card{
  background:#fff; border-radius:12px; padding:2rem;
  box-shadow:0 5px 15px rgba(0,0,0,.05);
  text-align:center; transition:transform .3s ease;
}
.service-card:hover{ transform:translateY(-5px); }
.service-icon{ font-size:2.5rem; color:var(--brand); margin-bottom:1rem; }

/* Sección Proyectos */
.projects {
  position: relative;
  padding: 4rem 0; /* margen superior e inferior para respirar */
  text-align: center;
}

.projects .section-title {
  font-size: 2.5rem;
  color: var(--brand);
  margin-bottom: 3rem; /* separa título y carrusel */
  position: relative;
  z-index: 2; /* asegura que no quede tapado */
}

.projects .box {
  margin: 0 auto;
  margin-top: 2rem; /* espacio extra debajo del título */
}

/* Carrousel Proyectos*/
.box {
  position: relative;
  width: 60vw;                /* ancho relativo a la pantalla */
  height: 60vw;               /* alto relativo a la pantalla */
  max-width: 300px;           /* límite máximo en escritorio */
  max-height: 300px;
  min-width: 200px;           /* límite mínimo en móviles */
  min-height: 200px;
  margin: 0 auto;             /* centrar horizontal */
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  animation: animate 30s linear infinite;
}

@keyframes animate {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}

.box span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) *45deg)) translateZ(400px);
  -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0004);
}

.box span img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 2px solid white;
  border-radius: 18px;
  height: 100%;
  object-fit: cover;
}

/* Botones CTA */
.cta-button{
  background:var(--brand); color:#fff; padding:.75rem 1.5rem;
  border-radius:30px; border:none; font-weight:700; text-decoration:none; font-size:1rem;
  transition:background-color .3s;
  display:inline-block; text-align:center;
}
.cta-button:hover{ background:var(--brand-dark); }
.cta-block{ width:100%; }
.cta-fab{
  position:fixed; bottom:90px; right:20px; z-index:999;
}

/* Accordion */
.loc-accordion { border-radius: 12px; background:#fff; margin: 0 0 1rem 0; overflow: clip; }
.loc-accordion[open] { box-shadow: 0 8px 24px rgba(0,0,0,.06); }

.loc-summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: #f7f7f7;
  border-bottom: 1px solid #eee;
}
.loc-summary::-webkit-details-marker { display: none; }
.loc-summary .locations__title { margin:0; font-size:1.25rem; }
.loc-chevron { transition: transform .25s ease; font-size: 1.1rem; opacity:.7; }
.loc-accordion[open] .loc-chevron { transform: rotate(180deg); }

.loc-content { padding: 1rem 1.25rem 1.25rem; background:#fff; }
.loc-map { width: 100%; height: 360px; margin-top: 1.25rem; border-radius: 12px; overflow: hidden; }

/* (Opcional) tema alterno para secciones grises */
.locations--alt .loc-summary { background:#f0f2f5; }


/* CTA antes del formulario */
.cta-before-contact{
  background:#fff7f7; padding:3rem 1rem; text-align:center;
}
.cta-before-contact h2{ font-size:2rem; margin-bottom:1rem; }
.cta-before-contact p{ font-size:1.1rem; margin-bottom:2rem; }

/* Formulario de contacto */
.contact-form{ max-width:760px; margin:0 auto; }
.form-field{
  width:100%; padding:1rem; margin-bottom:1rem;
  border-radius:8px; border:1px solid #ccc; font:inherit;
}

/* Footer */
.site-footer{
  background:#f0f0f0; padding:2rem; text-align:center; font-size:.9rem;
}

/* Botón WhatsApp flotante */
.whatsapp-button{
  position:fixed; bottom:20px; right:20px;
  background:#25d366; color:#fff; padding:15px;
  border-radius:50%; font-size:1.5rem;
  box-shadow:0 4px 12px rgba(0,0,0,.3); z-index:1000;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.whatsapp-button:hover{ filter:brightness(0.95); }

/* Responsive */
@media (max-width:900px){
  .locations__grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:600px){
  .nav-menu{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-menu.active{ display:flex; flex-direction:column; gap:1rem; position:absolute; top:64px; right:16px; background:#fff; padding:1rem 1.25rem; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.12); }
  .locations__grid{ grid-template-columns:1fr; }
}

@media (max-width: 768px) {
  .box {
    width: 70vw;
    height: 70vw;
    max-width: 300px;
    max-height: 300px;
  }
}

@media (max-width: 480px) {
  .box {
    width: 80vw;
    height: 80vw;
    max-width: 250px;
    max-height: 250px;
  }
}

/* ===== Contacto en 2 columnas ===== */
/* Bloque de información de contacto (izquierda) */
.contact-info{
  background:#fff;
  border-radius:12px;
  padding:1.5rem;
  box-shadow:0 5px 15px rgba(0,0,0,.05);
}

.info-icon{
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; line-height:1;
  color:var(--brand);
  margin-top:2px;
}

/* Icono PNG de WhatsApp si usas imagen */
.wa-icon{ width:20px; height:20px; display:block; }

/* Estilo de enlaces de contacto (colores de marca) */
.contact-link{ text-decoration:underline; text-underline-offset:.15em; }
.contact-link:hover{ text-decoration:none; }
.contact-link.tel{ color: var(--brand); }
.contact-link.wa{ color:#22c55e; }

/* Formulario (derecha): ya tienes .contact-form y .form-field definidos.
   Aquí solo quitamos el max-width para que aproveche la columna. */
.contact-grid .contact-form{
  max-width:none;
  background:#fff;
  border-radius:12px;
  padding:1.5rem;
  box-shadow:0 5px 15px rgba(0,0,0,.05);
}

/* Responsive: 1 columna en pantallas pequeñas */
@media (max-width: 900px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* ===== Fix alineación iconos + tipografía en contacto ===== */
.info-item{
  display:flex;
  align-items:center;           /* <— centra icono y texto en el eje vertical */
  gap:.75rem;
  margin-bottom:1rem;
}

.info-item p{                   /* evita que el <p> empuje verticalmente */
  margin:0;
  line-height:1.4;
}

.info-icon{
  width:24px;
  height:24px;
  display:inline-flex;          /* <— asegura caja alineada a la línea */
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
  line-height:1;                /* sin “bailes” de línea */
  color:var(--brand);
  margin-top:0;                 /* <— elimina el microdesfase */
}

.wa-icon{
  width:20px;
  height:20px;
  display:block;
}

/* ===== Accesibilidad táctil + enfoque ===== */
.form-field{
  min-height:44px;              /* objetivo táctil recomendado */
}

.form-field:focus{
  outline:2px solid var(--brand);
  outline-offset:1px;
}

/* ===== Ajustes de grid y contenedor en móviles ===== */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:2rem;
  align-items:start;
}

@media (max-width: 900px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* Que el formulario aproveche la columna en grid */
.contact-grid .contact-form{
  max-width:none;
  background:#fff;
  border-radius:12px;
  padding:1.5rem;
  box-shadow:0 5px 15px rgba(0,0,0,.05);
}

/* Caja de info igualada visualmente al formulario */
.contact-info{
  background:#fff;
  border-radius:12px;
  padding:1.5rem;
  box-shadow:0 5px 15px rgba(0,0,0,.05);
}

/* Enlaces de contacto */
.contact-link{ text-decoration:underline; text-underline-offset:.15em; }
.contact-link:hover{ text-decoration:none; }
.contact-link.tel{ color:var(--brand); }
.contact-link.wa{ color:#22c55e; }

/* ===== Evitar que el header fijo tape títulos al navegar por anclas ===== */
section, .projects, .services, .about{
  scroll-margin-top: 84px;  /* header fijo + respiro */
}

/* ===== Preferencias de movimiento reducido (carrusel 3D) ===== */
@media (prefers-reduced-motion: reduce){
  .box { animation: none !important; }
}

/* Checkbox RGPD */
.checkbox-row{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin-top:1rem;
  margin-bottom:1.5rem;
}

.checkbox-row input[type="checkbox"]{
  margin-top:.3rem;
}

/* Honeypot oculto */
.hp{
  position:absolute !important;
  left:-9999px !important;
  visibility:hidden !important;
  height:0 !important;
  width:0 !important;
  overflow:hidden !important;
}

/* Mensajes estado formulario */
.form-msg{
  margin-top:.75rem;
  font-size:.95rem;
}

.form-msg.ok{ color:#16a34a; }
.form-msg.error{ color:#dc2626; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Aviso RGPD (cuando el checkbox no está marcado) */
.rgpd-warning {
  color: #dc2626;        /* rojo */
  font-size: 0.95rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.site-footer p {
  margin: 0;
  font-size: 0.9rem;
  color: #444;
}

.site-footer a {
  color: var(--brand);
  text-decoration: underline;
}

.site-footer a:hover {
  text-decoration: none;
}

/* Cláusula RGPD destacada */
.rgpd-summary {
  background-color: #fff7f7;   /* fondo suave */
  border: 1px solid #f5c2c2;   /* borde fino rojo claro */
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: #444;
  line-height: 1.5;
}

.rgpd-summary strong {
  color: var(--brand);
}

.rgpd-summary a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rgpd-summary a:hover {
  text-decoration: none;
}

/* Alinear verticalmente TODOS los items del menú */
.nav-menu{
  display:flex;
  gap:1.5rem;
  list-style:none;
  margin:0;
  padding:0;
  align-items:center;            /* <— clave */
}

.nav-menu li{
  display:flex; 
  align-items:center;            /* <— clave */
}

/* Los enlaces también como flex para centrar el texto */
.nav-menu a{
  display:inline-flex;           /* <— cambia de inline a inline-flex */
  align-items:center;            /* <— centra verticalmente */
  color:#111; 
  font-weight:500; 
  text-decoration:none; 
  line-height:1;                 /* evita “bailes” por line-height */
  padding: .5rem 0;              /* altura coherente */
}

/* Instagram: mismo centro que el resto */
.nav-social{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  margin-left:.5rem;
}

.nav-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:transparent;
  transition:all .2s ease;
}

.nav-social svg{
  display:block;                 /* <— evita alineación por baseline */
  width:20px;
  height:20px;
  fill:#111;
  transition:fill .2s ease;
}

.nav-social a:hover svg{ fill:#e4405f; }

@media (max-width:768px){
  .nav-social{ margin-top:.5rem; }
}

/* ======== MENÚ RESPONSIVE ======== */

/* Estado por defecto (escritorio): nav-toggle oculto, menú en línea */
.nav-toggle{
  display:none;
  flex-direction:column;
  cursor:pointer;
}
.nav-toggle span{
  height:3px;
  width:25px;
  background:#333;
  margin:4px 0;
}

/* Versión móvil */
@media (max-width: 992px){
  .nav-container{
    padding:0.75rem 1rem;
  }

  .nav-menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    gap:0;
    padding:0.75rem 1.5rem 1rem;
    border-bottom:1px solid #eee;
    display:none;          /* oculto por defecto */
  }

  .nav-menu li{
    margin:0.25rem 0;
  }

  .nav-menu a{
    padding:0.25rem 0;
  }

  .nav-menu.show{
    display:flex;          /* cuando tenga la clase .show se ve */
  }

  .nav-toggle{
    display:flex;          /* mostramos el icono hamburguesa */
  }
}

/* Ajuste real para móviles (mantiene el 3D original, sin que se pisen) */
@media (max-width: 768px){

  .projects .box{
    width: 220px;
    height: 220px;
  }

  .projects .box span{
    /* 🔹 MÁS radio para que quepan mejor las 8 imágenes */
    transform: rotateY(calc(var(--i)*45deg)) translateZ(360px);
    -webkit-box-reflect: none;
  }

  .projects .box span img{
    border-radius: 10px;
  }
}

@media (max-width: 480px){

  .projects .box{
    width: 160px;
    height: 160px;
  }

  .projects .box span{
    /* 🔹 mismo radio que arriba, para mantener proporción */
    transform: rotateY(calc(var(--i)*45deg)) translateZ(360px);
  }
}