@font-face {
  font-family: "Minion Pro";
  font-style: normal;
  font-weight: normal;
  src: url("../../font/MinionPro-Regular.otf");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: bold;
  src: url("../../font/OpenSans-Bold.ttf");
}
@font-face {
  font-family: "Open Sans Light";
  font-style: normal;
  font-weight: 300;
  src: url("style/OpenSans-Light.ttf");
}
@font-face {
  font-family: "Open Sans Light";
  font-style: italic;
  font-weight: 300;
  src: url("style/OpenSans-LightItalic.ttf");
}
@font-face {
  font-family: "Open Sans Light";
  font-style: oblique;
  font-weight: 300;
  src: url("style/OpenSans-LightItalic.ttf");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: normal;
  src: url("style/OpenSans-Regular.ttf");
}
@font-face {
  font-family: "Open Sans SemiBold";
  font-style: normal;
  font-weight: 600;
  src: url("style/OpenSans-SemiBold.ttf");
}
@font-face {
  font-family: "Open Sans Condensed";
  font-style: normal;
  font-weight: bold;
  font-stretch: condensed;
  src: url("style/OpenSansCondensed-Bold.ttf");
}
@font-face {
  font-family: "Open Sans Condensed";
  font-style: normal;
  font-weight: normal;
  font-stretch: condensed;
  src: url("style/OpenSansCondensed-Regular.ttf");
}
/* Reset básico y fuentes limpias */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", "Roboto", sans-serif;
  color: #333;
  line-height: 1.6;
  background-color: #f8f9fa;
  /* padding: 10px; */
}
.dir-datos-ulma a {
  text-decoration: none;
  color: #0056b3;
  font-weight: 500;
  transition: color 0.3s ease;
}

.dir-datos-ulma a:hover {
  color: #e2001a;
  cursor: pointer;
}

/* Secciones */
.page {
  /* max-width: 80%; */
  /* margin: 0 auto 1% auto; */
  background: white;
  padding: 40px;
  padding-bottom: 0;
  /* border-radius: 12px; */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.page.portada {
  position: relative;
  width: 100%;
  max-height: 100vh; /* altura visible del recorte */
  overflow: hidden;
}

/* Estilo base del grupo */
.page.portada .text-item.idioma,
.page.portada .text-item.serie,
.page.portada .text-item.modelo,
.page.portada .group {
  display: block;
  margin: 0;
  padding: 5px 10px;
  width: max-content;
  z-index: 3;
}

.page.portada .text-item.idioma {
  color: #b1b3b4;
  font-family: "Open Sans", sans-serif;
  font-size: 4vw;
  font-style: normal;
  font-weight: bold;
  position: absolute;
  top: 20vw;
  right: 50px;
  padding: 0.5%;
}

.portada .text-item.serie {
  color: #b1b3b4;
  font-family: "Open Sans", sans-serif;
  font-size: 8vw;
  font-style: normal;
  font-weight: normal;
  position: absolute;
  top: 10vw;
  right: 50px;
  padding: 0.5%;
}

.page.portada > img:first-of-type {
  width: 60%; /* ancho total del contenedor */
  height: auto; /* mantiene proporción */
  object-fit: cover; /* rellena el contenedor recortando si hace falta */
  object-position: center top; /* muestra la parte superior */
  display: block; /* elimina espacio extra abajo */
  position: relative;
  z-index: 1;
}
.page.portada::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px; /* alto del degradado */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none; /* que no interfiera con clicks */
  z-index: 2;
}

.portada .text-item.modelo {
  color: #58585a;
  font-family: "Open Sans", sans-serif;
  font-size: 5vw;
  font-style: normal;
  font-weight: normal;
  position: absolute;
  top: 6vw;
  padding: 0.5%;
  /* border-radius: 20px; */
  right: 50px;
}
.page.portada .text-item.-p-rrafo-b-sico- {
  text-align: right;
  color: #58585a;
  font-family: "Open Sans", sans-serif;
  font-size: 2vw;
  font-style: normal;
  font-variant: small-caps;
  font-weight: bold;
  position: absolute;
  bottom: 6vw;
  right: 50px;
  z-index: 3;
}

.page.portada .group {
  border-top: none;
  /* border-radius: 0 0 10px 10px; */
  position: absolute;
  top: 1vw;
  right: 20px;
  width: 50vw;
}

/* Estilo de textos generales */
.text-item {
  margin: 10px 0;
  font-size: 1.1rem;
  color: #444;
}

/* Titulares y secciones */
.titulo-principal {
  font-size: 2rem;
  font-weight: 600;
  color: #e2001a;
  margin-bottom: 20px;
}

.secci-n,
.secci-n-mapa {
  font-size: 1.4rem;
  font-weight: bold;
  color: #e2001a;
  margin: 30px 0 10px;
  border-bottom: 2px solid #e2001a;
  padding-bottom: 5px;
}
.portada img.group {
  /* border-radius: 0px; */
  position: absolute;
  top: 15px;
  right: 50px;
  width: 50%;
}

/* Párrafos */
.-p-rrafo-b-sico- {
  font-size: 1rem;
  margin-bottom: 10px;
  color: #666;
}

/* Listas tipo bala */
.text-item.texto-bala {
  margin-left: 10%;
  list-style-type: disc;
  display: list-item;
  margin-left: 1.2em;
}
.page.interior .text-item.modelo {
  color: #e2001a;
  font-family: "Open Sans", sans-serif;
  font-size: 5vw;
  font-style: normal;
  font-weight: normal;
  border-bottom: 2px solid #e2001a;
}

/* Asegúrate de que el contenedor principal no interfiere */
.page.interior {
  position: relative;
}

/* Estilo base para todas las imágenes */
.page.interior img {
  display: inline-block; /* Asegura que no se rompan con float, etc. */
  width: 15%; /* Ajusta a lo que quieras */
  height: auto;
  margin-right: 0.5%;
  margin-left: 0.5%;
  vertical-align: top;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.page.interior img:first-of-type {
  width: 100%;
  /* max-width: 800px; */
  height: auto;
  display: block;
  margin: 0 auto 20px auto;
  /* border-radius: 8px; */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0);
}
.page.interior .text-item.ref-productos {
  display: inline-block;
  width: 15%; /* mejor usar width en lugar de max-width para que se alineen igual */
  vertical-align: top;
  margin-right: 0.5%;
  margin-left: 0.5%;
  box-sizing: border-box; /* para incluir padding si le pones */
  font-size: 0.9rem;
  line-height: 1.2em;
  color: #333;
}

/* Estilo para los textos ref-productos */
.page.interior .text-item.ref-productos {
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  max-width: 600px;
  color: #333;
}

/* Modelo, idioma, serie */
/* .modelo, .serie, .idioma {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.2rem;
  color: #003366;
} */

/* Imágenes */
img {
  max-width: 100%;
  height: auto;
  /* border-radius: 6px; */
}
.page.contraportada img:first-of-type {
  display: none;
}
.page.contraportada img:nth-of-type(2){
  display: none;
}
.page.contraportada img{
  /* border-radius: 0px; */
}
.page.contraportada img:nth-of-type(3) {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 0 auto;
  margin-bottom: 10%;
}


/* Grupos decorativos */
.group {
  display: block;
  margin: 20px auto;
}

/* Tabla técnica */
.tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0;
  font-size: 1rem;
  background-color: #ffffff;
  color: #333;
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.tabla th,
.tabla td {
  border: 1px solid #ddd;
  padding: 14px 18px;
  text-align: left;
}

.tabla th {
  background-color: #ed1c24;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tabla tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Textos del mapa y pie */
.texto-mapa_ok {
  font-size: 0.95rem;
  margin: 12px 0;
}

.dir-nombre-ulma {
  font-weight: bold;
  color: #e2001a;
  font-size: 1rem;
  margin-top: 30px;
}

.dir-datos-ulma {
  font-size: 0.95rem;
  color: #555;
}
.page.contraportada .text-item.-p-rrafo-b-sico-{
  display: none;
}
.page.contraportada .text-item.texto-mapa_ok{
  display: none;
}
.page.contraportada .text-item.dir-nombre-ulma,
.page.contraportada .text-item.dir-datos-ulma {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .page {
    padding: 20px; 
    width: 100%;
  }

  .titulo-principal {
    font-size: 1.5rem;
  }
  /* .tabla {
    display: none;
  } */

  
  .page.portada .text-item.idioma,
  .page.portada .text-item.serie,
  .page.portada .text-item.modelo,
  .page.portada .group {
    padding: 3px 6px;
    max-width: 50vw; /* nunca más de la mitad de la pantalla */
    box-sizing: border-box;
    right: 1%;
  }
  .page.portada > img:first-of-type {
    width: 100%;
  }
  /* .page.interior img {
    max-width: 90%;
  } */

  .page.interior .text-item.ref-productos {
    font-size: 0.95rem;
    /* padding: 0 10px; */
  }

  .page.interior img {
    display: inline-block;
    width: 99%;
    height: 100%;
    margin-right: 0.5%;
    margin-left: 0.5%;
    vertical-align: top;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    margin-bottom: 10px;
  }
  .page.interior .text-item.ref-productos {
    display: inline-block;
    width: 99%; 
    vertical-align: top;
    margin-right: 0.5%;
    margin-left: 0.5%;
    box-sizing: border-box; 
    font-size: 0.9rem;
    line-height: 1.2em;
    color: #333;
  }
  .page.interior {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .page.interior img,
  .page.interior p.ref-productos {
    width: 100%;
    margin: 0 auto;
  }

}