/* ==========================
   ABOUT US — CSS RESPONSIVE (FIX OVERLAP)
   ========================== */

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

/* Tipografía y base fluida */
html { font-size: clamp(10px, 2vw, 20px); }

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

/* Espacio reservado para el footer fijo (reutilizable) */
:root {
  --footer-space: clamp(64px, 10vh, 120px);
}

/* --------------------------
   Barra principal (header)
   -------------------------- */
.barra-principal {
  position: relative;
  padding: 0;
  height: clamp(80px, 15vw, 150px);
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 5px solid #fff;
}

/* Título principal */
.titulo-principal {
  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 {
  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%;
}

/* --------------------------
   Contenido principal
   -------------------------- */
.contenido {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;       /* Lectura vertical */
  justify-content: center;
  align-items: center;
  padding: clamp(16px, 2vw, 32px);
  color: #000;
  text-align: center;

  margin-top: clamp(5px, 4vw, 48px);
  margin-left: clamp(10px, 8vw, 96px);
  margin-right: clamp(10px, 8vw, 96px);
  
}


/* Secciones */
.seccion {
  width: 100%;
  max-width: clamp(260px, 80vw, 1200px);
  margin-bottom: clamp(20px, 10vw, 80px);
}

/* Títulos de sección */
.seccion h2 {
  display: inline-block;
  border-bottom: 2px solid #fff;
  padding-bottom: clamp(2px, 1vw, 4px);
  margin-bottom: clamp(8px, 2vw, 16px);
  font-size: clamp(1.5rem, 4vw, 40px);
  font-weight: 600;
  color: black;
}

/* Párrafos */
.seccion p {
  font-size: clamp(12px, 1.5vw, 16px);
  line-height: 1.8;
  text-align: justify;
  max-width: clamp(240px, 80vw, 1200px);
  margin-left: auto;
  margin-right: auto;
  display: block;
  word-break: break-word; /* Seguridad en pantallas muy angostas */
}

/* Ajuste suave para la segunda sección (paridad con contact) */
.contenido .seccion:nth-child(2) {
  margin-left: clamp(10px, 5vw, 25px);
  margin-right: clamp(10px, 5vw, 25px);
}


/* --------------------------
   Footer (fijo)
   -------------------------- */
.pie-pagina {
  text-align: start;
  padding: clamp(8px, 1vw, 16px) 0;
  font-size: clamp(10px, 1vw, 14.4px);
  color: #666;
  border-top: 1px solid #d0cdcd;
  padding-left: clamp(2px, 1vw, 5px);
  position: static;   /* antes fixed */
  margin-top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #E7DDD1;
  z-index: 10;
}

/* ==========================
   Media Queries (afinados)
   ========================== */

/* ≤ 1200px: un poco más de aire lateral */
@media (max-width: 1200px) {
  .barra-principal { width: 85%; }
}

/* ≤ 1000px: ¡No perder el padding-bottom y mantener separación entre secciones! */
@media (max-width: 1000px) {
  .contenido {
    /* Antes: padding: 0 20px;  <-- pisaba el bottom */
    padding-left: 20px;
    padding-right: 20px;
    /* Mantener el espacio para el footer */
    padding-bottom: calc(var(--footer-space) + env(safe-area-inset-bottom));
  }

  /* Espacio proporcional entre secciones (evita que "Mi sueño" quede pegado) */
  .seccion { 
    margin-bottom: clamp(24px, 6vw, 48px);
  }
}

/* ≤ 768px: mejora de lectura y cabecera */
@media (max-width: 768px) {
  .barra-principal { width: 90%; }
  .titulo-principal { top: 65%; }
  .logo-secundario { margin-right: -4%; }
  .seccion { max-width: 92vw; }
}

/* ≤ 480px: refinos para muy chico */
@media (max-width: 480px) {
  .barra-principal { width: 92%; }
  .titulo-principal { top: 60%; }
  .logo-secundario { right: -2%; margin-right: 0; }

  .contenido {
    margin-left: clamp(8px, 4vw, 24px);
    margin-right: clamp(8px, 4vw, 24px);
    /* Un poco más por el footer en pantallas mínimas */
    padding-bottom: calc(var(--footer-space) + 12px + env(safe-area-inset-bottom));
  }

  /* Aumentamos un poco más la separación en móviles muy chicos */
  .seccion { 
    margin-bottom: clamp(28px, 8vw, 56px);
  }

  .seccion h2 { border-bottom-width: 1.5px; }
}













/* ===== 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 */
}


























@media (max-width: 768px) { 


  /* 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;
  }
}





/* ===== 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 */
}
















/* === Parche móvil — About + Privacy (4 puntos) === */
@media (max-width: 768px) {

  /* 1) Encabezado simétrico: título a la izq y logo a la der con mismo “gutter” */
  :root { --gutter: clamp(16px, 5vw, 28px); }

  .barra-principal{
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    padding-inline: var(--gutter) !important; /* margen igual izq/der */
    margin: 0 auto !important;
    border-bottom: 3px solid #fff !important;
  }

  .barra-principal .titulo-principal{
    position: static !important;      /* anula absolute */
    transform: none !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  .barra-principal .logo-secundario{
    transform: none !important;
    margin: 0 !important;             /* elimina el margin-right negativo */
    flex-shrink: 0 !important;
    width: clamp(90px, 22vw, 140px) !important;
    height: clamp(90px, 22vw, 140px) !important;
  }

  /* 2) Menos espacio antes del footer (quitar el colchón antiguo del footer fijo) */
  .contenido{ 
    padding-bottom: clamp(10px, 2vh, 20px) !important;
  }

  /* 3) Evitar desplazamiento lateral/estirar hacia los costados */
  html, body{
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
  }
  .contenido img, .contenido svg, .contenido video{
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* 4) Justificado sin huecos grandes entre palabras */
  .seccion p, .contenido p, li{
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-spacing: normal !important;
  }
}
/* (Asegurate de tener <html lang="es"> para que los guiones automáticos funcionen.) */























/* === MÓVIL — Copiar barra de CONTACT (solo lo necesario) === */
@media (max-width: 768px){

  /* 1) Barra con mismo ancho y gutter que CONTACT */
  .barra-principal{
    --gutter: clamp(14px, 4vw, 28px);
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    position: relative !important;
    height: clamp(60px, 12vw, 110px) !important;
    width: 90% !important;          /* Quita el 100% si lo tenías */
    margin: 0 auto !important;
    padding: 0 var(--gutter) !important;
    border-bottom: 3px solid #fff !important;
  }

  /* 2) Título como CONTACT */
  .barra-principal .titulo-principal{
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    line-height: 2 !important;
    font-size: clamp(1.5rem, 5.2vw, 60px) !important;
  }

  /* 3) Logo EXACTO al de CONTACT (absoluto + -7% a la derecha) */
  .barra-principal .logo-secundario{
    position: absolute !important;
    right: 0 !important;
    top: 90% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    margin-right: -7% !important;
    width: clamp(115px, 25vw, 165px) !important;
    height: clamp(115px, 25vw, 165px) !important;
  }
}

/* Para que el -7% no genere scroll lateral (ya lo tenés en la mayoría,
   pero por las dudas lo dejamos aquí) */
@media (max-width: 768px){
  html, body{ overflow-x: hidden !important; }
  .barra-principal{ overflow: hidden !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;
}







.contenido > .seccion:last-child{
  margin-bottom: clamp(10px, 5vw, 40px);
}