/* ============================================================
   INDUSTRIAS DROT SRL — components.css
   Navbar, footer, botones, patrón, cards, formularios
   ============================================================ */

/* ============================================================
   1. NAVBAR — pill flotante (1759 x 133 en la maqueta)
   ============================================================ */
.navbar {
  position: fixed;
  inset-block-start: .625rem;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: transform var(--dur-media) var(--ease-suave);
}
.navbar.esta-oculta { transform: translateY(calc(-100% - 1.25rem)); }

.navbar__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: min(100% - var(--gutter) * 2, var(--container));
  height: var(--nav-alto);
  padding-inline: 3.5rem 2.75rem;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(1.25rem) saturate(160%);
  -webkit-backdrop-filter: blur(1.25rem) saturate(160%);
  border-radius: var(--radio-pill);
  box-shadow: var(--sombra-nav);
  transition: height var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave),
              background var(--dur-media) var(--ease-suave);
}
.navbar.esta-compacta .navbar__pill {
  height: 6.25rem;
  background: rgba(255, 255, 255, .88);
}

.navbar__logo { display: flex; align-items: flex-end; gap: .5rem; flex-shrink: 0; }
.navbar__logo img {
  height: 3.9375rem;             /* 63px */
  width: auto;
  transition: height var(--dur-media) var(--ease-suave);
}
.navbar.esta-compacta .navbar__logo img { height: 3.125rem; }

/* Bajada tipográfica del lockup: "Industrias DROT SRL / ALAMBRES TREFILADOS" */
.marca-texto {
  display: grid;
  align-content: end;
  font-family: var(--f-texto);
  line-height: 1.14;
  white-space: nowrap;
}
.marca-texto b { font-weight: 700; font-size: 1.15rem; }      /* 18.4px */
.marca-texto span { font-weight: 400; font-size: .9375rem; }  /* 15px   */

/* --- Links --- */
.navbar__links {
  position: relative;          /* ancla del subrayado: sin esto se va al borde */
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-inline-start: auto;
}
.navbar__link {
  position: relative;
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 1.1875rem;          /* 19px */
  letter-spacing: .02em;
  color: var(--negro);
  padding-block: .75rem;
  transition: color var(--dur-rapida) var(--ease-suave),
              text-shadow var(--dur-rapida) var(--ease-suave);
}
.navbar__link:hover {
  color: var(--azul);
  text-shadow: 0 .1875rem .75rem rgba(0, 93, 172, .45);
}

/* Subrayado fluido: una sola barra que se desplaza entre links */
.navbar__indicador {
  position: absolute;
  inset-inline-start: 0;       /* el JS lo corre con translateX desde acá */
  bottom: -.125rem;
  height: .1875rem;
  background: var(--azul);
  border-radius: .1875rem;
  opacity: 0;
  pointer-events: none;
}

/* Página activa: el propio título en azul, con un halo suave */
.navbar__link[aria-current="page"] {
  color: var(--azul);
  text-shadow: 0 .1875rem .75rem rgba(0, 93, 172, .45);
}

/* --- CTA --- */
.navbar__cta {
  flex-shrink: 0;
  margin-inline-start: 1.5rem;
}

/* --- Hamburguesa (sólo mobile / tablet) --- */
.navbar__menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: .4375rem;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}
.navbar__menu-btn span {
  display: block;
  width: 2.5rem;
  height: .1875rem;
  background: var(--negro);
  border-radius: .125rem;
  transition: transform var(--dur-rapida) var(--ease-suave),
              opacity var(--dur-rapida) var(--ease-suave);
}
.menu-abierto .navbar__menu-btn span:nth-child(1) { transform: translateY(.625rem) rotate(45deg); }
.menu-abierto .navbar__menu-btn span:nth-child(2) { opacity: 0; }
.menu-abierto .navbar__menu-btn span:nth-child(3) { transform: translateY(-.625rem) rotate(-45deg); }

@media (max-width: 1100px) {
  .navbar__links { display: none; }
  .navbar__menu-btn { display: flex; }
  .navbar__cta { margin-inline-start: auto; }
}

/* --- Menú overlay --- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--gris-900);
  display: grid;
  justify-items: center;
  align-items: stretch;
  clip-path: circle(0% at calc(100% - 5rem) 5rem);
  visibility: hidden;
  transition: clip-path var(--dur-lenta) var(--ease-suave), visibility 0s .8s;
}
.menu-abierto .menu-overlay {
  clip-path: circle(150% at calc(100% - 5rem) 5rem);
  visibility: visible;
  transition: clip-path var(--dur-lenta) var(--ease-suave), visibility 0s 0s;
}
.menu-overlay__caja {
  display: grid;
  align-content: space-between;
  gap: 3rem;
  width: min(100% - 3rem, 46rem);
  max-height: 100%;
  padding-block: 10.5rem 3.5rem;   /* despeja la píldora del navbar */
  overflow-y: auto;
}

.menu-overlay__links { display: grid; }
.menu-overlay__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1.5rem;
  border-block-end: .0625rem solid rgba(255, 255, 255, .12);
  color: var(--blanco);
  transition: color var(--dur-rapida) var(--ease-suave),
              padding-inline-start var(--dur-media) var(--ease-suave);
}
.menu-overlay__link:first-child { border-block-start: .0625rem solid rgba(255, 255, 255, .12); }
.menu-overlay__t {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -.01em;
}
/* La cuña de marca marca el ítem activo y acompaña al que se toca */
.menu-overlay__cuna {
  width: 1.75rem;
  height: 1.75rem;
  background: radial-gradient(circle farthest-side at 0 100%,
              transparent 0 99.2%, var(--azul) 100%);
  opacity: 0;
  transform: translateX(-.75rem);
  transition: opacity var(--dur-media) var(--ease-suave),
              transform var(--dur-media) var(--ease-suave);
}
.menu-overlay__link:hover,
.menu-overlay__link:active,
.menu-overlay__link[aria-current="page"] { color: var(--azul-claro); padding-inline-start: .75rem; }
.menu-overlay__link:hover .menu-overlay__cuna,
.menu-overlay__link:active .menu-overlay__cuna,
.menu-overlay__link[aria-current="page"] .menu-overlay__cuna { opacity: 1; transform: none; }

.menu-overlay__pie { display: grid; gap: 2.25rem; justify-items: stretch; }
.menu-overlay__cta { width: 100%; }
.menu-overlay__datos { display: grid; gap: 1rem; }
.menu-overlay__datos a {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  align-items: start;
  gap: .875rem;
  line-height: 1.35;
  font-family: var(--f-texto);
  font-size: 1.5rem;
  color: var(--gris-300);
}
.menu-overlay__datos svg { width: 1.375rem; height: auto; margin-block-start: .2em; fill: var(--azul-claro); }
.menu-overlay__redes { display: flex; justify-content: center; gap: 1rem; }
.menu-overlay__redes a {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: .0625rem solid rgba(255, 255, 255, .24);
  color: var(--gris-300);
  transition: color var(--dur-rapida) var(--ease-suave),
              background var(--dur-rapida) var(--ease-suave),
              border-color var(--dur-rapida) var(--ease-suave);
}
.menu-overlay__redes svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.menu-overlay__redes a:hover { color: var(--blanco); background: var(--azul); border-color: var(--azul); }

/* Los ítems entran escalonados cuando se abre el panel */
.menu-overlay__link,
.menu-overlay__pie > * {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .45s var(--ease-suave), transform .45s var(--ease-suave);
}
.menu-abierto .menu-overlay__link,
.menu-abierto .menu-overlay__pie > * { opacity: 1; transform: none; }
.menu-abierto .menu-overlay__link:nth-child(1) { transition-delay: .18s; }
.menu-abierto .menu-overlay__link:nth-child(2) { transition-delay: .24s; }
.menu-abierto .menu-overlay__link:nth-child(3) { transition-delay: .30s; }
.menu-abierto .menu-overlay__link:nth-child(4) { transition-delay: .36s; }
.menu-abierto .menu-overlay__pie > *:nth-child(1) { transition-delay: .44s; }
.menu-abierto .menu-overlay__pie > *:nth-child(2) { transition-delay: .50s; }
.menu-abierto .menu-overlay__pie > *:nth-child(3) { transition-delay: .56s; }

@media (prefers-reduced-motion: reduce) {
  .menu-overlay__link,
  .menu-overlay__pie > * { transition: none; opacity: 1; transform: none; }
}

/* ============================================================
   2. BOTONES
   ============================================================ */
.btn {
  --btn-bg:      var(--azul);
  --btn-color:   var(--gris-100);
  --btn-borde:   transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 3.75rem;
  padding: .875rem 2.5rem;
  font-family: var(--f-texto);
  font-size: 1.5625rem;          /* 25px */
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--btn-color);
  background: var(--btn-bg);
  border: .125rem solid var(--btn-borde);
  border-radius: var(--radio-pill);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-rapida) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave),
              border-color var(--dur-rapida) var(--ease-suave);
}
/* Relleno que sube desde abajo en hover. El borde de la mancha es irregular
   y gira mientras crece, así el llenado se lee como algo que fluye y no como
   un barrido recto. */
.btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-start: 50%;
  inset-block-end: 0;
  width: 155%;
  aspect-ratio: 1;
  background: var(--azul-oscuro);
  border-radius: 46% 54% 43% 57% / 55% 47% 53% 45%;
  transform: translate(-50%, 96%) scale(.5) rotate(0deg);
  opacity: 0;
  transition: transform .62s cubic-bezier(.22, 1, .36, 1),
              border-radius .62s var(--ease-suave),
              opacity .22s var(--ease-suave);
}
.btn:hover { box-shadow: var(--sombra-btn-h); }
.btn:hover::after,
.btn:focus-visible::after {
  transform: translate(-50%, 30%) scale(1.08) rotate(24deg);
  border-radius: 53% 47% 56% 44% / 45% 55% 45% 55%;
  opacity: 1;
}
.btn:active { transform: translateY(.125rem) scale(.985); }

@media (prefers-reduced-motion: reduce) {
  .btn::after { transition-duration: .01ms; }
}

.btn--nav {
  min-height: 3.75rem;
  padding: .75rem 2rem;
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: .03em;
  box-shadow: var(--sombra-btn);
}

.btn--grande { min-height: 4.5rem; padding: 1rem 3.75rem; }

.btn--fantasma {
  --btn-bg: transparent;
  --btn-color: var(--gris-900);
  --btn-borde: var(--gris-900);
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 1.875rem;           /* 30px */
  letter-spacing: .01em;
  min-height: 5rem;
  padding: 1rem 3.5rem;
}
.btn--fantasma::after { background: var(--azul); }
.btn--fantasma:hover { color: var(--blanco); border-color: var(--azul); }

.btn--claro {
  --btn-bg: var(--blanco);
  --btn-color: var(--azul);
}
.btn--claro::after { background: var(--gris-100); }

/* --- Enlace "VER MÁS" con flecha en círculo --- */
.link-flecha {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--azul);
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 1.5625rem;
  letter-spacing: .06em;
}
.link-flecha__circulo {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border: .125rem solid var(--azul);
  border-radius: 50%;
  overflow: hidden;
  transition: background var(--dur-media) var(--ease-suave);
}
.link-flecha__circulo svg {
  width: 2.25rem;
  height: auto;
  transition: transform var(--dur-media) var(--ease-suave),
              stroke var(--dur-media) var(--ease-suave),
              fill var(--dur-media) var(--ease-suave);
}
.link-flecha:hover .link-flecha__circulo { background: var(--azul); }
.link-flecha:hover .link-flecha__circulo svg { transform: translateX(.375rem); }
.link-flecha:hover .link-flecha__circulo svg path { stroke: var(--blanco); fill: var(--blanco); }

/* ============================================================
   3. PATRÓN GEOMÉTRICO (motivo del isologo)
   ============================================================ */
.patron {
  position: absolute;
  inset-block: 0;
  width: 19.5rem;                /* 312px = 2 tiles de 156px */
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.patron--izq { inset-inline-start: 0; }
.patron--der { inset-inline-end: 0; }
.patron svg { width: 100%; height: 100%; }
.patron__tile { transform-box: fill-box; transform-origin: center; }

/* ============================================================
   4. CARDS DE PRODUCTO
   ============================================================ */
.grid-productos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;                        /* en la maqueta las cards van pegadas */
}

.card-producto {
  position: relative;
  display: block;
  aspect-ratio: 480 / 589;
  overflow: hidden;
  background: var(--negro);
  isolation: isolate;
}
.card-producto__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease-suave), filter var(--dur-media) var(--ease-suave);
}
.card-producto::after {          /* velo para legibilidad del título */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(0,0,0,.62) 0%, rgba(0,0,0,.22) 34%,
              rgba(0,0,0,.18) 62%, rgba(0,0,0,.60) 100%);
  transition: opacity var(--dur-media) var(--ease-suave);
}
.card-producto:hover .card-producto__img { transform: scale(1.09); }

.card-producto__titulo {
  position: absolute;
  z-index: 3;
  inset-block-start: 2rem;
  inset-inline-start: 2rem;
  color: var(--blanco);
  transition: transform var(--dur-media) var(--ease-suave);
}
.card-producto__titulo .fina { display: block; font-weight: 400; }
.card-producto__titulo .fuerte { display: block; font-weight: 400; }
.card-producto:hover .card-producto__titulo { transform: translateY(-.375rem); }

.card-producto__pie {
  position: absolute;
  z-index: 3;
  inset-block-end: 2.25rem;
  inset-inline-end: 2rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--blanco);
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 1.4375rem;          /* 23px */
  letter-spacing: .09em;
}
.card-producto__marca {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  transition: transform var(--dur-media) var(--ease-suave);
}
.card-producto:hover .card-producto__marca { transform: rotate(90deg); }

/* ============================================================
   5. FOOTER
   ============================================================ */
.footer {
  position: relative;
  isolation: isolate;
  background: var(--gris-900);
  color: var(--gris-300);
  padding-block: 6.25rem 2.5rem;
}
/* Foto de planta al fondo. Va muy apagada y con viñeteado: tiene que dar
   textura, no protagonismo, y el texto encima no puede perder contraste. */
.footer__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/hero/fondo-pie.jpg");
  background-size: cover;
  background-position: center 62%;
}
.footer__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 130% at 50% 40%, rgba(26, 26, 26, .52) 0%,
                    rgba(26, 26, 26, .74) 55%, rgba(26, 26, 26, .93) 100%),
    linear-gradient(180deg, var(--gris-900) 0%, rgba(26, 26, 26, .5) 22%,
                    rgba(26, 26, 26, .62) 100%);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr .8fr;
  gap: 4rem;
  align-items: start;
}
.footer__logo {
  display: flex;
  align-items: flex-end;
  gap: .625rem;
  width: fit-content;
  transition: transform var(--dur-media) var(--ease-suave),
              filter var(--dur-media) var(--ease-suave);
}
.footer__logo:hover {
  transform: translateY(-.25rem);
  filter: drop-shadow(0 .5rem 1.25rem rgba(0, 93, 172, .55));
}
.footer__logo img { height: 4.25rem; width: auto; }           /* 68px */
.footer__logo .marca-texto { color: var(--blanco); }
.footer__logo .marca-texto b { font-size: 1.23125rem; }       /* 19.7px */
.footer__logo .marca-texto span { font-size: 1rem; }          /* 16px   */

.footer__datos { display: grid; gap: 1.0625rem; font-size: 1.425rem; }
.footer__dato { display: grid; grid-template-columns: 2.25rem 1fr; align-items: start; gap: .5rem; }
.footer__dato svg { width: 1.375rem; height: auto; margin-top: .3rem; fill: var(--gris-300); }
.footer__dato a { transition: color var(--dur-rapida) var(--ease-suave); }
.footer__dato a:hover { color: var(--blanco); }

.footer__links { display: grid; gap: 1.0625rem; font-size: 1.425rem; justify-items: start; }
.footer__links a {
  position: relative;
  transition: color var(--dur-rapida) var(--ease-suave);
}
.footer__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -.125rem;
  width: 100%; height: .0625rem;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-media) var(--ease-suave);
}
.footer__links a:hover { color: var(--blanco); }
.footer__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: 5rem;
  font-size: 1.23125rem;         /* 19.7px */
}
.footer__base a:hover { color: var(--blanco); }

/* --- Redes --- */
.footer__redes { display: flex; align-items: center; gap: 1rem; }
.footer__redes a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: .0625rem solid rgba(255, 255, 255, .28);
  color: var(--gris-300);
  transition: color var(--dur-rapida) var(--ease-suave),
              border-color var(--dur-rapida) var(--ease-suave),
              background var(--dur-rapida) var(--ease-suave),
              transform var(--dur-rapida) var(--ease-suave);
}
.footer__redes svg { width: 1.375rem; height: 1.375rem; fill: currentColor; }
.footer__redes a:hover {
  color: var(--blanco);
  background: var(--azul);
  border-color: var(--azul);
  transform: translateY(-.1875rem);
}

/* ============================================================
   6. FAB DE WHATSAPP
   ============================================================ */
.whatsapp-fab {
  position: fixed;
  z-index: 90;
  inset-block-end: 2.5rem;
  inset-inline-end: 2.75rem;
  display: grid;
  place-items: center;
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 50%;
  background: var(--azul);
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .3);
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media) var(--ease-suave);
}
.whatsapp-fab svg { width: 2.875rem; height: auto; fill: var(--blanco); }
.whatsapp-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 1.125rem 2.75rem rgba(0, 93, 172, .45);
}
.whatsapp-fab::before {          /* pulso */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: .125rem solid var(--azul);
  animation: pulso 2.6s var(--ease-salida) infinite;
}
@keyframes pulso {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab::before { animation: none; }
}

/* ============================================================
   7. HEROS
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--negro);
}
.hero__media { position: absolute; inset: 0; z-index: 1; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Encabezado rotativo: sólo cambia cuál foto está visible; el zoom lento lo
   hace esta animación, que se reinicia cada vez que una se activa. */
.hero__media--rota .hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.1s var(--ease-suave);
}
.hero__media--rota .hero__foto.esta-activa {
  opacity: 1;
  animation: hero-zoom 5.4s linear forwards;
}
@keyframes hero-zoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.13); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media--rota .hero__foto.esta-activa { animation: none; }
}

.hero__velo {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0,0,0,.30) 0%, rgba(0,0,0,.62) 100%),
    linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 42%, rgba(0,0,0,.60) 100%);
}
.hero__contenido {
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--blanco);
  height: 100%;
}

/* Hero interior (páginas que no son la home) */
.hero--interior { height: 43rem; }          /* ~688px */
.hero--interior .t-seccion { font-size: 4.38125rem; }

/* ============================================================
   8. FORMULARIOS
   ============================================================ */
.campo { display: grid; gap: .5rem; }
.campo__label {
  display: flex;
  align-items: center;
  align-self: start;
  min-height: 3.9375rem;         /* la del control: así centra contra la caja */
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 1.5rem;             /* 24px */
  color: var(--gris-100);
  letter-spacing: .02em;
}
.campo__label em {
  font-style: normal;
  font-weight: 400;
  color: var(--gris-400);
  margin-inline-start: .375rem;
}
.campo__label .req { color: var(--azul); }

.campo__control,
.campo select,
.campo textarea,
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="number"] {
  width: 100%;
  height: 3.9375rem;             /* 63px */
  padding-inline: 1.25rem;
  font-family: var(--f-texto);
  font-size: 1.3125rem;          /* 21px */
  color: var(--blanco);
  background: #0A0A0C;
  border: .0625rem solid transparent;
  border-radius: 0;
  transition: border-color var(--dur-rapida) var(--ease-suave),
              box-shadow var(--dur-rapida) var(--ease-suave);
}
.campo :is(input, textarea)::placeholder { color: var(--gris-500); }

/* Las flechitas de incremento sobran: los valores se escriben, no se pulsan */
.campo input[type="number"] { -moz-appearance: textfield; }
.campo input[type="number"]::-webkit-outer-spin-button,
.campo input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.campo textarea {
  height: auto;
  min-height: 11rem;
  padding-block: 1rem;
  line-height: 1.45;
  resize: vertical;
}
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.375rem center;
  background-size: 1rem auto;
  padding-inline-end: 3.5rem;
}
.campo :is(input, select, textarea):focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 .1875rem rgba(0, 93, 172, .28);
  outline: none;
}
.campo.tiene-error :is(input, select, textarea) { border-color: #D9534F; }
.campo__error {
  font-size: 1.125rem;
  color: #F08B88;
  min-height: 1.4em;
}

/* Desplegable propio: un <select> nativo no dibuja dentro de las opciones y
   la sección se reconoce antes por la figura que por el nombre. */
.desplegable { position: relative; }
.desplegable__boton {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: 3.9375rem;
  padding-inline: 1.25rem 1.375rem;
  font-family: var(--f-texto);
  font-size: 1.3125rem;
  color: var(--blanco);
  background: #0A0A0C;
  border: .0625rem solid transparent;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease-suave),
              box-shadow var(--dur-rapida) var(--ease-suave);
}
.desplegable__boton:focus-visible {
  border-color: var(--azul);
  box-shadow: 0 0 0 .1875rem rgba(0, 93, 172, .28);
  outline: none;
}
.desplegable__chevron svg { width: 1rem; height: auto; display: block; }
.desplegable.esta-abierto .desplegable__chevron { transform: rotate(180deg); }
.desplegable__figura { display: grid; place-items: center; color: var(--azul-claro); }
.desplegable__figura svg { width: 1.75rem; height: 1.75rem; display: block; }

.desplegable__lista {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  inset-block-start: calc(100% + .25rem);
  max-height: 22rem;
  overflow-y: auto;
  background: #0A0A0C;
  border: .0625rem solid var(--azul);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .55);
}
.desplegable__lista li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .875rem 1.25rem;
  font-family: var(--f-texto);
  font-size: 1.3125rem;
  color: var(--blanco);
  cursor: pointer;
}
.desplegable__lista li:hover,
.desplegable__lista li.esta-enfocado { background: #17191E; }
.desplegable__lista li[aria-selected="true"] { background: var(--azul); }
.desplegable__lista li[aria-selected="true"] .desplegable__figura { color: var(--blanco); }

/* Grupo de opciones tipo segmented control */
.opciones { display: flex; }
.opciones input { position: absolute; opacity: 0; pointer-events: none; }
.opciones label {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 3.9375rem;
  padding-inline: 1.5rem;
  white-space: nowrap;
  font-family: var(--f-texto);
  font-size: 1.3125rem;
  color: var(--blanco);
  background: #0A0A0C;
  cursor: pointer;
  transition: background var(--dur-rapida) var(--ease-suave);
}
.opciones label:hover { background: #16181C; }
.opciones input:checked + label { background: var(--azul); }
.opciones input:focus-visible + label { outline: .1875rem solid var(--blanco); outline-offset: -.1875rem; }

/* Los 5 botones de SECCIÓN reparten el ancho de la columna sin envolverse */
#opciones-seccion label { flex: 1 1 0; padding-inline: .5rem; font-size: 1.1875rem; }

/* Card oscura que contiene el formulario */
.form-card {
  background: var(--gris-700);
  padding: 4.5rem 5rem;
}
.form-card__filas { display: grid; gap: 2.125rem; }
/* El recuadro lo dimensiona esta fila: 17,5 + 38 + 1,5 de gap, más el padding,
   dan un 30% más de ancho que antes (un 15% por lado). */
.fila-campo {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 38rem);
  align-items: start;
  gap: 1.5rem;
}
.fila-campo--doble {
  grid-template-columns: 14.5rem minmax(0, 12rem) 4.5rem minmax(0, 9rem);
  gap: 1rem;
}
.fila-campo.esta-oculta { display: none; }
/* GSAP deja will-change en las filas al animarlas, y eso las convierte en
   contextos de apilado: sin esto la lista desplegada queda tapada por las
   filas que vienen después. */
.fila-campo[data-campo="seccion"] { position: relative; z-index: 5; }

.form-card__pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: 2.5rem;
}
.form-card__nota { font-size: 1.125rem; color: var(--gris-100); }

/* Aviso de envío deshabilitado (backend pendiente) */
.aviso-stub {
  display: none;
  margin-block-start: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-inline-start: .25rem solid var(--azul);
  background: rgba(0, 93, 172, .14);
  color: var(--gris-100);
  font-size: 1.3125rem;
}
.aviso-stub.esta-visible { display: block; }

/* ============================================================
   9. CARD DE LLAMADO A LA ACCIÓN (8.ª celda del grid)
   ============================================================ */
.card-producto--cta {
  display: grid;
  place-items: stretch;
  background: var(--azul);
}
.card-producto--cta::after { content: none; }
.card-cta__contenido {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: start;
  gap: 1.5rem;
  padding: 2rem;
  color: var(--blanco);
}
.card-cta__titulo { display: block; line-height: 1.02; }
.card-cta__titulo .fina   { display: block; font-weight: 400; }
.card-cta__titulo .fuerte { display: block; font-weight: 700; }
.card-cta__texto {
  font-family: var(--f-texto);
  font-size: 1.4375rem;
  line-height: 1.35;
  max-width: 22rem;
  color: rgba(255, 255, 255, .9);
}
/* Igual que en las cards de producto: el bloque va contra el borde derecho */
.card-producto--cta .card-producto__pie {
  inset-block-end: 2.25rem;
  justify-content: flex-end;
}
/* Motivo de marca de fondo, girando en hover */
.card-producto--cta::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block-start: -18%;
  inset-inline-end: -22%;
  width: 78%;
  aspect-ratio: 1;
  background: radial-gradient(circle farthest-side at 0 100%,
              transparent 0 99.4%, rgba(255, 255, 255, .12) 100%);
  transform-origin: center;
  transition: transform 1.2s var(--ease-suave);
}
.card-producto--cta:hover::before { transform: rotate(-90deg) scale(1.08); }

/* ============================================================
   10. ESTADOS DE FORMULARIO
   ============================================================ */
.form-card__nota .req { color: var(--azul); }
.separador-datos { margin-block-start: 2rem; padding-block-start: 2.5rem;
                   border-block-start: .0625rem solid rgba(255, 255, 255, .10); }

address { font-style: normal; }

.calc-error { color: #C0392B; }

/* ============================================================
   10. RESPONSIVE
   ------------------------------------------------------------
   Arriba de 1100px no se toca nada: acá sólo hay reglas dentro
   de media queries, así el escritorio queda como está.
   Dos cortes: tablet (<=1100) y teléfono (<=600).
   ============================================================ */

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 2.5rem; }

  .hero--interior { height: 34rem; }
  .hero--interior .t-seccion { font-size: 3.5rem; }

  .grid-productos { grid-template-columns: repeat(2, 1fr); }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; }
  .footer__logo { grid-column: 1 / -1; }
  .footer__base { flex-wrap: wrap; gap: 1.5rem; margin-block-start: 3.5rem; }

  /* El formulario deja de ser rótulo|campo y pasa a rótulo sobre campo:
     la columna del rótulo era fija y estrangulaba al control. */
  .fila-campo,
  .fila-campo--doble {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
  }
  .campo__label { min-height: 0; margin-block-end: .25rem; }
  .form-card { padding: 3rem 2.25rem; }
}

/* ---------- Teléfono ---------- */
@media (max-width: 600px) {
  :root { --gutter: 1.5rem; }

  /* La píldora del navbar no da para logo + botón + hamburguesa: el CTA
     sale de la barra, pero sigue estando dentro del menú desplegable. */
  .navbar { inset-block-start: .375rem; }
  .navbar__pill {
    height: 6.5rem;
    gap: 1rem;
    padding-inline: 1.5rem 1.25rem;
    border-radius: 3.25rem;
  }
  .navbar.esta-compacta .navbar__pill { height: 5.75rem; }
  .navbar__cta { display: none; }
  /* El lockup va completo, como en escritorio. El ancho sale de achicar el
     logo: las dos líneas más la hamburguesa no entran de otro modo. */
  .navbar__logo { gap: .5rem; }
  .navbar__logo img { height: 2.5rem; }
  .navbar__logo .marca-texto b { font-size: .9375rem; }
  .navbar__logo .marca-texto span { font-size: .75rem; letter-spacing: .04em; }
  .navbar__menu-btn { width: 2.75rem; height: 2.75rem; margin-inline-start: auto; }
  .navbar__menu-btn span { width: 2.375rem; height: .1875rem; background: var(--azul); }

  .grid-productos { grid-template-columns: minmax(0, 1fr); }

  .hero--interior { height: 26rem; }
  .hero--interior .t-seccion { font-size: 2.75rem; }

  .footer { padding-block: 4.5rem 2rem; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
  .footer__base { justify-content: center; text-align: center; }
  .footer__redes { justify-content: center; width: 100%; }

  .form-card { padding: 2.25rem 1.5rem; }
  .form-card__pie { flex-direction: column; align-items: stretch; gap: 1.5rem; }
  .form-card__pie .btn { width: 100%; }

  /* Los segmentos de PRESENTACIÓN no entran en una fila */
  .opciones { flex-wrap: wrap; }
  .opciones label { flex: 1 1 auto; }

  .btn { font-size: 1.375rem; padding-inline: 2rem; }
  .whatsapp-fab { inset-block-end: 1.5rem; inset-inline-end: 1.5rem; }
}