/* Reseteo básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fuente global */
html {
  /* Tamaño de fuente base responsive (no afecta los valores fijos de tu diseño) */
  font-size: clamp(10px, 2vw, 20px);
}

body {
  font-family: 'Montserrat', sans-serif;
  background: #E7DDD1;
  color: #333;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;

}

/* Barra principal */
.barra-principal {
  position: relative;
  padding: 0;
  /* Altura responsive: mínimo 80px, ideal 15vw, máximo 150px (igual que el original) */
  height: clamp(80px, 15vw, 150px);
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 5px solid #fff;
}

/* Título principal */
.titulo-principal {
  /* Tamaño de fuente responsive: mínimo 2rem (32px), ideal 5vw, máximo 60px (igual que el original) */
  font-size: clamp(1.5rem, 5vw, 60px);
  font-weight: 700;
  color: #000;
  position: absolute;
  left: 0;
  top: 70%;
  transform: translateY(-50%);
  margin: 0;
}

.titulo-principal a {
  color: inherit;
  text-decoration: none;
}

/* Logo secundario */
.logo-secundario {
  /* Tamaño responsive: mínimo 100px, ideal 20vw, máximo 300px (igual que el original) */
  width: clamp(100px, 20vw, 300px);
  height: clamp(100px, 20vw, 300px);
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  right: 0;
  top: 90%;
  transform: translateY(-50%);
  margin: 0;
  margin-right: -7%;
}

/* Contenedor principal centrado */
.contenido {
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* Padding responsive: mínimo 1rem (16px), ideal 2vw, máximo 2rem (32px, igual que el original) */
  padding: clamp(16px, 2vw, 32px);
  color: #000;
  text-align: center;
  /* Margen top y laterales responsive: mínimo 10px, ideal 8vw, máximo 96px (8% de 1200px = 96px, idéntico al original al ancho de escritorio) */
  margin-top: clamp(10px, 8vw, 96px);
  margin-left: clamp(10px, 8vw, 96px);
  margin-right: clamp(10px, 8vw, 96px);
}

/* Cada sección */
.seccion {
  width: 100%;
  /* Max-width responsive: mínimo 200px, ideal 50vw, máximo 500px (igual que el original) */
  max-width: clamp(200px, 50vw, 500px);
  /* Margen bottom responsive: mínimo 20px, ideal 10vw, máximo 80px (igual que el original) */
  margin-bottom: clamp(20px, 10vw, 80px);
  /* Altura fija igual al original: 50vh */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* Títulos con border-bottom ajustado al texto */
.seccion h2 {
  display: inline-block;
  border-bottom: 2px solid #fff;
  /* Padding-bottom responsive: mínimo 2px, ideal 1vw, máximo 4px (0.25rem = 4px original) */
  padding-bottom: clamp(2px, 1vw, 4px);
  /* Margin-bottom responsive: mínimo 8px, ideal 2vw, máximo 16px (1rem = 16px original) */
  margin-bottom: clamp(8px, 2vw, 16px);
  /* Tamaño de fuente responsive: mínimo 1.5rem (24px), ideal 4vw, máximo 40px (igual que el original) */
  font-size: clamp(1.5rem, 4vw, 40px);
  font-weight: 600;
  color: black;
}

/* Contenedor que agrupa párrafo + datos, centrado y con ancho fijo responsive */
.texto-datos {
  /* Máximo ancho responsive: mínimo 200px, ideal 50vw, máximo 400px (igual que el original) */
  max-width: clamp(200px, 50vw, 400px);
  margin: 0 auto;
  text-align: justify;
}

/* Párrafos */
.seccion p {
  /* Tamaño de fuente responsive: mínimo 0.75rem (12px), ideal 1.5vw, máximo 1rem (16px, ligeramente mayor que los 14px originales pero legible) */
  font-size: clamp(12px, 1.5vw, 16px);
  line-height: 1.6;
  text-align: justify;
  /* Máximo ancho responsive: mínimo 200px, ideal 50vw, máximo 400px (igual que el original) */
  max-width: clamp(200px, 50vw, 400px);
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Bloque de datos ya no se centra: solo margen superior y texto a la izquierda */
.datos {
  /* Margin-top responsive: mínimo 8px, ideal 2vw, máximo 16px (1rem = 16px original) */
  margin-top: clamp(8px, 2vw, 16px);
  text-align: center;
}

/* Opcional: estilo de los h3 */
.datos h3 {
  margin: 0.25rem 0;
  /* Tamaño de fuente responsive: mínimo 1rem (16px), ideal 2vw, máximo 1.25rem (20px, solo un poco mayor que 16px) */
  font-size: clamp(16px, 2vw, 20px);
  font-weight: bolder;
  color: #6a5e40;
}

/* SECCIÓN DIRECCIÓN */
/* Contenedor de texto + icono */
.direccion-datos {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Margin-top responsive: mínimo 8px, ideal 2vw, máximo 16px (1rem = 16px original) */
  margin-top: clamp(8px, 2vw, 16px);
  /* Gap responsive: mínimo 8px, ideal 4vw, máximo 32px (2rem = 32px original) */
  gap: clamp(8px, 4vw, 32px);
}

/* Cada hijo ocupa sólo su contenido */
.direccion-texto,
.direccion-icono {
  flex: none;
}

/* Aseguramos alineación interna del texto */
.direccion-texto {
  text-align: left;
}

/* Centrado interno del icono */
.direccion-icono {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Tamaño del icono responsive: mínimo 24px, ideal 5vw, máximo 60px (igual que el original) */
.direccion-icono img {
  width: clamp(24px, 5vw, 60px);
  height: clamp(24px, 5vw, 60px);
  object-fit: contain;
}

/* Pie de página */
.pie-pagina {
  text-align: start;
  /* Padding responsive: mínimo 8px, ideal 1vw, máximo 16px (1rem = 16px original) */
  padding: clamp(8px, 1vw, 16px) 0;
  /* Tamaño de fuente responsive: mínimo 10px, ideal 1vw, máximo 14.4px (0.9rem ≈ 14.4px original) */
  font-size: clamp(10px, 1vw, 14.4px);
  color: #666;
  border-top: 1px solid #d0cdcd;
  /* Margin-left responsive: mínimo 2px, ideal 1vw, máximo 5px (igual que el original) */
  padding-left: clamp(2px, 1vw, 5px);
  position: static;   /* antes fixed */
  margin-top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #E7DDD1;
}










/*ICONOS REDES SOCIALES*/
/* Estilos para los íconos de redes sociales */
.iconos_redes_sociales {
    position: fixed; /* Mantiene los íconos en una posición fija */
    right: 20px; /* Ajusta la distancia desde el borde derecho */
    bottom: 90px; /* Ajusta la distancia desde el borde inferior */
    flex-direction: column;
    gap: 10px; /* Espacio entre los íconos */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Ancho del ícono */
    height: 90px; /* Altura del ícono */
    border-radius: 50%; /* Hacer los íconos redondos */
    text-decoration: none; /* Quitar subrayado del enlace */
    transition: opacity 0.3s; /* Transición suave de la opacidad */
}

.iconos_redes_sociales i {
    font-size: 40px; /* Tamaño del ícono */
}

/* Colores originales de los íconos */
#icono_whatsapp i {
    color: #25D366; /* Color del ícono de WhatsApp */
}

#icono_instagram i {
    color: #C13584; /* Color del ícono de Instagram */
}


/* Cambia la opacidad al pasar el mouse */
.iconos_redes_sociales a:hover {
    opacity: 0.7; /* Ajusta la opacidad para un efecto de hover */
}









@media screen and (max-width: 1000px) {
  .contenido {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5vw;
    height: auto; /* NO 100vh */
    padding: 0 20px;
  }

  .contenido .seccion {
    height: auto; /* <--- Esto es CLAVE */
    margin-bottom: 0; /* o algo más chico */
  }
}



.contenido .seccion:nth-child(2) {
  margin-left: clamp(10px, 5vw, 25px);
  margin-right: clamp(10px, 5vw, 25px);
}


















@media (max-width: 768px) { 


  .texto-datos,
  .seccion p{
    max-width: none !important;
    width: min(78vw, 620px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: justify !important;
  }


  .seccion{
  max-width: none !important;
  width: 100% !important;
  align-items: center !important; /* h2 y párrafo quedan alineados al centro */
  }



  /* 2) Footer igual al de index (NO fijo; parte del flujo) */
  body{
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
  }
  
  .contenido{ flex: 1 0 auto !important; }

  .pie-pagina, footer.pie-pagina, footer{
    position: static !important;          /* <- clave para que no quede fijo */
    width: 100% !important;
    height: 35px !important;              /* mismo alto que index */
    box-sizing: border-box !important;
    padding: 8px 16px !important;         /* px-4 py-2 */
    background: #E7DDD1 !important;
    border-top: 1px solid #d0cdcd !important;
    color: #666 !important;
    text-align: start !important;
  }



  /* 4) Por si iOS intenta poner el tel azul/subrayado */
  a[href^="tel:"], a[x-apple-data-detectors]{
    color:#6a5e40 !important;
    text-decoration:none !important;
  }
}






/* ===== CONTACT — Header SOLO MÓVIL (parche definitivo) ===== */
@media (max-width: 768px) {
  .barra-principal{
    --gutter: clamp(14px, 4vw, 28px);      /* margen simétrico izq/der */
    display: flex !important;
    align-items: flex-end !important;      /* título y logo apoyan en la línea */
    justify-content: space-between !important;
    position: relative !important;
    height: clamp(60px, 12vw, 110px) !important;    margin: 0 auto !important;
    padding: 0 var(--gutter) !important;   /* <<< mismo margen a ambos lados */
    border-bottom: 3px solid #fff !important;
  }

  .barra-principal .titulo-principal{
    position: static !important;           /* anula el absolute del base */
    transform: none !important;
    margin: 0 !important;                  /* el “margen” lo da el gutter */
    line-height: 2 !important;             /* apoya justo sobre la línea */
    font-size: clamp(1.5rem, 5.2vw, 60px) !important;
    color: #000 !important;
    font-weight: 700 !important;
  }

  .barra-principal .logo-secundario{
              /* simétrico al título */
    width: clamp(115px, 25vw, 165px) !important;  /* <<< más grande */
    height: clamp(115px, 25vw, 165px) !important;

  }
}

@media (max-width: 480px){
  .barra-principal{ width: 92% !important; } /* ajuste fino en móviles chicos */
}





/* Empujar el contenido un poco más arriba SOLO en móvil */
@media (max-width: 768px){
  .contenido{
    /* antes: clamp(10px, 8vw, 96px) */
    margin-top: clamp(0px, 2.5vw, 14px) !important;
  }

  /* por si algún bloque mete separación extra al inicio */
  .seccion:first-child{
    margin-top: 0 !important;
    padding-top: clamp(0px, 1vw, 8px) !important;
  }
}





































/* SOLO MÓVIL — bloquear scroll lateral SIN mover el logo */
@media (max-width: 768px){
  html, body { overflow-x: hidden !important; }
  .barra-principal { overflow: hidden !important; } /* recorta el desborde del logo */
}

/* SOLO MÓVIL — cuerpo alineado con la barra y un leve corrimiento */
@media (max-width: 768px){
  .contenido{
    width: 80% !important;                 /* mismo ancho que la barra */
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translateX(-1.2vw);         /* muévelo “al otro lado”.
                                              (si querés al revés: +1.2vw) */
  }

  /* anula el margen especial de la 2ª sección que descuadra */
  .contenido .seccion:nth-child(2){
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


















/* 1) Bloquear scroll lateral SIN mover el logo */
@media (max-width: 768px){
  html, body { overflow-x: hidden !important; }
  .barra-principal { overflow: hidden !important; } /* recorta el -7% del logo */
}

/* 2) Centrar de verdad los textos/datos bajo cada título */
@media (max-width: 768px){
  /* que el cuerpo tenga el MISMO ancho que la barra y sin padding lateral */
  .contenido{
    width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;  /* anula el padding: 0 20px del @media 1000px */
  }

  /* los bloques internos ocupan el ancho del contenedor y quedan centrados */
  .seccion,
  .texto-datos,
  .seccion p,
  .datos,
  .direccion-datos{
    width: 100% !important;
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* en Dirección, centrar el conjunto texto + ícono */
  .direccion-datos{ justify-content: center !important; }
}
























/* Bloquear scroll lateral en toda la página */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}





/* Ocultar scrollbar vertical (sigue habiendo scroll) */
html{
  overflow-y: auto;           /* solo aparece scroll si hay contenido */
  -ms-overflow-style: none;   /* IE/Edge */
  scrollbar-width: none;      /* Firefox */
}
html::-webkit-scrollbar{      /* Chrome/Safari/Opera */
  width: 0;
  height: 0;
}





@media (min-width: 769px){
  /* Si el contenido entra en pantalla, no queda ni 1px extra */
  .contenido{ padding-bottom: 0; }
  .seccion:last-child{ margin-bottom: 0; }
}










/* Desktop: alinear las 3 columnas por arriba y subir el bloque */
@media (min-width: 769px){
  .contenido{
    align-items: flex-start !important;     /* alinea los tops de las 3 secciones */
  }

  /* Asegura que el contenido de cada sección siga centrado horizontalmente */
  .seccion{ align-items: center !important; }
}





/* Por defecto visible */
.iconos_redes_sociales { display: flex; } /* o block */

/* Ocultar en celular/tablet chica */
@media (max-width: 1024px) {
  .iconos_redes_sociales { display: none !important; }
}