/* =========================================================
   PORTAFOLIO CAMILA MATA
   CSS COMPLETO
   ========================================================= */


/* =========================================================
   01. PALETA DE COLORES
   ========================================================= */

:root {
  --azul: #063d5c;
  --azul-oscuro: #032f47;
  --coral: #ef685c;
  --crema: #f1ece2;
  --blanco: #fffdf8;
  --linea: rgba(241, 236, 226, 0.35);

  --ancho-maximo: 1180px;
}


/* =========================================================
   02. CONFIGURACIÓN GENERAL
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;

  font-family: Arial, Helvetica, sans-serif;

  background-color: var(--azul);
  color: var(--crema);
}

a {
  color: inherit;
}

img {
  display: block;
  width: 100%;
}

.contenedor {
  width: min(calc(100% - 40px), var(--ancho-maximo));
  margin: 0 auto;
}


/* =========================================================
   03. MENÚ DE NAVEGACIÓN SUPERIOR
   ========================================================= */

.menu-principal {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;

  background-color: var(--azul);

  border-bottom: 1px solid var(--linea);
}

.menu-principal__interior {
  min-height: 64px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 40px;
}

.menu-principal__marca {
  flex-shrink: 0;

  color: var(--coral);

  font-size: 0.78rem;
  font-weight: 700;

  text-decoration: none;
  text-transform: uppercase;

  letter-spacing: 0.04em;
}

.menu-principal__enlaces {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 30px;
}

.menu-principal__enlaces a {
  position: relative;

  padding: 22px 0;

  color: var(--crema);

  font-size: 0.72rem;

  text-decoration: none;
  text-transform: uppercase;

  letter-spacing: 0.04em;

  transition: color 0.2s;
}

.menu-principal__enlaces a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 16px;

  width: 0;
  height: 1px;

  background-color: var(--coral);

  transition: width 0.25s;
}

.menu-principal__enlaces a:hover {
  color: var(--coral);
}

.menu-principal__enlaces a:hover::after {
  width: 100%;
}


/* =========================================================
   04. INDEX
   PRESENTACIÓN PRINCIPAL
   ========================================================= */

.presentacion-principal {
  min-height: 100vh;

  padding:
    40px
    0
    90px;

  display: flex;
  align-items: center;

  border-bottom: 1px solid var(--linea);
}


/* INFORMACIÓN SUPERIOR */

.presentacion-principal__superior {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 55px;

  color: var(--coral);

  font-size: 0.75rem;
  text-transform: uppercase;
}


/* NOMBRE */

.presentacion-principal__titulo {
  margin:
    0
    0
    70px;

  color: var(--coral);

  font-size: clamp(
    5rem,
    13vw,
    10rem
  );

  line-height: 0.78;
  letter-spacing: -0.08em;

  text-transform: uppercase;
}


/* CONTENIDO */

.presentacion-principal__contenido {
  display: grid;

  grid-template-columns:
    0.8fr
    1.2fr;

  gap: 70px;

  align-items: end;
}


/* TEXTO */

.presentacion-principal__texto {
  max-width: 500px;
}

.presentacion-principal__texto p {
  margin:
    0
    0
    22px;

  line-height: 1.65;

  font-size: 0.95rem;
}

.presentacion-principal__area {
  color: var(--coral);

  text-transform: uppercase;

  font-size: 0.75rem !important;
  line-height: 1.5 !important;

  margin-bottom: 40px !important;
}


/* IMAGEN PERSONAL */

.presentacion-principal__imagen {
  position: relative;

  min-height: 500px;

  background:
    linear-gradient(
      rgba(6, 61, 92, 0.05),
      rgba(6, 61, 92, 0.05)
    ),
    url("./img/foto_mia_jpg.jpg");

  background-size: cover;
  background-position: center;

  background-color: var(--azul-oscuro);

  border: 1px solid var(--linea);
}

.imagen__etiqueta {
  position: absolute;

  bottom: 20px;
  left: 20px;

  background-color: var(--coral);
  color: var(--azul-oscuro);

  padding:
    8px
    10px;

  font-size: 0.68rem;

  text-transform: uppercase;
}


/* =========================================================
   05. INDEX
   NAVEGACIÓN PRINCIPAL
   ========================================================= */

.navegacion-principal {
  padding:
    90px
    0
    120px;

  background-color: var(--azul);
}


/* ENCABEZADO */

.navegacion-principal__encabezado {
  display: grid;

  grid-template-columns:
    100px
    1fr;

  gap: 30px;

  margin-bottom: 60px;

  color: var(--coral);

  font-size: 0.75rem;

  text-transform: uppercase;
}

.navegacion-principal__encabezado p {
  margin: 0;
}


/* ITEM */

.navegacion-principal__item {
  display: grid;

  grid-template-columns:
    80px
    1fr
    60px;

  gap: 30px;

  align-items: center;

  min-height: 180px;

  padding:
    30px
    15px;

  border-top: 1px solid var(--linea);

  text-decoration: none;

  transition:
    background-color 0.25s,
    color 0.25s,
    padding 0.25s;
}

.navegacion-principal__item:last-child {
  border-bottom: 1px solid var(--linea);
}


/* HOVER */

.navegacion-principal__item:hover {
  background-color: var(--coral);
  color: var(--azul-oscuro);

  padding-left: 30px;
  padding-right: 30px;
}


/* NÚMERO */

.navegacion-principal__numero {
  color: var(--coral);

  font-size: 0.75rem;
}

.navegacion-principal__item:hover
.navegacion-principal__numero {
  color: var(--azul-oscuro);
}


/* CONTENIDO */

.navegacion-principal__contenido {
  display: flex;
  flex-direction: column;

  gap: 12px;
}


/* TÍTULO */

.navegacion-principal__titulo {
  margin: 0;

  color: var(--coral);

  font-size: clamp(
    2.5rem,
    6vw,
    5.5rem
  );

  line-height: 0.9;
  letter-spacing: -0.06em;

  text-transform: uppercase;
}

.navegacion-principal__item:hover
.navegacion-principal__titulo {
  color: var(--azul-oscuro);
}


/* DESCRIPCIÓN */

.navegacion-principal__descripcion {
  margin: 0;

  font-size: 0.8rem;
  line-height: 1.4;

  text-transform: uppercase;

  letter-spacing: 0.03em;
}


/* FLECHA */

.navegacion-principal__flecha {
  text-align: right;

  font-size: 2rem;
}


/* =========================================================
   06. PIE DE PÁGINA
   ========================================================= */

.pie {
  padding:
    30px
    0;

  background-color: var(--crema);

  color: var(--azul-oscuro);
}

.pie__interior {
  display: flex;

  justify-content: space-between;

  gap: 30px;

  font-size: 0.7rem;

  text-transform: uppercase;
}


/* =========================================================
   07. PÁGINA TRABAJOS
   ENCABEZADO
   ========================================================= */

.pagina-header {
  padding:
    40px
    0
    100px;

  border-bottom: 1px solid var(--linea);
}


/* PARTE SUPERIOR */

.pagina-header__superior {
  display: flex;

  justify-content: space-between;
  align-items: center;

  margin-bottom: 80px;
}


/* VOLVER */

.volver {
  color: var(--crema);

  text-decoration: none;

  font-size: 0.75rem;

  text-transform: uppercase;

  transition: color 0.2s;
}

.volver:hover {
  color: var(--coral);
}


/* NÚMERO */

.pagina-header__numero {
  color: var(--coral);

  font-size: 0.75rem;
}


/* TÍTULO PRINCIPAL */

.pagina-header__titulo {
  margin:
    0
    0
    70px;

  color: var(--coral);

  font-size: clamp(
    4.5rem,
    11vw,
    9rem
  );

  line-height: 0.8;
  letter-spacing: -0.075em;

  text-transform: uppercase;
}


/* PARTE INFERIOR */

.pagina-header__pie {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 50px;

  align-items: end;
}

.pagina-header__descripcion {
  max-width: 600px;

  margin: 0;

  line-height: 1.65;
}

.pagina-header__fecha {
  color: var(--coral);

  text-align: right;

  font-size: 0.75rem;

  text-transform: uppercase;
}


/* =========================================================
   08. PÁGINA TRABAJOS
   SECCIONES DE PROYECTOS
   ========================================================= */

.trabajo-detalle {
  padding:
    110px
    0;

  border-bottom: 1px solid var(--linea);
}


/* ENCABEZADO DE CADA TRABAJO */

.trabajo-detalle__encabezado {
  display: grid;

  grid-template-columns:
    90px
    1fr;

  gap: 35px;

  margin-bottom: 70px;
}


/* NÚMERO */

.trabajo-detalle__numero {
  color: var(--coral);

  font-size: 0.8rem;
}


/* CATEGORÍA */

.trabajo-detalle__categoria {
  margin:
    0
    0
    18px;

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.04em;
}


/* TÍTULO */

.trabajo-detalle__titulo {
  margin: 0;

  color: var(--coral);

  font-size: clamp(
    3rem,
    7vw,
    6.5rem
  );

  line-height: 0.87;

  letter-spacing: -0.065em;

  text-transform: uppercase;
}


/* =========================================================
   09. COMPOSICIÓN DE TRABAJOS
   ========================================================= */

.trabajo-detalle__composicion {
  display: grid;

  grid-template-columns:
    0.8fr
    1.2fr;

  gap: 65px;

  align-items: end;

  padding-left: 125px;
}


/* COMPOSICIÓN INVERTIDA */

.trabajo-detalle__composicion--invertida {
  grid-template-columns:
    1.2fr
    0.8fr;
}


/* TEXTO */

.trabajo-detalle__texto {
  max-width: 500px;
}

.trabajo-detalle__texto p {
  margin:
    0
    0
    22px;

  line-height: 1.7;

  font-size: 0.95rem;
}


/* ENLACE A CASIOPEA */

.trabajo-detalle__enlace {
  display: inline-block;

  margin-top: 20px;

  padding-bottom: 5px;

  color: var(--coral);

  text-decoration: none;

  font-size: 0.75rem;

  text-transform: uppercase;

  border-bottom: 1px solid var(--coral);

  transition: color 0.2s;
}

.trabajo-detalle__enlace:hover {
  color: var(--crema);
}


/* =========================================================
   10. ESPACIOS DE IMÁGENES
   ========================================================= */

.trabajo-imagen {
  position: relative;

  min-height: 500px;

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  background-color: var(--azul-oscuro);

  border: 1px solid var(--linea);
}


/* TEXTO TEMPORAL DE LAS IMÁGENES */

.trabajo-imagen span {
  margin: 20px;

  padding:
    8px
    10px;

  background-color: var(--coral);

  color: var(--azul-oscuro);

  font-size: 0.68rem;

  text-transform: uppercase;
}


/* =========================================================
   11. GRÁFICOS TEMPORALES
   PROYECTO 01
   ========================================================= */

.trabajo-imagen--01 {
  background-image: url("./img/imagen_tci.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--azul-oscuro);
}


/* =========================================================
   12. GRÁFICOS TEMPORALES
   PROYECTO 02
   ========================================================= */

.trabajo-imagen--02 {
  background-image: url("./img/imagen_tpt.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* =========================================================
   13. GRÁFICOS TEMPORALES
   PROYECTO 03
   ========================================================= */

.trabajo-imagen--03 {
  background-image: url("./img/imagen_imges.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* =========================================================
   14. GRÁFICOS TEMPORALES
   PROYECTO 04
   ========================================================= */

.trabajo-imagen--04 {
  background-image: url("./img/imagen_tfab.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* =========================================================
   15. BROTE LATENTE
   IMAGEN GRANDE
   ========================================================= */

.trabajo-imagen--grande {
  min-height: 680px;

  margin-left: 125px;
}


/* TEXTO DEBAJO DE LA IMAGEN GRANDE */

.trabajo-detalle__inferior {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 65px;

  margin-top: 50px;

  padding-left: 125px;
}


/* =========================================================
   16. NAVEGACIÓN FINAL
   ========================================================= */

.siguiente {
  padding:
    90px
    0
    110px;
}

.siguiente__etiqueta {
  margin:
    0
    0
    40px;

  color: var(--coral);

  font-size: 0.75rem;

  text-transform: uppercase;
}

.siguiente__enlace {
  display: flex;

  justify-content: space-between;
  align-items: flex-end;

  color: var(--coral);

  text-decoration: none;

  font-size: clamp(
    3rem,
    8vw,
    7rem
  );

  line-height: 0.85;

  letter-spacing: -0.06em;

  text-transform: uppercase;

  transition: color 0.2s;
}

.siguiente__enlace:hover {
  color: var(--crema);
}


/* =========================================================
   17. ADAPTACIÓN PARA CELULAR
   INDEX
   ========================================================= */

@media (max-width: 700px) {

  /* CONTENEDOR */

  .contenedor {
    width: calc(100% - 28px);
  }


  /* MENÚ */

  .menu-principal__interior {
    min-height: auto;

    padding:
      14px
      0;

    flex-direction: column;
    align-items: flex-start;

    gap: 12px;
  }

  .menu-principal__marca {
    font-size: 0.72rem;
  }

  .menu-principal__enlaces {
    width: 100%;

    justify-content: flex-start;

    gap: 16px;

    overflow-x: auto;
  }

  .menu-principal__enlaces a {
    flex-shrink: 0;

    padding:
      5px
      0;

    font-size: 0.62rem;
  }

  .menu-principal__enlaces a::after {
    bottom: 0;
  }


  /* PRESENTACIÓN PRINCIPAL */

  .presentacion-principal {
    min-height: auto;

    padding:
      30px
      0
      70px;
  }

  .presentacion-principal__superior {
    margin-bottom: 40px;
  }

  .presentacion-principal__titulo {
    font-size: 22vw;

    margin-bottom: 50px;
  }

  .presentacion-principal__contenido {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .presentacion-principal__imagen {
    min-height: 420px;

    order: -1;
  }


  /* NAVEGACIÓN PRINCIPAL */

  .navegacion-principal {
    padding:
      65px
      0
      80px;
  }

  .navegacion-principal__encabezado {
    grid-template-columns: 1fr;

    gap: 10px;

    margin-bottom: 40px;
  }

  .navegacion-principal__item {
    grid-template-columns:
      40px
      1fr
      30px;

    gap: 15px;

    min-height: 130px;
  }

  .navegacion-principal__titulo {
    font-size: 2.2rem;
  }

  .navegacion-principal__descripcion {
    font-size: 0.7rem;
  }

  .navegacion-principal__flecha {
    font-size: 1.4rem;
  }

  .navegacion-principal__item:hover {
    padding-left: 15px;
    padding-right: 15px;
  }


  /* PIE */

  .pie__interior {
    flex-direction: column;
  }

}


/* =========================================================
   18. ADAPTACIÓN PARA CELULAR
   PÁGINA TRABAJOS
   ========================================================= */

@media (max-width: 700px) {

  /* ENCABEZADO */

  .pagina-header {
    padding:
      30px
      0
      70px;
  }

  .pagina-header__superior {
    margin-bottom: 55px;
  }

  .pagina-header__titulo {
    font-size: 18vw;

    margin-bottom: 50px;
  }

  .pagina-header__pie {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .pagina-header__fecha {
    text-align: left;
  }


  /* TRABAJOS */

  .trabajo-detalle {
    padding:
      70px
      0;
  }

  .trabajo-detalle__encabezado {
    grid-template-columns: 1fr;

    gap: 15px;

    margin-bottom: 45px;
  }

  .trabajo-detalle__titulo {
    font-size: 13vw;
  }


  /* COMPOSICIÓN */

  .trabajo-detalle__composicion,
  .trabajo-detalle__composicion--invertida {
    grid-template-columns: 1fr;

    gap: 35px;

    padding-left: 0;
  }


  /* IMÁGENES */

  .trabajo-imagen {
    min-height: 400px;
  }

  .trabajo-detalle__composicion--invertida
  .trabajo-imagen {
    order: 2;
  }


  /* BROTE LATENTE */

  .trabajo-detalle__inferior {
    grid-template-columns: 1fr;

    padding-left: 0;

    margin-top: 35px;
  }

  .trabajo-imagen--grande {
    min-height: 450px;

    margin-left: 0;
  }


  /* NAVEGACIÓN FINAL */

  .siguiente {
    padding:
      65px
      0
      80px;
  }

  .siguiente__enlace {
    font-size: 12vw;
  }

}


/* =========================================================
   PÁGINA PROYECTOS PERSONALES
   ========================================================= */


/* =========================================================
   19. SECCIONES DE PROYECTOS PERSONALES
   ========================================================= */

.proyecto-personal {
  padding:
    110px
    0;

  border-bottom: 1px solid var(--linea);
}


/* ENCABEZADO */

.proyecto-personal__encabezado {
  display: grid;

  grid-template-columns:
    90px
    1fr;

  gap: 35px;

  margin-bottom: 70px;
}


/* NÚMERO */

.proyecto-personal__numero {
  color: var(--coral);

  font-size: 0.8rem;
}


/* CATEGORÍA */

.proyecto-personal__categoria {
  margin:
    0
    0
    18px;

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.04em;
}


/* TÍTULO */

.proyecto-personal__titulo {
  margin: 0;

  color: var(--coral);

  font-size: clamp(
    3.5rem,
    8vw,
    7rem
  );

  line-height: 0.87;

  letter-spacing: -0.065em;

  text-transform: uppercase;
}


/* =========================================================
   20. COMPOSICIÓN
   ========================================================= */

.proyecto-personal__composicion {
  display: grid;

  grid-template-columns:
    0.8fr
    1.2fr;

  gap: 65px;

  align-items: end;

  padding-left: 125px;
}


/* SEGUNDO PROYECTO INVERTIDO */

.proyecto-personal__composicion--invertida {
  grid-template-columns:
    1.2fr
    0.8fr;
}


/* TEXTO */

.proyecto-personal__texto {
  max-width: 500px;
}

.proyecto-personal__texto p {
  margin:
    0
    0
    22px;

  font-size: 0.95rem;

  line-height: 1.7;
}


/* =========================================================
   21. IMÁGENES
   ========================================================= */

.proyecto-personal__imagen {
  position: relative;

  min-height: 550px;

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  border: 1px solid var(--linea);

  background-color: var(--azul-oscuro);

  background-size: cover;

  background-position: center;
}


/* ETIQUETA */

.proyecto-personal__imagen span {
  margin: 20px;

  padding:
    8px
    10px;

  background-color: var(--coral);

  color: var(--azul-oscuro);

  font-size: 0.68rem;

  text-transform: uppercase;
}


/* =========================================================
   22. GRÁFICO TEMPORAL
   TEJIDO
   ========================================================= */

.proyecto-personal__imagen--tejido {
  background-image: url("./img/tejidofotos.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* =========================================================
   23. GRÁFICO TEMPORAL
   ENCUADERNACIÓN
   ========================================================= */

.proyecto-personal__imagen--encuadernacion {
  background-image: url("./img/encuadernacion_fotos.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* =========================================================
   24. PROYECTOS PERSONALES EN CELULAR
   ========================================================= */

@media (max-width: 700px) {

  .proyecto-personal {
    padding:
      70px
      0;
  }

  .proyecto-personal__encabezado {
    grid-template-columns: 1fr;

    gap: 15px;

    margin-bottom: 45px;
  }

  .proyecto-personal__titulo {
    font-size: 15vw;
  }

  .proyecto-personal__composicion,
  .proyecto-personal__composicion--invertida {
    grid-template-columns: 1fr;

    gap: 35px;

    padding-left: 0;
  }

  .proyecto-personal__imagen {
    min-height: 420px;
  }

  .proyecto-personal__composicion--invertida
  .proyecto-personal__imagen {
    order: 2;
  }

}


/* =========================================================
   PÁGINA DISEÑO DESDE EL CÓDIGO
   ========================================================= */


/* =========================================================
   25. IMAGEN EJERCICIO 02
   ========================================================= */

.trabajo-imagen--ejercicio-02 {
  background-image: url("./img/capturapagina2.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--azul-oscuro);
}


/* =========================================================
   PÁGINA CONTACTO
   ========================================================= */


/* =========================================================
   26. ENCABEZADO DE CONTACTO
   ========================================================= */

.contacto-pagina {
  padding:
    40px
    0
    100px;

  border-bottom: 1px solid var(--linea);
}


/* PARTE SUPERIOR */

.contacto-pagina__superior {
  display: flex;

  justify-content: space-between;
  align-items: center;

  margin-bottom: 90px;
}


/* NÚMERO */

.contacto-pagina__numero {
  color: var(--coral);

  font-size: 0.75rem;
}


/* TÍTULO */

.contacto-pagina__titulo {
  margin:
    0
    0
    60px;

  color: var(--coral);

  font-size: clamp(
    5rem,
    13vw,
    10rem
  );

  line-height: 0.8;

  letter-spacing: -0.08em;

  text-transform: uppercase;
}


/* INTRODUCCIÓN */

.contacto-pagina__introduccion {
  max-width: 500px;

  margin: 0;

  font-size: 0.95rem;

  line-height: 1.65;
}


/* =========================================================
   27. LISTA DE CONTACTO
   ========================================================= */

.contacto-lista {
  padding:
    90px
    0
    110px;
}


/* CADA ENLACE */

.contacto-item {
  display: grid;

  grid-template-columns:
    80px
    1fr
    60px;

  gap: 30px;

  align-items: center;

  min-height: 170px;

  padding:
    30px
    15px;

  border-top: 1px solid var(--linea);

  text-decoration: none;

  transition:
    background-color 0.25s,
    color 0.25s,
    padding 0.25s;
}

.contacto-item:last-child {
  border-bottom: 1px solid var(--linea);
}


/* HOVER */

.contacto-item:hover {
  background-color: var(--coral);

  color: var(--azul-oscuro);

  padding-left: 30px;
  padding-right: 30px;
}


/* NÚMERO */

.contacto-item__numero {
  color: var(--coral);

  font-size: 0.75rem;
}

.contacto-item:hover
.contacto-item__numero {
  color: var(--azul-oscuro);
}


/* CONTENIDO */

.contacto-item__contenido {
  display: flex;

  flex-direction: column;

  gap: 10px;
}


/* TIPO */

.contacto-item__tipo {
  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;
}


/* DATO PRINCIPAL */

.contacto-item__dato {
  color: var(--coral);

  font-size: clamp(
    1.8rem,
    5vw,
    4.5rem
  );

  line-height: 0.95;

  letter-spacing: -0.05em;
}

.contacto-item:hover
.contacto-item__dato {
  color: var(--azul-oscuro);
}


/* FLECHA */

.contacto-item__flecha {
  text-align: right;

  font-size: 2rem;
}


/* =========================================================
   28. CONTACTO EN CELULAR
   ========================================================= */

@media (max-width: 700px) {

  .contacto-pagina {
    padding:
      30px
      0
      70px;
  }

  .contacto-pagina__superior {
    margin-bottom: 55px;
  }

  .contacto-pagina__titulo {
    font-size: 20vw;

    margin-bottom: 45px;
  }

  .contacto-lista {
    padding:
      65px
      0
      80px;
  }

  .contacto-item {
    grid-template-columns:
      40px
      1fr
      25px;

    gap: 15px;

    min-height: 130px;

    padding:
      25px
      10px;
  }

  .contacto-item__dato {
    font-size: 1.8rem;

    overflow-wrap: anywhere;
  }

  .contacto-item__flecha {
    font-size: 1.4rem;
  }

  .contacto-item:hover {
    padding-left: 10px;
    padding-right: 10px;
  }

}


/* =========================================================
   29. TAREA 3 DDEC
   MINI MENÚ INTERNO
   ========================================================= */

.menu-analisis {
  position: sticky;
  top: 64px;
  z-index: 900;

  width: 100%;

  background-color: var(--azul-oscuro);

  border-bottom: 1px solid var(--linea);
}

.menu-analisis__interior {
  min-height: 52px;

  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 30px;
}

.menu-analisis__etiqueta {
  color: var(--coral);

  font-size: 0.7rem;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.04em;
}

.menu-analisis__enlaces {
  display: flex;

  align-items: center;

  gap: 28px;
}

.menu-analisis__enlaces a {
  position: relative;

  padding:
    17px
    0;

  color: var(--crema);

  font-size: 0.7rem;

  text-decoration: none;
  text-transform: uppercase;

  letter-spacing: 0.04em;

  transition: color 0.2s;
}

.menu-analisis__enlaces a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 11px;

  width: 0;
  height: 1px;

  background-color: var(--coral);

  transition: width 0.25s;
}

.menu-analisis__enlaces a:hover {
  color: var(--coral);
}

.menu-analisis__enlaces a:hover::after {
  width: 100%;
}


/* =========================================================
   30. TAREA 3
   SECCIONES PRINCIPALES
   ========================================================= */

.analisis-principal {
  padding:
    110px
    0;

  border-bottom: 1px solid var(--linea);

  scroll-margin-top: 140px;
}

.analisis-principal--plataforma {
  background-color: var(--azul-oscuro);
}


/* =========================================================
   31. INTRODUCCIÓN DEL ANÁLISIS
   ========================================================= */

.analisis-introduccion {
  max-width: 650px;

  margin-left: 125px;
  margin-bottom: 100px;
}

.analisis-introduccion p {
  margin:
    0
    0
    22px;

  font-size: 0.95rem;

  line-height: 1.7;
}


/* =========================================================
   32. BLOQUES DE ANÁLISIS
   ========================================================= */

.analisis-bloque {
  padding:
    90px
    0;

  border-top: 1px solid var(--linea);
}

.analisis-bloque--ultimo {
  padding-bottom: 0;
}

.analisis-bloque__encabezado {
  display: grid;

  grid-template-columns:
    90px
    1fr;

  gap: 35px;

  margin-bottom: 55px;
}

.analisis-bloque__numero {
  color: var(--coral);

  font-size: 0.8rem;
}

.analisis-bloque__categoria {
  margin:
    0
    0
    14px;

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.04em;
}

.analisis-bloque__titulo {
  max-width: 850px;

  margin: 0;

  color: var(--coral);

  font-size: clamp(
    2.2rem,
    5vw,
    4.5rem
  );

  line-height: 0.92;

  letter-spacing: -0.055em;

  text-transform: uppercase;
}


/* =========================================================
   33. TEXTO + IMAGEN
   ========================================================= */

.analisis-bloque__composicion {
  display: grid;

  grid-template-columns:
    0.8fr
    1.2fr;

  gap: 65px;

  align-items: start;

  padding-left: 125px;
}

.analisis-bloque__texto {
  max-width: 500px;
}

.analisis-bloque__texto--ancho {
  max-width: 720px;

  margin-left: 125px;
  margin-bottom: 55px;
}

.analisis-bloque__texto p {
  margin:
    0
    0
    22px;

  font-size: 0.95rem;

  line-height: 1.7;
}

.analisis-bloque__texto strong {
  color: var(--coral);
}

.analisis-bloque code,
.analisis-dato code {
  color: var(--coral);

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-size: 0.9em;
}


/* =========================================================
   34. IMÁGENES DEL ANÁLISIS
   ========================================================= */

.analisis-imagen {
  margin: 0;
}

.analisis-imagen img {
  width: 100%;

  border: 1px solid var(--linea);

  background-color: var(--azul-oscuro);
}

.analisis-imagen figcaption {
  margin-top: 12px;

  color: var(--coral);

  font-size: 0.68rem;

  line-height: 1.4;

  text-transform: uppercase;
}


/* =========================================================
   35. DATO OBSERVADO
   ========================================================= */

.analisis-dato {
  max-width: 700px;

  margin:
    55px
    0
    0
    125px;

  padding:
    25px
    30px;

  background-color: var(--azul-oscuro);

  border-left: 3px solid var(--coral);
}

.analisis-dato span {
  display: block;

  margin-bottom: 18px;

  color: var(--coral);

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.04em;
}

.analisis-dato p {
  margin:
    8px
    0;

  font-size: 0.85rem;

  line-height: 1.6;
}


/* =========================================================
   36. COMPARACIÓN ESCRITORIO / MÓVIL
   ========================================================= */

.analisis-comparacion {
  display: grid;

  grid-template-columns:
    1.4fr
    0.6fr;

  gap: 50px;

  align-items: start;

  padding-left: 125px;
}

.analisis-imagen--movil {
  max-width: 330px;

  justify-self: center;
}


/* =========================================================
   37. EVALUACIÓN
   FUNCIONA / CAMBIARÍA
   ========================================================= */

.evaluacion-cajas {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 430px));

  justify-content: center;
  align-items: start;

  gap: 40px;

  margin-top: 20px;
}


/* RECUADRO */

.evaluacion-caja {
  width: 100%;

  padding:
    35px
    38px
    40px;

  background-color: var(--azul-oscuro);

  border: 1px solid var(--linea);
}


/* TÍTULO */

.evaluacion-caja__titulo {
  margin:
    0
    0
    35px;

  padding-bottom: 20px;

  color: var(--coral);

  font-size: 1.15rem;
  font-weight: 700;

  text-align: center;
  text-transform: uppercase;

  letter-spacing: 0.04em;

  border-bottom: 1px solid var(--linea);
}


/* LISTA */

.evaluacion-caja__lista {
  margin: 0;

  padding-left: 20px;
}

.evaluacion-caja__lista li {
  margin-bottom: 25px;

  padding-left: 5px;

  font-size: 0.9rem;

  line-height: 1.55;
}

.evaluacion-caja__lista li:last-child {
  margin-bottom: 0;
}

.evaluacion-caja__lista li::marker {
  color: var(--coral);
}


/* NOMBRE DE CADA PUNTO */

.evaluacion-caja__lista strong {
  display: block;

  margin-bottom: 5px;

  color: var(--coral);

  font-size: 0.9rem;
}


/* DESCRIPCIÓN */

.evaluacion-caja__lista span {
  display: block;

  color: var(--crema);
}


/* =========================================================
   38. PLATAFORMA PENDIENTE
   ========================================================= */

.analisis-pendiente {
  max-width: 650px;

  margin-left: 125px;
}

.analisis-pendiente p {
  margin:
    0
    0
    20px;

  font-size: 0.95rem;

  line-height: 1.7;
}


/* =========================================================
   39. TAREA 3
   ADAPTACIÓN PARA CELULAR
   ========================================================= */

@media (max-width: 700px) {


  /* MINI MENÚ */

  .menu-analisis {
    position: static;
  }

  .menu-analisis__interior {
    min-height: auto;

    padding:
      14px
      0;

    flex-direction: column;
    align-items: flex-start;

    gap: 10px;
  }

  .menu-analisis__enlaces {
    width: 100%;

    gap: 20px;
  }

  .menu-analisis__enlaces a {
    padding:
      5px
      0;

    font-size: 0.65rem;
  }

  .menu-analisis__enlaces a::after {
    bottom: 0;
  }


  /* SECCIONES */

  .analisis-principal {
    padding:
      70px
      0;

    scroll-margin-top: 20px;
  }


  /* INTRODUCCIÓN */

  .analisis-introduccion {
    margin-left: 0;
    margin-bottom: 65px;
  }


  /* BLOQUES */

  .analisis-bloque {
    padding:
      65px
      0;
  }

  .analisis-bloque__encabezado {
    grid-template-columns: 1fr;

    gap: 12px;

    margin-bottom: 40px;
  }

  .analisis-bloque__titulo {
    font-size: 11vw;
  }


  /* TEXTO + IMAGEN */

  .analisis-bloque__composicion {
    grid-template-columns: 1fr;

    gap: 35px;

    padding-left: 0;
  }

  .analisis-bloque__texto--ancho {
    margin-left: 0;
  }


  /* DATO */

  .analisis-dato {
    margin:
      40px
      0
      0;

    padding:
      22px
      20px;
  }


  /* COMPARACIÓN */

  .analisis-comparacion {
    grid-template-columns: 1fr;

    gap: 35px;

    padding-left: 0;
  }

  .analisis-imagen--movil {
    max-width: 280px;

    justify-self: start;
  }


  /* EVALUACIÓN */

  .evaluacion-cajas {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .evaluacion-caja {
    padding:
      28px
      24px
      32px;
  }

  .evaluacion-caja__titulo {
    margin-bottom: 28px;
  }


  /* PLATAFORMA */

  .analisis-pendiente {
    margin-left: 0;
  }

}