/* ============================================================
   GasfiterHoy.cl — Hoja de estilos principal
   Paleta: Azul confianza + Naranja urgencia
   ============================================================ */

:root {
  /* Colores de marca */
  --azul-900: #062B4E;
  --azul-700: #0A4C86;
  --azul-600: #0A6EBD;
  --azul-500: #1183D6;
  --azul-100: #E7F1FB;
  --azul-50:  #F3F8FE;

  --naranja-600: #F26A00;
  --naranja-500: #FF7A00;
  --naranja-400: #FF9E2C;

  --verde-wa: #25D366;
  --verde-wa-dark: #1EBE59;

  --tinta: #0C2233;
  --gris-700: #3D4A57;
  --gris-500: #6B7885;
  --gris-300: #C9D2DB;
  --gris-100: #EEF2F6;
  --blanco: #FFFFFF;

  --exito: #1BA672;
  --sombra-sm: 0 2px 8px rgba(6, 43, 78, .08);
  --sombra-md: 0 10px 30px rgba(6, 43, 78, .12);
  --sombra-lg: 0 24px 60px rgba(6, 43, 78, .18);

  --radio: 16px;
  --radio-sm: 10px;
  --radio-pill: 999px;

  --ancho: 1180px;
  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --titulos: 'Poppins', var(--fuente);

  --trans: .35s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--tinta);
  background: var(--blanco);
  line-height: 1.65;
  font-size: 17px;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--azul-600); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--titulos); line-height: 1.15; color: var(--azul-900); margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.2rem; }

/* ---------- Utilidades ---------- */
.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.seccion { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.centrado { text-align: center; }
.eyebrow {
  display: inline-block; font-family: var(--titulos); font-weight: 600;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--naranja-600); margin-bottom: .6rem;
}
.lead { font-size: 1.15rem; color: var(--gris-700); max-width: 62ch; }
.centrado .lead { margin-inline: auto; }
.texto-naranja { color: var(--naranja-600); }
.texto-azul { color: var(--azul-600); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--titulos); font-weight: 600; font-size: 1rem;
  padding: .95rem 1.7rem; border-radius: var(--radio-pill);
  border: 2px solid transparent; cursor: pointer; transition: var(--trans);
  text-align: center; line-height: 1;
}
.btn svg { width: 1.2em; height: 1.2em; }
.btn-naranja { background: linear-gradient(135deg, var(--naranja-500), var(--naranja-600)); color: #fff; box-shadow: 0 8px 22px rgba(242,106,0,.35); }
.btn-naranja:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(242,106,0,.45); }
.btn-azul { background: linear-gradient(135deg, var(--azul-600), var(--azul-700)); color: #fff; box-shadow: 0 8px 22px rgba(10,76,134,.3); }
.btn-azul:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(10,76,134,.42); }
.btn-wa { background: linear-gradient(135deg, var(--verde-wa), var(--verde-wa-dark)); color: #fff; box-shadow: 0 8px 22px rgba(37,211,102,.35); }
.btn-wa:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(37,211,102,.45); }
.btn-fantasma { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); color: #fff; }
.btn-fantasma:hover { background: #fff; color: var(--azul-700); border-color: #fff; }
.btn-lg { padding: 1.15rem 2.2rem; font-size: 1.1rem; }
.btn-block { width: 100%; }

/* ============================================================
   HEADER
   ============================================================ */
.barra-superior {
  background: var(--azul-900); color: #cfe2f5; font-size: .85rem;
}
.barra-superior .contenedor { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem 0; flex-wrap: wrap; }
.barra-superior a { color: #fff; font-weight: 600; }
.barra-superior .bt-item { display: inline-flex; align-items: center; gap: .4rem; }
.barra-superior svg { width: 1rem; height: 1rem; fill: var(--naranja-400); }

.cabecera {
  position: sticky; top: 0; z-index: 900; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--gris-100);
  transition: box-shadow .3s;
}
.cabecera.compacta { box-shadow: var(--sombra-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .7rem 0; }
.logo { display: inline-flex; align-items: center; }
.logo img { height: 46px; width: auto; }
.menu { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.menu a { font-family: var(--titulos); font-weight: 500; color: var(--tinta); font-size: .98rem; position: relative; }
.menu a::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--naranja-500); transition: width .3s; }
.menu a:hover::after, .menu a.activo::after { width:100%; }
.nav-cta { display: flex; align-items: center; gap: .6rem; }
.menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .3rem; }
.menu-toggle span { display: block; width: 26px; height: 3px; background: var(--azul-800, #0A4C86); border-radius: 3px; margin: 5px 0; transition: .3s; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,158,44,.28), transparent 60%),
    linear-gradient(135deg, var(--azul-700) 0%, var(--azul-900) 60%, #04213c 100%);
}
.hero::before {
  content:""; position:absolute; inset:0;
  background-image: url("../assets/patron-tuberias.svg");
  background-size: 520px; opacity: .09; pointer-events:none;
}
.hero-grid {
  position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem;
  align-items: center; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem,6vw,5rem);
}
.hero .badge-urgencia {
  display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,122,0,.18);
  border: 1px solid rgba(255,158,44,.5); color: #ffd9a8; padding: .45rem .9rem;
  border-radius: var(--radio-pill); font-size: .85rem; font-weight: 600; margin-bottom: 1.2rem;
}
.hero .badge-urgencia .punto { width:9px; height:9px; border-radius:50%; background: var(--naranja-400); box-shadow: 0 0 0 0 rgba(255,158,44,.7); animation: latido 1.8s infinite; }
.hero h1 { color: #fff; }
.hero h1 .resalte { color: var(--naranja-400); }
.hero p.lead { color: #d7e6f6; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.hero-confianza { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.15); }
.hero-confianza .item { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: #cfe2f5; }
.hero-confianza svg { width: 1.4rem; height: 1.4rem; fill: var(--naranja-400); flex: 0 0 auto; }
.hero-visual { position: relative; }
.hero-visual img { width: 100%; height: auto; border-radius: 22px; box-shadow: var(--sombra-lg); filter: drop-shadow(0 24px 34px rgba(0,0,0,.28)); }
.hero-tarjeta {
  position: absolute; bottom: 6%; left: -4%; background: #fff; color: var(--tinta);
  border-radius: var(--radio); padding: .9rem 1.1rem; box-shadow: var(--sombra-lg);
  display: flex; align-items: center; gap: .7rem; max-width: 250px;
}
.hero-tarjeta .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--azul-100); display: grid; place-items: center; flex: 0 0 auto; }
.hero-tarjeta .ico svg { width: 24px; height: 24px; fill: var(--azul-600); }
.hero-tarjeta strong { display: block; font-size: 1.05rem; color: var(--azul-900); }
.hero-tarjeta span { font-size: .8rem; color: var(--gris-500); }

.ola { display:block; width:100%; height: auto; margin-top:-1px; }

/* ============================================================
   FRANJA DE CONFIANZA
   ============================================================ */
.franja-logos { background: var(--azul-50); border-bottom: 1px solid var(--gris-100); }
.franja-logos .contenedor { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 1.5rem 2rem; padding: 1.6rem 0; }
.franja-item { display: flex; align-items: center; gap: .7rem; font-family: var(--titulos); font-weight: 600; color: var(--azul-700); font-size: .98rem; }
.franja-item svg { width: 2rem; height: 2rem; fill: var(--naranja-500); flex: 0 0 auto; }
.franja-item span small { display:block; font-weight:400; font-size:.78rem; color: var(--gris-500); }

/* ============================================================
   SERVICIOS
   ============================================================ */
.grid-servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.tarjeta-servicio {
  background: #fff; border: 1px solid var(--gris-100); border-radius: var(--radio);
  padding: 2rem 1.6rem; transition: var(--trans); position: relative; overflow: hidden;
}
.tarjeta-servicio::after { content:""; position:absolute; left:0; top:0; height:4px; width:0; background: linear-gradient(90deg, var(--naranja-500), var(--naranja-400)); transition: width .35s; }
.tarjeta-servicio:hover { transform: translateY(-8px); box-shadow: var(--sombra-md); border-color: var(--azul-100); }
.tarjeta-servicio:hover::after { width:100%; }
.tarjeta-servicio.destacada { background: linear-gradient(160deg, var(--azul-700), var(--azul-900)); color:#fff; border-color: transparent; }
.tarjeta-servicio.destacada h3 { color:#fff; }
.tarjeta-servicio.destacada p { color:#d7e6f6; }
.tarjeta-servicio .icono {
  width: 64px; height: 64px; border-radius: 16px; background: var(--azul-100);
  display: grid; place-items: center; margin-bottom: 1.1rem;
}
.tarjeta-servicio.destacada .icono { background: rgba(255,255,255,.15); }
.tarjeta-servicio .icono svg { width: 34px; height: 34px; fill: var(--azul-600); }
.tarjeta-servicio.destacada .icono svg { fill: var(--naranja-400); }
.tarjeta-servicio h3 { margin-bottom: .5rem; }
.tarjeta-servicio p { font-size: .97rem; color: var(--gris-700); margin-bottom: 1rem; }
.tarjeta-servicio .link-mas { font-family: var(--titulos); font-weight:600; font-size:.92rem; color: var(--naranja-600); display:inline-flex; align-items:center; gap:.3rem; }
.tarjeta-servicio.destacada .link-mas { color: var(--naranja-400); }
.tarjeta-servicio .etiqueta { position:absolute; top:1rem; right:1rem; background: var(--naranja-500); color:#fff; font-size:.68rem; font-weight:700; padding:.25rem .6rem; border-radius: var(--radio-pill); letter-spacing:.04em; text-transform:uppercase; }

/* ============================================================
   POR QUÉ ELEGIRNOS
   ============================================================ */
.porque { background: var(--azul-900); color:#fff; position:relative; overflow:hidden; }
.porque::before { content:""; position:absolute; inset:0; background-image:url("../assets/patron-tuberias.svg"); background-size:480px; opacity:.06; }
.porque h2 { color:#fff; }
.porque .lead { color:#cfe2f5; }
.grid-porque { display:grid; grid-template-columns: repeat(4,1fr); gap:1.4rem; margin-top:2.5rem; position:relative; }
.beneficio { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius: var(--radio); padding:1.6rem 1.4rem; transition: var(--trans); }
.beneficio:hover { background: rgba(255,255,255,.1); transform: translateY(-6px); }
.beneficio .ico { width:56px; height:56px; border-radius:14px; background: linear-gradient(135deg, var(--naranja-500), var(--naranja-600)); display:grid; place-items:center; margin-bottom:1rem; }
.beneficio .ico svg { width:30px; height:30px; fill:#fff; }
.beneficio h3 { color:#fff; font-size:1.15rem; }
.beneficio p { color:#bcd3ea; font-size:.95rem; margin:0; }

/* ============================================================
   PROCESO
   ============================================================ */
.grid-proceso { display:grid; grid-template-columns: repeat(4,1fr); gap:1.4rem; margin-top:2.5rem; }
.paso { position:relative; padding:1.8rem 1.4rem; background:#fff; border:1px solid var(--gris-100); border-radius: var(--radio); text-align:center; }
.paso .num { width:52px; height:52px; margin:0 auto 1rem; border-radius:50%; background: linear-gradient(135deg,var(--azul-600),var(--azul-700)); color:#fff; font-family:var(--titulos); font-weight:700; font-size:1.4rem; display:grid; place-items:center; }
.paso h3 { font-size:1.1rem; }
.paso p { font-size:.93rem; color:var(--gris-700); margin:0; }

/* ============================================================
   DESTAPES / SECCIÓN DESTACADA
   ============================================================ */
.split { display:grid; grid-template-columns: 1fr 1fr; gap:3rem; align-items:center; }
.split .visual img { width: 100%; height: auto; border-radius: var(--radio); box-shadow: var(--sombra-md); }
.lista-check { list-style:none; padding:0; margin:1.5rem 0; }
.lista-check li { position:relative; padding-left:2rem; margin-bottom:.8rem; color:var(--gris-700); }
.lista-check li::before {
  content:""; position:absolute; left:0; top:2px; width:1.3rem; height:1.3rem;
  background: var(--azul-100) url("../assets/icons/check.svg") center/0.8rem no-repeat; border-radius:50%;
}

/* ============================================================
   ESTADÍSTICAS
   ============================================================ */
.stats { background: linear-gradient(135deg, var(--naranja-500), var(--naranja-600)); color:#fff; }
.grid-stats { display:grid; grid-template-columns: repeat(4,1fr); gap:1.5rem; text-align:center; }
.stat .cifra { font-family:var(--titulos); font-weight:800; font-size: clamp(2.2rem,5vw,3.2rem); line-height:1; }
.stat p { margin:.4rem 0 0; font-weight:500; opacity:.95; }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.grid-testi { display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
.testi { background:#fff; border:1px solid var(--gris-100); border-radius:var(--radio); padding:1.8rem; box-shadow: var(--sombra-sm); }
.testi .estrellas { color: #FFB100; font-size:1.05rem; letter-spacing:2px; margin-bottom:.7rem; }
.testi p { font-style:italic; color:var(--gris-700); }
.testi .autor { display:flex; align-items:center; gap:.7rem; margin-top:1rem; }
.testi .avatar { width:44px; height:44px; border-radius:50%; background: var(--azul-100); color:var(--azul-700); font-family:var(--titulos); font-weight:700; display:grid; place-items:center; }
.testi .autor strong { display:block; font-size:.95rem; color:var(--azul-900); }
.testi .autor span { font-size:.82rem; color:var(--gris-500); }

/* ============================================================
   ZONAS / COBERTURA
   ============================================================ */
.zonas-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:.7rem; margin-top:2rem; }
.zona-chip { background:#fff; border:1px solid var(--gris-100); border-radius:var(--radio-sm); padding:.7rem 1rem; font-size:.92rem; font-weight:500; color:var(--gris-700); display:flex; align-items:center; gap:.5rem; transition:var(--trans); }
.zona-chip:hover { border-color:var(--azul-500); color:var(--azul-700); transform: translateY(-3px); box-shadow: var(--sombra-sm); }
.zona-chip svg { width:1rem; height:1rem; fill:var(--naranja-500); flex:0 0 auto; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-lista { max-width: 820px; margin: 2.5rem auto 0; }
.faq-item { background:#fff; border:1px solid var(--gris-100); border-radius: var(--radio-sm); margin-bottom:.8rem; overflow:hidden; transition: box-shadow .3s; }
.faq-item[open] { box-shadow: var(--sombra-sm); border-color: var(--azul-100); }
.faq-item summary { cursor:pointer; padding:1.15rem 1.4rem; font-family:var(--titulos); font-weight:600; color:var(--azul-900); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:1.03rem; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-size:1.6rem; color:var(--naranja-500); transition: transform .3s; line-height:1; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-cuerpo { padding: 0 1.4rem 1.3rem; color:var(--gris-700); }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-banner { background: linear-gradient(135deg, var(--azul-700), var(--azul-900)); color:#fff; text-align:center; position:relative; overflow:hidden; }
.cta-banner::before { content:""; position:absolute; inset:0; background-image:url("../assets/patron-tuberias.svg"); background-size:440px; opacity:.08; }
.cta-banner h2 { color:#fff; position:relative; }
.cta-banner p { color:#cfe2f5; position:relative; }
.cta-banner .hero-acciones { justify-content:center; position:relative; }

/* ============================================================
   FORMULARIO
   ============================================================ */
.form-wrap { display:grid; grid-template-columns: .9fr 1.1fr; gap:3rem; align-items:start; }
.form-info h2 { margin-bottom:1rem; }
.form-info .contacto-directo { margin-top:1.8rem; display:grid; gap:1rem; }
.form-info .cd-item { display:flex; align-items:center; gap:.9rem; }
.form-info .cd-item .ico { width:48px; height:48px; border-radius:12px; background:var(--azul-100); display:grid; place-items:center; flex:0 0 auto; }
.form-info .cd-item .ico svg { width:24px; height:24px; fill:var(--azul-600); }
.form-info .cd-item strong { display:block; color:var(--azul-900); font-family:var(--titulos); }
.form-info .cd-item span { font-size:.9rem; color:var(--gris-500); }

.formulario { background:#fff; border:1px solid var(--gris-100); border-radius:var(--radio); padding:2rem; box-shadow: var(--sombra-md); }
.campo { margin-bottom:1.1rem; }
.campo label { display:block; font-family:var(--titulos); font-weight:600; font-size:.9rem; margin-bottom:.4rem; color:var(--azul-900); }
.campo input, .campo select, .campo textarea {
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--gris-300); border-radius:var(--radio-sm);
  font-family:var(--fuente); font-size:1rem; color:var(--tinta); background:var(--azul-50); transition: var(--trans);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline:none; border-color:var(--azul-500); background:#fff; box-shadow:0 0 0 4px rgba(17,131,214,.12); }
.campo textarea { resize:vertical; min-height:110px; }
.fila-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-nota { font-size:.82rem; color:var(--gris-500); margin-top:.8rem; text-align:center; }
.form-nota a { color:var(--azul-600); }

/* ============================================================
   FOOTER
   ============================================================ */
.pie { background: var(--azul-900); color:#a9c4dd; padding: 3.5rem 0 1.5rem; font-size:.94rem; }
.pie-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:2rem; }
.pie h4 { color:#fff; font-size:1.05rem; margin-bottom:1rem; }
.pie a { color:#a9c4dd; }
.pie a:hover { color:#fff; }
.pie ul { list-style:none; padding:0; margin:0; }
.pie ul li { margin-bottom:.5rem; }
.pie .logo-pie img { height:42px; margin-bottom:1rem; }
.pie .redes { display:flex; gap:.6rem; margin-top:1rem; }
.pie .redes a { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:var(--trans); }
.pie .redes a:hover { background:var(--naranja-500); }
.pie .redes svg { width:20px; height:20px; fill:#fff; }
.pie-contacto li { display:flex; align-items:flex-start; gap:.6rem; }
.pie-contacto svg { width:1.1rem; height:1.1rem; fill:var(--naranja-400); margin-top:.25rem; flex:0 0 auto; }
.pie-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:2.5rem; padding-top:1.5rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.85rem; color:#7d9bb8; }

/* ============================================================
   BOTONES FLOTANTES
   ============================================================ */
.flotantes { position:fixed; right:18px; bottom:18px; z-index:950; display:flex; flex-direction:column; gap:.7rem; }
.flotante { width:60px; height:60px; border-radius:50%; display:grid; place-items:center; box-shadow: var(--sombra-md); transition: var(--trans); position:relative; }
.flotante svg { width:30px; height:30px; fill:#fff; }
.flotante:hover { transform: scale(1.08); }
.flotante.wa { background: var(--verde-wa); }
.flotante.call { background: linear-gradient(135deg,var(--azul-600),var(--azul-700)); }
.flotante::after {
  content: attr(data-tip); position:absolute; right:72px; top:50%; transform:translateY(-50%);
  background:var(--azul-900); color:#fff; padding:.45rem .8rem; border-radius:8px; font-size:.82rem;
  white-space:nowrap; opacity:0; pointer-events:none; transition:.25s;
}
.flotante:hover::after { opacity:1; }
.flotante.wa::before { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.6); animation: latido 2s infinite; }

/* Barra móvil de acciones */
.barra-movil { display:none; position:fixed; bottom:0; left:0; right:0; z-index:940; background:#fff; box-shadow:0 -4px 20px rgba(6,43,78,.12); }
.barra-movil a { flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.6rem; font-family:var(--titulos); font-weight:600; font-size:.78rem; color:#fff; }
.barra-movil a svg { width:22px; height:22px; fill:#fff; }
.barra-movil .m-wa { background: var(--verde-wa); }
.barra-movil .m-call { background: linear-gradient(135deg,var(--azul-600),var(--azul-700)); }
.barra-movil .m-cot { background: linear-gradient(135deg,var(--naranja-500),var(--naranja-600)); }

/* ============================================================
   ANIMACIONES
   ============================================================ */
@keyframes latido { 0%{box-shadow:0 0 0 0 rgba(255,158,44,.6);} 70%{box-shadow:0 0 0 14px rgba(255,158,44,0);} 100%{box-shadow:0 0 0 0 rgba(255,158,44,0);} }
@keyframes flotar { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }

.reveal { opacity:0; transform: translateY(34px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.visible { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; }
.reveal.d2 { transition-delay:.16s; }
.reveal.d3 { transition-delay:.24s; }
.reveal.d4 { transition-delay:.32s; }
.flotar-anim { animation: flotar 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
}

/* ============================================================
   BANNER DE COOKIES
   ============================================================ */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 980;
  max-width: 520px; margin-inline: auto;
  background: #fff; border: 1px solid var(--gris-100); border-radius: var(--radio);
  box-shadow: var(--sombra-lg); padding: 1.3rem 1.4rem;
  transform: translateY(160%); transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner h4 { font-size: 1.05rem; margin-bottom: .4rem; }
.cookie-banner p { font-size: .9rem; color: var(--gris-700); margin: 0 0 1rem; }
.cookie-banner p a { color: var(--azul-600); text-decoration: underline; }
.cookie-acciones { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-acciones .btn { padding: .7rem 1.2rem; font-size: .92rem; flex: 1; min-width: 130px; }
.btn-gris { background: var(--gris-100); color: var(--gris-700); }
.btn-gris:hover { background: var(--gris-300); }
@media (max-width: 720px) {
  .cookie-banner { left: 8px; right: 8px; bottom: 70px; }
}

/* Migas de pan */
.migas { font-size:.85rem; color:var(--gris-500); padding:1rem 0; }
.migas a { color:var(--azul-600); }
.migas span { color:var(--gris-300); margin:0 .4rem; }

/* Páginas legales / texto largo */
.prosa { max-width: 800px; }
.prosa h2 { margin-top: 2.2rem; font-size: 1.5rem; }
.prosa h3 { margin-top: 1.6rem; font-size: 1.15rem; color: var(--azul-700); }
.prosa p, .prosa li { color: var(--gris-700); }
.prosa ul { padding-left: 1.3rem; }
.prosa li { margin-bottom: .4rem; }
.prosa .actualizado { font-size: .9rem; color: var(--gris-500); font-style: italic; }
.prosa .aviso { background: var(--azul-50); border-left: 4px solid var(--azul-500); padding: 1rem 1.2rem; border-radius: 8px; margin: 1.5rem 0; }

/* Encabezado interno */
.cabeza-pagina { background: linear-gradient(135deg,var(--azul-700),var(--azul-900)); color:#fff; position:relative; overflow:hidden; padding: clamp(2.5rem,5vw,4rem) 0; }
.cabeza-pagina::before { content:""; position:absolute; inset:0; background-image:url("../assets/patron-tuberias.svg"); background-size:460px; opacity:.08; }
.cabeza-pagina h1 { color:#fff; position:relative; }
.cabeza-pagina p { color:#cfe2f5; position:relative; max-width:60ch; }
.cabeza-pagina .migas { color:#9fc0e0; position:relative; }
.cabeza-pagina .migas a { color:#cfe2f5; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; text-align:center; }
  .hero-visual { max-width:440px; margin:0 auto; order:-1; }
  .hero-acciones, .hero-confianza { justify-content:center; }
  .hero-confianza { border-top-color: rgba(255,255,255,.15); }
  .grid-servicios, .grid-porque, .grid-proceso, .grid-testi { grid-template-columns: 1fr 1fr; }
  .grid-stats { grid-template-columns: 1fr 1fr; gap:2rem 1rem; }
  .split, .form-wrap { grid-template-columns: 1fr; gap:2rem; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .menu, .nav-cta .btn { display: none; }
  .menu-toggle { display:block; }
  .menu.abierto {
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:#fff; padding:1.2rem; gap:1rem; box-shadow: var(--sombra-md); border-top:1px solid var(--gris-100);
  }
  .menu.abierto a { padding:.4rem 0; }
  .nav { position:relative; }
  .grid-servicios, .grid-porque, .grid-proceso, .grid-testi { grid-template-columns: 1fr; }
  .fila-2 { grid-template-columns: 1fr; }
  .pie-grid { grid-template-columns: 1fr; }
  .flotantes { display:none; }
  .barra-movil { display:flex; }
  body { padding-bottom: 64px; }
  .barra-superior { display:none; }
}