:root{
  /* ===== Paleta de colores ===== */
  --color1:#ffa4f4;   /* Rosa principal */
  --color2:#ffbee5;   /* Rosa pastel, cajas */
  --color3:#3a0c1e;   /* Marrón / texto principal */
  --color4:#8d827f;   /* Gris topo */
  --color5:#fffaf2;   /* Blanco roto de fondo */

  /* ===== Tipografías ===== */
  --font-primary:'Poppins','Avenir',sans-serif;
  --font-secondary:'Poppins','Avenir',sans-serif;
}

/* =========================================================
   Reset & base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-primary);
  line-height:1.5;
  background:var(--color5);
  color:var(--color3);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit}
:focus-visible{outline:2px dashed var(--color1);outline-offset:4px}

.container{width:min(90%,1200px);margin-inline:auto}
.flex{display:flex;align-items:center;justify-content:space-between}
.grid{display:grid;align-items:center;gap:2rem}

/* =========================================================
   Header
   ========================================================= */
header{
  background:var(--color5);
  padding:1rem 0;
  position:sticky;top:0;z-index:1000;
}
.logo img{display:block}

/* --- Navegación --- */
.nav-toggle{display:none;background:none;border:none}
.nav-menu{display:flex;gap:1.5rem;list-style:none}
.nav-menu li a{font-weight:600;transition:color .2s}
.nav-menu li a:hover{color:var(--color1)}
.btn{
  padding:.6rem 1.4rem;
  border-radius:50px;
  font-weight:700;
  display:inline-block;
  transition:background .2s,color .2s;
}
.btn.primary{background:var(--color1);color:var(--color3)}
.btn.cta{background:var(--color3);color:var(--color5)}
.btn:hover{filter:brightness(1.05)}

/* =========================================================
   Hero
   ========================================================= */
.hero{position:relative;height:60vh;overflow:hidden}
.hero picture img{object-fit:cover;width:100%;height:100%}
.hero-content{
  position:absolute;inset:50% auto auto 50%;transform:translate(-50%, -50%);
  color:var(--color5);
  text-align:center;
  text-shadow:0 2px 4px rgba(0,0,0,.4);
}
.hero-content h1{font-size:clamp(2rem,4vw,3rem);font-weight:700}
.hero-content p{margin-block:1rem 2rem;font-size:clamp(1rem,2vw,1.25rem)}

/* =========================================================
   About / Services / Benefits
   ========================================================= */
.about img{border-radius:1rem}
.services .service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:2rem}
.service-card{background:var(--color2);padding:2rem;border-radius:1rem;text-align:center}
/* Centro las imágenes dentro de la tarjeta */
.service-card img{margin-inline:auto;display:block;max-width:100%;}
.service-card h3{margin-block:1rem .5rem;font-size:1.25rem}
.service-card p{font-size:.95rem}
.checklist{list-style:'✔ ';padding-left:1.5rem;margin-top:1rem}
.checklist li{margin-block:.5rem}

/* =========================================================
   Slider de marcas
   ========================================================= */
.brand-slider{
  /* Centrar la sección dentro del layout */
  max-width:1200px;
  margin-inline:auto;
  padding:3rem clamp(1rem,5vw,2.5rem);
  background:var(--color5);
}

.brand-slider h2{
  text-align:center;
  font-size:clamp(1.5rem,3vw,2rem);
  margin-bottom:1.5rem;
}

.brand-slider .swiper{padding:2rem 0;width:100%}
.brand-slider .swiper-wrapper{justify-content:center}

/* =========================================================
   Contacto
   ========================================================= */
.contact{background:var(--color4);color:var(--color5);padding:3rem 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.contact-info a{color:var(--color1);font-weight:600}
.map-responsive{overflow:hidden;padding-bottom:56.25%;position:relative;height:0}
.map-responsive iframe{left:0;top:0;height:100%;width:100%;position:absolute;border:0}

/* =========================================================
   Footer
   ========================================================= */
footer{background:var(--color3);color:var(--color5);padding:2rem 0;margin-top:4rem}
.footer-grid{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:1rem}
.footer-nav{display:flex;gap:1rem}
.footer-nav a:hover{color:var(--color1)}
.social{display:flex;gap:.75rem}

/* =========================================================
   Responsividad
   ========================================================= */
@media(max-width:768px){
  /* --- Navegación móvil --- */
  .nav-toggle{display:block;cursor:pointer}
  .nav-menu{
    position:fixed;inset:0 0 0 50%;
    background:var(--color5);
    flex-direction:column;
    padding:6rem 2rem;
    transform:translateX(100%);
    transition:transform .3s ease;
  }
  .nav-menu.open{transform:translateX(0)}

  /* --- Hero --- */
  .hero{height:70vh}

  /* --- Contacto --- */
  .contact-grid{grid-template-columns:1fr}
}

/* Utilidades de color generadas */
.bg-color5 { background: var(--color5); }
.text-color3 { color: var(--color3); }
/* Espaciados tailwind-like mínimos utilizados */
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }

/* ===== Ajustes Sobre Nosotros ===== */
#sobre .sobre-titulo {
  text-align: center;
}

#sobre p {
  text-align: justify;
  line-height: 1.5;
}
/* ===== Cookie banner ===== */
.cookie-banner{
  position:fixed;
  bottom:0; left:0;
  width:100%;
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:center;
  padding:1rem clamp(1rem,5vw,2rem);
  background:var(--color3);
  color:var(--color5);
  z-index:9999;

  /* Oculto por defecto: desplazado fuera de pantalla */
  transform:translateY(100%);
  transition:transform .3s ease;
}

.cookie-banner.show{ transform:translateY(0); }

.cookie-banner a{
  text-decoration:underline;
}

.cookie-banner .btn{
  flex-shrink:0;
}

/* Mejoras responsive */
@media(max-width:480px){
  .cookie-text{ font-size:.85rem; text-align:center; }
}