/* Marine and RV Pumping To Go — estilos del sitio
   Desarrollado por Blue Ark Solutions - https://bluearksolutions.com */

:root {
  --azul: #0072ff;
  --azul-osc: #0051b6;
  --verde: #52cc30;
  --texto: #050404;
  --gris: #faf8f9;
  --pie: #405e84;
  --f-montserrat: "Montserrat", sans-serif;
  --f-opensans: "Open Sans", sans-serif;
  --f-lato: "Lato", sans-serif;
  --f-poppins: "Poppins", sans-serif;
  --f-roboto: "Roboto", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.5 var(--f-montserrat); color: var(--texto); background: #fff; overflow-x: hidden; }
img:not(.leaflet-container img), svg:not(.leaflet-container svg) { max-width: 100%; height: auto; }
a { color: var(--azul); }
p { margin: 0 0 .9em; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.2; }
figure { margin: 0; }
button { font: inherit; }
.saltar { position: absolute; left: -9999px; top: 0; background: #fff; padding: 10px; z-index: 100; }
.saltar:focus { left: 10px; }

/* ---------------- barra superior + bienvenida ---------------- */
.barra-tel { background: var(--azul); color: #fff; text-align: center; padding: 7px 10px 4px; }
.barra-tel__num { display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; font: 900 23px/1.2 var(--f-montserrat); padding: 7px 0; }
.barra-tel__num svg { width: 18px; fill: #fff; height: 32px; }
.barra-tel p { margin: 0; font: 900 18px/1.2 var(--f-montserrat); padding: 6px 0 10px; }
.bienvenida { text-align: center; padding: 0 10px 30px; }
.bienvenida__tit { font: 900 35px/1.2 var(--f-montserrat); color: var(--azul); padding: 25px 0; margin: 0; }
.bienvenida img { width: 400px; }

/* ---------------- menú (fijo arriba) ---------------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--azul); display: flex; align-items: center; min-height: 100px; padding: 0 0 0 10px; }
.nav__logo { flex: 0 0 auto; width: 18%; max-width: 230px; }
.nav__logo img { width: 80%; display: block; }
.nav nav { flex: 1; }
.menu { list-style: none; margin: 0; padding: 15px 0; display: flex; justify-content: center; flex-wrap: wrap; }
.menu > li { position: relative; display: flex; align-items: center; }
.menu > li > a, .menu > li > button:not(.abrir-sub) { display: block; color: #fff; text-decoration: none; font: 700 19px/1.2 var(--f-montserrat); padding: 16px 41px; position: relative; background: none; border: 0; cursor: pointer; }
.menu > li > a::before, .menu > li > a::after, .menu > li > button:not(.abrir-sub)::before, .menu > li > button:not(.abrir-sub)::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--verde); opacity: 0; transform: scaleX(.6); transition: .3s;
}
.menu > li > a::before, .menu > li > button:not(.abrir-sub)::before { top: 0; }
.menu > li > a::after, .menu > li > button:not(.abrir-sub)::after { bottom: 0; }
.menu > li > a:hover::before, .menu > li > a:hover::after, .menu > li > a.activo::before, .menu > li > a.activo::after,
.menu > li > button.activo::before, .menu > li > button.activo::after, .menu > li:hover > button:not(.abrir-sub)::before, .menu > li:hover > button:not(.abrir-sub)::after { opacity: 1; transform: scaleX(1); }
.tiene-sub > a, .tiene-sub > button:not(.abrir-sub) { padding-right: 24px !important; }
.abrir-sub { background: none; border: 0; padding: 0 30px 0 0; margin-left: -4px; cursor: pointer; display: flex; }
.abrir-sub svg { width: 12px; fill: #fff; }
.sub { list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; left: 0; min-width: 260px; background: var(--azul); box-shadow: 0 8px 20px rgba(0,0,0,.2); display: none; z-index: 5; }
.sub a { display: block; color: #fff; text-decoration: none; padding: 13px 20px; font: 500 16px/1.3 var(--f-montserrat); }
.sub a:hover, .sub a:focus { background: #fff; color: var(--azul); }
.tiene-sub:hover > .sub, .tiene-sub:focus-within > .sub, .tiene-sub.abierto > .sub { display: block; }
.nav__boton { display: none; }

/* ---------------- secciones y columnas (estructura del sitio) ---------------- */
.sec { position: relative; }
.cols { display: flex; max-width: var(--ancho, 1140px); margin: 0 auto; position: relative; z-index: 1; }
.sec.completo > .cols { max-width: none; }
.fila > .cols { max-width: none; }
.col { flex: 0 0 var(--w, 100%); max-width: var(--w, 100%); padding: 10px; min-width: 0; position: relative; display: flex; flex-direction: column; }
.col > * { margin-bottom: 20px; }
.col > *:last-child { margin-bottom: 0; }
.col > .fila { margin-bottom: 0; }
.con-fondo { background-image: var(--fondo); background-size: cover; background-position: center; }
.con-capa::before { content: ""; position: absolute; inset: 0; background: var(--capa); }

.hero { background: #0020b2; display: flex; align-items: center; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: #000 var(--hero) center / cover fixed; opacity: .65; }
.hero > .cols { width: 100%; align-items: center; padding: 0 15px; }
.hero .col { justify-content: center; }

.tit { font: 900 var(--fs, 40px)/1.2 var(--f-montserrat); color: var(--azul); text-align: center; margin: 0; }
.tit a { color: inherit; text-decoration: none; }
.txt { font-size: var(--fs, 17px); }
.txt > *:last-child { margin-bottom: 0; }
.txt h2, .txt h3, .txt h4 { font-weight: 700; }
.txt h3 { font-size: 1.2em; }
.txt ul, .txt ol { padding-left: 40px; margin: 0 0 .9em; }
.txt a { color: #0f69c9; font-weight: 600; text-decoration: none; }
.txt a:hover { text-decoration: underline; }
.img img { display: inline-block; vertical-align: middle; }
.espacio { flex: 0 0 auto; }
.divisor { border: 0; border-top: 4px solid var(--azul); margin: 15px auto 20px !important; max-width: 100%; }
.hueco { padding: 0; }

/* botones */
.boton { margin: 0; text-align: center; }
.btn { display: inline-block; font: italic 900 25px/1 var(--f-montserrat); text-transform: uppercase; color: #fff; text-decoration: none;
  padding: 20px; border-radius: 35px; border: 0; cursor: pointer; box-shadow: rgba(0,0,0,.5) -5px 3px 12px 0; transition: transform .2s, filter .2s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-verde { background: var(--verde); }
.btn-azul { background: var(--azul); }

/* listas con íconos */
.lista { list-style: none; margin: 0; padding: 0; font-size: var(--fs, 17px); }
.lista li { display: flex; align-items: center; gap: 10px; }
.lista .ico svg { width: 1em; height: 1em; display: block; fill: currentColor; }
.lista--grande { font: 400 23px/1.5 var(--f-lato); color: #1b212b; }
.icono { text-align: center; font-size: 50px; }
.icono svg { width: 1em; fill: currentColor; }

/* cajas con imagen / ícono */
.ibox { text-align: center; }
.ibox img { display: block; margin: 0 auto 15px; }
.ibox h3 { font: 900 var(--fs, 25px)/1.2 var(--f-montserrat); color: #1b212b; margin: 0; }
.ibox p { margin: 10px 0 0; }
.icobox { text-align: center; }
.icobox h3 { font: 900 18px/1.2 var(--f-montserrat); color: #000; margin: 0; }
.icobox .ico:empty { display: none; }

/* acordeones (todos cerrados, uno abierto a la vez) */
.acc { color: var(--acc-txt, inherit); }
.acc details { border: 1px solid #fff; }
.acc details + details { margin-top: -1px; }
.acc summary { list-style: none; cursor: pointer; background: var(--azul-osc); color: #fff; font: 800 17px/1.2 var(--f-montserrat); padding: 10px 15px 10px 40px; position: relative; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::before, .acc summary::after { content: ""; position: absolute; left: 15px; top: 50%; width: 13px; height: 3px; background: #fff; transform: translateY(-50%); }
.acc summary::after { transform: translateY(-50%) rotate(90deg); transition: transform .2s; }
.acc details[open] summary::after { transform: translateY(-50%) rotate(0); }
.acc-cuerpo { padding: 10px 15px 15px; text-align: justify; }
.col[style*="background-color"] .acc-cuerpo { color: #fff; }
.acc-cuerpo > *:last-child { margin-bottom: 0; }
.con-capa .acc-cuerpo, .hero .acc-cuerpo { color: #fff; }

/* carrusel (portada) */
.carrusel { position: relative; aspect-ratio: 1; width: min(100%, 490px); margin: 0 auto; }
.carrusel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; opacity: 0; transition: opacity 1s; }
.carrusel img.visible { opacity: 1; }

/* hermana */
.hermana { text-align: center; font: 600 20px/1.4 var(--f-montserrat); color: #1b212b; margin: 10px 0 0; }
.hermana a { color: var(--azul); }

/* ---------------- formulario ---------------- */
.formulario { padding: 150px 20px; }
.formulario.gris, .cobertura.gris { background: var(--gris); }
.formulario .form-tit, .cobertura .form-tit { --fs: 65px; text-align: left; }
.form-fila { display: flex; gap: 40px; padding-top: 25px; align-items: flex-start; }
.form { flex: 0 0 62%; display: flex; flex-wrap: wrap; gap: 0 2%; font-family: var(--f-lato); }
.campo { flex: 0 0 100%; margin-bottom: 12px; }
.campo.m { flex-basis: 49%; }
.campo label { display: block; font-size: 15px; margin-bottom: 4px; color: #000; }
.campo label span { color: #e3242b; }
.campo input, .campo textarea { width: 100%; font: 16px var(--f-lato); padding: 7px 10px; border: 1px solid #69727d; border-radius: 0; background: #fff; color: #1b212b; min-height: 40px; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--azul); outline-offset: 0; }
.campo.trampa { position: absolute; left: -9999px; }
.form .boton { flex: 0 0 100%; }
.form .btn { font-size: 22px; padding: 10px 30px; }
.form-estado { flex: 0 0 100%; margin: 0 0 10px; font-weight: 700; }
.form-estado.ok { color: #1e8e3e; }
.form-estado.error { color: #d93025; }
.form-legal { flex: 0 0 100%; font-size: 12px; color: #69727d; margin: 15px 0 0; }
.form-legal a { color: inherit; }
.grecaptcha-badge { visibility: hidden; }
.tarjeta { flex: 1; align-self: stretch; min-height: 440px; border-radius: 8px; color: #fff; text-align: center; padding: 40px 30px;
  background: linear-gradient(rgba(0,82,210,.82), rgba(0,82,210,.82)), url(/img/Marine-and-RV-Pumping-To-Go-12.webp) center / cover;
  box-shadow: rgba(0,0,0,.5) -17px 16px 10px 0; display: flex; flex-direction: column; justify-content: center; font-family: var(--f-lato); }
.tarjeta .ico svg { width: 34px; fill: #fff; }
.tarjeta h3 { font: 900 30px/1.2 var(--f-montserrat); margin: 8px 0 20px; }
.tarjeta a { color: #fff; text-decoration: none; }
.tarjeta p { font-size: 18px; margin: 0; }
.tarjeta p a { font-size: 15px; }

.cobertura { padding: 150px 20px; }
.cobertura .form-tit { text-align: center; }
.cobertura .lista li { margin-bottom: 0; }

/* ---------------- páginas de texto (legales) ---------------- */
.legal { max-width: 900px; margin: 0 auto; padding: 60px 20px 80px; }
.legal h1 { font: 900 40px/1.2 var(--f-montserrat); color: var(--azul); }
.legal h2 { font: 800 22px/1.3 var(--f-montserrat); color: var(--azul); margin-top: 1.5em; }

/* ---------------- pie ---------------- */
.pie { background: var(--pie); color: #ddd; font-family: var(--f-lato); padding: 110px 20px 60px; }
.pie__cols { max-width: 1140px; margin: 0 auto; display: flex; gap: 30px; justify-content: space-between; padding: 0 10px 40px; }
.pie__cols > div:first-child { flex: 0 0 auto; }
.pie__cols img { width: 180px; display: block; }
.pie h2 { font: 900 20px/1.2 var(--f-montserrat); color: #fff; margin: 0 0 12px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 6px; }
.pie a { color: #ddd; text-decoration: none; font-size: 17px; }
.pie a:hover { color: #fff; }
.redes { display: flex; gap: 10px; }
.redes a { width: 37px; height: 37px; border-radius: 50%; background: rgba(82,204,48,.53); display: flex; align-items: center; justify-content: center; }
.redes svg { width: 16px; fill: #fff; }
.pie__base { max-width: 1140px; margin: 0 auto; border-top: 1px solid #b8c4d4; display: flex; justify-content: space-between; gap: 20px; padding: 20px 10px 0; font-size: 18px; color: #fff; }
.pie__base p { margin: 0; }
.pie__base a { color: #fff; font-size: inherit; }
.subir { position: fixed; right: 20px; bottom: 20px; width: 30px; height: 30px; border-radius: 3px; background: rgba(82,204,48,.7); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 40; }
.subir svg { width: 12px; fill: #fff; transform: rotate(180deg); }
.subir.visible { opacity: 1; pointer-events: auto; }

/* ---------------- tableta y celular ---------------- */
@media (max-width: 1100px) {
  .menu > li > a, .menu > li > button:not(.abrir-sub) { padding: 16px 18px; font-size: 17px; }
  .abrir-sub { padding-right: 14px; }
}
@media (max-width: 1024px) {
  .nav { min-height: 80px; padding: 10px 15px; justify-content: space-between; }
  .nav__logo { width: 160px; }
  .nav__logo img { width: 100%; }
  .nav__boton { display: flex; flex-direction: column; gap: 6px; background: none; border: 0; padding: 10px; cursor: pointer; }
  .nav__boton span { width: 28px; height: 3px; background: #fff; border-radius: 2px; transition: .3s; }
  .nav__boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav__boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  .nav nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--azul); max-height: calc(100vh - 80px); overflow-y: auto; box-shadow: 0 10px 20px rgba(0,0,0,.2); }
  .nav.abierto nav { display: block; }
  .menu { flex-direction: column; padding: 0; }
  .menu > li { flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.2); }
  .menu > li > a, .menu > li > button:not(.abrir-sub) { flex: 1; padding: 15px 20px !important; text-align: left; }
  .menu > li > a::before, .menu > li > a::after, .menu > li > button::before, .menu > li > button::after { display: none; }
  .menu > li > a.activo { background: rgba(255,255,255,.12); }
  .abrir-sub { padding: 15px 20px; }
  .tiene-sub:hover > .sub, .tiene-sub:focus-within > .sub { display: none; }
  .sub { position: static; flex: 0 0 100%; box-shadow: none; background: var(--azul-osc); }
  .tiene-sub.abierto > .sub { display: block; }
  .tiene-sub.abierto .abrir-sub svg { transform: rotate(180deg); }
  .sub a { padding-left: 35px; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .barra-tel__num { font-size: 20px; }
  .barra-tel p { font-size: 16px; }
  .bienvenida__tit { font-size: 24px; padding: 18px 0; }
  .bienvenida { padding-bottom: 15px; }
  .bienvenida img { width: 260px; }
  .cols { flex-direction: column; }
  .col { flex-basis: auto; max-width: 100%; }
  .col[style*="padding"] { padding: 10px !important; }
  .col[style*="background-color"], .col.con-fondo { margin: 10px 0; padding: 20px 15px !important; }
  .col.con-fondo { min-height: 250px; }
  .col.con-fondo .espacio { height: 230px !important; }
  .hueco { display: none; }
  .sec { padding-left: 10px; padding-right: 10px; }
  .sec[style*="padding-top:150px"], .sec[style*="padding-top: 150px"] { padding-top: 70px !important; }
  .sec[style*="padding-bottom:150px"], .sec[style*="padding-bottom: 150px"] { padding-bottom: 70px !important; }
  .hero { padding-top: 60px !important; padding-bottom: 60px !important; }
  .hero::before { background-attachment: scroll; }
  .tit { font-size: min(var(--fs, 40px), 30px); }
  h1.tit { font-size: min(var(--fs, 40px), 32px); }
  .txt { font-size: min(var(--fs, 17px), 19px); }
  .txt[style*="justify"], .txt p { text-align: left !important; }
  .btn { font-size: 20px; padding: 16px 20px; }
  .lista--grande { font-size: 20px; }
  .formulario, .cobertura { padding: 70px 15px; }
  .formulario .form-tit, .cobertura .form-tit { --fs: 34px; }
  .form-fila { flex-direction: column; }
  .form { flex-basis: auto; width: 100%; }
  .campo.m { flex-basis: 100%; }
  .tarjeta { width: 100%; min-height: 300px; box-shadow: rgba(0,0,0,.4) -8px 8px 10px 0; }
  .carrusel { width: min(100%, 340px); }
  .pie { padding-top: 60px; }
  .pie__cols { flex-direction: column; gap: 25px; }
  .pie__base { flex-direction: column; font-size: 16px; }
  .ibox h3 { font-size: min(var(--fs, 25px), 22px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* firma de autoría en artículos */
.firma-wrap { max-width: 1140px; margin: 0 auto; padding: 18px 20px 0; }
.firma { margin: 0; font-size: 15px; color: #555; }
.firma a { color: var(--azul); font-weight: 600; text-decoration: none; }

/* =====================================================================
   RETOQUE VISUAL (v3): mismos colores, logo y fuentes; más orden y aire
   ===================================================================== */
:root { --navy: #001a5c; --texto: #1f2937; --suave: #4b5563; --radio: 12px; }
body { line-height: 1.65; color: var(--texto); }

/* barra superior delgada */
.barra-tel { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 8px max(20px, calc((100% - 1200px) / 2)); background: var(--navy); }
.barra-tel p { font: 500 14px/1.3 var(--f-montserrat); padding: 0; opacity: .9; }
.barra-tel__num { font: 500 15px/1.2 var(--f-montserrat); gap: 8px; padding: 0; }
.barra-tel__num strong { font-weight: 800; font-size: 17px; }
.barra-tel__num svg { width: 12px; height: 18px; }

/* menú */
.nav { min-height: 84px; padding: 0 max(20px, calc((100% - 1200px) / 2)); box-shadow: 0 4px 18px rgba(0, 26, 92, .18); }
.nav__logo { width: 150px; }
.nav__logo img { width: 100%; }
@media (min-width: 1025px) { .nav nav { display: flex; justify-content: flex-end; } }
.menu { padding: 0; justify-content: flex-end; }
.menu > li > a, .menu > li > button:not(.abrir-sub) { font: 600 16px/1.2 var(--f-montserrat); padding: 30px 18px; }
.tiene-sub > a, .tiene-sub > button:not(.abrir-sub) { padding-right: 6px !important; }
.abrir-sub { padding: 0 14px 0 0; margin: 0; }
.menu > li > a::before, .menu > li > button:not(.abrir-sub)::before { display: none; }
.menu > li > a::after, .menu > li > button:not(.abrir-sub)::after { left: 18px; right: 18px; bottom: 18px; height: 3px; border-radius: 3px; }
.menu > li:last-child > a { background: var(--verde); border-radius: 30px; padding: 12px 22px; margin-left: 10px; }
.menu > li:last-child > a::after { display: none; }
.sub { border-radius: 0 0 var(--radio) var(--radio); overflow: hidden; }

/* portadas (hero) */
.hero { background: var(--navy); min-height: 460px; }
.hero::before { background: var(--hero) center / cover no-repeat; opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 20, 70, .92) 0%, rgba(0, 30, 100, .78) 45%, rgba(0, 40, 130, .35) 100%); }
.hero > .cols { z-index: 2; max-width: 1200px !important; padding: 0 20px; }
.hero .col { padding: 10px !important; }
.hero .tit { text-align: left !important; max-width: 900px; line-height: 1.1; font-size: clamp(30px, 4.2vw, min(var(--fs, 40px), 56px)); text-shadow: 0 2px 20px rgba(0, 0, 0, .25); }
.hero h2.tit { font-size: clamp(22px, 2.6vw, min(var(--fs, 40px), 34px)); font-weight: 800; }
.hero .txt { max-width: 760px; font-size: clamp(16px, 1.3vw, min(var(--fs, 17px), 19px)); line-height: 1.7; opacity: .95; }
.hero .boton { text-align: left !important; }
.hero .fila .boton { text-align: left !important; }
.hero .fila .cols { justify-content: flex-start; gap: 14px; }
.hero .fila .col { flex: 0 0 auto; max-width: none; padding: 0 !important; }
.hero .carrusel { width: min(100%, 440px); box-shadow: 0 25px 60px rgba(0, 0, 0, .35); border-radius: 50%; }
.hero .carrusel img { border: 6px solid rgba(255, 255, 255, .9); }

/* contenido: más aire, sin texto justificado, líneas más cortas */
.sec:not(.hero):not(.formulario):not(.cobertura):not([style*="padding-top"]) { padding-top: 45px; }
.sec:not(.hero):not(.formulario):not(.cobertura):not([style*="padding-bottom"]) { padding-bottom: 45px; }
.sec.completo:not(.hero) > .cols { max-width: 1200px; }
.cols { max-width: min(var(--ancho, 1140px), 1200px); }
.txt, .txt p, .acc-cuerpo, .txt[style] { text-align: left !important; }
.txt { color: var(--suave); }
.txt[style*="color:rgb(255"] { color: #fff; }
.col[style*="background-color"] .txt { color: inherit; }
.tit { line-height: 1.18; letter-spacing: -.01em; }
.tit:not(.hero .tit) { font-size: clamp(26px, 3vw, min(var(--fs, 40px), 44px)); }
.divisor { border-top-width: 4px; border-radius: 4px; width: 80px !important; }
.img img, .col.con-fondo, .ibox img { border-radius: var(--radio); }
.col[style*="box-shadow"] { box-shadow: 0 18px 40px rgba(0, 26, 92, .16) !important; border-radius: var(--radio) !important; }
.img img[style*="box-shadow"] { box-shadow: 0 18px 40px rgba(0, 26, 92, .18) !important; }

/* botones más limpios */
.btn { font: 800 16px/1 var(--f-montserrat); font-style: normal; letter-spacing: .03em; padding: 17px 30px; border-radius: 40px; box-shadow: 0 8px 20px rgba(0, 26, 92, .18); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 26, 92, .25); filter: none; }
.btn-verde { background: #3fbf1f; }
.btn-verde:hover { background: #36a81a; }
.btn-azul:hover { background: #005fe0; }

/* acordeones */
.acc details { border: 0; border-radius: 10px; overflow: hidden; margin-bottom: 8px; background: rgba(255, 255, 255, .06); }
.acc details + details { margin-top: 0; }
.acc summary { font-weight: 700; font-size: 16px; padding: 15px 18px 15px 46px; }
.acc summary::before, .acc summary::after { left: 18px; width: 12px; height: 2px; }
.acc details[open] summary { background: var(--azul); }
.acc-cuerpo { padding: 14px 18px 18px; background: #f5f8ff; color: var(--suave); }
.con-capa .acc-cuerpo, .hero .acc-cuerpo, .col[style*="background-color"] .acc-cuerpo { background: rgba(0, 20, 70, .35); color: #fff; }

/* tarjetas de servicios */
.ibox h3, .icobox h3 { font-size: 18px; letter-spacing: .02em; }
.ibox img { transition: transform .3s; }
.ibox:hover img { transform: translateY(-4px); }

/* formulario y cobertura */
.formulario .form-tit, .cobertura .form-tit { font-size: clamp(30px, 4vw, 52px); }
.campo input, .campo textarea { border: 1px solid #cfd6e4; border-radius: 8px; padding: 10px 14px; min-height: 46px; transition: border-color .2s, box-shadow .2s; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0, 114, 255, .15); }
.campo label { font-weight: 700; font-size: 14px; }
.tarjeta { border-radius: 16px; box-shadow: 0 25px 50px rgba(0, 26, 92, .25); }
.lista--grande { font-size: 19px; }
.lista--grande .ico { color: var(--verde); }
.cobertura .fila .cols { gap: 0; }
.hermana { font-size: 17px; background: #f2f7ff; border-radius: var(--radio); padding: 18px 24px; max-width: 760px; margin: 30px auto 0; }

/* pie */
.pie { background: var(--navy); padding-top: 80px; }
.pie__base { border-top-color: rgba(255, 255, 255, .15); font-size: 15px; }

@media (max-width: 1024px) {
  .nav { min-height: 70px; }
  .nav__logo { width: 120px; }
  .menu > li > a, .menu > li > button:not(.abrir-sub) { padding: 15px 20px !important; }
  .menu > li:last-child > a { margin: 12px 20px; text-align: center; }
  .barra-tel p { display: none; }
  .barra-tel { justify-content: center; }
}
@media (max-width: 767px) {
  .hero { min-height: 0; }
  .hero::after { background: linear-gradient(180deg, rgba(0, 20, 70, .9), rgba(0, 30, 100, .8)); }
  .hero .fila .cols { flex-direction: row; flex-wrap: wrap; }
  .sec:not(.hero):not(.formulario):not(.cobertura) { padding-top: 35px; padding-bottom: 35px; }
  .btn { font-size: 15px; padding: 15px 24px; }
}

/* =====================================================================
   DISEÑO ELEGANTE Y AMIGABLE (v4): tonos suaves, curvas y movimiento leve
   ===================================================================== */
:root { --navy: #0b1f4d; --tinta: #10244f; --cielo: #eef5ff; --radio: 18px; --sombra: 0 20px 45px -18px rgba(16, 36, 79, .28); --suave-anim: cubic-bezier(.22, .61, .36, 1); }
body { color: #334155; }

/* títulos: azul marino elegante con acento */
.tit { font-weight: 800; color: var(--tinta); }
.tit[style*="color:rgb(0, 114, 255)"], .tit[style*="color:rgb(9, 119, 255)"] { color: var(--tinta) !important; }
.sec:not(.hero):not(.con-capa) h2.tit:not(.form-tit)::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; margin: 16px auto 0; background: linear-gradient(90deg, var(--azul), var(--verde)); }
.sec:not(.hero) h2.tit[style*="text-align:left"]::after { margin-left: 0; }
.sec:not(.hero) h2.tit + .divisor { display: none; }
.form-tit { color: var(--tinta) !important; }

/* barra y menú con efecto vidrio */
.barra-tel { background: var(--navy); }
.nav { background: rgba(0, 114, 255, .92); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); transition: min-height .35s var(--suave-anim), box-shadow .35s; }
.nav.compacto { min-height: 66px; box-shadow: 0 10px 30px rgba(11, 31, 77, .22); }
.menu > li > a, .menu > li > button:not(.abrir-sub) { transition: opacity .25s; }
.menu > li > a:hover { opacity: .85; }
.menu > li:last-child > a { box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .35); transition: transform .3s var(--suave-anim), box-shadow .3s; }
.menu > li:last-child > a:hover { opacity: 1; transform: translateY(-2px); }
.sub { box-shadow: 0 20px 40px -10px rgba(11, 31, 77, .35); animation: aparecer .25s var(--suave-anim); }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* portada: degradado suave, zoom lento de la foto */
.hero::before { animation: zoomLento 22s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes zoomLento { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero::after { background: linear-gradient(100deg, rgba(8, 24, 64, .9) 0%, rgba(10, 40, 110, .72) 48%, rgba(0, 90, 220, .25) 100%); }
.hero > .cols { padding-top: 30px; padding-bottom: 30px; }
.hero .col > * { margin-bottom: 18px; }
.hero h1.tit { font-weight: 800; }
.hero h2.tit { font-weight: 600; opacity: .92; }
.hero .carrusel { animation: flotar 7s ease-in-out infinite; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero .carrusel img { border: 8px solid rgba(255, 255, 255, .85); }

/* secciones alternadas con fondo cielo muy suave */
main > .sec:not(.hero):not(.con-capa):not(.formulario):not(.cobertura):nth-of-type(even):not([style*="background-color"]) { background: linear-gradient(180deg, #fff 0%, var(--cielo) 100%); }
.con-capa::before { background: linear-gradient(120deg, rgba(8, 24, 64, .88), rgba(0, 90, 220, .7)); }

/* tarjetas, cajas e imágenes */
.img img, .col.con-fondo, .ibox img, .tarjeta { border-radius: var(--radio) !important; }
.col[style*="box-shadow"], .img img[style*="box-shadow"] { box-shadow: var(--sombra) !important; border-radius: var(--radio) !important; }
.col[style*="background-color:rgb(0, 114, 255)"] { background: linear-gradient(145deg, #0a63e8, #0b3fa8) !important; }
.img img, .col.con-fondo, .ibox { transition: transform .5s var(--suave-anim), box-shadow .5s; }
.img img:hover { transform: translateY(-4px) scale(1.01); }
.sec[id="services"] .fila .col, .sec .fila .col:has(> .ibox) { background: #fff; border-radius: var(--radio); transition: transform .45s var(--suave-anim), box-shadow .45s; }
.sec .fila .col:has(> .ibox):hover, .sec[id="services"] .fila .col:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.ibox img { background: var(--cielo); padding: 22px; border-radius: 50% !important; width: 130px; height: 130px; object-fit: contain; }
.ibox h3, .icobox h3 { color: var(--tinta); font-weight: 800; }

/* botones */
.btn { padding: 16px 30px; transition: transform .35s var(--suave-anim), box-shadow .35s, background .35s; }
.btn-azul { background: linear-gradient(135deg, #1a82ff, #0057d9); }
.btn-verde { background: linear-gradient(135deg, #4fd12c, #2fa814); }
.btn:hover { transform: translateY(-3px); }

/* acordeones suaves */
.acc summary { background: var(--tinta); transition: background .3s; }
.acc summary:hover { background: #163a85; }
.acc details[open] summary { background: linear-gradient(135deg, #1a82ff, #0057d9); }
.acc-cuerpo { animation: aparecer .35s var(--suave-anim); }

/* cobertura: ciudades como etiquetas */
.cobertura { background: linear-gradient(180deg, var(--cielo), #fff) !important; }
.cobertura.gris { background: linear-gradient(180deg, #fff, var(--cielo)) !important; }
.cobertura .lista--grande { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cobertura .lista--grande li { background: #fff; border-radius: 40px; padding: 8px 18px 8px 12px; font-size: 16px; font-family: var(--f-montserrat); font-weight: 500; color: var(--tinta); box-shadow: 0 6px 16px -8px rgba(16, 36, 79, .3); transition: transform .3s var(--suave-anim); }
.cobertura .lista--grande li:hover { transform: translateY(-3px); }
.cobertura .fila .col { --w: 100% !important; flex-basis: 100% !important; max-width: 100% !important; padding: 5px 10px !important; }
.cobertura .fila:last-child .col { --w: auto !important; flex: 0 0 auto !important; max-width: none !important; }
.cobertura .fila:last-child .cols { justify-content: center; gap: 16px; padding-top: 30px; }

/* formulario */
.formulario.gris, .formulario { background: #fff; }
.form { background: #fff; border-radius: var(--radio); }
.tarjeta { background: linear-gradient(160deg, rgba(10, 99, 232, .9), rgba(11, 31, 77, .92)), url(/img/Marine-and-RV-Pumping-To-Go-12.webp) center / cover; }
.hermana { background: var(--cielo); }

/* aparición suave al bajar (solo si el navegador tiene JavaScript) */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--suave-anim), transform .9s var(--suave-anim); }
.js .revelar.visto { opacity: 1; transform: none; }

@media (max-width: 767px) {
  .sec:not(.hero) h2.tit[style*="text-align:left"]::after { margin-left: auto; }
  .cobertura .lista--grande li { font-size: 14px; padding: 7px 14px 7px 10px; }
  .hero .carrusel { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero .carrusel { animation: none !important; }
  .js .revelar { opacity: 1; transform: none; }
}

/* ajustes v4.1 */
.cobertura .fila:first-of-type .cols { flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1000px; margin: 0 auto; }
.cobertura .fila:first-of-type .col, .cobertura .lista--grande { display: contents; }
.sec h2.tit[style*="--fs:22px"]::after, .sec h2.tit[style*="--fs:2"]:not([style*="--fs:2"][style*="px;"])::after { display: none; }

@media (max-width: 1024px) {
  .nav nav { width: 100%; }
  .menu > li:last-child > a { display: inline-block; flex: 0 0 auto; }
}
@media (max-width: 767px) {
  .hero > .cols { align-items: stretch; }
  .hero .col { width: 100%; }
  .hero .carrusel { width: min(80vw, 320px); margin-top: 10px; }
}

/* =====================================================================
   MENÚ OVERLAY (v5): pantalla completa, elegante, Montserrat
   ===================================================================== */
.nav nav, .nav__boton, .menu { display: none !important; }
.nav { justify-content: space-between; gap: 20px; z-index: 60; }
.nav__acciones { display: flex; align-items: center; gap: 14px; }
.nav__cta { font: 700 14px/1 var(--f-montserrat); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-decoration: none; padding: 14px 22px; border-radius: 40px; background: linear-gradient(135deg, #4fd12c, #2fa814); box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .35); transition: transform .3s var(--suave-anim); }
.nav__cta:hover { transform: translateY(-2px); }
.menu-btn { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); color: #fff; border-radius: 40px; padding: 10px 14px 10px 20px; cursor: pointer; font: 600 15px/1 var(--f-montserrat); letter-spacing: .06em; text-transform: uppercase; transition: background .3s; position: relative; z-index: 2; }
.menu-btn:hover { background: rgba(255, 255, 255, .24); }
.menu-btn__ico { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-content: center; gap: 5px; }
.menu-btn__ico i { display: block; width: 15px; height: 2px; background: var(--tinta); border-radius: 2px; transition: transform .45s var(--suave-anim); }
.menu-abierto .menu-btn__ico i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-abierto .menu-btn__ico i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu-abierto { overflow: hidden; }
.menu-abierto .nav { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-abierto .nav__cta { opacity: 0; pointer-events: none; }

.ov { position: fixed; inset: 0; z-index: 55; visibility: hidden; pointer-events: none;
  background: radial-gradient(1200px 600px at 85% 10%, rgba(26, 130, 255, .35), transparent 60%), linear-gradient(160deg, rgba(8, 24, 64, .97), rgba(11, 31, 77, .98));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  clip-path: circle(0 at calc(100% - 70px) 70px); transition: clip-path .7s var(--suave-anim), visibility 0s .7s; overflow-y: auto; }
.ov.abierto { visibility: visible; pointer-events: auto; clip-path: circle(150% at calc(100% - 70px) 70px); transition: clip-path .8s var(--suave-anim); }
.ov__panel { max-width: 1200px; margin: 0 auto; min-height: 100%; display: grid; grid-template-columns: 1.6fr 1fr; gap: 60px; padding: 130px 30px 50px; align-items: start; }
.ov__nav ol { list-style: none; margin: 0; padding: 0; }
.ov__nav > ol > li { border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 12px 0; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .6s var(--suave-anim); }
.ov.abierto .ov__nav > ol > li { opacity: 1; transform: none; }
.ov.abierto .ov__nav > ol > li:nth-child(1) { transition-delay: .25s; } .ov.abierto .ov__nav > ol > li:nth-child(2) { transition-delay: .32s; }
.ov.abierto .ov__nav > ol > li:nth-child(3) { transition-delay: .39s; } .ov.abierto .ov__nav > ol > li:nth-child(4) { transition-delay: .46s; }
.ov.abierto .ov__nav > ol > li:nth-child(5) { transition-delay: .53s; }
.ov__link { display: flex; align-items: baseline; gap: 18px; color: #fff; text-decoration: none; font: 700 clamp(28px, 3.8vw, 46px)/1.1 var(--f-montserrat); letter-spacing: -.02em; }
.ov__num { font: 600 13px/1 var(--f-montserrat); color: var(--verde); letter-spacing: .1em; transform: translateY(-.6em); }
.ov__txt { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .45s var(--suave-anim), color .3s; padding-bottom: 4px; }
a.ov__link:hover .ov__txt, .ov__nav > ol > li.activo .ov__txt { background-size: 100% 2px; }
.ov__nav > ol > li.activo .ov__txt { color: #8ec5ff; }
.ov__sub { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px 38px; padding: 0; }
.ov__sub a { display: inline-block; color: rgba(255, 255, 255, .85); text-decoration: none; font: 500 14px/1 var(--f-montserrat); padding: 9px 15px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 30px; transition: background .3s, color .3s, border-color .3s; }
.ov__sub a:hover { background: #fff; color: var(--tinta); border-color: #fff; }
.ov__info { color: #fff; padding: 34px; border-radius: var(--radio); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); opacity: 0; transform: translateX(30px); transition: opacity .6s .45s, transform .7s .45s var(--suave-anim); }
.ov.abierto .ov__info { opacity: 1; transform: none; }
.ov__etq { margin: 0 0 6px; font: 600 12px/1 var(--f-montserrat); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.ov__tel { display: block; color: #fff; text-decoration: none; font: 800 30px/1.2 var(--f-montserrat); margin-bottom: 22px; }
.ov__mail { display: block; color: #fff; text-decoration: none; font: 500 16px/1.3 var(--f-montserrat); margin-bottom: 22px; word-break: break-all; }
.ov__zona { margin: 0 0 26px; font: 500 15px/1.5 var(--f-montserrat); color: rgba(255, 255, 255, .85); }
.ov__boton { display: block; text-align: center; }
.ov__hermana { margin: 18px 0 0; font: 400 13px/1.4 var(--f-montserrat); color: rgba(255, 255, 255, .65); }
.ov__hermana a { color: #fff; }

@media (max-width: 900px) {
  .ov__panel { grid-template-columns: 1fr; gap: 30px; padding: 120px 22px 40px; }
  .ov__sub { margin-left: 0; }
  .ov__info { padding: 24px; }
}
@media (max-width: 600px) {
  .nav__cta { display: none; }
  .menu-btn { padding: 8px 10px 8px 16px; font-size: 13px; }
  .ov__link { font-size: 30px; }
  .ov__sub a { font-size: 13px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ov, .ov.abierto { transition: none; clip-path: none; }
}

/* =====================================================================
   BARRA SUPERIOR FIJA Y LLAMATIVA (v6)
   ===================================================================== */
html { scroll-padding-top: 140px; }
.cabecera { position: sticky; top: 0; z-index: 60; }
.cabecera .nav { position: relative; top: auto; }
.barra-tel { position: relative; overflow: hidden; padding-top: 7px; padding-bottom: 7px;
  background: linear-gradient(90deg, #0b1f4d 0%, #0d3a8f 50%, #0b1f4d 100%); background-size: 200% 100%; animation: brilloBarra 9s ease-in-out infinite; }
@keyframes brilloBarra { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.barra-tel p { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; opacity: 1; }
.barra-tel__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 rgba(82, 204, 48, .7); animation: latido 2s infinite; flex: 0 0 auto; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(82, 204, 48, .7); } 70% { box-shadow: 0 0 0 9px rgba(82, 204, 48, 0); } 100% { box-shadow: 0 0 0 0 rgba(82, 204, 48, 0); } }
.barra-tel__num { background: #fff; color: var(--tinta); border-radius: 40px; padding: 7px 18px 7px 7px; gap: 10px; font-size: 14px; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .45); transition: transform .3s var(--suave-anim), box-shadow .3s; }
.barra-tel__num:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .5); }
.barra-tel__num strong { color: var(--azul); font-size: 16px; }
.barra-tel__ico { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #4fd12c, #2fa814); display: grid; place-items: center; animation: timbre 4s ease-in-out infinite; }
.barra-tel__ico svg { width: 13px; height: 13px; fill: #fff; }
@keyframes timbre { 0%, 80%, 100% { transform: rotate(0); } 83% { transform: rotate(-14deg); } 86% { transform: rotate(12deg); } 89% { transform: rotate(-10deg); } 92% { transform: rotate(8deg); } 95% { transform: rotate(0); } }
.nav.compacto { min-height: 66px; }
@media (max-width: 1024px) {
  html { scroll-padding-top: 120px; }
  .barra-tel { justify-content: center; }
  .barra-tel__num { padding: 6px 16px 6px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .barra-tel, .barra-tel__punto, .barra-tel__ico { animation: none !important; }
}
.barra-tel__num { white-space: nowrap; }
@media (max-width: 1024px) { .barra-tel p { display: none; } }

/* =====================================================================
   v7: menú con efecto simple y fluido, fotos más naturales
   ===================================================================== */
/* menú: solo aparece/desaparece suave (sin recorte circular ni desenfoque, que trababan el celular) */
.ov { clip-path: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: linear-gradient(160deg, #0a1d47 0%, #0d2a66 100%); opacity: 0; transition: opacity .35s ease, visibility 0s .35s !important; will-change: opacity; }
.ov.abierto { opacity: 1; transition: opacity .35s ease !important; }
.ov__nav > ol > li, .ov__info { transform: none !important; opacity: 1 !important; transition: none !important; }
.ov__panel { opacity: 0; transform: translateY(10px); transition: opacity .4s ease .05s, transform .4s ease .05s; }
.ov.abierto .ov__panel { opacity: 1; transform: none; }
.ov__link { gap: 0; }
.menu-abierto .cabecera .barra-tel { background: #0a1d47; animation: none; }
.menu-abierto .nav { background: #0a1d47 !important; }

/* portadas: capa azul marino neutra (sin tono morado) y fotos nítidas */
.hero::after { background: linear-gradient(100deg, rgba(5, 16, 40, .88) 0%, rgba(5, 20, 50, .66) 50%, rgba(5, 20, 50, .2) 100%) !important; }
.hero::before { filter: saturate(1.05) contrast(1.03); }
.con-capa::before { background: linear-gradient(120deg, rgba(5, 16, 40, .86), rgba(8, 40, 100, .62)) !important; }
.hero .img img { max-width: 260px; height: auto; }
.tarjeta { background: linear-gradient(165deg, rgba(5, 16, 40, .55) 0%, rgba(5, 16, 40, .88) 100%), url(/img/noaa-KCIisHqPdSM-unsplash.webp) center / cover !important; }
.tarjeta .ico svg { fill: #8ec5ff; }

/* formulario: código postal con detección de zona */
.campo .ayuda { display: block; margin-top: 6px; font: 600 13px/1.3 var(--f-montserrat); min-height: 1.3em; }
.campo .ayuda.ok { color: #1e8e3e; }
.campo .ayuda.fuera { color: #b45309; }

/* =====================================================================
   PÁGINA ZONA DE SERVICIO: mapa + buscador por código postal
   ===================================================================== */
.zona { padding: 70px 20px; background: linear-gradient(180deg, #fff, var(--cielo)); }
.zona__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 50px; align-items: start; }
.mapa { position: sticky; top: 150px; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px; }
.mapa svg { width: 100%; height: auto; max-height: calc(100vh - 200px); display: block; margin: 0 auto; }
.mapa .cond { fill: #dbe8ff; stroke: #fff; stroke-width: 2; cursor: pointer; transition: fill .3s; outline: none; }
.mapa .cond:hover, .mapa .cond:focus-visible { fill: #9cc4ff; }
.mapa .cond.activo { fill: var(--azul); }
.mapa .pto { fill: var(--tinta); stroke: #fff; stroke-width: 1.5; pointer-events: none; transition: r .3s; }
.mapa .pto.activo { fill: var(--verde); }
.mapa .etq { font: 700 11px var(--f-montserrat); fill: var(--tinta); pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.mapa .etq-c { font: 800 13px var(--f-montserrat); fill: var(--tinta); text-transform: uppercase; letter-spacing: .06em; pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 4px; }
.mapa__nota { font-size: 11px; color: #94a3b8; margin: 10px 0 0; text-align: center; }
.buscador { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 28px; margin-bottom: 26px; }
.buscador h2 { font: 800 24px/1.2 var(--f-montserrat); color: var(--tinta); margin: 0 0 6px; }
.buscador p { margin: 0 0 16px; color: var(--suave); }
.buscador form { display: flex; gap: 10px; flex-wrap: wrap; }
.buscador input { flex: 1 1 180px; font: 600 20px var(--f-montserrat); letter-spacing: .1em; padding: 12px 16px; border: 2px solid #cfd6e4; border-radius: 12px; }
.buscador input:focus { outline: none; border-color: var(--azul); }
.buscador .btn { font-size: 15px; }
.resultado { margin-top: 16px; border-radius: 12px; padding: 0; font-weight: 600; }
.resultado:not(:empty) { padding: 16px 18px; }
.resultado.ok { background: #ecfdf3; color: #14532d; }
.resultado.fuera { background: #fff7ed; color: #7c2d12; }
.resultado .btn { margin-top: 12px; font-size: 14px; padding: 13px 22px; }
.panel { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 28px; }
.panel h2 { font: 800 28px/1.2 var(--f-montserrat); color: var(--tinta); margin: 0 0 8px; }
.panel__etq { font: 700 12px var(--f-montserrat); letter-spacing: .14em; text-transform: uppercase; color: var(--azul); margin: 0 0 6px; }
.chips { list-style: none; margin: 16px 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li a, .chips li span { display: inline-block; padding: 8px 14px; border-radius: 30px; background: var(--cielo); color: var(--tinta); font: 500 14px var(--f-montserrat); text-decoration: none; border: 1px solid transparent; transition: background .25s, border-color .25s; }
.chips li a { border-color: #b9d4ff; background: #fff; font-weight: 700; }
.chips li a:hover { background: var(--azul); color: #fff; }
.condados { max-width: 1200px; margin: 0 auto; padding: 60px 20px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.condados article { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 24px; }
.condados h3 { font: 800 20px var(--f-montserrat); color: var(--tinta); margin: 0 0 4px; }
.condados p { margin: 0; font-size: 14px; color: var(--suave); }
@media (max-width: 900px) {
  .zona__grid { grid-template-columns: 1fr; }
  .mapa { position: relative; top: 0; max-width: 420px; margin: 0 auto; width: 100%; }
  .mapa svg { max-height: 70vh; }
}

/* =====================================================================
   v8: imagen de portada rectangular redondeada, acordeones claros y suaves
   ===================================================================== */
.carrusel, .hero .carrusel { border-radius: 22px !important; aspect-ratio: 4 / 3; width: min(100%, 520px); animation: none !important; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
.carrusel img, .hero .carrusel img { border-radius: 22px !important; border: 0 !important; }

/* acordeones: fondo claro, texto azul marino, menos azul */
.col[style*="background-color"]:has(> .acc) { background: #fff !important; border: 1px solid #e3eaf6; }
.acc details { background: #f4f7fc; border: 1px solid #e3eaf6; border-radius: 14px; margin-bottom: 10px; }
.acc summary { background: transparent !important; color: var(--tinta); font-weight: 700; transition: color .3s; }
.acc summary:hover { color: var(--azul); }
.acc summary::before, .acc summary::after { background: var(--azul); }
.acc details[open] { background: #fff; box-shadow: 0 12px 28px -16px rgba(16, 36, 79, .35); }
.acc details[open] summary { color: var(--azul); }
.acc-cuerpo, .col[style*="background-color"] .acc-cuerpo { background: transparent !important; color: var(--suave) !important; padding: 0 20px 18px 46px; animation: none; }
.con-capa .acc details { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); }
.con-capa .acc summary { color: #fff; }
.con-capa .acc summary::before, .con-capa .acc summary::after { background: #fff; }
.con-capa .acc details[open] { background: rgba(255, 255, 255, .16); }
.con-capa .acc-cuerpo { color: #fff !important; }
.acc-anim { overflow: hidden; transition: height .45s cubic-bezier(.22, .61, .36, 1); }
@media (max-width: 767px) { .acc-cuerpo, .col[style*="background-color"] .acc-cuerpo { padding-left: 20px; } }
.mapa .etq { opacity: 0; transition: opacity .35s; }
.mapa .etq.activo { opacity: 1; }
.mapa .cond.activo + .cond { }
.mapa .pto.activo { r: 5; }
.mapa .cond.activo ~ .etq-c { }

/* =====================================================================
   v9: SOLO Montserrat, enlaces visibles sobre fondos de color, textos ordenados
   ===================================================================== */
:root { --f-opensans: "Montserrat", sans-serif; --f-lato: "Montserrat", sans-serif; --f-poppins: "Montserrat", sans-serif; --f-roboto: "Montserrat", sans-serif; }
body, button, input, textarea, .form, .pie, .tarjeta, .campo input, .campo textarea { font-family: var(--f-montserrat); }
[style*="font-family"] { font-family: var(--f-montserrat) !important; }

/* enlaces dentro de bloques de color: blancos y subrayados */
.sec[style*="background-color"] .txt a, .sec[style*="background-color"] .tit a, .con-capa .txt a, .hero .txt a, .hero .tit a,
.col[style*="background-color:rgb(0, 114, 255)"] .txt a, .col[style*="background-color:rgb(0, 114, 255)"] .tit a {
  color: #fff !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 800; }
.sec[style*="background-color:rgb(0, 114, 255)"], .sec[style*="background-color: rgb(0, 114, 255)"] { background: linear-gradient(135deg, #0a63e8, #0b3fa8) !important; }

/* textos: ancho cómodo de lectura y alineación coherente con su título */
.col[style*="--w:100"] > .txt, .col[style*="--w:100"] > .lista { max-width: 860px; margin-left: auto; margin-right: auto; width: 100%; }
.txt.corto, .txt.corto p { text-align: center !important; }
.hero .txt.corto, .hero .txt.corto p { text-align: left !important; }
.hero .col > h2.tit:first-child { font-weight: 800; font-size: clamp(30px, 4vw, min(var(--fs, 40px), 54px)); opacity: 1; }
.hero .txt { font-weight: 500; }
.ibox p, .icobox + .txt, .col:has(> .ibox) .txt { text-align: center !important; }
.hero .col > .txt, .hero .col > .lista { margin-left: 0 !important; margin-right: 0 !important; max-width: 760px; }
.js .revelar.rd1 { transition-delay: .08s; }
.js .revelar.rd2 { transition-delay: .16s; }

/* =====================================================================
   v10: movimiento fluido (botones y desplazamiento sin trabas)
   ===================================================================== */
/* botones: solo se mueve la posición (lo más liviano para el navegador) */
.btn, .nav__cta, .menu-btn, .barra-tel__num, .menu > li:last-child > a {
  transition: transform .2s ease-out, opacity .2s ease-out !important; filter: none !important; will-change: auto; }
.btn:hover, .nav__cta:hover, .barra-tel__num:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .3) !important; filter: none !important; }
.btn:active, .nav__cta:active, .menu-btn:active, .barra-tel__num:active { transform: translateY(0) scale(.98) !important; }
.btn-azul:hover { background: linear-gradient(135deg, #1a82ff, #0057d9); }
.btn-verde:hover { background: linear-gradient(135deg, #4fd12c, #2fa814); }
.menu-btn:hover { background: rgba(255, 255, 255, .2); }
/* fondos de portada fijos (el zoom continuo y el desenfoque del menú hacían más lento el desplazamiento) */
.hero::before { animation: none !important; filter: none !important; transform: none !important; }
.nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #0a6cf0 !important; transition: min-height .3s ease-out, box-shadow .3s; }
.barra-tel { animation: none !important; background: linear-gradient(90deg, #0b1f4d, #0d3a8f) !important; }
.ibox img, .img img, .sec .fila .col { transition: transform .3s ease-out !important; }

/* =====================================================================
   v11: mapa más elegante y barra superior como antes (teléfono en texto)
   ===================================================================== */
.mapa { padding: 0; overflow: hidden; }
.mapa svg { max-height: calc(100vh - 190px); border-radius: var(--radio) var(--radio) 0 0; }
.mapa .vecino { fill: #f3f5f9; stroke: #dfe5ee; stroke-width: 1; }
.mapa .cond { fill: #bcd6ff; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; transition: fill .25s ease-out; }
.mapa .cond:nth-of-type(2n) { fill: #a9caff; }
.mapa .cond:hover, .mapa .cond:focus-visible { fill: #7fb0ff; }
.mapa .cond.activo { fill: #1a6ff0; }
.mapa .etq-c { font-size: 12px; fill: #0b1f4d; stroke: rgba(255, 255, 255, .9); }
.mapa .etq-mar { font: 700 11px var(--f-montserrat); letter-spacing: .35em; fill: #7aa6e6; }
.mapa .pto { fill: #fff; stroke: #0b1f4d; stroke-width: 1.6; }
.mapa .pto.activo { fill: var(--verde); stroke: #fff; }
.mapa .etq { font-size: 11.5px; fill: #fff; stroke: #0b1f4d; stroke-width: 3px; }
.mapa__nota { padding: 12px 18px 16px; margin: 0; }

/* barra superior: teléfono como texto (como estaba antes), sin píldora blanca */
.barra-tel__num { background: none !important; box-shadow: none !important; padding: 0 !important; color: #fff !important; border-radius: 0; }
.barra-tel__num:hover { transform: none !important; box-shadow: none !important; opacity: .85; }
.barra-tel__num strong { color: #fff !important; font-size: 17px; }
.barra-tel__ico { width: 26px; height: 26px; }
.mapa .etq { display: none; }
.tarjeta .ico svg { fill: #fff !important; }
.firma-wrap { max-width: 900px; }

/* =====================================================================
   v12: acordeones legibles en fondos oscuros y con aire
   ===================================================================== */
.acc summary { outline: none; border: 0 !important; }
.acc summary:focus-visible { box-shadow: 0 0 0 3px rgba(26, 130, 255, .45); border-radius: 12px; }
.acc-cuerpo, .col[style*="background-color"] .acc-cuerpo { padding: 6px 24px 22px 46px !important; line-height: 1.75; }
.acc-cuerpo p { margin-bottom: .8em; }
.con-capa .acc details[open] summary, .hero .acc details[open] summary { color: #fff !important; }
.con-capa .acc details[open] summary::before, .con-capa .acc details[open] summary::after { background: var(--verde); }
.con-capa .acc details[open] { background: rgba(5, 16, 40, .55); border-color: rgba(255, 255, 255, .28); }
.con-capa .acc summary:hover { color: #cfe3ff; }
@media (max-width: 767px) { .acc-cuerpo, .col[style*="background-color"] .acc-cuerpo { padding: 4px 18px 18px !important; } }

/* v13: introducción después de la portada y listas siempre alineadas a la izquierda */
.sec.intro { padding-top: 55px !important; padding-bottom: 10px !important; }
.sec.intro .txt { font-size: 18px; color: #334155; }
.sec.intro .txt p:first-child::first-line { font-weight: 600; color: var(--tinta); }
.txt ul, .txt ol, .txt li { text-align: left !important; }
.txt.corto ul, .txt.corto ol { display: inline-block; }

/* v14: columnas con foto de fondo y texto encima: capa oscura y espacio */
.col.con-fondo:has(> .tit, > .txt) { padding: 60px 40px !important; justify-content: center; overflow: hidden; }
.col.con-fondo:has(> .tit, > .txt)::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(5, 16, 40, .85), rgba(8, 40, 100, .6)); border-radius: inherit; }
.col.con-fondo:has(> .tit, > .txt) > * { position: relative; z-index: 1; }
.col.con-fondo:has(> .tit, > .txt) .tit::after { display: none; }

/* v15: mapa real más grande (Leaflet) */
.zona__grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); }
.mapa { position: sticky; top: 140px; }
.mapa__lienzo { height: min(78vh, 720px); border-radius: var(--radio) var(--radio) 0 0; overflow: hidden; background: #e8f0fb; }
.mapa__lienzo svg { height: 100%; width: 100%; max-height: none; }
.mapa__lienzo.real svg { display: none; }
.leaflet-container { font-family: var(--f-montserrat); }
.mapa-tip { font: 700 12px var(--f-montserrat); color: var(--tinta); border: 0; border-radius: 8px; box-shadow: 0 6px 16px -6px rgba(16, 36, 79, .4); padding: 5px 9px; }
.leaflet-control-zoom a { color: var(--tinta); }
@media (max-width: 900px) {
  .zona__grid { grid-template-columns: 1fr; }
  .mapa { max-width: none; position: relative; top: 0; }
  .mapa__lienzo { height: 70vh; }
}
.mapa__lienzo .leaflet-tile-pane { filter: saturate(.45) brightness(1.04) contrast(.95); }

/* v16: sin rayita bajo los títulos; logo de la portada fuera; tarjetas alineadas */
.tit::after, .sec h2.tit::after, .sec:not(.hero):not(.con-capa) h2.tit:not(.form-tit)::after { display: none !important; content: none !important; }
.tit + .txt, .tit + .lista, .tit + .fila { margin-top: 4px; }
.col > .tit { margin-bottom: 18px !important; }
.hero .img { display: none; }
.col[style*="background-color"] .txt.corto, .col[style*="background-color"] .txt.corto p, .col[style*="background-color"] .tit { text-align: left !important; }
.col[style*="background-color"] .txt.corto ul, .col[style*="background-color"] .txt.corto ol { display: block; }

/* =====================================================================
   v17: plantilla única para páginas de ciudad
   ===================================================================== */
.sec.bloque { padding: 70px 20px !important; }
.sec.bloque .cols { max-width: 1140px; gap: 50px; align-items: center; }
.sec.bloque .col { padding: 0 !important; }
.sec.bloque:not(.bloque--doble) .col { max-width: 860px; margin: 0 auto; }
.sec.bloque .tit { --fs: 36px; text-align: left !important; }
.sec.bloque:not(.bloque--doble) .tit, .servicios-ciudad .tit, .banda .tit { text-align: center !important; }
.sec.bloque .txt, .sec.bloque .txt p { text-align: left !important; }
.bloque--doble .col { flex: 1 1 0 !important; max-width: none !important; }
.bloque--doble .img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); box-shadow: var(--sombra); }
.tarjetas { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tarjetas a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 24px; border-radius: var(--radio); background: #fff; border: 1px solid #e3eaf6; text-decoration: none; color: var(--suave); box-shadow: 0 12px 30px -20px rgba(16, 36, 79, .35); transition: transform .2s ease-out, border-color .2s; }
.tarjetas a:hover { transform: translateY(-3px); border-color: #b9d4ff; }
.tarjetas strong { color: var(--tinta); font-size: 17px; }
.tarjetas span { font-size: 15px; line-height: 1.5; }
.servicios-ciudad { background: var(--cielo) !important; }
.sec.banda { padding: 60px 20px !important; background: linear-gradient(135deg, #0a63e8, #0b3fa8) !important; color: #fff; text-align: center; }
.banda .tit { color: #fff !important; }
.banda .txt, .banda .txt p { color: rgba(255, 255, 255, .9) !important; text-align: center !important; }
@media (max-width: 900px) {
  .tarjetas { grid-template-columns: 1fr 1fr; }
  .bloque--doble .cols { flex-direction: column; }
  .bloque--doble .col:has(.img) { order: -1; }
}
@media (max-width: 600px) {
  .tarjetas { grid-template-columns: 1fr; }
  .sec.bloque { padding: 45px 16px !important; }
  .sec.bloque .tit { --fs: 26px; }
}