/*
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 cabecera.CSS ----------------------------------------
   ------------------------------------------------------------------------------------------------------------- */


/* TITULO BODY */

  :root{
    --boton-borde: #ffffff;   /* morado */
    --texto: #fff;            /* color del texto */
    /* Estas variables me dejan cambiar colores del botón rápido en un solo lugar */
    --grafico-left: 70%;    /* Centro horizontal del contenedor */
    --grafico-top: 50%;     /* Altura “visual” cómoda; ajustable por breakpoint */
    --grafico-width: min(60vw, 900px); /* Tamaño base fluido */
    /* color del fondo de la sección siguiente (ajústalo si no es #000) */
    --page-bg: #000;
  }

  /* ajustes de texto para evitar ampliar-reducir inconsistente en iOS/Android/Windows con escala */
  html{
    -webkit-text-size-adjust: 100%;  /* Evita que iOS toque el tamaño del texto por su cuenta */
    text-size-adjust: 100%;  /* Estándar para hacer lo mismo en otros navegadores */
  }


/* TITULO SECTION */

  /* Clase cabecera contenedor general de la cabecera */
  .cabecera{
    display: grid;  /* Hace que el contenido se apile fácil y ordenado */
    place-items: stretch;   /* Estira los hijos para ocupar todo el espacio disponible */
    position: relative;  /* Permite posicionar hijos con absolute dentro de este bloque */
    min-height: clamp(720px, 100svh, 1100px);   /* Hace que la sección siempre sea alta (cubre la pantalla) */
    overflow: hidden;   /* Evita que imágenes posicionadas se salgan del contenedor */
    padding: clamp(16px, 4vw, 64px); /* Agrega aire en los lados que se ajusta según el ancho */
    box-sizing: border-box;    /* Evita que el padding “rompa” el ancho total */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6) inset; /* sombra interna arriba */
    border-top: 1px solid #333;   /* Deja una línea sutil arriba para separar visualmente */
    background-color: var(--page-bg); /* Color del fondo de una variable */
  }

  /* Fade inferior: encima del fondo, debajo del contenido */
  .cabecera::after{
    content:""; /* Necesario para aparecer */
    position:absolute;  /* Es absoluto para poder moverlo al antojo */
    left:0; right:0; bottom:0;  /* Se posiciona */
    height:160px; /* altura del degradado */
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%, /* Primera parte difuminado */
      rgba(0,0,0,.55) 55%,  /* Aumenta el difuminado al 55% */
      var(--page-bg) 100% /* Aumenta el 100% */
    );
  }


/* TITULO IMAGEN DE FONDO */

  /* Imagen de fondo de la cabecera */
  .cabecera .cabecera_fondo{
    position: absolute;   /* La pongo encima del contenedor sin ocupar espacio del flujo */
    inset: 0;             /* Hace que se pegue a todos los bordes (arriba, abajo, izq, der) */
    width: 100%;          /* Ocupa todo el ancho disponible */
    height: 100%;         /* Ocupa todo el alto disponible */
    object-fit: cover;    /* Cubre todo el espacio sin deformarse (recorta si hace falta) */
  }


  /* img fondo de estatua */
  .cabecera .grafico{
    position: absolute; /* Posicion absoluta para moverlo */
    left: var(--grafico-left);  /* Lo posicionamos */
    top: var(--grafico-top);  /* Lo posicionamos */
    transform: translate(-50%, -50%); /* centra exacto el punto ancla */
    transform-origin: center center;  /* ancla por el centro para que la escala no lo mueva */
    width: var(--grafico-width); /* Lo agrandamos en ancho*/
    height: auto; /* Lo ponemos en automatico dependiendo del width */
    object-fit: contain;
    z-index: 2; /* por delante del fondo, detrás del texto si quieres lo subes */
    will-change: transform; /* micro-optimización */
    pointer-events: none;   /* evita “arrastres” al hacer pinch */
  }

/* TITULO CONTENIDO TEXTUAL */

  /* Contenido textual de cabecera */
  .cabecera .cabecera_contenidos{
    position: absolute; /* Lo coloco encima del fondo dentro de la cabecera */
    left: clamp(16px, 4vw, 72px);  /* Muevo el bloque hacia la izquierda con margen fluido */
    bottom: clamp(43px, 28vh, 330px); /* Lo subo desde abajo según el alto de la pantalla */
    margin: 0; /* Quito márgenes fijos que podían romper el layout */
    max-width: min(44rem, 46vw); /* Limito el ancho para que los textos sean legibles */
    z-index: 2; /* Lo pongo por delante de la estatua */
    color:#fff;  /* Hago el texto blanco para contraste con el fondo */
  }

/* TITULO AGENCIA DIGITAL ( TEXTO ) */

  /* Contenido titulo (Agencia digital) */
  .cabecera .titulo{
    font-size: clamp(24px, 3.2vw, 40px); /* Tamaño del título que crece o baja según pantalla */
    line-height: 1.1;  /* Junta un poco las líneas para que se vea compacto */
  }

/* TITULO MARKETING MINT ( TEXTO ) */

  /* Contenido subtitulo (Marketin mint) */
  .cabecera .subtitulo{
    font-size: clamp(44px, 9vw, 110px); /* Subtítulo grande que escala bien en móvil y desktop */
    line-height: 1; /* Mantiene líneas muy cerca para efecto “bloque” */
  }

/* TITULO BOTON CONTACTAR AHORA */

  /* Boton contactar */
  .cabecera .boton{
    display: inline-block; /* Permite que el padding funcione y respete el tamaño */
    padding: 20px 40px; /* Agranda la área clickeable (más cómodo) */
    margin-top: clamp(12px, 2vh, 24px); /* Deja espacio real bajo el subtítulo */
    border: 2px solid var(--boton-borde);  /* Trazo alrededor del botón usando la variable */
    border-radius: 30px;  /* Redondea las puntas para un look suave */
    color: var(--texto);    /* Texto en color definido en variables (blanco) */
    text-decoration: none;   /* Quita el subrayado típico de los enlaces */
    line-height: 1.2;  /* Acomoda la altura del texto dentro del botón */
  }

  /* Cambia de estado el boton contactar */
  .cabecera .boton:hover{
    background: var(--texto);   /* Invierte colores al pasar el mouse (fondo blanco) */
    color:#000;  /* Texto negro para que se lea cuando el fondo es blanco */
  }

  /* Cada slide (imagen) */
  .cabecera_slide {
    position: absolute; /* Es absoluto para moverlo libremente */
    inset: 0; /* Se posiciona */
    background-size: cover; /* depende de la imagen fonod */
    background-position: center;  /* Centra el fondo */
    filter: brightness(60%); /* Reduce el brillo al 60% */
  }


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

  /* Bloque de texto: centrado arriba y superpuesto */
  .cabecera .cabecera_contenidos{
    position: absolute; /* Volvemos a superponer en móvil */
    left: 23%;  /* Lo posicionamos */
    top: clamp(60px, 18vh, 167px); /* Altura aproximada del ejemplo */
    max-width: 90%; /* Maximo tamaño */
    text-align: center; /* Texto en el centro */
    margin: 0; /* Evitamos empujes extra */
    z-index: 3;  /* Por encima de grafico */
  }

  /* Texto de cabecera contenido */
  .cabecera .subtitulo{
    font-size: clamp(32px, 10vw, 54px); /* Ajustamos el tamaño */
    line-height: 1.06;  /* Separamos las letras */
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.8); /* Generamos una sombra al rededor del texto */
  }

  /* Botón grande */
  .cabecera .boton{
    padding: 16px 24px;/* Ajustamos el tamaño del boton */
  }

  /* grafico centrado y “apoyada” en la parte baja */
  .cabecera .grafico{
    position: absolute;  /* Superpuesta */
    width: min(104vw, 520px);   /* Tamaño predominante */
    z-index: 2;   /* Debajo del texto, encima del fondo */
    left: 53%;  /* Centramos la imagen */
    top: 60%; /* Lo bajamos */
  }
}


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

  /* El contenido de texto y boton */
  .cabecera .cabecera_contenidos{
    left: 50%;  /* LO posicionamos */
    top: clamp(64px, 18vh, 140px);  /* LO posicionamos */
    transform: translateX(-50%);  /* LO posicionamos al centro */
    max-width: 88%; /* Le ponemos un maximo al contenido */
    text-align: center; /* Los items al centro */
    margin: 0;  /* Evitamos empujes extra */
  }

  /* El subtitulo se hace mas pequeño tambien */
  .cabecera .subtitulo{
    font-size: clamp(40px, 8vw, 72px);  /* Para cambiar el tamaño de las letras */
  }

  /* imagen de la cabecera estatua */
  .cabecera .grafico{
    bottom: 10%;  /* Se pone hacia abajo junto con el fondo */
    width: min(100vw, 560px);  /* Tamaño mas pequeño */
    left: 52%;  /* LO posicionamos */
    top: 68%; /* LO posicionamos */
  }
}

/* --- Ajuste para móviles en modo horizontal (landscape) --- */
@media only screen and (min-width:400px) and (max-width: 900px) and (orientation: landscape) {

  /* Posicionamos el contenido */
  .cabecera .cabecera_contenidos {
    top: 35%;  /* Lo baja más en horizontal */
    transform: translateY(-30%);  /* Lo centramos */
    left: 28%;  /* LO posicionamos */
  }

  /* Posicionamos el grafico */
  .cabecera .grafico {
    top: 75%;             /* También baja la imagen/gráfico */
    width: min(90vw, 500px);  /* Lo ajustamos en posicion */
  }
}


/* Tablets (iPad vertical, Android tablets) */
@media only screen and (min-width: 768px) and (max-width: 1023px){
  /* Estilos para tablets */
  .cabecera{
    aspect-ratio: 16/9; /* alto calculado por el ancho, sin forzar zoom del fondo */
    height: auto; /* la altura la da el aspect-ratio */
    min-height: 0; /* no se fuerza un mínimo grande */
  }

  /* Contenido textual de cabecera */
  .cabecera .cabecera_contenidos{
    top: clamp(174px, 14vh, 142px); /* mueve todo el bloque hacia arriba */
    left: 58px;   /* Muevo a la derecha el contenido textual */
  }

  /* Texto Empresa Tecnologia */
  .cabecera .titulo{
    font-size: clamp(24px, 3.2vw, 40px);  /* achico el tamaño del texto */
    margin-bottom: 8px; /* Hace que el titulo y subtitulo se separen */
  }

  /* Texto de Alton Road media mas chico */
  .cabecera .subtitulo{
    font-size: clamp(44px, 5.5vw, 193px);  /* El texto esta mas chico */
  }

  /* Imagen de la estatua con los 25k visitas y etiqueta */
  .cabecera .grafico{
    left: 65%;  /* se mueve a la derecha junto a la decorazon del fondo */
    width: min(52vw, 400px);  /* Tamaño de la estatua */
    top: 55%;    /* Lo muevo mas abajo */
  }
}

/* iPad horizontal o tablets grandes */
@media only screen and (min-width: 1024px) and (max-width: 1279px){
  /* Estilos para tablets */

  /* El fondo lo posicionamos */
  .cabecera{
    aspect-ratio: 16/9; /* alto calculado por el ancho, sin forzar zoom del fondo */
    height: auto; /* la altura la da el aspect-ratio */
    min-height: 0;/* no se fuerza un mínimo grande */
  }

  /* Contenido textual de cabecera */
  .cabecera .cabecera_contenidos{
    top: clamp(265px, 1vh, 142px); /* mueve todo el bloque hacia arriba */
    width: 100%;  /* Espacio del contenido hasta donde lo puede ocupar */
  }

  /* Texto Empresa Tecnologia */
  .cabecera .titulo{
    font-size: clamp(12px, 3.2vw, 26px);  /* achico el tamaño del texto */
    margin-bottom: 8px; /* Hace que el titulo y subtitulo se separen */
  }

  /* Texto de Alton Road media mas chico */
  .cabecera .subtitulo{
    font-size: clamp(24px, 6.5vw, 110px);  /* El texto esta mas chico */
  }

  /* Imagen de la estatua con los 25k visitas y etiqueta */
  .cabecera .grafico{
    left: 65%;  /* se mueve a la derecha junto a la decorazon del fondo */
    width: min(60vw, 530px);  /* Tamaño de la estatua lo agrandamos */
    top: 50%;    /* Lo muevo mas abajo */
  }
}


/* Escritorio y pantallas grandes */
@media only screen and ( min-width:1280px ) and (max-width: 1660px){
  /* Estilos para desktop */
  /* El texto se agranda y se separa del boton */
  .cabecera .subtitulo{
    font-size: clamp(72px, 6.8vw, 110px);      /* Permite crecer un poco mas */
  }

  /* La imagen de la estatua */
  .cabecera .grafico{
    left:69%;  /* Lo posicionamos a la izquierda */
    top: 53%; /* Lo posicionamos mas abajo */
  }

  /* Posicionamos el contenido */
  .cabecera .cabecera_contenidos{
    top: 50%; /* Mas abajo */
  }

}


/* -------------------------------------------------------------------------------------------------------------
   -------------------------------------- FIN ITred Spa cabecera.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 
*/