/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/


/* -------------------------------------------------------------------------------------------------------------
   ------------------------------------- INICIO ITred Spa pie_pagina.CSS ---------------------------------------
   ------------------------------------------------------------------------------------------------------------- */


/* TITULO PIE PAGINA */

  /* Clase bloque principal del pie de pagina */
  .pie_pagina{
    color: #fff;  /* Color de la letra */
    background-color: #000; /*  color de respaldo si no carga la imagen */
  }

  /* Clase contenedor flexible de columnas */
  .pie_pagina_contenedor{
    max-width: 1400px;   /* ancho maximo del contenido */
    margin: 0 auto;      /* centrar el contenedor */
    display: flex;       /* flex con salto de linea para adaptarse a pantallas pequenas */
    flex-wrap: wrap;     /* permite que las columnas bajen en pantallas medianas */
    gap: 20px;           /* separacion entre columnas */
    text-align: center;  /* centrar textos por defecto */
    justify-content: space-between; /*  centra columnas cuando hay espacio extra */
    padding: 60px 80px; /* Se le genera un espacio */
  }

/* TITULO COLUMNAS CONTENIDO */

  /* Clase logotipo del pie de pagina */
  .pie_pagina_logo{
    max-width: 200px;   /* limitar tamano del logo */
    margin-bottom: -50px; /* hace que el logo deje mas espacio abajo */
  }

  /* Clase texto del pie de pagina (telefono y correo) */
  .pie_pagina_enlace_contacto{
    font-size: 18px;        /* agranda el texto */
    color: #fff;            /* le da color ya que los links son azules por defecto */
    opacity: 0.9;           /* le da un poco mas de color blanco */
    letter-spacing: 0.2px;  /* los separa por letra */
    text-decoration: none;  /* quita la linea debajo del texto */
    display: inline-block;  /*  unifica alineado con otros enlaces */
    text-align: center;     /*  centro del texto */
    line-height: 1.6;       /*  mejora legibilidad */
  }

  /* columnas de preguntas: mismo look del pie, sin cajas ni bordes */
  .pie_pagina_columna_info{
    display: flex;  /* Los atributos son mas flexibles en moverse */
    flex-direction: column; /* Los dejamos tipo columna para las informaciones */
    justify-content: center;  /* Lo centramos verticalmente */
  }

  /* titulo claro como en el mock, sin cambiar tu tipografia */
  .pie_pagina_titulo_claro{
    margin: 44px 0px 12px -1px; /* espacio superior e inferior equilibrado */
    letter-spacing: 0.3px;      /* leve separación visual */
  }

  /* hover consistente con tus enlaces */
  .pie_pagina_contacto_suave:hover{
    text-decoration: underline; /* Creamos la linea de link */
    opacity: 1; /* le ponemos mas opaco */
  }

  /* espaciado entre los dos enlaces de contacto */
  .pie_pagina_enlace_contacto.pie_pagina_contacto_suave {
    margin-bottom: 8px;         /* da aire entre correo y teléfono */
  }

/* TITULO SECTORES */

  /* Estilos de Our sectors */
  .pie_pagina_sectores {
    padding: 24px 60px; /* Le damos un espacio */
    align-items: center;  /* Centra el Texto Our Sectors */
    display: flex;  /* Los deja ser flexibles para ocupar los siguientes */
    justify-content: center;  /* Centra el contenido */
    gap: 16px;  /* Espacio entre sectors y opciones */
    flex-wrap: wrap;  /* Mantiene la estetica en responsivo */
  }

  /* El tamaño del texto */
  .pie_pagina_sectores_titulo {
    font-weight: 900; /* Agrandamos la letra en ancho */
  }

  /* Las listas de los sectores mas simple */
  .pie_pagina_sectores_lista {
    display: flex;  /* PAra que sean flexibles y se ocupen los siguientes */
    flex-wrap: wrap;  /* Mantiene la estetica en responsivo */
    gap: 12px; /* Mantiene separacuib entre las listas/opciones */
  }

  /* El item individual de las listas de sectores */
  .pie_pagina_sector_item {
    border: 1px solid #fff; /* Se genera el estilo boton */
    border-radius: 24px;  /* Borde del boton */
    padding: 10px 20px;  /* Le damos tamaño al rededor del texto hacia el boton */
    font-size: 15px;  /* Tamaño en el texto */
    cursor: default;  /* Sin cambios en el mouse */
    transition: all 0.3s ease;  /* Transicion al poner mouse */
  }

  /* El estilo del del hover de cada item */
  .pie_pagina_sector_item:hover {
    background-color: #fff; /* Ahora el fondo es blanco */
    color: #000;  /* Ahora las letras son negras */
  }

/*TITULO DERECHOS ALTON ROAD*/

  /* Contenedor de alton road */
  .pie_pagina_derechos_altonroad{
    padding: 10px 0;              /* centrado perfecto horizontalmente */
    text-align: center;           /* centra el texto si hay salto de línea */
  }


/* TITULO PANEL DERECHO DEL TEMA LEGAL */

  /* Estado visible del panel */
  .pie_pagina_panel.is-open{
      transform: translateX(0);
  }

  /* Mantener forma del texto en el panel legal */
  .pie_pagina_panel_pre{
      white-space: pre-wrap;   /* respeta saltos y ajusta líneas largas */
      word-wrap: break-word;   /* evita desbordes */
      line-height: 1.55;       /* legible */
      font: inherit;           /* usa tu misma tipografía */
      margin: 0;               /* sin margen extra */
  }

  /* Panel lateral: fijo a la derecha, oculto por defecto desplazado a la derecha */
  .pie_pagina_panel{
      position: fixed; /* fijo a la ventana */
      top: 0; /* Posicionamos el panel en su citio */
      right: 0; /* Posicionamos el panel en su citio */
      height: 100vh; /* alto pantalla completa */
      background: #111; /* fondo básico, tú lo estilizas luego */
      color: #fff;  /* Color del texto */
      transform: translateX(100%); /* fuera de vista por la derecha */
      transition: transform 300ms ease; /* animación de entrada/salida */
      z-index: 9999; /* por encima del footer */
      padding: 24px;  /* Le añadimos una respiracion al rededor */
      overflow-y: auto; /* Para poder bajar el contenido */
  }

  /* Contenidos del panel: mostramos solo el activo por JS */
  .pie_pagina_panel_contenido[hidden]{
    display: none !important; /* Para que no aparezca al principio */
  }

  /* X para cerrar el panel */
  .pie_pagina_panel_cerrar{
    position: absolute; /* fija la X dentro del panel */
    right: 16px; /* separada del borde derecho */
    font-size: 26px; /* tamaño grande y legible */
    line-height: 1; /* ajusta altura exacta */
    color: #fff; /* color blanco por defecto */
    background: transparent; /* sin fondo */
    border: none; /* sin borde */
    cursor: pointer; /* cursor de mano */
    transition: transform 0.2s ease, color 0.2s ease; /* Animacion al poner el mouse */
  }

  /* Configuramos la animacion de la X */
  .pie_pagina_panel_cerrar:hover{
    color: #a8f0c6;  /* Se le cambia el color */
    transform: scale(1.2); /* se agranda levemente al pasar el dedo */
  }

/* TITULO TEXTO WEBSITE ITRED */

  /* Clase barra inferior (franja blanca) */
  .pie_pagina_barra_inferior{
    padding: 18px 24px; /* espacio arriba y abajo */
    margin-top: 0;      /*  eliminamos separacion con el fondo negro */
    border-top: none;   /*  sin linea arriba */
    position: relative; /*  asegura flujo normal del documento */
    bottom: 0;          /*  coherencia visual (no absoluto) */
  }

  /* Clase texto de derechos reservados */
  .pie_pagina_texto_derechos{
    margin: 0 auto;     /* centra el texto */
    color: #ffffff;        /* color negro para los derechos */
    text-align: center; /* texto centrado */
  }

  /*.pie_pagina_texto_derechos a {} agregar atributos si se saca el a:webkit-any-link*/

  /* Cambio de diseño al pasar mouse */
  .pie_pagina_texto_derechos a:hover{
    text-decoration: underline; /* Le ponemos linea de link */
    color: #a8f0c6; /* Color verde */
  }

/* Teléfonos pequeños (iPhone SE, Android compactos) */
@media only screen and (max-width: 479px) {

  /* Ajustamos el logo en telefono */
  .pie_pagina_logo{
    max-width: 140px; /* Lo dejamos mas chico */
    margin: 0 auto; /* Lo dejamos centrado */
  }

  /* Posicionamiento general */
  .pie_pagina_columna{
    flex: 1 1 100%; /* Centramos el columna la informacion columna */
  }

  /* Ajustamos el espacio al rededor */
  .pie_pagina_sectores{
    padding: 24px 22px; /* Ajustamos al rededor el espacio */
  }

  /* Le damos la estructura a lista */
  .pie_pagina_sectores_lista {
    display: grid;  /* Nos permite hacer las columnas 2 en 2 */
    grid-template-columns: repeat(2, auto); /* tres columnas naturales */
    text-align: center; /* Texto centrado si es chico */
  }

  /* Ajustamos el contenedor para que se vea mas ajustado y no tan estirado */
  .pie_pagina_contenedor{
    gap: 0px;  /* Mas juntos las columnas */
    padding: 40px 20px; /* Ajustamos el espacio que da respiro */
  }

  /* FIX LECTURA PANEL LEGAL EN CELULARES */
  /* Mantiene los saltos de línea del texto legal pero NO los espacios extra al inicio de cada línea */
  .pie_pagina_panel_pre{
    white-space: pre-line;         /* antes: pre-wrap (preserva espacios); ahora: pre-line (colapsa espacios) */
    overflow-wrap: anywhere;       /* permite cortar palabras/urls cuando haga falta */
    word-break: break-word;        /* fallback adicional para cortes seguros */
    hyphens: auto;                 /* guiones automáticos donde sea posible */
    font-size: clamp(14px, 3.8vw, 16px);  /* tipografía cómoda en pantallas pequeñas */
    line-height: 1.7;              /* lectura más descansada */
  }
}

/* Teléfonos medianos (iPhone estándar, Android promedio) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

  /* Ajustamos el logo en telefono */
  .pie_pagina_logo{
    max-width: 140px; /* Lo dejamos mas chico */
    margin: 0 auto; /* Lo dejamos centrado */
  }

  /* Posicionamiento general */
  .pie_pagina_columna{
    flex: 1 1 100%; /* Centramos el columna la informacion columna */
  }

  /* Le damos la estructura a lista */
  .pie_pagina_sectores_lista {
    display: grid;  /* Nos permite hacer las columnas 2 en 2 */
    grid-template-columns: repeat(2, auto); /* tres columnas naturales */
    text-align: center; /* Texto centrado si es chico */
  }

  /* Ajustamos el contenedor para que se vea mas ajustado y no tan estirado */
  .pie_pagina_contenedor{
    gap: 18px;  /* Mas juntos las columnas */
    padding: 40px 20px; /* Ajustamos el espacio que da respiro */
  }

  /* FIX LECTURA PANEL LEGAL EN CELULARES */
  /* Mantiene los saltos de línea del texto legal pero NO los espacios extra al inicio de cada línea */
  .pie_pagina_panel_pre{
    white-space: pre-line;         /* antes: pre-wrap (preserva espacios); ahora: pre-line (colapsa espacios) */
    overflow-wrap: anywhere;       /* permite cortar palabras/urls cuando haga falta */
    word-break: break-word;        /* fallback adicional para cortes seguros */
    hyphens: auto;                 /* guiones automáticos donde sea posible */
    font-size: clamp(14px, 3.8vw, 16px);  /* tipografía cómoda en pantallas pequeñas */
    line-height: 1.7;              /* lectura más descansada */
  }
}

/* Responsivo para tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

  /* Posicionamiento general */
  .pie_pagina_columna{
    flex: 10%; /* Centramos el columna la informacion columna */
  }

  /* Le da espacio entre las columnas */
  .pie_pagina_contenedor{
    gap: 40px;  /* Mas espacio a los lados */
    padding: 40px 20px;
  }

  /* modificamos la forma del boton de los items */
  .pie_pagina_sector_item{
    padding: 15px 30px; /* Espacio adentro del boton */
    font-size: 18px;  /* Letra grande */
  }

  /* Ajustamos el logo en tablet */
  .pie_pagina_logo{
    max-width: 114px; /* Lo dejamos mas chico */
    margin: 12px; /* Lo dejamos centrado */
  }
  
  /* Le damos espacio a los titulos con alrededor */
  .pie_pagina_titulo_claro{
    margin: 10px 0px 20px 0px;  /* Arriba y abajo lo modificamos */
  }

  /* Le damos forma al texto del panel legal */
  .pie_pagina_panel_pre{
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.65;
  }

  /* Le damos la estructura a lista */
  .pie_pagina_sectores_lista {
    flex-wrap: nowrap;  /* Sacamos el flex-wrap */
    text-align: center; /* Texto centrado si es chico */
  }

  /* Tamaño de titulo Our Sectors */
  .pie_pagina_sectores_titulo{
    font-size: clamp(20px, 2.6vw, 32px);  /* Le agrandamos la letra */
  }

  /* Le damos un estilo especial solo a uno de los 4 items para responsivo */
  .pie_pagina_sectores_lista .pie_pagina_sector_item:nth-child(3) {
    padding: 25px 10px; /* Ajustamos el espacio adentro */
  }
}

/* iPad horizontal o laptops pequeños */
@media only screen and (min-width: 1024px) and (max-width: 1380px) {

  /* modificamos la forma del boton de los items */
  .pie_pagina_sector_item{
    padding: -1px 40px; /* Espacio adentro del boton */
    font-size: 18px;  /* Letra grande */
    align-content: center;  /* Centramos los textos al medio */
  }

  /* Centramos los contenidos del contenedor */
  .pie_pagina_contenedor{
    gap: 0px; /* Quitamos el espacio de adentro */
    padding: 60px 100px;  /* Le damos un espacio al rededor para poder centrarlos mas */
  }

  /* Modificamos el tamaño de la letra */
  .pie_pagina_enlace_contacto.pie_pagina_contacto_suave{
    font-size: clamp(20px, 1.12rem, 19px);  /* Ajustamos la letra */
  }

  /* Modificamos el tamaño de la letra */
  .pie_pagina_titulo_claro{
    font-size: clamp(3px, 2vw, 32px);  /* Ajustamos la letra */
  }

  /* Modificamos el logo tamaño */
  .pie_pagina_logo{
    max-width: 190px; /* Lo hacemos mas pequeño */
    left: 30px; /* Lo movemos */
  }

  /* Tamaño de titulo Our Sectors */
  .pie_pagina_sectores_titulo{
    font-size: clamp(3px, 2vw, 32px);  /* Ajustamos la letra */
  }

  /* Le damos un estilo especial solo a uno de los 4 items para responsivo */
  .pie_pagina_sectores_lista .pie_pagina_sector_item:nth-child(3) {
    padding: 30px 10px; /* Ajustamos el espacio adentro */
  }
}

/* -------------------------------------------------------------------------------------------------------------
   -------------------------------------- FIN ITred Spa pie_pagina.CSS -----------------------------------------
   ------------------------------------------------------------------------------------------------------------- */


/*
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/