/* ============================
   Variables (simples)
============================ */
:root{
  --brand: #000C56;		/*--brand: #00566A;*/
  --brand-dark: #003f50;
  --muted: #fff;		/*--muted: #e8e6f0;  --muted: #f5f5f5;*/
  --max-width: 1100px;
  --radius: 10px;
  --gap: 1.2rem;
  --container-pad: 1rem;
}

/* ============================
   Reset & base
============================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Open Sans',sans-serif;
  color:#333;
  background:#fff;
  line-height:1.6;
}

/* ============================
   Container
============================ */
.container{
  width:90%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--container-pad);
}

/* ============================
   Header & nav
============================ */
.site-header{
  background:#fff;
  border-bottom:3px solid var(--brand);
}
.header-inner{
  display:flex;
  /* align-items:column; /* ↓ Logo y menú en linea */
  align-items:column; /* ↓ Logo arriba, menú abajo */
  /* gap:var(--gap);/* ↓ Logo y menú en linea */
  align-items: flex-end;   /* → Menú alineado a la derecha */
  padding:0.9rem 0;
}

/* logo */
.logo img{
  height:180px;      /* si quieres más, sustituye por imagen mayor resolución */
  width:auto;
  display:block;
}

/* menú: lista horizontal por defecto */
a {text-decoration: none}
.nav ul{
  list-style:none;
  display:flex;
  gap:1.2rem;
  align-items:center;
  justify-content: flex-end; /* → Menú a la derecha */
  width: 100%;
}
.nav a{color:var(--brand);font-weight:600;display:inline-block;padding:0.35rem 0.45rem}
.nav a:visited{color:var(--brand);}
.nav a:hover,.nav a.active{text-decoration: underline;color:#003f50}
.nav {margin-left: auto;text-align: right}
/* checkbox-hack (oculto) y botón hamburguesa */
.menu-checkbox{display:none}
.menu-btn{
  display:none;                /* solo visible en móvil */
  margin-left:auto;
  font-size:1.8rem;
  color:var(--brand);
  background:none;
  border:none;
  cursor:pointer;
}

/* accesibilidad: pantalla para sr-only */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================
   Hero
============================ */
a {text-decoration: none}
.hero{background:var(--brand);color:#fff;padding:2.2rem 0;text-align:center}
.hero h1{font-weight:400;font-size:1.8rem;margin:0 auto;display:inline-block}

/* ============================
   Main / sections
============================ */
main{padding:2rem 0}

.catalogo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  border: 1px solid #eee;
  border-radius: 10px;
  background-color: #fafafa;
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.catalogo:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Separación entre tarjetas */
.services{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:1.2rem;
	margin:1.5rem 0;
}

.service{
  background:#fafafa;
  border:1px solid #eee;
  border-radius:var(--radius);
  padding:1.2rem;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 100%;
  gap:0.8rem;
  min-height:160px;
  transition:transform .25s ease,box-shadow .25s ease;
}

.service {transform:translateY(-6px);box-shadow:0 10px 24px rgba(0,0,0,0.06)}
.service h3 a {text-align:center;color:#000c56;margin:0 auto}
.service h3 a:hover {color: #05ABC4}

.service img{
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
  margin-top: auto;
  display: block;
}

.service p {
  margin-bottom: 1rem;
  line-height: 1.5;
  text-align: center;
}

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

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

/* CONTENEDOR DE SERVICIOS */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  width: 100%;
  margin-top: 2rem;
}

/* CADA TARJETA */
.service {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  text-align: center;
  display: flex;
  flex-direction: column;   /* contenido en columna */
  justify-content: flex-start; /* texto siempre arriba */
}

/* Efecto hover: mover caja hacia arriba en secciones destacadas */
.horario,
.contacto,
.presupuesto,
.taller,
.ofertas{
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.horario:hover,
.contacto:hover,
.presupuesto:hover,
.taller:hover,
.ofertas:hover{
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}


/* Destacados (ofertas) */
.destacados{
  display:flex;
  gap:1.2rem;
  flex-wrap:wrap;
  align-items:flex-start;
  margin:2rem 0;
  width: 100%;
  justify-content: center;
}
.ofertas img{max-width:100%;border-radius:8px;display:block}

/* Servicios container (presupuesto + taller) */
.servicios-container{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1.2rem;
	margin:1.5rem 0}
.presupuesto,.taller{
	padding:1.2rem;
	border-radius:var(--radius);
    gap:0.8rem;	
	transition:transform .25s ease,box-shadow .25s ease}
.presupuesto{
	background:var(--muted);
	color: #000C56;
	}
.presupuesto h2 {
  text-align: center;
  color: #000c56;
}
.presupuesto h2 a:link, .presupuesto h2 a:visited {
  text-decoration: none;
  color: #000c56;
}
.presupuesto h2 a:hover {
  text-decoration: none;
  color: #05abc4;
}

.taller{
	background:var(--brand);
	color:#fff}
.taller a{
	color:#fff;
	font-weight:700}
.taller h2 {
	text-align: center}
.taller p {
	text-align: center}
.link-taller a:hover{
	text-decoration: none;
	color: #05abc4}

/* Info container: horario + contacto */
.info-container{display:flex;gap:1.2rem;flex-wrap:wrap;margin:1.5rem 0}
.info-container > section{flex:1 1 300px;background:var(--muted);padding:1.2rem;border-radius:var(--radius);box-shadow:0 6px 18px rgba(0,0,0,0.03)}
.info-container h2{color:var(--brand);margin:0 0 0.8rem 0}
.mail-link:hover {
  text-decoration: underline;
}

/* ============================
   Footer
============================ */
footer{background:var(--brand);color:#fff;padding:1.5rem 0;margin-top:3rem;text-align: center}
/*.footer-container .social {display:grid;gap:1rem;align-items:center}*/
.footer-container .social {margin-bottom: 1rem}
.footer-container .social a{color:#fff;font-size:1.5rem;margin-right:0.6rem;transition: opacity 0.3s ease;}
.footer-container .social a:hover {
  opacity: 0.8;
}
.mapa {width: 100%;max-width: 800px;margin: 2rem auto;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 18px rgba(0,0,0,0.15)}

/*.mapa iframe{border-radius:8px;margin-top:0.5rem;}*/
.mapa iframe{width: 100%;height: 450px;border: 0}

/* ============================
   Forms / botones
============================ */
.btn-enviar{
  background:var(--brand);color:#fff;padding:0.9rem 1.8rem;border-radius:8px;text-decoration:none;display:inline-block;font-weight:700;transition:background 0.3s ease, transform 0.2s ease;
}
.btn-enviar:hover{transform:translateY(-3px);background:var(--brand-dark)}

input[type="checkbox"]{accent-color:var(--brand);width:18px;height:18px}

/* Tarjetas estilo “card” del catálogo */
.card-catalogo {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 1.8rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 0 rgba(0,0,0,0); /* inicio sin sombra */
}

.card-catalogo:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.card-catalogo h3 {
    color: #000c53;
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
}

.card-catalogo .subtitulo {
    display: block;
    font-size: 0.95rem;
    color: #00566A;
    margin-bottom: 1rem;
}

.card-catalogo img {
    width: 100%;
    border-radius: 10px;
    margin-top: 0.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Separación entre tarjetas */
.catalogo-lista {
    display: grid;
    gap: 2rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.catalogos .intro,
.intro {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 2rem auto;
    line-height: 1.6;
}

/* ============================
   Sobre Nosotros
============================ */
.container-nos {
  background: url("../img/bg-peque.webp") #fff;
  background-size: cover;
  background-attachment: fixed;
}

.nosotros-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 1rem;
}

.nosotros-box {
    background: rgba(255, 255, 255, 0.65); /* 65% opaco */
	backdrop-filter: blur(2px); /* desenfoque elegante */
    -webkit-backdrop-filter: blur(6px);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 18px rgba(0,0,0,0.12);
    max-width: 900px;
    margin: auto;
}

.nosotros-box h2 {
    color: #000c56; /* mismo color que usas en títulos */
    margin-bottom: 1rem;
    font-size: 1.7rem;
}

.nosotros-box p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
}

.container-nos .intro .nosotros-texto{
  background: rgba(255, 255, 255, 0.8);
  padding: 0 20px;
  width: 70%; }

/* ============================
   Formulario de contacto
============================ */
.contact-form {
  max-width: 600px;
  margin: 0 auto 2rem auto;
  text-align: left;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: #00566A;
  margin-bottom: 0.3rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: 'Open Sans', sans-serif;
}

.btn-enviar {
  background-color: #00566A;
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-enviar:hover {
  background-color: #003f50;
}

.datos-contacto {
  margin-top: 0rem;
  text-align: left;
}

.datos-contacto h2 {
  color: #000c56;
  margin-bottom: 1rem;
}

.datos-contacto h3 {
  color: #00566A;
  margin-bottom: 1rem;
}

input[type="checkbox"] {
  float: left !important;
}
/* ============================
   Responsive
============================ */
@media (max-width: 900px){
  .logo img{height:150px}
  .intro-grid{grid-template-columns:1fr}
  .servicios-container{grid-template-columns:1fr}
}

@media (max-width: 768px){
  .header-inner{align-items:center}
  /* mostrar botón hamburguesa */
  .menu-btn{display:block}

  /* ocultar la lista (por defecto) y mostrar sólo cuando checkbox esté activado */
  .nav ul{display:none;flex-direction:column;gap:0.6rem;padding:0.8rem;background:#fff;border-radius:8px;margin-top:0.6rem;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
  .menu-checkbox:checked ~ .nav ul{display:flex}

  /* forzar nav a ocupar ancho disponible */
  .nav{width:100%}

  /* hacer que la lista ocupe toda la anchura y botones legibles */
  .nav a{padding:0.6rem 0.8rem}

  .hero{padding:1.6rem 0}
  .logo img{height:120px}
  .footer-container{grid-auto-flow:row}
  
  .mapa iframe{height: 320px}
}

@media (max-width:480px){
  .logo img{height:100px}
  .hero h1{font-size:1.25rem}
}

/* Contenedor de formulario de contacto + información */
/* ============================
   CONTENEDOR GENERAL
   ============================ */
.contacto h2 {
	color: #000c56;
}

.contact-wrapper {
  display: flex;
  gap: 50px;
  align-items: flex-start;
  margin-top: 25px;
  flex-wrap: wrap;
}

/* ============================
   FORMULARIO
   ============================ */
.contact-form {
  flex: 1;
  min-width: 320px;
  max-width: 550px;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 6px;
  color: #000c56;
}

/* Inputs más modernos */
.contact-form input,
.contact-form textarea {
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid #b8c7d1;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #005f6e;
}

/* ============================
   CHECKBOX MEJORADO TOTALMENTE PEGADO AL TEXTO
   ============================ */
.checkbox-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 20px 0;
}

.checkbox-line input[type="checkbox"] {
  margin: 0;
  transform: scale(1.1);
}

.checkbox-line label {
  margin: 0;
  line-height: 1.25;
}


/* ============================
   BOTÓN
   ============================ */
.btn-enviar {
  background: #000c56;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 10px;
  transition: background 0.2s ease;
}

.btn-enviar:hover {
  background: #05ABC4;
}

/* ============================
   BLOQUE DERECHA
   ============================ */
.datos-contacto {
  flex: 1;
  min-width: 260px;
  max-width: 350px;
}

.datos-contacto h3 {
  margin-bottom: 15px;
  font-weight: 700;
  color: #000c56;
}

.datos-contacto p {
  margin-bottom: 12px;
  line-height: 1.4;
}

.datos-contacto a {
  color: #000c56;
}

.datos-contacto a:hover {
  color: #05ABC4;
}

.datos-contacto i {
  margin-right: 6px;
  color: #005f6e;
}

/* ============================
   RESPONSIVE
   ============================ */
/* ===== Tablets y pantallas medianas ===== */
@media (max-width: 992px) {
  .contact-wrapper {
    gap: 30px;
  }

  .contact-form {
    min-width: 300px;
  }
}

/* ===== Pantallas pequeñas (móviles grandes) ===== */
@media (max-width: 768px) {
  .contact-wrapper {
    flex-direction: column;
    gap: 40px;  /* separación limpia */
  }

  .contact-form,
  .datos-contacto {
    max-width: 100%;
  }

  .btn-enviar {
    width: 100%; /* Botón ancho completo en móvil */
    text-align: center;
  }
}

/* ===== Móviles pequeños ===== */
@media (max-width: 480px) {
  /* Inputs y textarea más cómodos */
  .contact-form input,
  .contact-form textarea {
    font-size: 1rem;
    padding: 12px;
  }

  /* Checkbox aún más pegado si la pantalla es muy estrecha */
  .checkbox-line {
    gap: 4px;
  }

  .checkbox-line label {
    font-size: 0.95rem;
    line-height: 1.25;
  }
}

.mapa {
  width: 100%;
  max-width: 800px;      /* Tamaño ideal en desktop */
  margin: 2rem auto;     /* Centrado */
  border-radius: 12px;
  overflow: hidden;      /* Bordes redondeados reales */
  box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}

/* Trucos para mantener relación 16:9 sin cortar */
.mapa iframe {
  width: 100%;
  height: 450px;         /* Altura ideal desktop */
  border: 0;
}

/* 📱 Mobile */
@media (max-width: 600px) {
  .mapa iframe {
    height: 320px;       /* Altura ideal móvil */
  }
}

.productos-section {
    max-width: 1100px;   /* mismo ancho que las cajas inferiores */
    margin: 0 auto;
    padding: 2rem 1rem;
}

.productos-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    justify-items: start;
    width: 100%;
    margin: 0 auto;
}

.texto-impresiones {
    display: flex;
    flex-direction: column;
    gap: 1rem;
	text-align: left;
}

.texto-impresiones h2, .texto-impresiones h3 {
	color: #000c56;
}
.img-impresiones {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.1);
    object-fit: cover;
}

/* Fila inferior: tarjetas */
.productos-bottom {
    display: flex;
	justify-content: center;
    /*grid-template-columns: repeat(3, 1fr);*/
    gap: 1rem;
	flex-wrap: wrap;  /* <--- ESTO permite que bajen */
}

/* Tarjetas */
.card {
    width: 330px;
    max-width: 100%;
}
@media (max-width: 768px) {
    .productos-top {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .img-impresiones {
        margin-top: 1.5rem;
    }
	
	.productos-bottom {
	flex-direction: column; /* <--- Fuerza a colocarse una debajo de otra */
	align-items: center;
    }
}