/* ===== Estilos comunes (reset, variables, escala) ===== */
:root{
  --amarillo:#ffc700;
  --amarillo-form:#ffc403;
  --negro:#000;
  --gris-pie:#1e1e1e;
  --placeholder:#9e9e9e;
  --blanco:#fff;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--blanco);color:var(--negro);font-family:"Poppins",system-ui,sans-serif;font-weight:400;line-height:1.5}
img,svg{display:block}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
.pagina{container-type:inline-size;width:100%;overflow-x:clip;--u:calc(100cqw / 1920)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Video del bloque "Tu próxima pipa": llena la caja y respeta [hidden] */
.video__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.video__video[hidden], .video__poster[hidden], .video__play[hidden] { display: none; }

/* ===== Visor de fotos (lightbox) ===== */
.foto { cursor: zoom-in; }
.foto:focus-visible { outline: 3px solid var(--amarillo); outline-offset: -3px; }

/* Hover/focus en miniaturas de la página (fuera del visor) */
.foto .foto__img { transition: transform 300ms cubic-bezier(.2,.8,.2,1); }
.foto:hover .foto__img, .foto:focus-visible .foto__img { transform: scale(1.05); }

.foto::after {
  content: '';
  position: absolute;
  right: 18px; bottom: 18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background-color: rgba(255,255,255,.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  z-index: 2;
}
.foto:hover::after, .foto:focus-visible::after { opacity: 1; }
@media (hover: none) {
  .foto::after { opacity: .85; }
  .foto:hover .foto__img, .foto:focus-visible .foto__img { transform: none; }
}
@media (max-width: 1599px) {
  .foto { position: relative; }
}

/* Contenedor del visor */
.visor { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 56px 64px 24px; }
.visor[hidden] { display: none; }

/* Fondo oscuro */
.visor__fondo { position: absolute; inset: 0; background: rgba(8,8,8,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 0; }
@supports not (backdrop-filter: blur(8px)) { .visor__fondo { background: rgba(8,8,8,.97); } }

/* Shimmer de carga */
.visor__shimmer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 1200px); height: calc(100vh - 220px); border-radius: 14px; background: rgba(255,255,255,.06); overflow: hidden; z-index: 1; opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
.visor__shimmer--visible { opacity: 1; }
.visor__shimmer::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); transform: translateX(-100%); animation: visor-shimmer 1.4s linear infinite; }
@keyframes visor-shimmer { to { transform: translateX(100%); } }

/* Imagen principal */
.visor__img { position: relative; z-index: 2; max-width: min(92vw, 1200px); max-height: calc(100vh - 220px); width: auto; height: auto; border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,.55); object-fit: contain; display: block; }

/* Pie de foto */
.visor__pie { position: relative; z-index: 3; color: #fff; font: 400 1rem/1.4 "Poppins", sans-serif; text-align: center; margin: 0; }
.visor__pie-texto { display: block; max-width: 70ch; margin: 0 auto; }
.visor__contador { display: inline-block; background: var(--amarillo); color: var(--negro); font-size: .8rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; margin-top: 6px; }

/* Botones */
.visor__cerrar, .visor__ant, .visor__sig {
  position: absolute; z-index: 5;
  width: 48px; height: 48px; min-width: 44px; min-height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease, opacity 150ms ease;
}
.visor__cerrar svg, .visor__ant svg, .visor__sig svg {
  width: 20px; height: 20px;
  stroke: #fff; stroke-width: 2.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.visor__cerrar:hover, .visor__ant:hover, .visor__sig:hover { background: var(--amarillo); }
.visor__cerrar:hover svg, .visor__ant:hover svg, .visor__sig:hover svg { stroke: #000; }
.visor__cerrar:hover, .visor__ant:hover, .visor__sig:hover { transform: scale(1.06); }
/* mantener centrado vertical en ant/sig con hover */
.visor__ant, .visor__sig { top: 50%; transform: translateY(-50%); }
.visor__ant:hover, .visor__sig:hover { transform: translateY(-50%) scale(1.06); }
.visor__ant:active, .visor__sig:active { transform: translateY(-50%) scale(.96); }
.visor__cerrar:active { transform: scale(.96); }
.visor__cerrar:focus-visible, .visor__ant:focus-visible, .visor__sig:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.visor__cerrar { top: 16px; right: 16px; }
.visor__ant { left: 16px; }
.visor__sig { right: 16px; }

/* Tira de miniaturas */
.visor__tira {
  position: relative; z-index: 3;
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  max-width: min(92vw, 1200px);
}
.visor__miniatura {
  width: 64px; height: 48px; padding: 0; border: 2px solid transparent;
  border-radius: 8px; overflow: hidden;
  background: #000; cursor: pointer;
  opacity: .55;
  transition: opacity 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.visor__miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visor__miniatura--activa { opacity: 1; border-color: var(--amarillo); }
.visor__miniatura:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 640px) {
  .visor { padding: 48px 12px 16px; }
  .visor__img { max-height: calc(100vh - 200px); }
  .visor__shimmer { height: calc(100vh - 200px); }
  .visor__ant, .visor__sig { width: 44px; height: 44px; }
  .visor__ant { left: 8px; }
  .visor__sig { right: 8px; }
  .visor__miniatura { width: 52px; height: 40px; }
  .visor__tira { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .visor__tira::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .visor__shimmer { display: none; }
  .visor__shimmer::before { animation: none; }
  .visor__img, .visor__fondo { transition: opacity 100ms !important; }
  .visor__cerrar, .visor__ant, .visor__sig, .visor__miniatura { transition: opacity 100ms !important; }
}

/* ===== Aviso de error del video ===== */
.video__aviso { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; background: rgba(0,0,0,.6); color: #fff; text-align: center; padding: 1rem; z-index: 2; }
.video__aviso a { color: var(--amarillo); text-decoration: underline; }
/* =====================================================
   ESTILOS MÓVIL / TABLET — Water Truck Store
   @media (max-width: 1599px)
   Referencia: ESPECIFICACION.md §4 y §5
   ===================================================== */

@media (max-width: 1599px) {

  /* ── Utilidad: visually-hidden accesible ── */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ─────────────────────────────────────────────────
     CABECERA
  ───────────────────────────────────────────────── */
  .cab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--amarillo);
    flex-wrap: nowrap;
  }

  /* Logo a la izquierda, crece para empujar el resto */
  .cab__logo-enlace {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
  }

  .cab__logo {
    width: clamp(90px, 30vw, 140px);
    height: auto;
  }

  /* Ocultar enlace de dirección completo */
  .cab__dir-enlace {
    display: none;
  }

  /* Botones-ícono WhatsApp y teléfono: 44×44, solo icono */
  .cab__wa-enlace,
  .cab__tel-enlace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 8px;
    transition: opacity 150ms ease;
  }

  .cab__wa-enlace:hover,
  .cab__tel-enlace:hover {
    opacity: 0.85;
  }

  .cab__wa-enlace:focus-visible,
  .cab__tel-enlace:focus-visible {
    outline: 3px solid var(--negro);
    outline-offset: 3px;
  }

  /* Ocultar textos con técnica accesible (conserva nombre accesible) */
  .cab__dir,
  .cab__wa,
  .cab__tel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Iconos dentro de los botones */
  .cab__icono {
    display: block;
    width: 28px;
    height: auto;
  }

  /* Botón CTA "Cotizar ahora" */
  .cab__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 1rem;
    background: var(--negro);
    color: var(--amarillo);
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(0.8rem, 2.5vw, 1rem);
    font-weight: 700;
    border-radius: 9px;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: opacity 150ms ease;
  }

  .cab__cta:hover {
    opacity: 0.9;
  }

  .cab__cta:focus-visible {
    outline: 3px solid var(--amarillo);
    outline-offset: 3px;
  }

  /* ─────────────────────────────────────────────────
     HERO
  ───────────────────────────────────────────────── */
  .hero {
    position: relative;
    min-height: 28rem;
    display: flex;
    align-items: center;
    padding: 2.5rem 1.25rem;
    overflow: hidden;
  }

  /* Foto de fondo: ocupa toda la ventana */
  .hero__foto-ventana {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
  }

  .hero__foto-ventana .hero__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
  }

  /* Degradado negro→transparente: cubre todo el hero */
  .hero__degradado-ventana {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
  }

  .hero__degradado {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  /* Contenido del hero por encima del degradado */
  .hero__titulo,
  .hero__sub,
  .hero__btn {
    position: relative;
    z-index: 2;
  }

  /* Wrapper flex-column para el contenido */
  .hero {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Título hero */
  .hero__titulo {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(2.25rem, 9vw, 3.5rem);
    line-height: 0.95;
    color: #fff;
    text-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    margin-bottom: 0.75rem;
  }

  .hero__linea {
    display: block;
  }

  .hero__linea--1 { font-weight: 500; }
  .hero__linea--2 { font-weight: 500; }
  .hero__linea--2 strong { font-weight: 800; }
  .hero__linea--3 strong { font-weight: 800; }

  /* Subtítulo hero */
  .hero__sub {
    font-size: 1.125rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 1.25rem;
  }

  /* Botón hero */
  .hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1.75rem;
    background: var(--amarillo);
    color: var(--negro);
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    border-radius: 26px;
    transition: opacity 150ms ease;
  }

  .hero__btn:hover { opacity: 0.9; }

  .hero__btn:focus-visible {
    outline: 3px solid var(--negro);
    outline-offset: 3px;
  }

  /* ─────────────────────────────────────────────────
     EQUIPOS — sección
  ───────────────────────────────────────────────── */
  .equipos {
    background: #fff;
    padding: 2.5rem 1.25rem;
  }

  /* Título y subtítulo centrados */
  .equipos__titulo {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    font-weight: 800;
    color: var(--amarillo);
    text-align: center;
    margin-bottom: 0.5rem;
  }

  .equipos__sub {
    font-size: 1rem;
    font-weight: 400;
    color: var(--negro);
    text-align: center;
    margin-bottom: 2rem;
  }

  /* ─────────────────────────────────────────────────
     CAMIÓN — tarjeta
  ───────────────────────────────────────────────── */
  .camion {
    border: 1px solid var(--negro);
    border-radius: 24px;
    padding: 16px;
    background: transparent;
  }

  /* Separación entre tarjetas */
  .camion--1 { margin-bottom: 24px; }

  /* Galería: grid de 3 columnas */
  .camion__galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 1rem;
  }

  /* Foto principal: ocupa las 3 columnas */
  .foto--principal {
    grid-column: 1 / -1;
    aspect-ratio: 740 / 320;
    overflow: hidden;
  }

  /* Miniaturas: cuadradas */
  .foto--a,
  .foto--b,
  .foto--c {
    aspect-ratio: 1;
    overflow: hidden;
  }

  /* Imagen dentro de cualquier ventana de foto */
  .foto .foto__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Etiqueta píldora amarilla */
  .camion__etiqueta {
    display: inline-block;
    background: var(--amarillo);
    color: var(--negro);
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    border-radius: 12px;
    padding: 4px 16px;
    margin-bottom: 0.5rem;
  }

  /* Título de tarjeta camión */
  .camion__titulo {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--negro);
    margin-bottom: 0.75rem;
  }

  /* Lista con viñeta amarilla via ::before */
  .camion__lista {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .camion__item {
    position: relative;
    padding-left: 1.375rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--negro);
    line-height: 1.5;
  }

  .camion__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--amarillo);
    flex-shrink: 0;
  }

  /* Barra de precio */
  .camion__precio {
    width: 100%;
    background: var(--amarillo);
    color: var(--negro);
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    border-radius: 10px;
    padding: 14px 1rem;
  }

  /* ─────────────────────────────────────────────────
     TANQUES — sección
  ───────────────────────────────────────────────── */
  .tanques {
    background: #fff;
    padding: 2.5rem 1.25rem;
  }

  .tanques__titulo {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    font-weight: 800;
    color: var(--amarillo);
    text-align: center;
    margin-bottom: 0.5rem;
  }

  .tanques__sub {
    font-size: 1rem;
    font-weight: 400;
    color: var(--negro);
    text-align: center;
    margin-bottom: 2rem;
  }

  /* ─────────────────────────────────────────────────
     TANQUE — tarjeta amarilla
  ───────────────────────────────────────────────── */
  .tanque {
    background: var(--amarillo);
    border-radius: 32px;
    padding: 24px;
    overflow: visible;
  }

  /* Separación entre tarjetas */
  .tanque--a { margin-bottom: 24px; }

  /* Imagen del tanque: ancho completo */
  .tanque__img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 1rem;
  }

  .tanque__nombre {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--negro);
    margin-bottom: 0.125rem;
  }

  .tanque__galones {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--negro);
    margin-bottom: 0.5rem;
  }

  .tanque__nota {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--negro);
    margin-bottom: 0.25rem;
  }

  .tanque__instalacion {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--negro);
    margin-bottom: 1rem;
  }

  /* Píldora blanca de precio */
  .tanque__precio {
    width: 100%;
    background: var(--blanco);
    color: var(--negro);
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    border-radius: 999px;
    padding: 1rem 1.25rem;
    box-shadow: 6px 8px 22px rgba(0, 0, 0, 0.4);
  }

  /* ─────────────────────────────────────────────────
     NOSOTROS — sección
  ───────────────────────────────────────────────── */
  .nosotros {
    background: #fff;
    padding: 2.5rem 1.25rem;
  }

  .nosotros__titulo {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    font-weight: 800;
    color: var(--amarillo);
    text-align: center;
    margin-bottom: 1.5rem;
  }

  /* Caja de video: relación 16/9, radio 24 */
  .video__caja {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    width: 100%;
  }

  /* Ventana de foto del video */
  .video__foto-ventana {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .video__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Botón de play: círculo amarillo centrado, 72px */
  .video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #ffc400;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: opacity 150ms ease;
  }

  .video__play:hover { opacity: 0.9; }

  .video__play:focus-visible {
    outline: 3px solid var(--negro);
    outline-offset: 3px;
  }

  /* Triángulo SVG proporcional a 72px (original: 39.8×53.5 a 99.6px) */
  .video__triangulo {
    width: 28px;
    height: 38px;
    margin-left: 4px; /* desplazamiento visual a la derecha */
    display: block;
  }

  /* Subtítulo h3 */
  .nosotros__subtitulo {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--negro);
    margin-bottom: 0.75rem;
  }

  /* Párrafo */
  .nosotros__parrafo {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--negro);
    line-height: 1.65;
  }

  /* ─────────────────────────────────────────────────
     CONTACTO — sección
  ───────────────────────────────────────────────── */
  .contacto {
    background: var(--amarillo-form);
    padding-bottom: 2.5rem;
  }

  /* Franja de foto arriba: sin diagonal en móvil */
  .contacto__foto-ventana {
    width: 100%;
    height: 14rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
  }

  .contacto__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Título de contacto */
  .contacto__titulo {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--negro);
    text-align: center;
    padding: 0 1.25rem 1.25rem;
    line-height: 1.2;
  }

  .contacto__titulo strong {
    font-weight: 700;
  }

  /* Formulario: una columna, gap 12px */
  .contacto__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 1.25rem;
  }

  /* Celular y Empresa en 2 columnas desde 520px */
  @media (min-width: 520px) {
    .campo--celular { grid-column: 1; }
    .campo--empresa { grid-column: 2; }
    .contacto__form {
      grid-template-columns: 1fr 1fr;
    }
    /* Los campos que ocupan toda la fila */
    .campo--nombre,
    .campo--email,
    .contacto__select-envolvente,
    .campo--mensaje {
      grid-column: 1 / -1;
    }
  }

  /* Estilos comunes de campos */
  .contacto__campo {
    width: 100%;
    min-height: 56px;
    background: var(--blanco);
    border: none;
    border-radius: 12px;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1rem;       /* mínimo 16px para evitar zoom en iOS */
    font-weight: 400;
    color: var(--negro);
    padding: 0 1rem;
    display: block;
  }

  .contacto__campo::placeholder {
    color: var(--placeholder);
  }

  .contacto__campo:focus-visible {
    outline: 3px solid var(--negro);
    outline-offset: 3px;
  }

  /* Textarea */
  .campo--mensaje {
    min-height: 9rem;
    padding-top: 0.75rem;
    resize: vertical;
  }

  /* Envolvente del select: posición relativa para el chevron */
  .contacto__select-envolvente {
    position: relative;
    display: block;
  }

  /* Select sin apariencia nativa */
  .campo--interes {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding-right: 3rem; /* espacio para el chevron */
    cursor: pointer;
  }

  /* Chevron posicionado a la derecha del select */
  .contacto__chevron {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: block;
    width: 1.25rem;
    height: auto;
  }

  /* ─────────────────────────────────────────────────
     PIE DE PÁGINA
  ───────────────────────────────────────────────── */
  .pie {
    background: var(--gris-pie);
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }

  .pie__logo-enlace {
    display: inline-block;
  }

  .pie__logo {
    width: clamp(120px, 40vw, 235px);
    height: auto;
  }

  .pie__texto {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--blanco);
  }

  .pie__dir {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--blanco);
    line-height: 1.5;
  }

  /* Ventana del mapa */
  .pie__mapa-ventana {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: 320px;
    border-radius: 25px;
    overflow: hidden;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .pie__mapa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  /* ─────────────────────────────────────────────────
     ESTADOS HOVER / FOCUS GLOBALES
  ───────────────────────────────────────────────── */
  .cab__logo-enlace:focus-visible,
  .pie__logo-enlace:focus-visible {
    outline: 3px solid var(--negro);
    outline-offset: 3px;
  }

} /* fin @media (max-width: 1599px) */
/* =====================================================
   ESTILOS LAPTOP — Water Truck Store
   Rango: @media (min-width: 1025px) and (max-width: 1599px)
   Sobrescribe lo necesario de estilos-movil.css en este rango.
   ===================================================== */

@media (min-width: 1025px) and (max-width: 1599px) {

  /* ─────────────────────────────────────────────────
     BASE / ESCALA TIPOGRÁFICA
  ───────────────────────────────────────────────── */
  body {
    font-size: clamp(1.0625rem, 0.9rem + 0.4vw, 1.25rem);
    line-height: 1.6;
  }

  /* Títulos de sección */
  .equipos__titulo,
  .tanques__titulo,
  .nosotros__titulo {
    font-size: clamp(2.5rem, 1.6rem + 2.2vw, 3.5rem);
    font-weight: 800;
    color: var(--amarillo);
  }

  /* Subtítulos de sección */
  .equipos__sub,
  .tanques__sub {
    font-size: clamp(1.25rem, 1rem + 0.7vw, 1.625rem);
  }

  /* Padding vertical generoso en secciones */
  .equipos,
  .tanques,
  .nosotros {
    padding-block: clamp(72px, 7vw, 112px);
  }

  /* ─────────────────────────────────────────────────
     CABECERA
  ───────────────────────────────────────────────── */
  .cab {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(16px, 1.5vw, 24px);
    min-height: 88px;
    padding-block: 16px;
    padding-inline: max(32px, calc((100% - 1240px) / 2));
    background: var(--amarillo);
  }

  /* Logo a la izquierda; el resto se empuja a la derecha */
  .cab__logo-enlace {
    flex: 0 0 auto;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
  }

  .cab__logo {
    width: auto;
    height: 52px;
  }

  /* Reset de lo heredado de móvil en los enlaces de datos y CTA */
  .cab__dir-enlace,
  .cab__wa-enlace,
  .cab__tel-enlace,
  .cab__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    position: static;
    left: auto;
    top: auto;
  }

  .cab__dir-enlace {
    min-width: 0;
  }

  /* Mostrar los textos (en móvil estaban ocultos) */
  .cab__dir,
  .cab__wa,
  .cab__tel {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    border: 0;
    font-size: 1rem;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 400;
    color: var(--negro);
  }

  /* Iconos */
  .cab__icono {
    width: 22px;
    height: auto;
    flex: 0 0 auto;
  }

  /* CTA negro */
  .cab__cta {
    min-height: 52px;
    padding: 14px 26px;
    background: var(--negro);
    color: var(--amarillo);
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    white-space: nowrap;
  }

  /* Ajuste fino a partir de 1100 px: tipografía y gap menores */
  @media (max-width: 1100px) {
    .cab {
      gap: clamp(8px, 1.2vw, 12px);
    }
    .cab__dir,
    .cab__wa,
    .cab__tel {
      font-size: 0.9rem;
    }
    .cab__dir-enlace,
    .cab__wa-enlace,
    .cab__tel-enlace {
      gap: 6px;
    }
  }

  /* Si aun así no cabe, oculta el texto de la dirección y permite dos filas ordenadas */
  @media (max-width: 1100px) {
    .cab__dir {
      display: none;
    }
  }

  @media (max-width: 1100px) {
    .cab {
      flex-wrap: wrap;
    }
    .cab__logo-enlace { order: 1; }
    .cab__dir-enlace { order: 2; }
    .cab__wa-enlace { order: 3; }
    .cab__tel-enlace { order: 4; }
    .cab__cta { order: 5; }
  }

  .cab__cta:hover {
    opacity: 0.9;
  }

  .cab__cta:focus-visible {
    outline: 3px solid var(--amarillo);
    outline-offset: 3px;
  }

  /* ─────────────────────────────────────────────────
     HERO
  ───────────────────────────────────────────────── */
  .hero {
    position: relative;
    height: clamp(560px, 78vh, 760px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.75rem;
    padding-inline: max(32px, calc((100% - 1240px) / 2));
    padding-block: 0;
    overflow: hidden;
    background: #000;
  }

  .hero__foto-ventana {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
  }

  .hero__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
    display: block;
  }

  .hero__degradado-ventana {
    position: absolute;
    left: 0;
    top: 0;
    width: 60%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
  }

  .hero__degradado {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
  }

  .hero__titulo,
  .hero__sub,
  .hero__btn {
    position: relative;
    z-index: 2;
    max-width: 100%;
  }

  .hero__titulo {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(3.25rem, 2rem + 4vw, 5.75rem);
    line-height: 1.02;
    color: #fff;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    margin: 0;
  }

  .hero__linea {
    display: block;
  }

  .hero__linea--1 { font-weight: 500; }
  .hero__linea--2 { font-weight: 500; }
  .hero__linea--2 strong { font-weight: 800; }
  .hero__linea--3 strong { font-weight: 800; }

  .hero__sub {
    font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem);
    font-weight: 400;
    color: #fff;
    margin: 0;
  }

  .hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 40px;
    background: var(--amarillo);
    color: var(--negro);
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    border-radius: 12px;
    margin-top: 0.5rem;
  }

  .hero__btn:hover { opacity: 0.9; }

  .hero__btn:focus-visible {
    outline: 3px solid var(--negro);
    outline-offset: 3px;
  }

  /* ─────────────────────────────────────────────────
     EQUIPOS
  ───────────────────────────────────────────────── */
  .equipos {
    background: #fff;
    padding-inline: max(32px, calc((100% - 1240px) / 2));
  }

  .equipos__titulo {
    text-align: center;
    margin-bottom: 0.75rem;
  }

  .equipos__sub {
    text-align: center;
    margin-bottom: clamp(40px, 4vw, 64px);
  }

  .camion {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto auto 1fr auto;
    column-gap: clamp(32px, 4vw, 64px);
    row-gap: 14px;
    padding: clamp(28px, 3vw, 44px);
    border: 1px solid var(--negro);
    border-radius: 40px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }

  .camion:not(:last-of-type) {
    margin-bottom: clamp(48px, 5vw, 64px);
  }

  .camion__galeria {
    grid-column: 1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-content: start;
  }

  /* Fotos con esquinas redondeadas (mejora sobre el PDF) */
  .foto {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
  }

  .foto--principal {
    grid-column: 1 / -1;
    aspect-ratio: 740 / 320;
  }

  .foto--a,
  .foto--b,
  .foto--c {
    aspect-ratio: 1 / 1;
  }

  .foto .foto__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Etiqueta píldora amarilla */
  .camion__etiqueta {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    background: var(--amarillo);
    color: var(--negro);
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    border-radius: 12px;
    padding: 6px 18px;
  }

  /* Título de tarjeta */
  .camion__titulo {
    grid-column: 2;
    grid-row: 2;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(2.25rem, 1.9rem + 0.8vw, 2.75rem);
    font-weight: 700;
    color: var(--negro);
    line-height: 1.1;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Lista con viñeta amarilla de 12 px */
  .camion__lista {
    grid-column: 2;
    grid-row: 3;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .camion__item {
    position: relative;
    padding-left: 24px;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--negro);
    line-height: 1.5;
  }

  .camion__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--amarillo);
  }

  /* Barra de precio */
  .camion__precio {
    grid-column: 2;
    grid-row: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    width: 100%;
    background: var(--amarillo);
    color: var(--negro);
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    border-radius: 12px;
    white-space: nowrap;
  }

  /* ─────────────────────────────────────────────────
     TANQUES
  ───────────────────────────────────────────────── */
  .tanques {
    background: #fff;
    padding-inline: max(32px, calc((100% - 1240px) / 2));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 560px));
    column-gap: clamp(40px, 5vw, 64px);
    row-gap: 12px;
    justify-content: center;
    align-items: stretch;
  }

  .tanques__titulo {
    grid-column: 1 / -1;
    text-align: center;
    margin: 0 0 4px;
  }

  .tanques__sub {
    grid-column: 1 / -1;
    text-align: center;
    margin: 0 0 clamp(32px, 4vw, 36px);
  }

  /* Tarjeta amarilla, misma altura en ambas */
  .tanque {
    background: var(--amarillo);
    border-radius: 48px;
    padding: clamp(24px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    overflow: visible;
  }

  .tanque--a { margin-bottom: 0; }

  /* Zona de imagen con altura fija común a ambas tarjetas */
  .tanque__img {
    width: 100%;
    height: clamp(220px, 22vw, 300px);
    align-self: center;
    object-fit: contain;
    object-position: center;
    border-radius: 12px;
    margin: 0 0 1rem;
    display: block;
  }

  .tanque__nombre {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--negro);
    margin: 0;
    line-height: 1.2;
  }

  .tanque__galones {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--negro);
    margin: 0 0 0.5rem;
    line-height: 1.1;
  }

  .tanque__nota,
  .tanque__instalacion {
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--negro);
    margin: 0;
    line-height: 1.4;
  }

  /* Píldora blanca de precio alineada al fondo */
  .tanque__precio {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    width: 100%;
    background: var(--blanco);
    color: var(--negro);
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    border-radius: 999px;
    padding: 1rem 1.25rem;
    box-shadow: 6px 8px 22px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
  }

  /* ─────────────────────────────────────────────────
     NOSOTROS
  ───────────────────────────────────────────────── */
  .nosotros {
    background: #fff;
    padding-inline: max(32px, calc((100% - 1240px) / 2));
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: clamp(56px, 6vw, 72px);
    row-gap: clamp(16px, 1.5vw, 20px);
    align-content: center;
    align-items: stretch;
  }

  .nosotros__titulo {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: clamp(24px, 3vw, 32px);
  }

  /* Caja de video: ocupa las dos filas de la columna izquierda */
  .video__caja {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    width: 100%;
    margin: 0;
    align-self: center;
  }

  .video__foto-ventana {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .video__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: #ffc400;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
  }

  .video__play:hover { opacity: 0.9; }

  .video__play:focus-visible {
    outline: 3px solid var(--negro);
    outline-offset: 3px;
  }

  .video__triangulo {
    width: 40px;
    height: 54px;
    margin-left: 4px;
    display: block;
  }

  .nosotros__subtitulo {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
    font-weight: 700;
    color: var(--negro);
    margin: 0;
    line-height: 1.2;
  }

  .nosotros__parrafo {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #1e1e1e;
    line-height: 1.7;
    max-width: 52ch;
    margin: 0;
  }

  /* ─────────────────────────────────────────────────
     CONTACTO
  ───────────────────────────────────────────────── */
  .contacto {
    position: relative;
    min-height: 720px;
    background: var(--amarillo-form);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: max(32px, calc((100% - 1240px) / 2));
    padding-block: clamp(64px, 6vw, 96px);
  }

  /* Foto con diagonal, borde a borde izquierdo, alto completo */
  .contacto__foto-ventana {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: auto;
    width: 46%;
    clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
    overflow: hidden;
    z-index: 0;
  }

  .contacto__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Título en dos líneas exactas, columna derecha */
  .contacto__titulo {
    position: relative;
    z-index: 1;
    max-width: none;
    margin: 0 0 1.25rem 52%;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(2rem, 1.2rem + 2vw, 3.25rem);
    font-weight: 400;
    color: var(--negro);
    text-align: left;
    line-height: 1.15;
    white-space: nowrap;
  }

  .contacto__titulo strong {
    font-weight: 700;
  }

  /* Formulario en columna derecha, a la derecha de la diagonal */
  .contacto__form {
    position: relative;
    z-index: 1;
    max-width: none;
    margin-left: 52%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 0;
  }

  .campo--nombre,
  .campo--email,
  .contacto__select-envolvente,
  .campo--mensaje {
    grid-column: 1 / -1;
  }

  .campo--celular { grid-column: 1; }
  .campo--empresa { grid-column: 2; }

  /* Campos */
  .contacto__campo {
    width: 100%;
    min-height: 60px;
    background: var(--blanco);
    border: none;
    border-radius: 12px;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--negro);
    padding: 0 24px;
    line-height: 1.4;
    display: block;
  }

  .contacto__campo::placeholder {
    color: var(--placeholder);
  }

  .contacto__campo:focus-visible {
    outline: 3px solid var(--negro);
    outline-offset: 2px;
  }

  /* Select con chevron */
  .contacto__select-envolvente {
    position: relative;
    display: block;
  }

  .campo--interes {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding-right: 48px;
    cursor: pointer;
  }

  .contacto__chevron {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: block;
    width: 1.25rem;
    height: auto;
  }

  /* Textarea */
  .campo--mensaje {
    min-height: 150px;
    padding-top: 18px;
    resize: vertical;
    line-height: 1.5;
  }

  /* ─────────────────────────────────────────────────
     PIE DE PÁGINA
  ───────────────────────────────────────────────── */
  .pie {
    background: var(--gris-pie);
    padding-block: clamp(48px, 5vw, 72px);
    padding-inline: max(32px, calc((100% - 1240px) / 2));
    display: grid;
    grid-template-columns: auto 1fr 1.2fr;
    gap: 48px;
    align-items: center;
  }

  .pie__logo-enlace {
    grid-column: 1;
    grid-row: 1;
    display: inline-block;
  }

  .pie__logo {
    width: 200px;
    height: auto;
  }

  .pie__dir {
    grid-column: 2;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(1.0625rem, 1vw, 1.125rem);
    font-weight: 400;
    color: var(--blanco);
    line-height: 1.5;
    margin: 0;
    text-align: left;
  }

  .pie__mapa-ventana {
    grid-column: 3;
    position: relative;
    width: 100%;
    min-height: 300px;
    height: 300px;
    background: #2a2a2a;
    border-radius: 25px;
    overflow: hidden;
    display: block;
  }

  .pie__mapa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

} /* fin @media (min-width: 1025px) and (max-width: 1599px) */
/* =========================================================
   ESCRITORIO — Parte 1: cabecera, hero, equipos
   Envuelve todo en @media (min-width: 1600px)
   Todas las medidas: calc(N * var(--u))  salvo 0, 100%, auto
   ========================================================= */

@media (min-width: 1600px) {

  /* -------------------------------------------------------
     §2.1  CABECERA  .cab
     position:relative; height 98; fondo #ffc700
  ------------------------------------------------------- */
  .cab {
    position: relative;
    height: calc(98 * var(--u));
    background: var(--amarillo);
  }

  /* Enlace-logo: sin caja propia */
  .cab__logo-enlace {
    display: contents;
  }

  /* Logo: absoluto, left 140, top 8, w 195, h 82 */
  .cab__logo {
    position: absolute;
    left: calc(140 * var(--u));
    top: calc(8 * var(--u));
    width: calc(195 * var(--u));
    height: calc(82 * var(--u));
  }

  /* Enlace dirección: sin caja propia */
  .cab__dir-enlace {
    display: contents;
  }

  /* Ícono pin: left 650, top 25, w 33, h 41 */
  .cab__icono--pin {
    position: absolute;
    left: calc(650 * var(--u));
    top: calc(25 * var(--u));
    width: calc(33 * var(--u));
    height: calc(41 * var(--u));
  }

  /* Texto dirección: left 693.1, top 33.1 */
  .cab__dir {
    position: absolute;
    left: calc(693.1 * var(--u));
    top: calc(33.1 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(21.1 * var(--u));
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
  }

  /* Enlace WhatsApp: sin caja propia */
  .cab__wa-enlace {
    display: contents;
  }

  /* Ícono WhatsApp: left 1000, top 33, w 33, h 32 */
  .cab__icono--whatsapp {
    position: absolute;
    left: calc(1000 * var(--u));
    top: calc(33 * var(--u));
    width: calc(33 * var(--u));
    height: calc(32 * var(--u));
  }

  /* Texto WhatsApp: left 1037.1, top 33.1 */
  .cab__wa {
    position: absolute;
    left: calc(1037.1 * var(--u));
    top: calc(33.1 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(21.1 * var(--u));
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
  }

  /* Enlace teléfono: sin caja propia */
  .cab__tel-enlace {
    display: contents;
  }

  /* Ícono teléfono: left 1324, top 32, w 35, h 34 */
  .cab__icono--telefono {
    position: absolute;
    left: calc(1324 * var(--u));
    top: calc(32 * var(--u));
    width: calc(35 * var(--u));
    height: calc(34 * var(--u));
  }

  /* Texto teléfono: left 1354.6, top 33.5 */
  .cab__tel {
    position: absolute;
    left: calc(1354.6 * var(--u));
    top: calc(33.5 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(21.1 * var(--u));
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
  }

  /* Botón "Cotizar ahora": caja left 1556.5, top 22.7, w 170.9, h 46.3 */
  /* padding-top = texto-top(29.6) − caja-top(22.7) = 6.9 */
  .cab__cta {
    position: absolute;
    left: calc(1556.5 * var(--u));
    top: calc(22.7 * var(--u));
    width: calc(170.9 * var(--u));
    height: calc(46.3 * var(--u));
    border-radius: calc(9.2 * var(--u));
    background: #000000;
    box-sizing: border-box;
    padding-top: calc(6.9 * var(--u));
    text-align: center;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(21.6 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    color: #ffc700;
    white-space: nowrap;
    cursor: pointer;
  }
  .cab__cta:hover { opacity: .9; transition: opacity 150ms; }
  .cab__cta:focus-visible { outline: 3px solid #ffc700; outline-offset: 3px; }

  /* Estados hover en enlaces de la cabecera */
  .cab__dir-enlace:hover,
  .cab__wa-enlace:hover,
  .cab__tel-enlace:hover { opacity: .9; transition: opacity 150ms; }
  .cab__dir-enlace:focus-visible,
  .cab__wa-enlace:focus-visible,
  .cab__tel-enlace:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
  .cab__logo-enlace:hover { opacity: .9; transition: opacity 150ms; }
  .cab__logo-enlace:focus-visible { outline: 3px solid #000; outline-offset: 3px; }


  /* -------------------------------------------------------
     §2.2  HERO  .hero
     position:relative; height 827; overflow:hidden; fondo #000
  ------------------------------------------------------- */
  .hero {
    position: relative;
    height: calc(827 * var(--u));
    overflow: hidden;
    background: #000;
  }

  /* Ventana de la foto hero: cubre toda la sección */
  .hero__foto-ventana {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* foto ya recortada: llena la ventana */
  .hero__foto {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: cover;
    object-position: center;
  }

  /* Ventana degradado: left 0, top 0, w 1158, h 827 */
  .hero__degradado-ventana {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(1158 * var(--u));
    height: calc(827 * var(--u));
    overflow: hidden;
  }

  /* Imagen degradado: left -449, top -129, w 1607, h 956 (relativa a ventana) */
  .hero__degradado {
    position: absolute;
    left: calc(-449 * var(--u));
    top: calc(-129 * var(--u));
    width: calc(1607 * var(--u));
    height: calc(956 * var(--u));
    max-width: none;
    display: block;
  }

  /* Título h1: 3 líneas, line-height 80, top 1ª línea = 84.6, left 134 */
  .hero__titulo {
    position: absolute;
    left: calc(134 * var(--u));
    top: calc(84.6 * var(--u));
    margin: 0;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(84.7 * var(--u));
    line-height: calc(80 * var(--u));
    color: #ffffff;
    white-space: nowrap;
    text-shadow: 0 6px 16px rgba(0, 0, 0, .45);
  }

  /* Líneas del título como bloques */
  .hero__linea {
    display: block;
  }

  /* Línea 1: peso 500 */
  .hero__linea--1 {
    font-weight: 500;
  }

  /* Línea 2: "tu " peso 500, "proyecto" peso 800 */
  .hero__linea--2 {
    font-weight: 800;
  }
  .hero__ligero {
    font-weight: 500;
  }

  /* Línea 3: "merece" peso 800 */
  .hero__linea--3 {
    font-weight: 800;
  }

  /* Subtítulo: left 133.8, top 337.2 */
  .hero__sub {
    position: absolute;
    left: calc(133.8 * var(--u));
    top: calc(337.2 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(36.0 * var(--u));
    font-weight: 400;
    line-height: 1.4;
    color: #ffffff;
  }

  /* Botón "Más información": caja left 134, top 403.8, w 340, h 61.2 */
  /* padding-top = texto-top(414.8) − caja-top(403.8) = 11.0 */
  .hero__btn {
    position: absolute;
    left: calc(134 * var(--u));
    top: calc(403.8 * var(--u));
    width: calc(340 * var(--u));
    height: calc(61.2 * var(--u));
    border-radius: calc(26.5 * var(--u));
    background: #ffc700;
    box-sizing: border-box;
    padding-top: calc(11.0 * var(--u));
    text-align: center;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(26.7 * var(--u));
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
    white-space: nowrap;
    cursor: pointer;
  }
  .hero__btn:hover { opacity: .9; transition: opacity 150ms; }
  .hero__btn:focus-visible { outline: 3px solid #ffc700; outline-offset: 3px; }


  /* -------------------------------------------------------
     §2.3  EQUIPOS  .equipos
     position:relative; height 1795; fondo #fff
  ------------------------------------------------------- */
  .equipos {
    position: relative;
    height: calc(1795 * var(--u));
    background: #fff;
  }

  /* Título h2: centrado en toda la sección, top 95.1 */
  .equipos__titulo {
    position: absolute;
    left: 0;
    width: 100%;
    top: calc(95.1 * var(--u));
    margin: 0;
    text-align: center;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(60.0 * var(--u));
    font-weight: 800;
    line-height: 1.4;
    color: #ffc700;
  }

  /* Subtítulo p: centrado en toda la sección, top 179.2 */
  .equipos__sub {
    position: absolute;
    left: 0;
    width: 100%;
    top: calc(179.2 * var(--u));
    margin: 0;
    text-align: center;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(36.0 * var(--u));
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
  }

  /* -------------------------------------------------------
     Tarjeta camión: posición, dimensiones, borde via ::before
  ------------------------------------------------------- */
  .camion {
    position: absolute;
    left: calc(226.9 * var(--u));
    width: calc(1475.5 * var(--u));
    height: calc(677.8 * var(--u));
    box-sizing: border-box;
  }

  .camion--1 { top: calc(322 * var(--u)); }
  .camion--2 { top: calc(1086.2 * var(--u)); }

  /* Borde 1px + radio 48 via ::before (no afecta coordenadas hijos) */
  .camion::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #000;
    border-radius: calc(48 * var(--u));
    pointer-events: none;
  }

  /* Galería: sin caja propia */
  .camion__galeria {
    display: contents;
  }

  /* -------------------------------------------------------
     Ventanas de foto (idénticas en ambas tarjetas)
  ------------------------------------------------------- */

  /* Foto principal: ventana left 52, top 56.2, w 740, h 319.9 */
  .foto--principal {
    position: absolute;
    left: calc(52 * var(--u));
    top: calc(56.2 * var(--u));
    width: calc(740 * var(--u));
    height: calc(319.9 * var(--u));
    overflow: hidden;
  }

  /* Foto a: ventana left 52, top 387, w 238.4, h 238.8 */
  .foto--a {
    position: absolute;
    left: calc(52 * var(--u));
    top: calc(387 * var(--u));
    width: calc(238.4 * var(--u));
    height: calc(238.8 * var(--u));
    overflow: hidden;
  }

  /* Foto b: ventana left 304.1, top 387, w 238.4, h 238.8 */
  .foto--b {
    position: absolute;
    left: calc(304.1 * var(--u));
    top: calc(387 * var(--u));
    width: calc(238.4 * var(--u));
    height: calc(238.8 * var(--u));
    overflow: hidden;
  }

  /* Foto c: ventana left 553.2, top 387, w 238.4, h 238.8 */
  .foto--c {
    position: absolute;
    left: calc(553.2 * var(--u));
    top: calc(387 * var(--u));
    width: calc(238.4 * var(--u));
    height: calc(238.8 * var(--u));
    overflow: hidden;
  }

  /* -------------------------------------------------------
     Imágenes dentro de las ventanas — tarjeta 1
     (coordenadas relativas a su ventana)
  ------------------------------------------------------- */

  /* foto ya recortada: llena la ventana */
  .camion--1 .foto--principal .foto__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* foto ya recortada: llena la ventana */
  .camion--1 .foto--a .foto__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* foto ya recortada: llena la ventana */
  .camion--1 .foto--b .foto__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* foto ya recortada: llena la ventana */
  .camion--1 .foto--c .foto__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* -------------------------------------------------------
     Imágenes dentro de las ventanas — tarjeta 2
  ------------------------------------------------------- */

  /* foto ya recortada: llena la ventana */
  .camion--2 .foto--principal .foto__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* foto ya recortada: llena la ventana */
  .camion--2 .foto--a .foto__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* foto ya recortada: llena la ventana */
  .camion--2 .foto--b .foto__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* foto ya recortada: llena la ventana */
  .camion--2 .foto--c .foto__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* -------------------------------------------------------
     Etiqueta (píldora): caja left 839, top 94.2, w 307.3, h 51.1
     padding-top = texto-top(97.5) − caja-top(94.2) = 3.3
  ------------------------------------------------------- */
  .camion__etiqueta {
    position: absolute;
    left: calc(839 * var(--u));
    top: calc(94.2 * var(--u));
    width: calc(307.3 * var(--u));
    height: calc(51.1 * var(--u));
    border-radius: calc(12 * var(--u));
    background: #ffc700;
    box-sizing: border-box;
    padding-top: calc(3.3 * var(--u));
    text-align: center;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(29.8 * var(--u));
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
    white-space: nowrap;
  }

  /* -------------------------------------------------------
     Título h3: textos distintos por tarjeta pero mismo estilo base
     left 838.8, top camion1=150.1, camion2=150.0
  ------------------------------------------------------- */
  .camion__titulo {
    position: absolute;
    left: calc(838.8 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(50.3 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    color: #000000;
  }
  .camion--1 .camion__titulo { top: calc(150.1 * var(--u)); }
  .camion--2 .camion__titulo { top: calc(150.0 * var(--u)); }

  /* -------------------------------------------------------
     Lista de viñetas: sin caja propia
  ------------------------------------------------------- */
  .camion__lista {
    display: contents;
  }

  /* Cada ítem: absoluto, left 865.9 */
  .camion__item {
    position: absolute;
    left: calc(865.9 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(22.3 * var(--u));
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
  }

  /* top por fila — tarjeta 1 */
  .camion--1 .camion__item:nth-child(1) { top: calc(228.0 * var(--u)); }
  .camion--1 .camion__item:nth-child(2) { top: calc(272.4 * var(--u)); }
  .camion--1 .camion__item:nth-child(3) { top: calc(316.9 * var(--u)); }
  .camion--1 .camion__item:nth-child(4) { top: calc(361.3 * var(--u)); }
  .camion--1 .camion__item:nth-child(5) { top: calc(405.7 * var(--u)); }

  /* top por fila — tarjeta 2 */
  .camion--2 .camion__item:nth-child(1) { top: calc(228.0 * var(--u)); }
  .camion--2 .camion__item:nth-child(2) { top: calc(272.4 * var(--u)); }
  .camion--2 .camion__item:nth-child(3) { top: calc(316.8 * var(--u)); }
  .camion--2 .camion__item:nth-child(4) { top: calc(361.2 * var(--u)); }
  .camion--2 .camion__item:nth-child(5) { top: calc(405.7 * var(--u)); }

  /* -------------------------------------------------------
     Viñeta circular amarilla via ::before
     Círculo 11.2 px; left del ítem = 865.9; left viñeta = 841.7
     ∴ offset left = 841.7 − 865.9 = −24.2
     top relativo al ítem = top_viñeta − top_ítem (por tarjeta/fila)
  ------------------------------------------------------- */
  .camion__item::before {
    content: "";
    position: absolute;
    left: calc(-24.2 * var(--u));
    width: calc(11.2 * var(--u));
    height: calc(11.2 * var(--u));
    border-radius: 50%;
    background: var(--amarillo);
  }

  /* top del ::before relativo al ítem — tarjeta 1:
     viñeta tops: 236.3, 280.9, 325.4, 370.0, 414.6 */
  .camion--1 .camion__item:nth-child(1)::before { top: calc(8.3 * var(--u)); }
  .camion--1 .camion__item:nth-child(2)::before { top: calc(8.5 * var(--u)); }
  .camion--1 .camion__item:nth-child(3)::before { top: calc(8.5 * var(--u)); }
  .camion--1 .camion__item:nth-child(4)::before { top: calc(8.7 * var(--u)); }
  .camion--1 .camion__item:nth-child(5)::before { top: calc(8.9 * var(--u)); }

  /* top del ::before — tarjeta 2 */
  .camion--2 .camion__item:nth-child(1)::before { top: calc(8.3 * var(--u)); }
  .camion--2 .camion__item:nth-child(2)::before { top: calc(8.5 * var(--u)); }
  .camion--2 .camion__item:nth-child(3)::before { top: calc(8.6 * var(--u)); }
  .camion--2 .camion__item:nth-child(4)::before { top: calc(8.8 * var(--u)); }
  .camion--2 .camion__item:nth-child(5)::before { top: calc(8.9 * var(--u)); }

  /* -------------------------------------------------------
     Barra de precio: caja left 839, top 476.8, w 577.5, h 85.4
     padding-top = texto-top(484.3) − caja-top(476.8) = 7.5
  ------------------------------------------------------- */
  .camion__precio {
    position: absolute;
    left: calc(839 * var(--u));
    top: calc(476.8 * var(--u));
    width: calc(577.5 * var(--u));
    height: calc(85.4 * var(--u));
    border-radius: calc(10 * var(--u));
    background: #ffc700;
    box-sizing: border-box;
    padding-top: calc(7.5 * var(--u));
    text-align: center;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(50.3 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    color: #000000;
    white-space: nowrap;
  }

} /* fin @media (min-width: 1600px) */
/* ===================================================================
   estilos-escritorio-2.css
   Secciones: #tanques (§2.4), #nosotros (§2.5), #contacto (§2.6), pie (§2.7)
   Todo dentro de @media (min-width: 1600px)
   =================================================================== */

@media (min-width: 1600px) {

  /* ---------------------------------------------------------------
     §2.4 — TANQUES
  --------------------------------------------------------------- */

  /* Sección tanques */
  .tanques {
    position: relative;
    height: calc(1180 * var(--u));
    background: #fff;
  }

  /* Título centrado en la sección */
  .tanques__titulo {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: calc(32.1 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(60 * var(--u));
    font-weight: 800;
    line-height: 1.4;
    color: #ffc700;
  }

  /* Subtítulo centrado en la sección */
  .tanques__sub {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: calc(113.2 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(36 * var(--u));
    font-weight: 400;
    line-height: 1.4;
    color: #000;
  }

  /* Tarjeta base */
  .tanque {
    position: absolute;
    top: calc(255 * var(--u));
    width: calc(644.9 * var(--u));
    height: calc(852 * var(--u));
    border-radius: calc(67 * var(--u));
    background: var(--amarillo);
    overflow: visible;
  }

  /* Tarjeta A */
  .tanque--a {
    left: calc(256.1 * var(--u));
  }

  /* Tarjeta B */
  .tanque--b {
    left: calc(977.3 * var(--u));
  }

  /* Imagen del tanque — tarjeta A (2,500 gal) */
  .tanque--a .tanque__img {
    position: absolute;
    left: calc(17.05 * var(--u));
    top: calc(46.17 * var(--u));
    width: calc(597.8 * var(--u));
    height: calc(437.47 * var(--u));
    max-width: none;
    display: block;
  }

  /* Imagen del tanque — tarjeta B (4,000 gal); se sale por la derecha a propósito */
  .tanque--b .tanque__img {
    position: absolute;
    left: calc(-17.49 * var(--u));
    top: calc(10.2 * var(--u));
    width: calc(704.05 * var(--u));
    height: calc(453.79 * var(--u));
    max-width: none;
    display: block;
    z-index: 1;
  }

  /* Píldora blanca de precio — base (texto incluido en el mismo elemento) */
  .tanque__precio {
    position: absolute;
    top: calc(667.5 * var(--u));
    width: calc(528.1 * var(--u));
    height: calc(110.5 * var(--u));
    border-radius: calc(55 * var(--u));
    background: #fff;
    box-shadow: calc(6 * var(--u)) calc(8 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, .4);
    text-align: center;
    box-sizing: border-box;
    line-height: 1.4;
    font-size: calc(50 * var(--u));
    font-weight: 700;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    color: #000;
  }

  /* Píldora — tarjeta A: left y padding-top para que el texto caiga en la posición del diseño */
  /* Texto top relativo a tarjeta = 687.3; píldora top = 667.5 → padding-top = 687.3 − 667.5 = 19.8 */
  .tanque--a .tanque__precio {
    left: calc(58.7 * var(--u));
    padding-top: calc(19.8 * var(--u));
  }

  /* Píldora — tarjeta B: padding-top = 688.1 − 667.5 = 20.6 */
  .tanque--b .tanque__precio {
    left: calc(57.3 * var(--u));
    padding-top: calc(20.6 * var(--u));
  }

  /* Texto "Tanque de" — tarjeta A */
  .tanque--a .tanque__nombre {
    position: absolute;
    left: calc(73.5 * var(--u));
    top: calc(463.1 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(40.8 * var(--u));
    font-weight: 500;
    line-height: 1.4;
    color: #000;
  }

  /* Texto "2,500 Galones" — tarjeta A */
  .tanque--a .tanque__galones {
    position: absolute;
    left: calc(73.4 * var(--u));
    top: calc(505.3 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(58.1 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    color: #000;
  }

  /* Texto "Bomba y aspersores…" — tarjeta A */
  .tanque--a .tanque__nota {
    position: absolute;
    left: calc(73.2 * var(--u));
    top: calc(583.4 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(20.4 * var(--u));
    font-weight: 400;
    line-height: 1.4;
    color: #000;
  }

  /* Texto "No incluye instalación" — tarjeta A */
  .tanque--a .tanque__instalacion {
    position: absolute;
    left: calc(73.2 * var(--u));
    top: calc(610.6 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(20.4 * var(--u));
    font-weight: 400;
    line-height: 1.4;
    color: #000;
  }

  /* Texto "Tanque de" — tarjeta B */
  .tanque--b .tanque__nombre {
    position: absolute;
    left: calc(72.1 * var(--u));
    top: calc(463.1 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(40.8 * var(--u));
    font-weight: 500;
    line-height: 1.4;
    color: #000;
  }

  /* Texto "4,000 Galones" — tarjeta B */
  .tanque--b .tanque__galones {
    position: absolute;
    left: calc(72.1 * var(--u));
    top: calc(505.3 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(58.1 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    color: #000;
  }

  /* Texto "Bomba y aspersores…" — tarjeta B */
  .tanque--b .tanque__nota {
    position: absolute;
    left: calc(71.8 * var(--u));
    top: calc(583.4 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(20.4 * var(--u));
    font-weight: 400;
    line-height: 1.4;
    color: #000;
  }

  /* Texto "No incluye instalación" — tarjeta B */
  .tanque--b .tanque__instalacion {
    position: absolute;
    left: calc(71.8 * var(--u));
    top: calc(610.6 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(20.4 * var(--u));
    font-weight: 400;
    line-height: 1.4;
    color: #000;
  }


  /* ---------------------------------------------------------------
     §2.5 — NOSOTROS
  --------------------------------------------------------------- */

  /* Sección nosotros */
  .nosotros {
    position: relative;
    height: calc(855 * var(--u));
    background: #fff;
  }

  /* Título centrado en la sección */
  .nosotros__titulo {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: calc(48.1 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(60 * var(--u));
    font-weight: 800;
    line-height: 1.4;
    color: #ffc700;
  }

  /* Caja de video: contiene ventana + botón */
  .video__caja {
    position: absolute;
    left: calc(147.5 * var(--u));
    top: calc(212.1 * var(--u));
    width: calc(849.7 * var(--u));
    height: calc(477.9 * var(--u));
    border-radius: calc(40 * var(--u));
    overflow: hidden;
  }

  /* Ventana interior de la imagen del poster */
  .video__foto-ventana {
    position: absolute;
    inset: 0;
  }

  /* poster ya recortado: llena la ventana */
  .video__poster {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: cover;
  }

  /* Botón de reproducir — círculo amarillo centrado en la caja */
  .video__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(99.6 * var(--u));
    height: calc(99.6 * var(--u));
    border-radius: 50%;
    background: #ffc400;
    display: grid;
    place-items: center;
    cursor: pointer;
  }

  /* Triángulo SVG desplazado 5.2 px a la derecha */
  .video__triangulo {
    width: calc(39.8 * var(--u));
    height: calc(53.5 * var(--u));
    transform: translateX(calc(5.2 * var(--u)));
  }

  /* Hover y focus en botón de play */
  .video__play:hover {
    opacity: .9;
    transition: opacity 150ms;
  }

  .video__play:focus-visible {
    outline: 3px solid #ffc700;
    outline-offset: 3px;
  }

  /* Subtítulo h3 "Somos Water Truck Store" */
  .nosotros__subtitulo {
    position: absolute;
    left: calc(1063.5 * var(--u));
    top: calc(279 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(52.7 * var(--u));
    font-weight: 700;
    line-height: 1.4;
    color: #000;
  }

  /* Párrafo de 6 líneas — top calculado: 358.3 − 3.3 = 355.0 */
  .nosotros__parrafo {
    position: absolute;
    left: calc(1063.6 * var(--u));
    top: calc(355 * var(--u));
    width: calc(640 * var(--u));
    margin: 0;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(26 * var(--u));
    font-weight: 400;
    line-height: calc(43 * var(--u));
    color: #000;
  }


  /* ---------------------------------------------------------------
     §2.6 — CONTACTO
  --------------------------------------------------------------- */

  /* Sección contacto */
  .contacto {
    position: relative;
    height: calc(891 * var(--u));
    background: var(--amarillo-form);
  }

  /* Foto con diagonal — ventana con clip-path */
  .contacto__foto-ventana {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(910.3 * var(--u));
    height: calc(891 * var(--u));
    clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
    overflow: hidden;
  }

  /* foto ya recortada: llena la ventana */
  .contacto__foto {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: cover;
    object-position: 38% center;
  }

  /* Título del formulario — dos líneas, line-height especial */
  .contacto__titulo {
    position: absolute;
    left: calc(968.4 * var(--u));
    top: calc(104.8 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(56.5 * var(--u));
    font-weight: 400;
    line-height: calc(58.7 * var(--u));
    color: #000;
  }

  /* El <strong> dentro del título va en 700 */
  .contacto__titulo strong {
    font-weight: 700;
  }

  /* Formulario sin caja propia */
  .contacto__form {
    display: contents;
  }

  /* Envolvente del select sin caja propia */
  .contacto__select-envolvente {
    display: contents;
  }

  /* Estilos base para todos los campos del formulario */
  .contacto__campo {
    position: absolute;
    border: none;
    border-radius: calc(12 * var(--u));
    background: #fff;
    padding-left: calc(30.1 * var(--u));
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(34.4 * var(--u));
    font-weight: 400;
    color: #000;
    box-sizing: border-box;
    outline: none;
  }

  .contacto__campo::placeholder {
    color: var(--placeholder);
    opacity: 1;
  }

  .contacto__campo:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
  }

  /* Campo Nombre */
  .campo--nombre {
    left: calc(960 * var(--u));
    top: calc(268 * var(--u));
    width: calc(773 * var(--u));
    height: calc(65 * var(--u));
    line-height: calc(65 * var(--u));
  }

  /* Campo Celular */
  .campo--celular {
    left: calc(960 * var(--u));
    top: calc(357 * var(--u));
    width: calc(377 * var(--u));
    height: calc(65 * var(--u));
    line-height: calc(65 * var(--u));
  }

  /* Campo Empresa */
  .campo--empresa {
    left: calc(1359 * var(--u));
    top: calc(357 * var(--u));
    width: calc(374 * var(--u));
    height: calc(65 * var(--u));
    line-height: calc(65 * var(--u));
  }

  /* Campo Email */
  .campo--email {
    left: calc(960 * var(--u));
    top: calc(446 * var(--u));
    width: calc(773 * var(--u));
    height: calc(65 * var(--u));
    line-height: calc(65 * var(--u));
  }

  /* Select Interés — appearance:none para quitar flecha nativa */
  .campo--interes {
    left: calc(960 * var(--u));
    top: calc(535 * var(--u));
    width: calc(773 * var(--u));
    height: calc(65 * var(--u));
    line-height: calc(65 * var(--u));
    appearance: none;
    cursor: pointer;
  }

  /* Textarea Mensaje */
  .campo--mensaje {
    left: calc(960 * var(--u));
    top: calc(624 * var(--u));
    width: calc(773 * var(--u));
    height: calc(187 * var(--u));
    line-height: 1.4;
    padding-top: calc(9 * var(--u));
    resize: none;
  }

  /* Chevron del select (flecha decorativa) */
  .contacto__chevron {
    position: absolute;
    left: calc(1660 * var(--u));
    top: calc(560 * var(--u));
    width: calc(42 * var(--u));
    height: calc(21 * var(--u));
    pointer-events: none;
  }


  /* ---------------------------------------------------------------
     §2.7 — PIE DE PÁGINA
  --------------------------------------------------------------- */

  /* Footer */
  .pie {
    position: relative;
    height: calc(427 * var(--u));
    background: var(--gris-pie);
  }

  /* Logo del pie */
  .pie__logo-enlace {
    display: contents;
  }

  .pie__logo {
    position: absolute;
    left: calc(80 * var(--u));
    top: calc(54 * var(--u));
    width: calc(235 * var(--u));
    height: calc(95 * var(--u));
    display: block;
  }

  /* Hover en logo del pie */
  .pie__logo-enlace:hover .pie__logo {
    opacity: .9;
    transition: opacity 150ms;
  }

  /* Texto "Pie de página" */
  .pie__texto {
    position: absolute;
    left: calc(346.8 * var(--u));
    top: calc(80.5 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(41 * var(--u));
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
  }

  /* Dirección en el pie */
  .pie__dir {
    position: absolute;
    left: calc(1213.8 * var(--u));
    top: calc(104.7 * var(--u));
    margin: 0;
    white-space: nowrap;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: calc(18 * var(--u));
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
  }

  /* Ventana del mapa */
  .pie__mapa-ventana {
    position: absolute;
    left: calc(1214 * var(--u));
    top: calc(145 * var(--u));
    width: calc(640 * var(--u));
    height: calc(240 * var(--u));
    border-radius: calc(25 * var(--u));
    overflow: hidden;
  }

  /* Mapa interactivo (iframe de Google Maps) */
  .pie__mapa {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  /* Focus visible en logo */
  .pie__logo-enlace:focus-visible .pie__logo {
    outline: 3px solid #ffc700;
    outline-offset: 3px;
  }

} /* fin @media (min-width: 1600px) */
/* ===== Ajustes de fidelidad (escritorio): interletrado del diseño y alineación de textos en botones ===== */
@media (min-width: 1600px) {
  /* Interletrado medido contra el PDF (≈ -0.023em en los textos que lo llevan) */
  .cab__cta { letter-spacing: -0.023em; }
  .hero__sub { letter-spacing: -0.0239em; }
  .equipos__sub { letter-spacing: -0.0246em; }
  .tanques__sub { letter-spacing: -0.0227em; }
  .tanque__nombre { letter-spacing: -0.0222em; }
  .tanque__galones { letter-spacing: -0.023em; }
  .tanque__precio { letter-spacing: -0.0236em; }
  .nosotros__subtitulo { letter-spacing: -0.0239em; }
  .nosotros__parrafo { letter-spacing: -0.0244em; }
  .contacto__titulo { letter-spacing: -0.0233em; }
  .contacto__campo { letter-spacing: -0.0212em; }
  .pie__texto { letter-spacing: -0.0231em; }
  .pie__dir { letter-spacing: -0.0246em; }

  /* Textos de botones/píldoras: en el diseño van alineados a la izquierda con sangría fija, no centrados */
  .cab__cta { text-align: left; padding-left: calc(15 * var(--u)); }
  .hero__btn { text-align: left; padding-left: calc(54.8 * var(--u)); }
  .camion__etiqueta { text-align: left; padding-left: calc(31 * var(--u)); }
  .camion__precio { text-align: left; padding-left: calc(113.1 * var(--u)); }
  .tanque--a .tanque__precio { text-align: left; padding-left: calc(43.7 * var(--u)); }
  .tanque--b .tanque__precio { text-align: left; padding-left: calc(45.8 * var(--u)); }

}

/* Select vacío: mismo gris que un placeholder (móvil y escritorio) */
.campo--interes:invalid { color: var(--placeholder); }
.campo--interes option { color: #000; }

/* ===== Tablet (640-1024 px): tanques en dos columnas; camiones con galería a la izquierda y datos a la derecha ===== */
@media (min-width: 640px) and (max-width: 1024px) {
  .tanques { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: stretch; }
  .tanques__titulo, .tanques__sub { grid-column: 1 / -1; }
  .tanque--a { margin-bottom: 0; }
  .tanque { display: flex; flex-direction: column; }
  .tanque__img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
  .tanque__instalacion { margin-bottom: 20px; }
  .tanque__precio { margin-top: auto; }
}
@media (min-width: 720px) and (max-width: 1024px) {
  .camion { display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 24px; align-content: start; }
  .camion__galeria { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
  .camion__etiqueta, .camion__titulo, .camion__lista { grid-column: 2; }
  .camion__etiqueta { justify-self: start; }
  .camion__precio { grid-column: 2; align-self: end; }
}