/* =========================================================
   FUENTES (locales)
   ========================================================= */
   @font-face {
    font-family: "AkzidenzExtended";
    src: url("./TIPOGRAFIAS/Berthold Akzidenz Grotesk Extended.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
  }
  
  @font-face {
    font-family: "AkzidenzExtended";
    src: url("./TIPOGRAFIAS/Berthold Akzidenz Grotesk Medium Extended.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
  }
  
  /* =========================================================
     VARIABLES
     ========================================================= */
  :root {
    --texto-beige: #91866c;
    --texto-negro: #000000;
    --texto-carbon: #1d1d1b;
    --texto-gris: #DADADA;
  
    /* base */
    --page-padding: 2px;
  
    /* padding base de columnas (escala con pantalla) */
    --col-pad-y: clamp(2.5rem, 3.2vw, 5.5rem);
    --col-pad-x: clamp(1.5rem, 3vw, 4rem);
  
    /* hero (portada) */
    --hero-box-max: 900px;
  }
  
  .texto-gris {
    color: var(--texto-gris);
  }
  
  .texto-beige {
    color: var(--texto-beige);
  }
  
  .texto-carbon {
    color: var(--texto-carbon);
  }
  


  /* =========================================================
     RESET / BASE
     ========================================================= */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    padding: var(--page-padding);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
      "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
  }
  
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  /* =========================================================
     LAYOUT (segmentos)
     ========================================================= */
  .segmento-vertical {
    display: flex;
    width: 100%;
    min-height: 100vh;
  }
  
  .segmento-interno-horizontal {
    flex: 1; /* 50/50 base */
    display: flex;
    flex-direction: column;
    position: relative;
  
    justify-content: space-around;
    align-items: flex-start;
  
    padding: var(--col-pad-y) var(--col-pad-x);
  
    /* si querés desactivar el debug: comentá esta línea */
    border: 1px solid slateblue;
  }
 
  .hero-box{
    width: 100%;
    max-width: 70ch;
    
            /* lectura linda en monitores grandes */
    padding: 2.25rem 2rem;  /* caja tipo editorial */
    background: rgba(0,0,0,0.0); /* si querés caja invisible, dejalo en 0 */
  }
  /* Ajuste manual SOLO para el hero del header */
.segmento-1 .hero-box {
  max-width: 1000px;   /* probá entre 800px y 1000px */
  min-width: 40rem;
}

  

  .lado-derecho {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }
  
  /* responsive: en pantallas chicas se apilan */
  @media (max-width: 900px) {
    .segmento-vertical {
      flex-direction: column;
    }
  
    .segmento-interno-horizontal {
      width: 100%;
    }
  
    .lado-derecho {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }
  }
  
  /* =========================================================
     FONDOS / SECCIONES
     ========================================================= */
  .segmento-1 {
    background-image: url("./FONDOS_PARA_ANCLAS_DE_PAGINA_WEB/PORTADA.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /* ✅ reemplaza el anidado inválido */
  .segmento-1 .segmento-interno-horizontal {
    padding-left: 2rem; /* tu ajuste original */
  }
  
  .segmento-2 {
    background-image: url("./FONDOS_PARA_ANCLAS_DE_PAGINA_WEB/ANCLA\ 1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .segmento-3 {
    background-image: url("./FONDOS_PARA_ANCLAS_DE_PAGINA_WEB/ANCLA\ 2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .segmento-4 {
    background-image: url("./FONDOS_PARA_ANCLAS_DE_PAGINA_WEB/ANCLA 3.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .segmento-5 {
    background-image: url("./FONDOS_PARA_ANCLAS_DE_PAGINA_WEB/ANCLA 4.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .segmento-6 {
    background-image: url("./FONDOS_PARA_ANCLAS_DE_PAGINA_WEB/ANCLA 5.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /* =========================================================
     TIPOGRAFIAS
     ========================================================= */
  .akzidenz-extended-xbold {
    font-family: "AkzidenzExtended", sans-serif;
    font-weight: 700;
  }
  
  .akzidenz-extended-medium {
    font-family: "AkzidenzExtended", sans-serif;
    font-weight: 500;
  }
  
  .akzidenz-extended-regular {
    font-family: "AkzidenzExtended", sans-serif;
    font-weight: 400;
  }
  
  /* texto secundario / meta */
  .fuente,
  .texto-secundario {
    color: var(--texto-gris);
    font-size: 0.9rem;
  }
  
  /* =========================================================
     TAMAÑOS (+15%)
     ========================================================= */
     .size-16pt {
      font-size: clamp(1.28rem, 1.1vw + 0.8rem, 1.8rem);
      letter-spacing: 0.08rem;
      line-height: 1.2;
    }
    
    .size-8pt {
      font-size: clamp(1rem, 0.6vw + 0.7rem, 1.2rem);
      line-height: 1.3;
    }
    
    .size-6pt {
      font-size: clamp(0.75rem, 0.4vw + 0.6rem, 1rem);
      line-height: 1.5;
    }
    
    .size-4pt {
      font-size: clamp(0.7rem, 0.3vw + 0.55rem, 0.9rem);
      line-height: 1.5;
    }
    
  
  /* =========================================================
     LOGO
     ========================================================= */
  .logo-fuente-369 {
    position: absolute;
    width: 180px;
    height: auto;
    top: 0.5rem;
    left: 4.1rem;
  }
  
  /* =========================================================
     BOTONES
     ========================================================= */
  .btn-analisis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    background-color: #0f0f0f;
    border: 1px solid #5e5e5e;
    border-radius: 0 20px 0 20px;
  
    padding: 6px;
    font-size: 15px;
    font-weight: 500;
    font-family: "AkzidenzExtended", sans-serif;
    color: var(--texto-beige);
  
    width: 13rem;
  
    transition: all 0.2s ease;
    cursor: pointer;
  
    margin-top: 0.5rem;
  
    /* ✅ centrado horizontal en su contenedor */
    margin-left: auto;
    margin-right: auto;
  }
  
  .btn-analisis:hover {
    background-color: #1a1a1a;
    border-color: #a48f5f;
    color: #e5d3a2;
    box-shadow: 0 0 12px rgba(209, 195, 161, 0.25);
  }
  
  /* =========================================================
     MEJORAS PARA MONITORES GRANDES
     ========================================================= */
  
  /* 1) Proporción editorial (menos vacío en texto, más aire en imagen) */
  @media (min-width: 1200px) {
    .segmento-1 .segmento-interno-horizontal:first-child { flex: 0 0 45%; }
    .segmento-1 .segmento-interno-horizontal.lado-derecho { flex: 0 0 55%; }
  }
  

  
  
  /* 3) Opcional: centrar verticalmente SOLO la columna izquierda del hero */
  @media (min-width: 1200px) {
    .segmento-1 .segmento-interno-horizontal:first-child {
      justify-content: center;
    }
  }
  
  /* 4) Escala suave del botón en pantallas muy grandes */
  @media (min-width: 1600px) {
    .btn-analisis {
      width: 15rem;
      padding: 10px;
    }
  }
  
  /* =========================================================
     FOOTER
     ========================================================= */
  .site-footer {
    background-color: #000;
    color: var(--texto-beige);
    padding: 4rem 6rem;
  }
  
  .footer-contenido {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    margin-bottom: 3rem;
  }
  
  .footer-col {
    max-width: 300px;
  }
  
  .footer-col p {
    margin: 0.5rem 0;
  }
  
  .footer-copy {
    border-top: 1px solid #222;
    padding-top: 2rem;
    text-align: center;
  }
  .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

/* =========================
   RESPONSIVE PATCH (auto-generado)
   Pegado al final para pisar reglas anteriores
   ========================= */

/* 1) Evitar overflow horizontal en general */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2) Quitar el “debug border” en producción (opcional) */
.segmento-interno-horizontal {
  border: none; /* si querés el debug, comentá esta línea */
}

/* 3) Header/Hero: el min-width rompe mobile */
.segmento-1 .hero-box {
  min-width: 0;        /* <- clave */
  width: 100%;
  max-width: 70ch;
}

/* 4) Logo: en desktop puede seguir absoluto, pero en pantallas chicas pasa a flujo normal */
@media (max-width: 900px) {
  .logo-fuente-369 {
    position: static;
    width: clamp(120px, 40vw, 180px);
    height: auto;
    margin-bottom: 1rem;
  }

  /* El padding-left fijo del header también suele molestar en mobile */
  .segmento-1 .segmento-interno-horizontal {
    padding-left: var(--col-pad-x);
  }

  /* Menos “aire” y mejor lectura en mobile */
  .hero-box {
    padding: 1.25rem 1rem;
  }

  .segmento-interno-horizontal {
    justify-content: flex-start;
    gap: 1.25rem;
  }

  /* Botón: que no quede raro en pantallas angostas */
  .btn-analisis {
    width: 100%;
    max-width: 18rem;
    margin-left: 0;
    margin-right: 0;
  }
}

/* 5) Extra: en pantallas MUY chicas, apretar tipografías/paddings un toque */
@media (max-width: 520px) {
  :root {
    --page-padding: 0px;
  }

  .segmento-interno-horizontal {
    padding: 1.5rem 1.25rem;
  }

  .hero-box {
    padding: 1rem 0.75rem;
  }

  .btn-analisis {
    max-width: 100%;
  }
}

/* 6) Footer responsive */
@media (max-width: 900px) {
  .site-footer {
    padding: 2.5rem 1.5rem;
  }

  .footer-contenido {
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer-col {
    max-width: none;
  }
}

/* =========================
   STACK COLUMNS <=768 (tablet portrait y mobile)
   Hace que las columnas izquierda/derecha pasen a una arriba de la otra
   ========================= */
@media (max-width: 768px) {
  /* el contenedor que hoy pone 2 columnas lado a lado */
  .segmento-vertical {
    flex-direction: column;
  }

  /* cada columna ocupa 100% */
  .segmento-interno-horizontal {
    flex: none;
    width: 100%;
  }

  /* el padding-top extra del lado derecho suele dejar un “hueco” raro en stack */
  .lado-derecho {
    padding-top: 1.5rem;
  }
}