@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap');

/* ======================================================================
   El sitio publico: portada, servicios, nosotros y contacto.

   Antes esto era una sola pantalla que no hacia scroll —`html` y `body`
   tenian `overflow:hidden` y `height:100vh`— y la cabecera era una franja
   gris oscura. El diseno nuevo es una pagina que se recorre, asi que esas
   dos reglas se van; si vuelven, la portada se corta por debajo del
   carrusel y nadie ve ni los clientes ni el pie.

   El carrusel no se toca: empieza mas abajo, en «RESTO», tal como estaba.
   ====================================================================== */

:root{
  --tinta:#13203a;        /* el azul casi negro del heroe */
  --azul:#2563eb;         /* el de los botones y los enlaces */
  --azul-hover:#1d4fd8;
  --gris:#5b6472;
  --gris-claro:#eef1f5;
  --linea:#e3e8ef;
  --papel:#ffffff;
}

*,*::before,*::after{box-sizing:border-box}

html{position:relative}

body{
  margin:0;
  padding:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:"Roboto",system-ui,sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a,a:hover{text-decoration:none}
img{max-width:100%}
.icon{display:inline-block;width:1em;height:1em;stroke-width:0;stroke:currentColor;fill:currentColor}

/* ====== CABECERA ====== */
.main-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:12px 40px;
  background:var(--papel);
  border-bottom:1px solid var(--linea);
  position:sticky;
  top:0;
  z-index:1000;
}

/* La marca: logotipo, nombre y lema. El lema se cae en pantallas angostas
   antes que el nombre, porque el nombre es el que identifica. */
.marca{display:flex;align-items:center;gap:12px;min-width:0}
.marca img{height:46px;width:auto;display:block;flex-shrink:0}
.marca__texto{display:flex;flex-direction:column;min-width:0}
.marca__nombre{
  font-size:1.18rem;font-weight:500;color:var(--tinta);line-height:1.2;
  white-space:nowrap;
}
.marca__lema{
  font-size:.78rem;color:var(--gris);line-height:1.3;white-space:nowrap;
}

.main-header .navigation{margin-left:auto}
.main-header .nav-list{
  list-style:none;display:flex;align-items:center;gap:34px;margin:0;padding:0;
}
.main-header .nav-list > li{position:relative}
.main-header .nav-list > li > a{
  display:inline-block;padding:10px 0;color:var(--tinta);
  font-size:.97rem;font-weight:400;border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.main-header .nav-list > li > a:hover{color:var(--azul)}
.main-header .nav-list > li > a.activo{color:var(--azul);border-bottom-color:var(--azul)}

/* La flechita de «Servicios», dibujada con un borde girado para no cargar
   un icono mas por una cosa de seis pixeles. */
.main-header .nav-list > li.dropdown > a::after{
  content:"";display:inline-block;margin-left:7px;vertical-align:2px;
  width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);
}

/* ====== SUBMENU ====== */
.main-header .nav-list > li.dropdown > .dropdown-menu{
  display:none;position:absolute;top:calc(100% + 8px);left:-14px;
  min-width:218px;margin:0;padding:7px;list-style:none;
  background:var(--papel);border:1px solid var(--linea);border-radius:12px;
  box-shadow:0 14px 34px rgba(16,24,40,.13);z-index:1000;
}
.nav-list > li.dropdown:hover > .dropdown-menu,
.nav-list > li.dropdown > .dropdown-menu:hover{display:block}

/* Puente invisible: sin el, el menu se cierra al cruzar el hueco. */
.nav-list > li.dropdown::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:10px;
}

.dropdown-menu li{margin:0}
.dropdown-menu li > a{
  display:block;padding:9px 13px;border-radius:8px;
  color:var(--tinta);font-size:.93rem;font-weight:400;
  transition:background .16s ease,color .16s ease;
}
.dropdown-menu li > a:hover{background:var(--gris-claro);color:var(--azul)}

/* ====== BOTON INGRESAR ====== */
.btn-ingresar{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  background:var(--tinta);color:#fff;
  padding:10px 20px;border-radius:999px;
  font-size:.94rem;font-weight:500;border:0;cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}
.btn-ingresar:hover{background:#1e3157;transform:translateY(-1px)}
.btn-ingresar svg{width:17px;height:17px;flex-shrink:0}

/* ====== HEROE ======
   Sin fotografia todavia: un degradado en los azules de la casa. El dia que
   haya foto se le agrega `background-image` encima del degradado y la capa
   oscura ya esta puesta para que el texto siga leyendose. */
.heroe{
  position:relative;
  /* La fotografia va al fondo; encima, dos capas que la oscurecen de
     izquierda a derecha. Sin ellas el titulo cae sobre la nave iluminada
     y deja de leerse; con ellas la foto sigue viendose del lado donde no
     hay texto, que es justo donde esta el operador. El degradado azul se
     queda debajo: si la foto tarda en bajar, el heroe nunca aparece en
     blanco. */
  background:
    linear-gradient(100deg, rgba(10,17,33,.94) 0%, rgba(12,21,40,.86) 38%,
                            rgba(14,25,48,.52) 68%, rgba(16,28,54,.34) 100%),
    url("../images/heroe-planta.97832c940887.webp") center right / cover no-repeat,
    linear-gradient(118deg, #0d1628 0%, #13203a 46%, #1b2d50 100%);
  color:#fff;
  overflow:hidden;
}
/* Una retícula tenue, para que el fondo no sea un plano liso. */
.heroe::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
}
.heroe__caja{
  position:relative;z-index:1;
  max-width:1500px;margin:0 auto;padding:96px 40px 104px;
}
.heroe__texto{max-width:610px}
.heroe__ceja{
  margin:0 0 18px;font-size:.76rem;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.heroe__titulo{
  margin:0 0 22px;font-size:clamp(2.1rem,4.6vw,3.5rem);
  font-weight:700;line-height:1.1;letter-spacing:-.01em;
}
.heroe__titulo span{display:block;color:#63a4ff;font-weight:700}
.heroe__bajada{
  margin:0 0 34px;font-size:1.06rem;line-height:1.72;
  color:rgba(255,255,255,.84);
}
.heroe__bajada strong{color:#fff;font-weight:500}
.heroe__botones{display:flex;flex-wrap:wrap;gap:14px}

.boton-heroe{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:999px;
  font-size:.98rem;font-weight:500;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.boton-heroe--lleno{background:var(--azul);color:#fff}
.boton-heroe--lleno:hover{background:var(--azul-hover);transform:translateY(-1px)}
.boton-heroe--hueco{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.42);
}
.boton-heroe--hueco:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-1px)}

/* ====== BANDA DE VALORES ====== */
.valores{background:var(--gris-claro);border-top:1px solid var(--linea)}
.valores__caja{
  max-width:1500px;margin:0 auto;padding:30px 40px;
  display:grid;gap:26px;grid-template-columns:repeat(4,1fr);
}
.valor{display:flex;align-items:flex-start;gap:14px}
.valor svg{width:30px;height:30px;flex-shrink:0;color:var(--tinta);margin-top:2px}
.valor__nombre{margin:0;font-size:.95rem;font-weight:500;color:var(--tinta)}
.valor__texto{margin:2px 0 0;font-size:.86rem;color:var(--gris);line-height:1.5}

/* ====== PIE ====== */
.pie{background:var(--tinta);color:rgba(255,255,255,.72)}
.pie__caja{
  max-width:1500px;margin:0 auto;padding:26px 40px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 18px;font-size:.88rem;text-align:center;
}
.pie__separador{color:rgba(255,255,255,.3)}
.pie a{color:rgba(255,255,255,.72)}
.pie a:hover{color:#fff}

/* ====== PANTALLAS CHICAS ====== */
@media screen and (max-width:1100px){
  .main-header{padding:12px 24px}
  .main-header .nav-list{gap:22px}
  .marca__lema{display:none}
  .heroe__caja{padding:74px 24px 80px}
  .valores__caja{grid-template-columns:repeat(2,1fr);padding:26px 24px}
  .pie__caja{padding:22px 24px}
}

.marca__nombre--corto{display:none}

/* En un telefono no hay lado despejado donde poner el texto: la foto se
   recorta a una franja estrecha y el titulo cae encima de lo que toque.
   Asi que ahi la capa oscura es pareja y la foto queda de textura. */
@media screen and (max-width:900px){
  .heroe{
    background:
      linear-gradient(180deg, rgba(10,17,33,.93) 0%, rgba(12,21,40,.88) 50%,
                              rgba(14,25,48,.92) 100%),
      url("../images/heroe-planta.97832c940887.webp") center center / cover no-repeat,
      linear-gradient(118deg, #0d1628 0%, #13203a 46%, #1b2d50 100%);
  }
}

@media screen and (max-width:768px){
  .heroe__caja{padding:52px 18px 58px}
  .heroe__bajada{font-size:1rem}
  .heroe__botones{gap:10px}
  .boton-heroe{padding:13px 22px;font-size:.94rem}
  .valores__caja{grid-template-columns:1fr;gap:18px;padding:24px 18px}
  .marca img{height:38px}
  .marca__nombre{font-size:1rem}
}

/* En un telefono el nombre completo no deja sitio para Ingresar. */
@media screen and (max-width:560px){
  .marca__nombre{display:none}
  .marca__nombre--corto{display:block;font-size:1.02rem}
}

/* Dos botones del ancho de media pantalla parten su texto en dos
   renglones. Uno debajo del otro, enteros, se leen de un golpe. */
@media screen and (max-width:420px){
  .heroe__botones{flex-direction:column;align-items:stretch}
  .boton-heroe{justify-content:center}
}

/* ====== RESTO (slider y otros) ====== */

.item-bg {
  width: 300px;
  height: 500px;
  position: absolute;
  top: 30px;
  border-radius: 10px;
  box-shadow: 0 6px 26px 6px rgba(0,0,0,0.25);
  opacity: 0;
  transition: all .3s;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.item-bg.active {
  background-color: #ffffff;
  color: black;
  z-index: 0;
  left: 0;
  top: 0;
  opacity: 1;
}

.news-slider {
  z-index: 2;
  max-width: 1100px;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}
@media screen and (min-width: 1920px) { .news-slider { max-width: 1500px; } }
@media screen and (max-width: 1300px) { .news-slider { max-width: 900px; } }
@media screen and (max-width: 992px)  { .news-slider { max-width: 680px; } }
@media screen and (max-width: 576px)  { .news-slider { width: 100%; margin-top: 20px; } }

.news-slider__wrp { display: flex; align-items: flex-start; position: relative; z-index: 2; }
.news-slider__item { width: 400px !important; flex-shrink: 0; }  /* laptop 1280-1440px */
@media screen and (min-width: 1920px) { .news-slider__item { width: 520px !important; } } /* full HD y 2K */
@media screen and (max-width: 1300px) { .news-slider__item { width: 350px !important; } } /* laptop pequeña */
@media screen and (max-width: 992px)  { .news-slider__item { width: 280px !important; } } /* tablet */
@media screen and (max-width: 576px)  { .news-slider__item { width: 220px !important; } } /* móvil */

.news-slider__item.swiper-slide { opacity: 0; pointer-events: none; transition: all .3s; }
.news-slider__item.swiper-slide-active,
.news-slider__item.swiper-slide-prev,
.news-slider__item.swiper-slide-next { opacity: 1; pointer-events: auto; }

.news-slider__ctr { position: relative; z-index: 12; }
.news-slider__arrow {
  background: #ffffff;
  border: none;
  display: inline-flex;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  z-index: 12;
  cursor: pointer;
  outline: none!important;
}
.icon-arrow-left { fill: black; width: 20px; height: 20px; }
.icon-arrow-right { fill: black; width: 20px; height: 20px; }
.news-slider-prev { left: 320px; transform: translateY(-50%); }
.news-slider-next { right: 320px; transform: translateY(-50%); }

.news-slider__pagination { text-align: center; margin-top: 20px; }
.news-slider__pagination .swiper-pagination-bullet {
  width: 15px;
  height: 10px;
  display: inline-block;
  background: #57595c;
  opacity: 1;
  margin: 0 5px;
  border-radius: 20px;
  transition: opacity .5s, background-color .5s, width .5s;
  transition-delay: .5s, .5s, 0s;
}
.news-slider__pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #ffffff;
  width: 50px;
  transition-delay: 0s;
}
@media screen and (max-width: 576px) {
  .news-slider__pagination .swiper-pagination-bullet-active { width: 70px; }
}

.news__item {
  height: 300px;
  padding: 10px 20px;
  color: #000000;
  border-radius: 10px;
  display: block;
  transition: all .3s;
  z-index: 1;
}
.news__item.active { z-index: 10; color: black; }
.news__title.active { color: black; }
.news__txt.active { color: black; }
.news__item.active .news__img { display: flex; box-shadow: none; }

@media screen and (max-width: 992px) { .news__item { padding: 30px; } }
@media screen and (max-width: 576px) { .news__item { padding: 20px; } }

.news__title {
  font-size: 16px;
  font-weight: 500;
  margin-top: 6px;
  margin-bottom: 8px;
  transition: opacity .3s;
  color: white;
}
@media screen and (max-width: 576px) {
  .news__title { font-size: 22px; margin-bottom: 10px; color: black; }
}

.news__txt {
  margin: 6px 0;
  line-height: 1.4em;
  font-size: 12px;
  transition: opacity .3s;
  color: white;
}

/* Hover global del slide */
.news-slider__item:hover .news__title,
.news-slider__item:hover .news__txt {
  color: #000 !important;
  opacity: 1;
}

@media (min-width: 800px) {
  .news__item:hover .news__img { box-shadow: none; }
}

.news__img {
  border-radius: 10px;
  box-shadow: 0 6px 26px 6px rgba(0,0,0,0.25);
  height: 185px;
  margin-top: 10px;
  width: 100%;
  transition: all .3s;
  transform-origin: 0% 0%;
}
@media screen and (max-width: 576px) {
  .news__img { height: 180px; margin-top: 20px; }
}
.news__img img {
  max-width: 100%;
  border-radius: 10px;
  height: 100%;
  width: 100%;
}

svg[hidden] { display: none; }

.titulo-carrusel {
  display: flex;
  justify-content: center;
  padding: 8px 0;
  font-size: 22px;
}

/* ===== La cinta de logotipos =====
   Estaba rota: cada tira era `inline-block` dentro de un contenedor de
   700px, y un inline-block no crece mas que el hueco que le dan, asi que
   la tira media 700 aunque sus diez logotipos sumaran el doble. Se salian
   de ella y las dos tiras —la original y su copia— se pisaban entre si.
   Con las dos en fila y cada una a su ancho natural, cada logotipo tiene
   su sitio. */
.carousel-container {
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
  position: relative;
  height: 65px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.carousel-slide {
  display: flex;
  align-items: center;
  gap: 52px;
  flex: 0 0 auto;      /* que no la encojan para que quepa */
  width: max-content;  /* lo que midan sus logotipos, no lo que haya */
  padding-right: 52px; /* el hueco entre la ultima y la primera de la copia */
  animation: 50s slide infinite linear;
}

/* `contain` y no `cover`: `cover` recorta para llenar la caja, y a Field,
   Arca y Mission les cortaba el nombre. Cada logotipo conserva su forma y
   se iguala por el alto, que es lo que hace que la fila se vea pareja. */
.carousel-slide img {
  height: 45px;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

.orica-logo { height: 50px; }
.cfe-logo { height: 38px; }
.field-logo { height: 50px; }
.karcher-logo { height: 50px; }
.coca-cola-logo { height: 50px; }
.infac-logo { height: 45px; }
.metelmex-logo { height: 45px; }
.sesa-logo { height: 45px; }
.mission-logo { height: 45px; }

/* ===== Colores del slider =====
   Todo esto decia blanco porque el fondo del sitio era gris oscuro. Con la
   pagina en blanco el titulo y el parrafo seguian ahi, pero no se veian:
   letra blanca sobre papel blanco. Se cambian aqui, en su sitio, y no con
   reglas nuevas al final, porque esta tanda gana por especificidad y
   aquello no se habria notado hasta verlo en pantalla. */
.news__title,
.news__txt { transition: color .25s ease; }

.news__title { color: var(--tinta); }
.news__txt   { color: var(--gris); }

.news-slider .news-slider__item.swiper-slide-active .news__title,
.news-slider .news-slider__item.swiper-slide-duplicate-active .news__title {
  color: var(--tinta);
}
.news-slider .news-slider__item.swiper-slide-active .news__txt,
.news-slider .news-slider__item.swiper-slide-duplicate-active .news__txt {
  color: var(--gris);
}

/* Al pasar el cursor, el titulo se tiñe de azul: es la pista de que la
   tarjeta se puede abrir. */
.news-slider__item:hover .news__title { color: var(--azul); opacity: 1; }
.news-slider__item:hover .news__txt   { color: var(--gris); opacity: 1; }

.news-slider .news__item.active .news__title { color: var(--tinta); }
.news-slider .news__item.active .news__txt   { color: var(--gris); }

/* Hero móvil — oculto en desktop */
.mobile-hero { display: none; }

/* ====== MÓVIL (max 768px) — lista vertical, sin carrusel ====== */
@media screen and (max-width: 768px) {

  /* Permitir scroll vertical en móvil */
  html { overflow: auto !important; }
  body { height: auto !important; overflow-x: hidden !important; overflow-y: auto !important; }


  /* Bienvenida móvil */
  .mobile-hero {
    display: block;
    text-align: center;
    padding: 20px 16px 10px;
  }
  .mobile-hero__title {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
    letter-spacing: 1px;
  }
  .mobile-hero__sub {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    margin: 0;
    letter-spacing: 0.5px;
  }

  /* Ocultar fondo animado y controles del carrusel */
  .item-bg { display: none !important; }
  .news-slider__ctr { display: none !important; }

  /* Slider como contenedor normal */
  .news-slider {
    width: 92% !important;
    max-width: 92% !important;
    margin: 10px auto 0;
  }

  /* Slides apiladas verticalmente */
  .news-slider__wrp {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
  }

  /* Todas las tarjetas visibles */
  .news-slider__item {
    width: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Estilo de cada tarjeta */
  .news__item {
    height: auto !important;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 16px 20px !important;
    display: block !important;
  }

  /* Texto oscuro sobre fondo blanco */
  .news__title,
  .news-slider .news-slider__item .news__title,
  .news-slider .news-slider__item.swiper-slide-active .news__title {
    color: #000000 !important;
    font-size: 18px !important;
    margin-bottom: 6px;
  }
  .news__txt,
  .news-slider .news-slider__item .news__txt,
  .news-slider .news-slider__item.swiper-slide-active .news__txt {
    color: #333333 !important;
    font-size: 14px !important;
  }

  /* Imagen de cada tarjeta */
  .news__img {
    height: 180px !important;
    margin-top: 10px;
  }
  .news__img img { object-fit: cover; }

  /* Sección clientes */
  .titulo-carrusel { font-size: 20px !important; margin-top: 24px !important; padding: 8px 0; }
  .carousel-container { height: 50px; }
  .carousel-slide img { height: 35px; }

}

/* ====== DESKTOP MEDIANO (1300px-1919px, pantalla alta) ====== */
@media screen and (min-width: 1300px) and (max-width: 1919px) and (min-height: 850px) {
  .main-header .logo img { max-height: 80px; }
  .main-header .nav-list > li > a { font-size: 20px; }
  .main-header .nav-list { gap: 30px; }
  .btn-ingresar { font-size: 20px; padding: 8px 16px; }
  .news-slider { max-width: 1600px; }
  .news-slider__item { width: 560px !important; }
  .news__item { height: 490px; padding: 14px 20px 6px; }
  .news__img { height: 360px; }
  .news__img img { object-fit: cover; }
  .news__title { font-size: 22px; }
  .news__txt { font-size: 16px; }
  .news-slider-prev { left: 430px; }
  .news-slider-next { right: 430px; }
  .titulo-carrusel { font-size: 26px; padding: 6px 0; margin-top: 55px; }
  .carousel-container { height: 95px; }
  .carousel-slide img { height: 60px; }
}

/* ====== DESKTOP FULL HD (1920px+) ====== */
@media screen and (min-width: 1920px) {
  .main-header { padding: 18px 60px; }
  .main-header .logo img { max-height: 72px; }
  .main-header .nav-list > li > a { font-size: 22px; }
  .main-header .nav-list { gap: 40px; }
  .btn-ingresar { font-size: 22px; padding: 10px 20px; }
  .news-slider { max-width: 1800px; margin-top: 42px; }
  .news-slider__item { width: 600px !important; }
  .news__item { height: 515px; padding: 16px 26px; }
  .news__img { height: 330px; }
  .news__title { font-size: 22px; margin-top: 10px; margin-bottom: 8px; }
  .news__txt { font-size: 15px; margin: 8px 0; line-height: 1.45em; }
  .news-slider__pagination { margin-top: 22px; }
  .titulo-carrusel { font-size: 30px; padding: 16px 0; }
  .news-slider-prev { left: 470px; }
  .news-slider-next { right: 470px; }
  .carousel-container { width: 1200px; height: 105px; }
  .carousel-slide img { height: 65px; }
  /* Sin ancho: el ancho fijo es lo que deformaba y recortaba. */
  .orica-logo { height: 78px; }
  .cfe-logo { height: 60px; }
  .field-logo { height: 78px; }
  .karcher-logo { height: 78px; }
  .coca-cola-logo { height: 78px; }
  .infac-logo { height: 68px; }
  .metelmex-logo { height: 68px; }
  .sesa-logo { height: 68px; }
  .mission-logo { height: 68px; }
}

/* ====== DESKTOP 2K (2560px+) ====== */
@media screen and (min-width: 2560px) {
  .main-header .logo img { max-height: 110px; }
  .main-header .nav-list > li > a { font-size: 26px; }
  .main-header .nav-list { gap: 50px; }
  .btn-ingresar { font-size: 26px; padding: 12px 24px; }
  .news-slider { max-width: 2200px; }
  .news-slider__item { width: 700px !important; }
  .news__item { height: 680px; }
  .news__img { height: 420px; }
  .news__title { font-size: 44px; }
  .news__txt { font-size: 30px; }
}

/* ======================================================================
   UNA SOLA PANTALLA

   La portada se ve completa de un vistazo, sin scroll, como la de
   siempre. Para eso cada pieza se mide en **alto de ventana** y no en
   pixeles: asi el reparto es el mismo en un monitor de escritorio que en
   una laptop, y nada se corta en una pantalla baja.

   El reparto, sumando algo menos de 100 para que siempre sobre un poco:

       cabecera   ~80px (fijo, es una barra)
       heroe       32vh
       carrusel    42vh   <- lo que viniste a enseñar, lo mas grande
       clientes    17vh   (titulo + logotipos)
       pie          6vh

   **Los cuatro valores no caben.** Es la cuenta, no una opinion: con
   ellos el heroe se queda a media frase, y un heroe cortado se ve peor
   que una banda de menos. Siguen estando en el telefono, que si se
   recorre. Si se quisieran en la computadora, la portada tendria que
   hacer scroll; es lo uno o lo otro.

   A partir de 901px de ancho. Mas abajo es un telefono: ahi apretar todo
   en una pantalla volveria el texto ilegible, y vale mas que se lea.
   ====================================================================== */
@media screen and (min-width:901px){

  /* `body.portada` y no `body` a secas: sin la clase, el recorte le caia
     tambien a Nosotros, Contacto y las tres de Servicios, que quedaban
     cortadas por abajo y sin forma de bajar. */
  body.portada{height:100vh;overflow:hidden;display:flex;flex-direction:column}

  .main-header{flex:0 0 auto;position:static}
  .wrapper,.pie,.titulo-carrusel,.carousel-container{flex:0 0 auto}

  .valores{display:none}

  /* ---- heroe: lo que sobre ----
     Las demas piezas piden su alto en vh y el heroe se queda con el
     resto, sea 200px en una laptop o 350 en un monitor. Asi la suma da
     exactamente la pantalla a cualquier altura: ni se desborda ni deja
     una franja blanca abajo. Es texto centrado, el unico que aguanta
     que su hueco cambie de tamaño sin romperse. */
  .heroe{flex:1 1 auto;min-height:0;display:flex;align-items:center;overflow:hidden}
  .heroe__caja{width:100%;padding:0 40px}
  /* Margenes apretados, no letra mas chica. Al crecer el texto de las
     tarjetas el heroe se quedo 15px corto y, con `overflow:hidden`, lo que
     sobraba eran los botones. Se recupera del aire entre sus piezas. */
  .heroe__ceja{margin-bottom:.5vh;font-size:clamp(.6rem,1.15vh,.76rem)}
  .heroe__titulo{margin-bottom:.9vh;font-size:clamp(1.35rem,3.1vh,2.9rem);line-height:1.12}
  .heroe__bajada{
    margin-bottom:1.3vh;font-size:clamp(.78rem,1.6vh,1.04rem);line-height:1.5;
    max-width:56ch;
  }
  .heroe__botones{gap:1vh 12px}
  .boton-heroe{padding:clamp(7px,1.3vh,14px) clamp(16px,2.2vw,28px);font-size:clamp(.8rem,1.5vh,.98rem)}

  /* ---- carrusel: la foto manda ----
     La imagen va a 16:9 y no a un alto fijo. Antes pedia 20vh y, con la
     tarjeta de 600px, salia una franja de 3.13:1: la fotografia se
     recortaba a una tira y no se entendia que mostraba. Ahora el alto lo
     decide el ancho de la tarjeta, asi que el 16:9 se cumple en cualquier
     pantalla sin tener que acertarle a un numero por cada resolucion.

     La tarjeta y la banda crecen con ella —de ahi los `auto`— y el heroe,
     que es `flex:1`, cede el espacio. La cuenta sigue dando la pantalla
     exacta; lo que cambia es el reparto. */
  .wrapper{height:auto;margin:0;display:flex;align-items:center}
  .news-slider{margin-top:0;width:100%}
  /* Relleno arriba y abajo. Sin el de abajo la fotografia terminaba justo
     en el filo: `.item-bg` —el panel blanco que hace de tarjeta— se mide
     contra este elemento, asi que la tarjeta acababa donde acababa la
     imagen y no se leia como tarjeta, sino como una foto suelta. */
  .news__item{height:auto;padding:1.5vh 20px 1.9vh}
  /* `min-height:0` y `overflow:hidden` no sobran: sin ellos la imagen de
     dentro empuja la caja unos pixeles y el 16:9 se queda en 1.73. */
  .news__img{height:auto;aspect-ratio:16/9;margin-top:0;
             display:block;min-height:0;overflow:hidden}
  .news__img img{height:100%;width:100%;object-fit:cover;display:block}
  /* Mas grandes: en una laptop quedaban en 15 y 12 pixeles, y el parrafo
     a 12px no se lee desde la silla de enfrente. */
  .news__title{font-size:clamp(1rem,2.15vh,1.4rem);margin:.9vh 0 .6vh}
  .news__txt{font-size:clamp(.84rem,1.7vh,1.1rem);line-height:1.45;margin:0}
  .news-slider__arrow{width:clamp(32px,4.6vh,50px);height:clamp(32px,4.6vh,50px)}
  .news-slider__ctr{margin-top:.4vh}

  /* ---- clientes y pie: lo justo ----
     Se les recorta un poco para que la foto pueda crecer. Son bandas de
     apoyo; la del carrusel es la que la gente mira. */
  /* Las bandas de abajo ceden lo que el texto y el relleno de la tarjeta
     necesitan. La pagina cabe en una pantalla y el alto no es elastico:
     algo tiene que encoger, y estas son de apoyo. */
  .titulo-carrusel{margin:0;padding:.35vh 0;font-size:clamp(.9rem,1.7vh,1.35rem)}
  .carousel-container{height:6.4vh}
  .carousel-slide img{height:4.4vh;width:auto}

  /* ---- pie: lo que quede ---- */
  .pie__caja{padding:.7vh 40px;font-size:clamp(.74rem,1.25vh,.86rem)}
}

/* En una pantalla baja la cuenta ya no da: el heroe se quedaria sin sitio
   y, con `overflow:hidden`, cortado a media frase. Ahi vale mas que la
   portada se recorra. */
@media screen and (min-width:901px) and (max-height:820px){
  body.portada{height:auto;overflow:auto}
  .heroe{min-height:30vh}
}

/* Las reglas de pantalla grande de mas arriba fijan alturas en pixeles
   —490px de tarjeta, 360 de foto— pensadas para una pagina que se
   recorria. Aqui se devuelven al reparto por alto de ventana. */
@media screen and (min-width:1920px){
  body.portada .news-slider{max-width:1800px}
  body.portada .news__item{height:auto;padding:0 22px}
  /* El 16:9 vale aquí también. Este bloque tiene más peso que el de 901px
     —lleva `body.portada` delante—, así que si se le deja el alto fijo
     gana él y la foto vuelve a ser una franja: a 1920×1080 salía 2.61:1. */
  body.portada .news__img{height:auto;aspect-ratio:16/9}
  body.portada .carousel-container{width:auto;height:9vh}
}