/*
 * Estilos que solo usa la portada: presentación, video, trabajo autorizado,
 * galería, antes y después, y el llamado urgente.
 * Creado el 2026-10-15 para Plomería Domínguez.
 */

/* ---------------------------------------------------------- Presentación */
.hero {
  --hero-alto: clamp(700px, 90dvh, 860px);
  position: relative;
  isolation: isolate;
  min-height: var(--hero-alto);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--azul-prof);
  color: var(--tenue);
}

/* Fondo: foto de taller con velo azul, luz amarilla de acento y grano fino. */
.hero-bg {
  position: absolute;
  inset: -60px 0;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 82% 18%, rgba(240, 165, 0, 0.20), transparent 60%),
    radial-gradient(700px 480px at 12% 88%, rgba(40, 110, 190, 0.35), transparent 65%),
    linear-gradient(100deg, rgba(8, 24, 46, 0.94) 0%, rgba(10, 35, 64, 0.84) 45%, rgba(10, 35, 64, 0.70) 100%),
    url('../img/hero-fondo.webp') center / cover no-repeat;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr 0.95fr;
  gap: clamp(16px, 2.6vw, 40px);
  align-items: center;
  min-height: var(--hero-alto);
  padding-block: calc(88px + clamp(24px, 4vw, 48px)) clamp(36px, 5vw, 64px);
}

/* Persona: recortada, pegada al borde de abajo, entra desde abajo. */
.hero-persona {
  position: relative;
  align-self: stretch;
  min-height: 420px;
}
.hero-persona::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: min(110%, 440px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(240, 165, 0, 0.32), rgba(240, 165, 0, 0) 68%);
  box-shadow: inset 0 0 0 1px rgba(255, 194, 61, 0.28), 0 0 0 26px rgba(255, 194, 61, 0.05);
}
.hero-persona img {
  position: absolute;
  left: 50%;
  bottom: calc(-1 * clamp(36px, 5vw, 64px));
  width: 112%;
  height: auto;
  max-width: none;
  transform: translateX(-50%);
  filter: drop-shadow(-10px 14px 28px rgba(2, 10, 24, 0.55));
}

/* Texto del centro */
.hero-centro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-slider { display: grid; width: 100%; }
.hero-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0s;
}
.hero-slide > * { opacity: 0; transform: translateY(24px); }
.hero-slide.is-active > * { animation: heroTexto 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hero-slide.is-active > :nth-child(2) { animation-delay: 0.08s; }
.hero-slide.is-active > :nth-child(3) { animation-delay: 0.16s; }
.hero-slide.is-active > :nth-child(4) { animation-delay: 0.26s; }

.hero-titulo {
  margin: 0 0 16px;
  color: var(--blanco);
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: 1.16;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(2, 10, 24, 0.45);
}
.hero-parrafo { max-width: 46ch; margin: 0; font-size: var(--fs-sub); color: #d3e2ef; }
.hero-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.hero-botones .btn { min-width: 210px; }
.hero-slide .btn-solido { box-shadow: 0 10px 26px -8px rgba(240, 165, 0, 0.65); }

/* Puntos del slider: el activo lleva anillo */
.hero-puntos { display: flex; align-items: center; gap: 6px; margin-top: 30px; }
.hero-punto {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.hero-punto::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--amarillo);
  transition: transform 0.3s ease;
}
.hero-punto::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--amarillo);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-punto.is-active::after { opacity: 1; transform: none; }
.hero-punto:hover::before { transform: translate(-50%, -50%) scale(1.35); }
.hero-punto:focus-visible { outline: 2px solid var(--blanco); outline-offset: 2px; }

.hero-sellos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(155, 184, 208, 0.22);
  font-size: var(--fs-label);
  color: #d3e2ef;
}
.hero-sellos li { display: inline-flex; align-items: center; gap: 8px; }
.hero-sellos .ico { width: 18px; height: 18px; color: var(--amarillo); }

/* Tarjeta del formulario: vidrio esmerilado sobre la foto */
.hero-form {
  position: relative;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--radio);
  background: linear-gradient(160deg, rgba(24, 78, 140, 0.78), rgba(10, 35, 64, 0.86));
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 34px 60px -24px rgba(2, 10, 24, 0.75),
    0 8px 20px -8px rgba(2, 10, 24, 0.45);
}
.hero-form::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radio) var(--radio) 0 0;
  background: linear-gradient(90deg, var(--amarillo), var(--amarillo-2), transparent 85%);
}
.hero-form-titulo { margin: 0 0 6px; color: var(--blanco); font-size: var(--fs-title); font-weight: var(--fw-bold); }
.hero-form-texto { margin: 0 0 14px; color: #d3e2ef; font-size: var(--fs-label); }

.hero-form .cotiza-form {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0;
  background: none;
  box-shadow: none;
}
.hero-form .field label { color: var(--blanco); }
.hero-form .field .req { color: var(--amarillo-2); }
.hero-form .field .opc { color: var(--tenue); }
.hero-form .field input,
.hero-form .field select,
.hero-form .field textarea {
  padding: 10px 14px;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: var(--blanco);
}
.hero-form .field select option { color: var(--tinta); background: var(--blanco); }
.hero-form .field { gap: 4px; }
.hero-form .field textarea { height: 72px; min-height: 0; resize: none; }
.hero-form .field input:hover,
.hero-form .field select:hover,
.hero-form .field textarea:hover { border-color: rgba(255, 255, 255, 0.4); }
.hero-form .field input:focus,
.hero-form .field select:focus,
.hero-form .field textarea:focus {
  border-color: var(--amarillo);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(240, 165, 0, 0.28);
}
.hero-form .field input.is-error,
.hero-form .field select.is-error,
.hero-form .field textarea.is-error { border-color: #ff8f8f; }
.hero-form .form-aviso.is-error { color: #ffb4b4; }
.hero-form .form-aviso.is-ok { color: #7ff0a8; }
.hero-form .form-nota { color: var(--tenue); }
.hero-form .form-nota { display: none; }
.hero-form .btn-solido:active { transform: translateY(1px) scale(0.98); }

/* Animaciones de entrada (solo transform y opacity) */
@keyframes heroPop {
  from { transform: translateX(-50%) translateY(70px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
@keyframes heroTexto {
  to { opacity: 1; transform: none; }
}
@keyframes heroEntra {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFondo {
  to { transform: translateY(70px); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-persona img { animation: heroPop 0.95s cubic-bezier(0.22, 1.2, 0.36, 1) 0.15s both; }
  .hero-persona::before { animation: heroEntra 1.1s ease 0.05s both; }
  .hero-form { animation: heroEntra 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-bg { animation: heroFondo linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.is-active { transition: none; }
  .hero-slide > *, .hero-slide.is-active > * { opacity: 1; transform: none; animation: none; }
}

/* -------------------------------------------------- Sobre nosotros (carrusel) */
.sobre {
  position: relative;
  padding: clamp(56px, 7vw, 104px) 0 clamp(80px, 9vw, 132px);
  background: var(--azul-claro);
  border-radius: 0 0 50% 50% / 0 0 clamp(36px, 6vw, 90px) clamp(36px, 6vw, 90px);
}
.sobre .eyebrow { color: var(--azul); }

.carrusel-pista {
  --por-vista: 3;
  --hueco: 28px;
  display: flex;
  gap: var(--hueco);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding-block: 6px;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 4px; border-radius: var(--radio); }
.carrusel-pista.is-arrastrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.carrusel-pista.is-arrastrando * { pointer-events: none; }

.sobre-card {
  flex: 0 0 calc((100% - (var(--hueco) * (var(--por-vista) - 1))) / var(--por-vista));
  scroll-snap-align: start;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 34px 30px;
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: 0 1px 0 rgba(10, 35, 64, 0.04), 0 14px 30px -22px rgba(10, 35, 64, 0.35);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.sobre-card > .ico { width: 48px; height: 48px; flex: 0 0 auto; color: var(--tinta); transition: color 0.35s ease; }
.sobre-card h3 { margin: 0 0 8px; font-size: var(--fs-sub); font-weight: var(--fw-bold); color: var(--tinta); transition: color 0.35s ease; }
.sobre-card p { margin: 0; font-size: var(--fs-label); transition: color 0.35s ease; }

/* Al pasar el mouse la tarjeta se vuelve azul y todo su contenido, blanco. */
@media (hover: hover) {
  .sobre-card:hover { background: var(--azul-medio); box-shadow: 0 22px 36px -20px rgba(31, 98, 189, 0.7); }
  .sobre-card:hover > .ico,
  .sobre-card:hover h3,
  .sobre-card:hover p { color: var(--blanco); }
}

.carrusel-puntos { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 28px; }
.carrusel-punto {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.carrusel-punto::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--azul-medio);
  transition: transform 0.3s ease;
}
.carrusel-punto::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--azul-medio);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.carrusel-punto.is-active::after { opacity: 1; transform: none; }
.carrusel-punto:hover::before { transform: translate(-50%, -50%) scale(1.35); }
.carrusel-punto:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .carrusel-pista { scroll-behavior: auto; }
}

/* ------------------------------------------------ Servicios (fondo en domo) */
.servicios-domo {
  position: relative;
  margin-top: calc(-1 * clamp(24px, 4vw, 60px));
  padding: clamp(96px, 11vw, 160px) 0 clamp(60px, 7vw, 100px);
  background: var(--azul-claro);
  border-radius: 50% 50% 0 0 / clamp(48px, 7vw, 110px) clamp(48px, 7vw, 110px) 0 0;
}
.servicios-domo .eyebrow { color: var(--azul); }

.sv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(34px, 4vw, 56px) clamp(22px, 3vw, 44px); }
.sv-card { display: flex; flex-direction: column; align-items: center; gap: 22px; color: var(--tinta); }
.sv-caja {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: calc(var(--radio) + 6px);
  background: var(--blanco);
  box-shadow: 0 1px 0 rgba(10, 35, 64, 0.04), 0 18px 34px -26px rgba(10, 35, 64, 0.35);
  transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.sv-caja::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(31, 98, 189, 0.78), rgba(10, 35, 64, 0.82));
  opacity: 0;
  transition: opacity 0.45s ease;
}
.sv-icono { position: relative; z-index: 2; display: grid; place-items: center; color: var(--tinta); transition: color 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.sv-icono .ico { width: clamp(52px, 5vw, 72px); height: clamp(52px, 5vw, 72px); }
.sv-nombre { max-width: 22ch; font-size: var(--fs-sub); font-weight: var(--fw-semi); line-height: 1.3; text-align: center; text-wrap: balance; transition: color 0.3s ease; }

@media (hover: hover) {
  .sv-card:hover .sv-caja,
  .sv-card:focus-visible .sv-caja { box-shadow: 0 26px 40px -24px rgba(31, 98, 189, 0.75); transform: translateY(-4px); }
  .sv-card:hover .sv-foto,
  .sv-card:focus-visible .sv-foto { opacity: 1; transform: scale(1); }
  .sv-card:hover .sv-caja::after,
  .sv-card:focus-visible .sv-caja::after { opacity: 1; }
  .sv-card:hover .sv-icono,
  .sv-card:focus-visible .sv-icono { color: var(--blanco); transform: scale(1.1); }
  .sv-card:hover .sv-nombre { color: var(--azul-medio); }
}
.sv-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.sv-botones .btn { min-width: 210px; padding: 14px 30px; border-radius: 999px; }
.sv-botones .btn-azul { background: var(--azul-medio); border-color: var(--azul-medio); box-shadow: 0 14px 24px -14px rgba(31, 98, 189, 0.8); }
.sv-botones .btn-azul:hover { background: var(--azul-prof); border-color: var(--azul-prof); }
.sv-card:focus-visible { outline: 2px solid var(--azul-medio); outline-offset: 6px; border-radius: var(--radio); }

@media (prefers-reduced-motion: reduce) {
  .sv-caja, .sv-foto, .sv-icono { transition: none; }
  .sv-card:hover .sv-caja, .sv-card:hover .sv-icono { transform: none; }
}

/* ----------------------------------------------------------------- Video */
.video-banda {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 7vw, 110px) 0 clamp(56px, 6vw, 88px);
  background: var(--azul-medio);
  color: var(--blanco);
  text-align: center;
}
.video-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(31, 98, 189, 0.90), rgba(31, 98, 189, 0.80) 55%, rgba(24, 78, 150, 0.92)),
    url('../img/video-fondo.webp') center / cover no-repeat;
}
.video-centro { display: flex; flex-direction: column; align-items: center; }
.video-banda .eyebrow { color: var(--blanco); margin-top: 30px; }
.video-banda h2 { max-width: 20ch; margin: 0 0 18px; color: var(--blanco); font-size: var(--fs-hero); line-height: 1.16; text-wrap: balance; }
.video-parrafo { max-width: 62ch; margin: 0; font-size: var(--fs-body); color: var(--blanco); }
.nota-video { display: block; margin-top: 6px; font-size: var(--fs-label); opacity: 0.85; }

/* Botón de reproducir: amarillo, con un aro que late para invitar al clic. */
.video-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background: var(--amarillo-2);
  color: var(--azul-prof);
  box-shadow: 0 22px 40px -18px rgba(2, 10, 24, 0.7);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background var(--transicion);
}
.video-play .ico { width: 44px; height: 44px; margin-left: 4px; }
.video-play::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--amarillo-2);
  opacity: 0;
}
.video-play:hover { transform: scale(1.08); background: var(--blanco); }
.video-play:focus-visible { outline: 3px solid var(--blanco); outline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .video-play::before { animation: videoAro 2.4s ease-out infinite; }
}
@keyframes videoAro {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.7); }
}

.video-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.video-botones .btn { min-width: 190px; padding: 14px 30px; border-radius: 999px; }
.btn-oscuro { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.btn-oscuro:hover { background: var(--amarillo); border-color: var(--amarillo); color: var(--azul-prof); }
.btn-claro { background: var(--blanco); border-color: var(--blanco); color: var(--tinta); }
.btn-claro:hover { background: var(--amarillo); border-color: var(--amarillo); color: var(--azul-prof); }

/* Marcas de herramienta: una sola banda que corre sin parar y se pausa al pasar el mouse. */
.marcas-titulo { margin: clamp(44px, 5vw, 70px) 0 24px; font-size: var(--fs-label); font-weight: var(--fw-semi); color: var(--blanco); }
.marcas {
  display: flex;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marcas-pista {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(44px, 5vw, 76px);
  min-width: 100%;
  padding-right: clamp(44px, 5vw, 76px);
}
.marcas-pista img { height: clamp(30px, 3.2vw, 44px); width: auto; max-width: none; opacity: 0.92; }
@media (prefers-reduced-motion: no-preference) {
  .marcas-pista { animation: marcas 42s linear infinite; }
  .marcas:hover .marcas-pista { animation-play-state: paused; }
}
@keyframes marcas { to { transform: translateX(-100%); } }

/* Reproductor emergente */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 12, 26, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: modalEntra 0.3s ease both;
}
.video-modal-caja { position: relative; width: min(1000px, 100%); aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: #000; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8); }
.video-modal iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal-cerrar { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--blanco); color: var(--tinta); font-size: var(--fs-title); line-height: 1; cursor: pointer; }
.video-modal-cerrar:hover { background: var(--amarillo); }
@keyframes modalEntra { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------- Trabajo autorizado y láser */
.detalle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 40px); }
.detalle {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra-suave);
  overflow: hidden;
}
.detalle-foto { overflow: hidden; line-height: 0; }
.detalle img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) { .detalle:hover img { transform: scale(1.04); } }
.detalle-grid + * , .section-head h2 { text-wrap: balance; }
.detalle-cuerpo { padding: 24px 24px 28px; }
.detalle-cuerpo h3 { margin-bottom: 10px; font-size: var(--fs-title); }
.detalle-cuerpo p { margin: 0; }

/* --------------------------------------------------------------- Galería */
.nota-provisional {
  display: inline-block;
  margin: 0;
  padding: 8px 14px;
  border: 1px dashed var(--amarillo);
  border-radius: var(--radio-sm);
  background: rgba(240, 165, 0, 0.10);
  color: var(--texto);
  font-size: var(--fs-label);
}

/* -------------------------------------------------------- Antes/después */
.comparador {
  position: relative;
  margin: 0 auto;
  border-radius: calc(var(--radio) + 6px);
  overflow: hidden;
  box-shadow: 0 40px 70px -40px rgba(10, 35, 64, 0.6), 0 10px 24px -12px rgba(10, 35, 64, 0.3);
  aspect-ratio: 16 / 9;
  user-select: none;
}
.comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comp-capa { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.comp-capa img { width: 100vw; max-width: none; }

.comp-rango {
  position: absolute;
  inset: auto 0 0 0;
  top: 50%;
  left: 0;
  width: 100%;
  height: 44px;
  margin: 0;
  transform: translateY(-50%);
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: ew-resize;
  z-index: 3;
}
.comp-rango::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  border: 3px solid var(--blanco);
  border-radius: 50%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%230a2340' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7l-5 5 5 5'/><path d='M16 7l5 5-5 5'/></svg>") center / 26px no-repeat, var(--amarillo);
  box-shadow: 0 8px 18px rgba(2, 10, 24, 0.45);
  cursor: ew-resize;
}
.comp-rango::-moz-range-thumb {
  width: 44px;
  height: 44px;
  border: 3px solid var(--blanco);
  border-radius: 50%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%230a2340' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7l-5 5 5 5'/><path d='M16 7l5 5-5 5'/></svg>") center / 26px no-repeat, var(--amarillo);
  box-shadow: 0 8px 18px rgba(2, 10, 24, 0.45);
  cursor: ew-resize;
}
.comp-linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--blanco);
  box-shadow: 0 0 14px rgba(2, 10, 24, 0.5);
  pointer-events: none;
  z-index: 2;
}
.comp-etiqueta {
  position: absolute;
  top: 14px;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--rojo);
  color: var(--blanco);
  box-shadow: 0 8px 16px -8px rgba(2, 10, 24, 0.6);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  pointer-events: none;
  z-index: 2;
}
.comp-etiqueta--antes { left: 14px; }
.comp-etiqueta--despues { right: 14px; background: var(--azul-medio); }

/* -------------------------------------------------------- Llamado urgente */
.urgente {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 5vw, 80px) 0 0;
  background: linear-gradient(120deg, var(--amarillo-2) 0%, var(--amarillo) 55%, #e09400 100%);
  color: var(--azul-prof);
}
.urgente::before {
  content: '';
  position: absolute;
  left: max(0px, calc(50% - 672px - 90px));
  bottom: -35%;
  width: clamp(380px, 42vw, 620px);
  aspect-ratio: 1;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(10, 35, 64, 0.20), rgba(10, 35, 64, 0.05) 70%);
}
.urgente::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.08;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.urgente-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr 0.9fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  min-height: clamp(380px, 34vw, 480px);
}
.urgente-figura { align-self: end; display: flex; justify-content: flex-start; line-height: 0; }
.urgente-figura img {
  width: auto;
  height: clamp(340px, 33vw, 460px);
  max-width: none;
  filter: drop-shadow(14px 18px 22px rgba(10, 35, 64, 0.35));
}
.urgente-texto { padding-bottom: clamp(40px, 5vw, 80px); }
.urgente-texto h2 { margin: 0 0 14px; color: var(--azul-prof); font-size: var(--fs-hero); font-weight: var(--fw-bold); line-height: 1.16; text-wrap: balance; }
.urgente-texto p { max-width: 52ch; }
.urgente-acciones { display: grid; gap: 14px; padding-bottom: clamp(40px, 5vw, 80px); }
.urgente-acciones .btn { width: 100%; }
.urgente .eyebrow { color: var(--rojo); }
.urgente .btn-solido { background: var(--azul-prof); border-color: var(--azul-prof); color: var(--blanco); }
.urgente .btn-solido:hover { background: var(--azul-medio); border-color: var(--azul-medio); color: var(--blanco); }
.urgente .btn-linea { border-color: var(--azul-prof); color: var(--azul-prof); }
.urgente .btn-linea:hover { background: var(--azul-medio); border-color: var(--azul-medio); color: var(--blanco); }

/* ----------------------------------------- La empresa (bloque tipo Mezan) */
.empresa {
  position: relative;
  padding: clamp(56px, 7vw, 112px) 0 clamp(60px, 7vw, 108px);
  overflow: hidden;
  background: var(--blanco);
}

/* El fondo blanco lleva un dibujo de plomería muy tenue, como el de la referencia. */
.empresa-fondo {
  position: absolute;
  inset: 0;
  background: url('../img/fondo-lineas.webp') center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.34;
  pointer-events: none;
}
/* Velo: el dibujo se aclara del lado del texto y se queda detrás del collage. */
.empresa-fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.90) 40%,
    rgba(255, 255, 255, 0.55) 58%,
    rgba(255, 255, 255, 0.18) 100%);
}

.empresa-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: clamp(32px, 3.6vw, 56px);
}

.empresa-texto { max-width: 680px; }
.empresa .eyebrow { color: var(--azul-medio); }
.empresa h2 { font-size: var(--fs-hero); line-height: 1.18; margin-bottom: 18px; }
.empresa-intro { max-width: 54ch; margin-bottom: 26px; }

.empresa-lista { display: grid; gap: 13px; margin-bottom: 30px; }
.empresa-lista li { position: relative; padding-left: 26px; font-size: var(--fs-body); }
.empresa-lista li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amarillo);
}

/* Firma: la mascota del logotipo en redondo, la rúbrica y el nombre. */
.empresa-firma {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--linea);
}
.firma-foto {
  flex: 0 0 auto;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blanco);
  box-shadow: 0 0 0 3px var(--blanco), 0 0 0 4px var(--linea);
}
.firma-foto img { width: 100%; height: 100%; object-fit: cover; }
.firma-datos { display: flex; flex-direction: column; }
.firma-rubrica { width: clamp(140px, 16vw, 195px); height: auto; margin-bottom: 2px; }
.firma-nombre { font-size: var(--fs-sub); font-weight: var(--fw-bold); color: var(--tinta); line-height: 1.2; }
.firma-puesto {
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto);
}

/* Botón y datos de contacto, en una sola fila. */
.empresa-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.empresa-dato { display: inline-flex; align-items: center; gap: 12px; color: var(--tinta); }
.dato-aro {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--azul-medio);
  border-radius: 50%;
  color: var(--azul-medio);
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.dato-aro .ico { width: 24px; height: 24px; }
.empresa .btn-pildora { padding: 14px 28px; border-radius: 999px; }
.dato-txt { display: flex; flex-direction: column; line-height: 1.35; }
.dato-txt small { font-size: var(--fs-label); color: var(--texto); }
.dato-txt strong { font-size: var(--fs-body); font-weight: var(--fw-semi); color: var(--tinta); }
.dato-txt .mail-obf { font-size: var(--fs-label); font-weight: var(--fw-semi); color: var(--tinta); }
.empresa-dato:hover .dato-aro { background: var(--azul-medio); border-color: var(--azul-medio); color: var(--blanco); }
.empresa-dato:hover .dato-txt strong,
.empresa-dato:hover .dato-txt .mail-obf { color: var(--azul-medio); }

/* Collage de fotografías y tarjetas de datos (geometría medida del demo, caja de 760x642). */
.empresa-collage { position: relative; aspect-ratio: 760 / 642; }

.obra {
  position: absolute;
  overflow: hidden;
  border-radius: calc(var(--radio) + 4px);
  background: var(--blanco);
  box-shadow: 0 30px 50px -30px rgba(10, 35, 64, 0.55), 0 8px 18px -10px rgba(10, 35, 64, 0.25);
}
.obra img { width: 100%; height: 100%; object-fit: cover; }
.obra-1 { left: 34%; top: 0; width: 59%; aspect-ratio: 4 / 3; }
/* La foto del medio muerde a la grande con un borde blanco, como en el demo. */
/* Alta: baja por debajo de la tarjeta azul hasta el pie del collage. */
.obra-2 { left: 0; top: 29%; width: 52%; height: 70.5%; border: 10px solid var(--blanco); z-index: 2; }
.obra-2 img { object-position: 66% 50%; }
.obra-3 { left: 54%; top: 55%; width: 46%; aspect-ratio: 5 / 4; }

.empresa-card {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 18px;
  border-radius: calc(var(--radio) + 4px);
  text-align: center;
  box-shadow: 0 26px 40px -26px rgba(10, 35, 64, 0.65);
}
.empresa-card--amarilla { left: 6%; top: 0; width: 25%; min-height: 23%; background: var(--amarillo); color: var(--azul-prof); }
.empresa-card--azul { left: 23%; top: 72%; width: 28%; min-height: 25%; background: var(--azul-medio); color: var(--blanco); }
.empresa-num { font-size: var(--fs-hero); font-weight: var(--fw-bold); line-height: 1; }
.empresa-lbl { font-size: var(--fs-body); font-weight: var(--fw-semi); line-height: 1.25; }

@media (max-width: 1000px) {
  .empresa-grid { grid-template-columns: 1fr; gap: 40px; }
  .empresa-texto { max-width: none; }
  .empresa-collage { width: 100%; max-width: 640px; margin-inline: auto; }
}

@media (max-width: 700px) {
  /* El dibujo se ancla arriba: con "cover" en una sección alta quedaría muy ampliado. */
  .empresa-fondo {
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0.4;
  }
  .empresa-fondo::after {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.86) 55%,
      rgba(255, 255, 255, 0.55) 100%);
  }
  .empresa-pie { gap: 14px 20px; }
  .empresa-pie .btn { width: 100%; }
  .obra-2 { border-width: 6px; }
  .empresa-card { padding: 10px 8px; gap: 3px; }
  .empresa-num { font-size: var(--fs-num); }
  .empresa-lbl { font-size: var(--fs-label); }
}

/* ------------------------------------------------------------- Adaptación */
@media (max-width: 1000px) {
  .sv-grid { grid-template-columns: repeat(3, 1fr); }
  .carrusel-pista { --por-vista: 2; }
  .hero-grid { grid-template-columns: 1.2fr 1fr; }
  .hero-persona { display: none; }
  .detalle-grid { grid-template-columns: 1fr; }
  .urgente-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; min-height: 0; }
  .urgente-texto { padding-bottom: 0; }
  .urgente-acciones { width: min(360px, 100%); padding-bottom: 28px; }
  .urgente-figura { order: 3; justify-content: center; }
  .urgente-figura img { height: 320px; }
  .urgente::before { left: 50%; transform: translateX(-50%); }
}

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 700px) {
  .sv-grid { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  .sv-nombre { font-size: var(--fs-body); }
  .sv-botones .btn { width: 100%; }
  .video-botones .btn { width: 100%; }
  .carrusel-pista { --por-vista: 1; --hueco: 16px; }
  .hero-botones .btn { width: 100%; min-width: 0; }
  .comp-etiqueta { top: 10px; padding: 4px 10px; }
}