/* =========================================================
   INSURAGRO · hoja de estilos única
   1. Base y tipografía      6. Bloques y tarjetas
   2. Cabecera y menú        7. Contacto y mapa
   3. Portada (hero)         8. Tiempo y estación meteorológica
   4. Botones                9. Informe climático
   5. Títulos de sección    10. Pie, flotantes y animaciones
   ========================================================= */
@font-face { font-family: "Inter"; src: url("../fonts/inter-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-extrabold.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }

@font-face { font-family: "Inter Display"; src: url("../fonts/interdisplay-semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/interdisplay-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

/* Paleta en tonos azules (las variables conservan su nombre "verde-*" para no tocar el resto de la hoja) */
:root {
  --verde-950: #071629;
  --verde-900: #0c2340;
  --verde-800: #12365f;
  --verde-700: #1a4d85;
  --verde-600: #2163a8;
  --verde-500: #3a83c6;
  --verde-300: #93c2ec;
  --verde-100: #d5e7f8;
  --verde-50: #ebf3fc;
  --acento: #e8890c;
  --acento-osc: #b86a05;
  --acento-50: #fdf1e0;
  --azul: #1f5fa8;
  --cian: #38bdf8;
  --crema: #f4f7fb;
  --crema-2: #e9eff7;
  --blanco: #fff;
  --texto: #1b2737;
  --texto-suave: #536275;
  --borde: rgba(18, 54, 95, .12);
  --borde-fuerte: rgba(18, 54, 95, .22);
  --ok-bg: #e3f4e1; --ok-fg: #1f6b2a;
  --warn-bg: #fff4d6; --warn-fg: #8a5a00;
  --bad-bg: #fde4e4; --bad-fg: #a12424;
  --info-bg: #e3effa; --info-fg: #0f5f99;
  --sombra-s: 0 1px 2px rgba(7, 22, 41, .05), 0 8px 22px rgba(7, 22, 41, .06);
  --sombra: 0 4px 12px rgba(7, 22, 41, .05), 0 20px 44px rgba(7, 22, 41, .10);
  --sombra-fuerte: 0 10px 22px rgba(7, 22, 41, .08), 0 32px 64px rgba(7, 22, 41, .16);
  --radio: 20px;
  --radio-s: 12px;
  --ancho: 1200px;
  --cab: 78px;
  --serif: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 1. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cab) + 12px); -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); color: var(--texto); background: var(--crema); line-height: 1.7; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--verde-300); color: var(--verde-950); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
.salto { position: absolute; left: -999px; top: 8px; background: #fff; padding: .6rem 1rem; border-radius: 10px; z-index: 3000; font-weight: 800; }
.salto:focus { left: 12px; }
.contenedor { width: min(var(--ancho), calc(100% - 40px)); margin: 0 auto; }
h1, h2, h3, h4 { line-height: 1.15; color: var(--verde-900); }
h1, h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -.028em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -.012em; }
p { text-wrap: pretty; }
strong, b { font-weight: 800; }
.centrado { text-align: center; }
.subtitulo { color: var(--texto-suave); max-width: 760px; margin: 1rem 0 0; font-size: 1.1rem; }
.centrado .subtitulo, .subtitulo.centrado { margin-left: auto; margin-right: auto; }

/* ---------- 2. Cabecera y menú ---------- */
.barra-superior { background: var(--verde-950); color: rgba(255, 255, 255, .78); font-size: .84rem; }
.barra-superior .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.barra-superior a, .barra-datos span { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255, 255, 255, .86); transition: color .2s; }
.barra-superior a:hover { color: #fff; }
.barra-superior svg { width: 15px; height: 15px; opacity: .8; }
.barra-datos { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.barra-tiempo { display: inline-flex; align-items: center; gap: .45rem; padding: .18rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); font-variant-numeric: tabular-nums; }
.barra-tiempo b { color: #fff; }

.cabecera { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: box-shadow .25s, border-color .25s; }
.cabecera.con-sombra { border-bottom-color: var(--borde); box-shadow: 0 6px 24px rgba(7, 22, 41, .08); }
.cabecera-contenido { min-height: var(--cab); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { height: 36px; width: auto; }
.navegacion { display: flex; align-items: center; gap: 1.2rem; }
.menu { display: flex; align-items: center; gap: 2px; list-style: none; }
.menu > li { position: relative; }
.menu a, .menu button.submenu-boton { position: relative; display: flex; align-items: center; gap: .35rem; color: var(--verde-900); font-weight: 600; font-size: .96rem; padding: 10px 14px; border-radius: 10px; background: none; border: 0; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.menu > li > a::after, .menu > li > button.submenu-boton::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--acento); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.menu > li > a:hover::after, .menu > li > a[aria-current="page"]::after, .menu > .activo > button::after, .menu > li > button.submenu-boton:hover::after { transform: scaleX(1); }
.menu a:hover, .menu button.submenu-boton:hover { color: var(--verde-700); }
.flecha { font-size: .62em; transition: transform .2s ease; opacity: .7; }
.submenu { position: absolute; top: calc(100% + 12px); left: -10px; min-width: 300px; list-style: none; background: #fff; border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra-fuerte); padding: .5rem; z-index: 1001; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; }
.submenu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.submenu a { display: flex; gap: .75rem; align-items: center; color: var(--verde-900); font-weight: 600; padding: .7rem .8rem; border-radius: 12px; white-space: normal; }
.submenu a .ico-serv { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--verde-50); color: var(--verde-700); transition: background .2s, color .2s; }
.submenu a .ico-serv svg { width: 20px; height: 20px; }
.submenu a:hover, .submenu a:focus-visible, .submenu a[aria-current="page"] { background: var(--verde-50); }
.submenu a:hover .ico-serv, .submenu a[aria-current="page"] .ico-serv { background: var(--verde-700); color: #fff; }
.tiene-submenu:hover > .submenu, .tiene-submenu:focus-within > .submenu, .tiene-submenu.abierto > .submenu { opacity: 1; visibility: visible; transform: none; }
.tiene-submenu.abierto .flecha, .tiene-submenu:hover .flecha { transform: rotate(180deg); }
.boton-cabecera { padding: .7rem 1.2rem !important; font-size: .95rem !important; }
.menu-boton { display: none; align-items: center; gap: .55rem; background: var(--verde-800); color: #fff; border: 0; border-radius: 12px; padding: .65rem .95rem; font-weight: 800; cursor: pointer; }
.menu-boton .barras, .menu-boton .barras::before, .menu-boton .barras::after { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; position: relative; transition: transform .2s ease, background .2s; }
.menu-boton .barras::before, .menu-boton .barras::after { content: ""; position: absolute; left: 0; }
.menu-boton .barras::before { top: -6px; }
.menu-boton .barras::after { top: 6px; }
.menu-boton[aria-expanded="true"] .barras { background: transparent; }
.menu-boton[aria-expanded="true"] .barras::before { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .barras::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 3. Portada (hero) ---------- */
.hero { position: relative; min-height: clamp(380px, 62vh, 600px); display: flex; align-items: center; overflow: hidden; background: var(--verde-950); isolation: isolate; }
.hero-inicio { min-height: clamp(560px, calc(100vh - 116px), 860px); align-items: stretch; }
.hero-media, .hero-media picture, .hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media { z-index: -2; }
.hero-media img, .hero-media video { animation: heroZoom 18s ease-out both; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-capa { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(5, 16, 32, .88) 0%, rgba(5, 16, 32, .62) 42%, rgba(5, 16, 32, .18) 100%), linear-gradient(0deg, rgba(5, 16, 32, .55) 0%, transparent 40%); }
.hero-texto { width: min(var(--ancho), calc(100% - 40px)); margin: 0 auto; padding: 72px 0; color: #fff; display: flex; flex-direction: column; justify-content: center; }
.hero-inicio .hero-texto { padding-bottom: 150px; }
.hero-etiqueta { display: inline-flex; align-self: flex-start; align-items: center; gap: .55rem; padding: .42rem .95rem; margin-bottom: 1.3rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hero-etiqueta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 4px rgba(232, 137, 12, .25); }
.hero-texto h1 { color: #fff; font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 1.02; letter-spacing: -.035em; max-width: 15ch; margin-bottom: 1.2rem; text-shadow: 0 4px 30px rgba(0, 0, 0, .3); }
.hero-texto h1 em { font-style: normal; color: #7cc4ff; }
.hero-texto p { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: rgba(255, 255, 255, .9); max-width: 620px; }
.hero-botones { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }
.hero-datos { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }
.hero-datos .contenedor { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, .16); }
.hero-dato { padding: 22px 20px 26px; color: rgba(255, 255, 255, .78); font-size: .92rem; line-height: 1.4; border-left: 1px solid rgba(255, 255, 255, .12); }
.hero-dato:first-child { border-left: 0; padding-left: 0; }
.hero-dato strong { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.85rem; color: #fff; margin-bottom: .2rem; letter-spacing: -.01em; }
.hero-scroll { position: absolute; right: max(20px, calc((100% - var(--ancho)) / 2)); bottom: 150px; z-index: 1; width: 30px; height: 48px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 20px; }
.hero-scroll::after { content: ""; position: absolute; left: 50%; top: 9px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: #fff; animation: rueda 1.8s infinite; }
@keyframes rueda { 0% { opacity: 0; transform: translateY(-4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
.migas { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; font-size: .88rem; color: rgba(255, 255, 255, .72); margin-bottom: 1rem; }
.migas a:hover { color: #fff; text-decoration: underline; }
.migas span[aria-hidden] { opacity: .5; }

/* ---------- 4. Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .9rem 1.45rem; border-radius: 999px; font-weight: 800; font-size: 1rem; line-height: 1.2; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s, border-color .2s; border: 2px solid transparent; cursor: pointer; }
.boton svg { width: 18px; height: 18px; flex: none; }
.boton:hover { transform: translateY(-2px); }
.boton-primario { background: var(--acento); color: #fff; box-shadow: 0 10px 26px rgba(232, 137, 12, .35); }
.boton-primario:hover { background: #f19a26; box-shadow: 0 14px 32px rgba(232, 137, 12, .45); }
.boton-secundario { border-color: rgba(255, 255, 255, .55); color: #fff; background: rgba(255, 255, 255, .06); backdrop-filter: blur(4px); }
.boton-secundario:hover { background: #fff; color: var(--verde-900); border-color: #fff; }
.boton-verde { background: var(--verde-800); color: #fff; box-shadow: 0 10px 24px rgba(18, 54, 95, .25); }
.boton-verde:hover { background: var(--verde-700); }
.boton-borde { border-color: var(--borde-fuerte); color: var(--verde-800); background: #fff; }
.boton-borde:hover { border-color: var(--verde-700); background: var(--verde-50); }
.boton-claro { background: #fff; color: var(--verde-900); }
.boton-claro:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .2); }
.enlace-flecha { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; color: var(--verde-700); }
.enlace-flecha::after { content: "→"; transition: transform .2s; }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* ---------- 5. Títulos de sección ---------- */
.seccion { padding: clamp(64px, 9vw, 112px) 0; position: relative; }
.seccion-blanca { background: #fff; }
.seccion-crema { background: var(--crema); }
.seccion-verde { background: radial-gradient(1200px 500px at 85% -10%, rgba(56, 189, 248, .18), transparent 60%), linear-gradient(160deg, var(--verde-900), var(--verde-950)); color: rgba(255, 255, 255, .86); }
.seccion-verde h2, .seccion-verde h3 { color: #fff; }
.seccion-verde .subtitulo { color: rgba(255, 255, 255, .72); }
.antetitulo { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .9rem; color: var(--verde-600); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.antetitulo::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; }
.centrado .antetitulo::after, .antetitulo.doble::after { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; }
.seccion-verde .antetitulo { color: #7cc4ff; }
.cabeza-seccion { margin-bottom: clamp(32px, 5vw, 52px); }
.cabeza-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

/* ---------- 6. Bloques y tarjetas ---------- */
.intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.intro h2 { margin-bottom: 1.3rem; }
.intro p { color: #3f4d60; margin-bottom: 1.1rem; max-width: 70ch; }
.intro-foto { position: relative; }
.intro-foto picture img, .intro-foto img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 28px; box-shadow: var(--sombra-fuerte); }
.intro-sello { position: absolute; left: -28px; bottom: 34px; background: #fff; border-radius: 20px; padding: 18px 22px; box-shadow: var(--sombra-fuerte); display: flex; align-items: center; gap: 14px; max-width: 260px; }
.intro-sello strong { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--verde-800); }
.intro-sello span { font-size: .9rem; line-height: 1.35; color: var(--texto-suave); font-weight: 600; }

.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 2.2rem; }
.cifra { background: #fff; border: 1px solid var(--borde); border-radius: 18px; padding: 1.3rem 1.4rem; box-shadow: var(--sombra-s); }
.cifra strong { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.9rem; color: var(--verde-800); line-height: 1.1; }
.cifra span { color: var(--texto-suave); font-size: .95rem; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tarjeta { position: relative; background: #fff; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-s); border: 1px solid var(--borde); transition: transform .3s ease, box-shadow .3s ease, border-color .3s; display: flex; flex-direction: column; }
a.tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-fuerte); border-color: var(--borde-fuerte); }
.tarjeta-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #dfe8f2; }
.tarjeta-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 16, 32, .35), transparent 50%); opacity: .7; transition: opacity .3s; pointer-events: none; }
.tarjeta-media img, .tarjeta-media video { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
a.tarjeta:hover .tarjeta-media img, a.tarjeta:hover .tarjeta-media video { transform: scale(1.06); }
.con-icono .tarjeta-contenido { position: relative; }
.tarjeta-icono { position: absolute; left: 22px; top: -26px; z-index: 2; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--verde-800); color: #fff; box-shadow: 0 10px 22px rgba(7, 22, 41, .3); transition: background .3s, transform .3s; }
.tarjeta-icono svg { width: 26px; height: 26px; }
a.tarjeta:hover .tarjeta-icono { background: var(--acento); transform: rotate(-6deg); }
.tarjeta-num { position: absolute; right: 18px; top: 14px; z-index: 2; font-family: var(--serif); font-size: 1rem; color: rgba(255, 255, 255, .9); background: rgba(5, 16, 32, .35); backdrop-filter: blur(6px); padding: .15rem .6rem; border-radius: 999px; }
.tarjeta-contenido { padding: 24px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.con-icono .tarjeta-contenido { padding-top: 42px; }
.tarjeta-contenido h3 { font-size: 1.22rem; margin-bottom: .55rem; color: var(--verde-900); }
.tarjeta-contenido p { color: var(--texto-suave); font-size: .97rem; line-height: 1.6; }
.tarjeta-mas { margin-top: auto; padding-top: 16px; color: var(--verde-700); font-weight: 800; font-size: .93rem; display: inline-flex; gap: .4rem; align-items: center; }
.tarjeta-mas::after { content: "→"; transition: transform .25s; }
a.tarjeta:hover .tarjeta-mas { color: var(--acento-osc); }
a.tarjeta:hover .tarjeta-mas::after { transform: translateX(5px); }

.bloque-dos { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.bloque-dos h2 { margin-bottom: 1.3rem; }
.bloque-dos p { color: #3f4d60; margin-bottom: 1rem; }
.destacado { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--verde-800), var(--verde-600)); color: #fff; padding: clamp(28px, 4vw, 40px); border-radius: 28px; box-shadow: 0 24px 50px rgba(18, 54, 95, .28); }
.destacado::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 196, 255, .35), transparent 70%); }
.destacado h3 { position: relative; color: #fff; font-family: var(--serif); font-weight: 700; font-size: 1.55rem; margin-bottom: .9rem; }
.destacado p { position: relative; color: rgba(255, 255, 255, .88); }
.lista-check { position: relative; list-style: none; margin-top: 1.2rem; display: grid; gap: .7rem; }
.lista-check li { padding-left: 2.1rem; position: relative; color: rgba(255, 255, 255, .95); font-weight: 600; }
.lista-check li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: rgba(255, 255, 255, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237cc4ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat; }

/* Proceso de trabajo */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: paso; }
.paso { position: relative; padding: 30px 26px 28px; border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: background .3s, transform .3s; }
.paso:hover { background: rgba(255, 255, 255, .09); transform: translateY(-4px); }
.paso::before { counter-increment: paso; content: "0" counter(paso); display: block; font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: #7cc4ff; margin-bottom: 1rem; }
.paso h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.paso p { font-size: .95rem; color: rgba(255, 255, 255, .72); line-height: 1.6; }
.paso:not(:last-child)::after { content: ""; position: absolute; top: 52px; right: -16px; width: 10px; height: 10px; border-top: 2px solid rgba(124, 196, 255, .6); border-right: 2px solid rgba(124, 196, 255, .6); transform: rotate(45deg); }

/* Para quién trabajamos */
.clientes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(36px, 5vw, 56px); }
.cliente { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #fff; border: 1px solid var(--borde); border-radius: 16px; font-weight: 600; color: var(--verde-900); box-shadow: var(--sombra-s); }
.cliente svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--acento-50); color: var(--acento-osc); }

.franja { height: clamp(80px, 12vw, 140px); overflow: hidden; background: var(--verde-900); position: relative; }
.franja img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.franja::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 22, 41, .5), transparent 30%, transparent 70%, rgba(7, 22, 41, .5)); }

/* Llamada a la acción */
.cta { position: relative; overflow: hidden; color: #fff; padding: clamp(56px, 8vw, 90px) 0; background: linear-gradient(115deg, rgba(7, 22, 41, .94), rgba(18, 54, 95, .86)), url("../img/franja-campo.webp") center / cover; }
.cta::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 137, 12, .3), transparent 65%); pointer-events: none; }
.cta-contenido { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.cta p { color: rgba(255, 255, 255, .82); margin-top: .5rem; font-size: 1.08rem; }
.cta-botones { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ---------- 7. Contacto y mapa ---------- */
.contacto-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: stretch; }
.contacto-panel { background: #fff; border-radius: 26px; overflow: hidden; border: 1px solid var(--borde); box-shadow: var(--sombra); display: flex; flex-direction: column; }
.contacto-panel-cabecera { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.6rem; color: #fff; background: radial-gradient(420px 200px at 100% 0%, rgba(56, 189, 248, .35), transparent 70%), linear-gradient(135deg, var(--verde-950) 0%, var(--verde-800) 55%, var(--verde-600) 100%); }
.contacto-panel-cabecera::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 14px); pointer-events: none; }
.contacto-sello { position: relative; z-index: 1; flex: none; width: 58px; height: 58px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
.contacto-sello img { width: 44px; height: 44px; object-fit: contain; }
.contacto-panel-cabecera > div { position: relative; z-index: 1; }
.contacto-panel-cabecera h3 { color: #fff; font-size: 1.45rem; letter-spacing: -.02em; }
.contacto-panel-cabecera p { color: rgba(255, 255, 255, .75); font-size: .92rem; margin-top: .1rem; }
.etiqueta { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.contacto-cuerpo { padding: 1.2rem; display: grid; gap: .8rem; flex: 1; align-content: start; }
.contacto-linea { display: grid; grid-template-columns: 48px 1fr; gap: 1rem; align-items: center; padding: .95rem 1.1rem; background: var(--crema); border: 1px solid transparent; border-radius: 18px; transition: border-color .2s, background .2s; }
.contacto-linea:hover { background: #fff; border-color: var(--borde); }
.contacto-icono { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: linear-gradient(135deg, var(--verde-700), var(--verde-500)); color: #fff; box-shadow: 0 6px 14px rgba(26, 77, 133, .25); }
.contacto-icono svg { width: 22px; height: 22px; }
.contacto-label { display: block; margin-bottom: .1rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--verde-600); }
.contacto-linea p { color: var(--verde-900); line-height: 1.5; }
.contacto-linea a { color: var(--verde-800); font-weight: 800; border-bottom: 1px solid rgba(18, 54, 95, .25); }
.contacto-linea a:hover { color: var(--acento-osc); border-bottom-color: currentColor; }
.contacto-horario { margin: 0 1.2rem 1.2rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--verde-50); color: var(--verde-800); font-size: .93rem; display: flex; gap: .75rem; align-items: flex-start; }
.contacto-horario svg { flex: none; width: 20px; height: 20px; margin-top: .15rem; }

.mapa { border-radius: 26px; overflow: hidden; border: 1px solid var(--borde); box-shadow: var(--sombra); background: #dfe8f2; min-height: 420px; position: relative; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa-aviso { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; padding: 1.5rem; background: linear-gradient(135deg, rgba(235, 243, 252, .9), rgba(244, 247, 251, .94)), url("../img/franja-campo.webp") center / cover; }
.mapa-aviso::before { content: ""; width: 64px; height: 64px; border-radius: 50%; background: var(--verde-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / 30px no-repeat; box-shadow: 0 0 0 10px rgba(18, 54, 95, .12); }
.mapa-aviso p { max-width: 440px; color: var(--texto-suave); font-size: .93rem; }
.mapa-aviso a { color: var(--verde-700); }

/* ---------- 8. Tiempo y estación meteorológica ---------- */
.tiempo-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 28px; }
.meteo-panel { background: #fff; border: 1px solid var(--borde); border-radius: 24px; box-shadow: var(--sombra); overflow: hidden; min-width: 0; }
.meteo-card-h { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--borde); background: linear-gradient(180deg, #fff, #f8fbfe); }
.meteo-card-h h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.02rem; font-weight: 800; color: var(--verde-900); }
.meteo-card-h h3 .bi { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--verde-50); color: var(--verde-700); font-size: 1rem; }
.meteo-card-b { padding: 18px 20px 20px; }
.meteo-cargando .spin, .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--verde-100); border-top-color: var(--verde-700); animation: giro .8s linear infinite; display: inline-block; flex: none; }
@keyframes giro { to { transform: rotate(360deg); } }
.meteo-nota-pie { margin-top: 18px; font-size: .86rem; color: var(--texto-suave); display: flex; gap: .5rem 1.5rem; flex-wrap: wrap; }
.meteo-nota-pie a { color: var(--verde-700); font-weight: 700; }
.meteo-aviso a { color: var(--verde-700); font-weight: 700; text-decoration: underline; }
.meteo-respaldo { margin: 14px 0 0 !important; padding: 10px 12px; border-radius: var(--radio-s); background: var(--warn-bg); color: var(--warn-fg) !important; font-size: .8rem; line-height: 1.5; }
.meteo-respaldo a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Paneles del tiempo (mismos estilos que el panel de CAMPO) */
.meteo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:22px;align-items:start}
.meteo-cargando{display:flex;align-items:center;gap:8px;padding:28px 18px;color:var(--texto-suave);font-size:.86rem}
.meteo-hora{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--texto-suave);font-variant-numeric:tabular-nums}
.meteo-hora.is-old{color:#b45309}
.meteo-now-body{padding:16px 18px 18px}
.meteo-now-main{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.meteo-now-temp{font-size:3rem;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--texto);font-variant-numeric:tabular-nums}
.meteo-now-temp span{font-size:1.2rem;font-weight:600;color:var(--texto-suave);margin-left:2px;vertical-align:top}
.meteo-now-meta{font-size:.84rem;line-height:1.55;color:var(--texto-suave)}
.meteo-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.meteo-tile{padding:10px 12px;border:1px solid var(--borde);border-radius:var(--radio-s);background:var(--crema)}
.meteo-tile-label{display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-suave)}
.meteo-tile strong{display:block;margin-top:4px;font-size:1.15rem;font-weight:700;color:var(--texto);font-variant-numeric:tabular-nums}
.meteo-tile strong small{font-size:.75rem;font-weight:600;color:var(--texto-suave)}
.meteo-tile-sub{display:block;margin-top:2px;font-size:.74rem;color:var(--texto-suave)}
.meteo-aviso{display:flex;gap:12px;align-items:flex-start;padding:18px;color:var(--texto-suave);font-size:.86rem}
.meteo-aviso>i{font-size:1.4rem;color:var(--texto-suave)}
.meteo-aviso strong{display:block;color:var(--texto);margin-bottom:2px}
.meteo-aviso code{font-size:.8rem}
.meteo-resumen{display:flex;flex-wrap:wrap;gap:14px;font-size:.8rem;color:var(--texto-suave)}
.meteo-resumen span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.meteo-trat{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:12px;border-radius:var(--radio-s);border:1px solid transparent;font-size:.84rem}
.meteo-trat>i{font-size:1.25rem}
.meteo-trat strong{display:block;font-size:.88rem}
.meteo-trat span{color:inherit;opacity:.85}
.meteo-trat-ok{background:var(--ok-bg);color:var(--ok-fg)}
.meteo-trat-precaucion{background:var(--warn-bg);color:var(--warn-fg)}
.meteo-trat-no{background:var(--bad-bg);color:var(--bad-fg)}
.meteo-alertas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.meteo-alerta{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--info-bg);color:var(--info-fg);font-size:.78rem;font-weight:600}
.meteo-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;list-style:none;margin:0 0 14px;padding:0}
.meteo-dia{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border:1px solid var(--borde);border-radius:var(--radio-s);background:var(--crema);text-align:center}
.meteo-dia.is-hoy{background:var(--verde-50);border-color:color-mix(in srgb,var(--verde-700) 35%,var(--borde))}
.meteo-dia-nombre{font-size:.74rem;font-weight:650;color:var(--texto)}
.meteo-dia>i{font-size:1.5rem;color:var(--verde-900);line-height:1.2}
.meteo-dia-temp{font-size:.82rem;color:var(--texto-suave);font-variant-numeric:tabular-nums}
.meteo-dia-temp strong{color:var(--texto);font-size:.92rem}
.meteo-dia-lluvia,.meteo-dia-viento{font-size:.72rem;color:var(--texto-suave);white-space:nowrap}
.meteo-dia-mm{font-size:.72rem;font-weight:650;color:#1d6fb8;font-variant-numeric:tabular-nums}
.meteo-dia-lluvia.is-probable{color:#1d6fb8;font-weight:650}
.meteo-grafico-head{font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:6px}
.meteo-grafico{height:150px}
.meteo-lluvia-h{display:flex;gap:1px;height:16px;margin:6px 0 0;padding-left:34px}
.meteo-lluvia-h span{flex:1;border-radius:2px;background:rgba(42,120,214,calc(var(--p) / 100));min-width:1px}
.meteo-lluvia-h span:hover{outline:1px solid #2a78d6}
.meteo-fuente{margin:10px 0 0;font-size:.72rem;color:var(--texto-suave)}
/* --- Estación Ecowitt v2 (panel visual) --- */
.meteo-now{display:flex;flex-direction:column}
.mx-body{padding:14px;display:flex;flex-direction:column;gap:12px;flex:1;container-type:inline-size}
.mx-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:mxPulso 2s infinite}
.mx-live.is-off{background:#d97706;animation:none}
@keyframes mxPulso{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.mx-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;align-items:center;padding:16px 18px;border-radius:14px;color:#fff;
  background:radial-gradient(120% 140% at 0% 0%,#2d78b8 0%,transparent 55%),linear-gradient(135deg,#0f2a44 0%,#16426b 60%,#1f5f96 100%)}
.mx-hero.is-noche{background:radial-gradient(120% 140% at 0% 0%,#2a3f6b 0%,transparent 55%),linear-gradient(135deg,#0b1626 0%,#14233d 60%,#1d3357 100%)}
.mx-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(239,125,0,.18);filter:blur(2px);pointer-events:none}
.mx-hero-main{display:flex;align-items:center;gap:14px;min-width:0}
.mx-cond{font-size:2.9rem;line-height:1;color:#ffd27a;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.mx-hero.is-noche .mx-cond{color:#dbe6ff}
.mx-temp{font-size:3rem;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.mx-temp span{font-size:1.15rem;font-weight:600;opacity:.75;margin-left:2px;vertical-align:top}
.mx-cond-txt{margin-top:6px;font-size:.84rem;opacity:.85}
.mx-hero-side{position:relative;z-index:1;min-width:0}
.mx-minmax{display:flex;gap:12px;justify-content:flex-end;font-size:.86rem;font-weight:600;font-variant-numeric:tabular-nums;min-height:1.3em}
.mx-minmax span{display:inline-flex;align-items:baseline;gap:3px}
.mx-minmax i{font-size:.75rem;opacity:.8}
.mx-minmax small{font-size:.68rem;font-weight:500;opacity:.65;margin-left:3px}
.mx-spark{height:62px;margin-top:4px}
.mx-spark-lbl{font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;opacity:.6;text-align:right}
.mx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.mx-card{--mx-c:#0f5f99;--mx-s:rgba(15,95,153,.1);padding:11px 12px;border:1px solid var(--borde);border-radius:12px;background:var(--blanco);position:relative;transition:border-color .15s,box-shadow .15s}
.mx-card:hover{border-color:color-mix(in srgb,var(--mx-c) 45%,var(--borde));box-shadow:0 6px 16px rgba(15,42,68,.07)}
.mx-card-h{display:flex;align-items:center;gap:8px;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:6px}
.mx-ico{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--mx-s);color:var(--mx-c);font-size:.8rem}
.mx-viento{--mx-c:#0e8f8a;--mx-s:rgba(14,143,138,.12)}
.mx-humedad{--mx-c:#2a78d6;--mx-s:rgba(42,120,214,.12)}
.mx-lluvia{--mx-c:#4f46e5;--mx-s:rgba(79,70,229,.12)}
.mx-presion{--mx-c:#64748b;--mx-s:rgba(100,116,139,.14)}
.mx-sol{--mx-c:#e08a00;--mx-s:rgba(239,125,0,.14)}
.mx-dia{--mx-c:#c2410c;--mx-s:rgba(194,65,12,.1)}
.mx-extra{--mx-c:#2e8b57;--mx-s:rgba(46,139,87,.12)}
.mx-val{font-size:1.45rem;font-weight:700;color:var(--texto);line-height:1.1;font-variant-numeric:tabular-nums}
.mx-val small{font-size:.74rem;font-weight:600;color:var(--texto-suave);margin-left:4px}
.mx-sub{font-size:.74rem;color:var(--texto-suave);margin-top:3px}
.mx-sub b{color:var(--texto)}
.mx-strong{color:var(--texto);font-weight:600;font-size:.8rem}
.mx-row{display:flex;align-items:center;gap:12px}
.mx-chip{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:2px 8px;border-radius:999px;background:var(--mx-s);color:var(--mx-c);font-size:.7rem;font-weight:700}
.mx-chip.is-rain{animation:mxLluvia 1.6s ease-in-out infinite}
@keyframes mxLluvia{50%{opacity:.55}}
.mx-brujula{width:72px;height:72px;flex:0 0 72px}
.mx-brujula>circle:first-child{fill:var(--mx-s);stroke:color-mix(in srgb,var(--mx-c) 35%,transparent);stroke-width:1.5}
.mx-marcas line{stroke:color-mix(in srgb,var(--mx-c) 55%,transparent);stroke-width:1.2}
.mx-brujula text{font-size:8px;font-weight:700;fill:var(--texto-suave);text-anchor:middle}
.mx-aguja{fill:var(--mx-c)}
.mx-cola{fill:color-mix(in srgb,var(--mx-c) 35%,transparent)}
.mx-centro{fill:var(--blanco);stroke:var(--mx-c);stroke-width:1.5}
.mx-anillo{width:72px;height:72px;flex:0 0 72px}
.mx-anillo circle{fill:none;stroke:var(--mx-s);stroke-width:8}
.mx-anillo .mx-anillo-v{stroke:var(--mx-c);stroke-linecap:round;transition:stroke-dasharray .6s}
.mx-anillo text{font-size:15px;font-weight:700;fill:var(--texto);text-anchor:middle}
.mx-mini{display:flex;gap:6px;margin-top:8px}
.mx-mini span{flex:1;padding:4px 6px;border-radius:8px;background:var(--mx-s);font-size:.64rem;text-transform:uppercase;letter-spacing:.04em;color:var(--texto-suave);text-align:center}
.mx-mini b{display:block;font-size:.84rem;letter-spacing:0;text-transform:none;color:var(--texto);font-variant-numeric:tabular-nums}
.mx-tend{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--texto)}
.mx-tend.is-up{color:#1f8a4c}
.mx-tend.is-down{color:#c2410c}
.mx-uv{margin-top:8px}
.mx-uv-bar{position:relative;height:6px;border-radius:999px;background:linear-gradient(90deg,#3fae49 0%,#3fae49 22%,#f2c200 27%,#f2c200 50%,#f08a00 55%,#f08a00 68%,#d62f2f 73%,#d62f2f 95%,#8e44ad 100%)}
.mx-uv-bar span{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--blanco);border:2px solid var(--texto);transform:translate(-50%,-50%)}
@container (max-width:560px){
  .mx-hero{grid-template-columns:1fr;gap:6px}
  .mx-minmax{justify-content:flex-start}
  .mx-spark-lbl{text-align:left}
  .mx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:575.98px){.mx-hero{grid-template-columns:1fr}.mx-minmax{justify-content:flex-start}.mx-temp{font-size:2.5rem}}
@media (max-width:1199.98px){.meteo-grid{grid-template-columns:1fr}}
@media (max-width:767.98px){.meteo-dias{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(92px,1fr);overflow-x:auto;padding-bottom:4px}.meteo-now-temp{font-size:2.4rem}}
.meteo-dia.is-hoy{background:var(--crema)}
.meteo-dia>i{color:var(--azul)}
/* ---------- Semáforo de tratamientos en la previsión ---------- */
.meteo-dias-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-suave)}
.meteo-leyenda{display:inline-flex;flex-wrap:wrap;gap:12px;text-transform:none;letter-spacing:0;font-weight:600}
.meteo-leyenda span{display:inline-flex;align-items:center;gap:4px}
.ley-ok{color:#1f8a3a}
.ley-prec{color:#b77900}
.ley-no{color:#c62828}
.meteo-dia{position:relative;border-width:1px;border-top-width:5px!important;padding-top:8px}
.meteo-apt{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.02em}
.meteo-apt-franja{font-size:.68rem;font-weight:600;color:var(--texto-suave);margin-bottom:2px;white-space:nowrap}
.meteo-apt-ok{border-color:#2e9e4a!important;background:#eef9f0!important}
.meteo-apt-ok .meteo-apt{background:#2e9e4a;color:#fff}
.meteo-apt-prec{border-color:#e6a700!important;background:#fffaeb!important}
.meteo-apt-prec .meteo-apt{background:#f2b400;color:#3b2a00}
.meteo-apt-no{border-color:#d32f2f!important;background:#fdf0f0!important}
.meteo-apt-no .meteo-apt{background:#d32f2f;color:#fff}
.meteo-dia.is-hoy{box-shadow:0 0 0 2px var(--azul) inset}
.meteo-criterio{margin:-4px 0 14px;font-size:.72rem;line-height:1.45;color:var(--texto-suave)}
.meteo-apt{white-space:nowrap;font-size:.66rem}
.meteo-apt-fin{border-color:var(--borde-fuerte)!important;background:var(--crema)!important;opacity:.8}
.meteo-apt-fin .meteo-apt{background:var(--borde);color:var(--texto-suave)}
/* Informe climático (mismos estilos que las estadísticas de CAMPO) */
.ms-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1rem}
.ms-toolbar .ms-estado{flex:1 1 260px;font-size:.84rem;color:var(--texto-suave);display:flex;align-items:center;gap:.45rem;min-width:0}
.ms-toolbar .ms-estado.is-error{color:var(--bad-fg)}
.ms-seg{display:inline-flex;border:1px solid var(--borde);border-radius:10px;overflow:hidden;background:var(--blanco)}
.ms-seg button{border:0;background:transparent;padding:.42rem .8rem;font-size:.82rem;font-weight:600;color:var(--texto-suave)}
.ms-seg button.active{background:var(--verde-800);color:#fff}
.ms-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}
.ms-kpi{background:var(--blanco);border:1px solid var(--borde);border-radius:14px;padding:.85rem 1rem;border-top:3px solid var(--verde-800);min-width:0}
.ms-kpi.is-accent{border-top-color:var(--acento)}
.ms-kpi small{display:block;text-transform:uppercase;letter-spacing:.04em;font-size:.66rem;font-weight:700;color:var(--texto-suave)}
.ms-kpi strong{display:block;font-size:1.45rem;font-weight:700;color:var(--texto);line-height:1.2;margin-top:.15rem;white-space:nowrap}
.ms-kpi strong span{font-size:.85rem;font-weight:600;color:var(--texto-suave);margin-left:.15rem}
.ms-kpi p{margin:.25rem 0 0;font-size:.76rem;color:var(--texto-suave)}
.ms-badge{display:inline-block;padding:.05rem .45rem;border-radius:999px;font-weight:700;font-size:.72rem}
.ms-badge.up{background:var(--ok-bg);color:var(--ok-fg)}
.ms-badge.down{background:var(--bad-bg);color:var(--bad-fg)}
.ms-badge.eq{background:var(--info-bg);color:var(--info-fg)}
.ms-grid2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1rem;margin-bottom:1rem}
.ms-card{margin-bottom:1rem}
.ms-card .meteo-card-h{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.ms-chart{position:relative;height:300px;padding:14px 16px}
.ms-chart.sm{height:240px}
.ms-table{font-size:.82rem;margin:0}
.ms-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.ms-table td,.ms-table th{padding:.42rem .55rem;vertical-align:middle}
.ms-table td.num,.ms-table th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ms-table tr.ms-row-sum td{font-weight:700;background:var(--crema)}
.ms-table tr.is-sel td{box-shadow:inset 0 0 0 9999px rgba(232,137,12,.10)}
.ms-heat td.cell{text-align:right;font-variant-numeric:tabular-nums;min-width:52px;cursor:pointer}
.ms-heat td.cell:hover{outline:2px solid var(--acento);outline-offset:-2px}
.ms-heat td.na{color:var(--texto-suave);opacity:.5;text-align:center}
.ms-cal{display:grid;grid-template-columns:42px repeat(31,minmax(0,1fr));gap:2px;padding:14px 16px;font-size:.66rem}
.ms-cal .lbl{color:var(--texto-suave);font-weight:700;display:flex;align-items:center}
.ms-cal .hd{color:var(--texto-suave);text-align:center}
.ms-cal .d{aspect-ratio:1;border-radius:3px;background:var(--crema);border:1px solid var(--borde);cursor:pointer;min-width:0}
.ms-cal .d.x{visibility:hidden}
.ms-cal .d.nd{background:repeating-linear-gradient(45deg,transparent 0 3px,var(--borde) 3px 4px)}
.ms-cal .d.sel{outline:2px solid var(--acento);outline-offset:0}
.ms-cal-ley{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--texto-suave);padding:0 16px 12px}
.ms-cal-ley i{width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid var(--borde)}
.ms-list{list-style:none;margin:0;padding:0}
.ms-list li{display:flex;justify-content:space-between;gap:.6rem;padding:.48rem 1rem;border-bottom:1px solid var(--borde);font-size:.84rem}
.ms-list li:last-child{border-bottom:0}
.ms-list li b{font-variant-numeric:tabular-nums}
.ms-list .rk{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;background:var(--info-bg);color:var(--info-fg);font-size:.7rem;font-weight:700;margin-right:.45rem}
.ms-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding:14px 16px 4px}
.ms-mini div{background:var(--crema);border:1px solid var(--borde);border-radius:10px;padding:.55rem .7rem}
.ms-mini small{display:block;font-size:.68rem;color:var(--texto-suave);text-transform:uppercase;font-weight:700}
.ms-mini b{font-size:1.05rem}
.ms-tabs{padding:0 16px;border-bottom:1px solid var(--borde);gap:.2rem;flex-wrap:nowrap;overflow-x:auto}
.ms-tabs button{border:0;border-bottom:2px solid transparent;color:var(--texto-suave);font-weight:600;font-size:.84rem;padding:.7rem .75rem;white-space:nowrap;border-radius:0;background:none}
.ms-tabs button.active{color:var(--verde-800);border-bottom-color:var(--acento);background:none}
.ms-sel{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.ms-sel .form-select{width:auto;font-size:.82rem;padding-top:.3rem;padding-bottom:.3rem}
.ms-nota{font-size:.75rem;color:var(--texto-suave);padding:.6rem 16px 14px;margin:0}
.ms-vacio{padding:2.5rem 1rem;text-align:center;color:var(--texto-suave)}
@media(max-width:1200px){.ms-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:992px){.ms-grid2{grid-template-columns:1fr}}
@media(max-width:640px){.ms-kpis{grid-template-columns:1fr 1fr}.ms-cal{grid-template-columns:28px repeat(31,minmax(0,1fr));gap:1px;padding:10px}.ms-cal .hd{font-size:.5rem}.ms-mini{grid-template-columns:1fr 1fr}}

/* ---------- 9. Informe climático ---------- */
.clima-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; margin-bottom: 26px; }
.clima-intro p { color: var(--texto-suave); }
.clima-ficha { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.clima-ficha div { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: .7rem .9rem; font-size: .85rem; color: var(--texto-suave); }
.clima-ficha b { display: block; color: var(--verde-900); font-size: 1rem; }
.ms-toolbar { position: sticky; top: calc(var(--cab) + 8px); z-index: 20; padding: 10px 12px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra-s); }
.ms-seg button { cursor: pointer; }
.ms-seg button.active { background: var(--verde-800) !important; }
.ms-kpi { box-shadow: var(--sombra-s); border-radius: 16px !important; }
.ms-kpi strong { font-family: var(--serif); font-weight: 700 !important; }
.ms-chart canvas { max-height: 100%; }
.ms-tabs { display: flex; list-style: none; }
.ms-tabs button { cursor: pointer; }
.ms-tabs button.active { color: var(--verde-800); border-bottom-color: var(--acento); }
.ms-grid2 > .meteo-panel, .ms-card { min-width: 0; }
.ms-card { margin-bottom: 1rem; }
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 10px; border: 1px solid var(--borde-fuerte); background: #fff; color: var(--verde-900); font-size: .84rem; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s; }
.btn:hover { background: var(--verde-50); border-color: var(--verde-700); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primario { background: var(--verde-800); border-color: var(--verde-800); color: #fff; }
.btn-primario:hover { background: var(--verde-700); border-color: var(--verde-700); }
.btn-sm { padding: .3rem .6rem; }
.form-select { font: inherit; font-size: .85rem; padding: .38rem 2rem .38rem .7rem; border: 1px solid var(--borde-fuerte); border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232f4f2f' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") right .6rem center / 12px no-repeat; appearance: none; color: var(--texto); }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; color: var(--texto-suave); font-weight: 800; background: var(--crema); border-bottom: 1px solid var(--borde-fuerte); }
.table td { border-bottom: 1px solid var(--borde); }
.table tbody tr:hover td { background: rgba(235, 243, 252, .6); }
.text-muted { color: var(--texto-suave) !important; }
.small { font-size: .84rem; }
.me-1 { margin-right: .25rem; } .me-2 { margin-right: .5rem; }
.spinner-border { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--verde-100); border-top-color: var(--verde-700); animation: giro .8s linear infinite; flex: none; }
.spinner-border-sm { width: .9rem; height: .9rem; }
.ms-px { padding: 0 16px; }
dialog.modal { border: 0; border-radius: 22px; padding: 0; width: min(520px, calc(100% - 32px)); box-shadow: var(--sombra-fuerte); color: var(--texto); }
dialog.modal::backdrop { background: rgba(5, 16, 32, .55); backdrop-filter: blur(3px); }
.modal-h { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 18px 22px; border-bottom: 1px solid var(--borde); }
.modal-h h3 { font-size: 1.1rem; display: flex; gap: .5rem; align-items: center; }
.modal-x { border: 0; background: var(--crema); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; line-height: 1; }
.modal-b { padding: 18px 22px; display: grid; gap: 1rem; font-size: .93rem; }
.modal-b fieldset { border: 0; display: grid; gap: .4rem; }
.modal-b legend { font-weight: 800; margin-bottom: .3rem; color: var(--verde-900); }
.modal-b label { display: flex; gap: .5rem; align-items: center; cursor: pointer; }
.modal-b .fila { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.modal-b .form-select { width: 100%; }
.modal-b .ayuda { font-size: .8rem; color: var(--texto-suave); }
.modal-error { padding: .7rem .9rem; border-radius: 12px; background: var(--bad-bg); color: var(--bad-fg); font-size: .85rem; }
.modal-f { display: flex; justify-content: flex-end; gap: .6rem; padding: 14px 22px 20px; }
.clima-fuente { margin-top: 1.5rem; font-size: .84rem; color: var(--texto-suave); }

/* ---------- 10. Pie, flotantes y animaciones ---------- */
.pie { background: var(--verde-950); color: rgba(255, 255, 255, .72); padding: clamp(56px, 7vw, 80px) 0 28px; font-size: .95rem; position: relative; }
.pie::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--verde-600), var(--cian), var(--acento)); }
.pie-columnas { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.pie h3 { color: #fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem; }
.pie ul { list-style: none; display: grid; gap: .55rem; }
.pie a { transition: color .2s; }
.pie a:hover { color: #fff; }
.pie-logo { background: #fff; display: inline-block; padding: 10px 14px; border-radius: 12px; margin-bottom: 1.1rem; }
.pie-logo img { height: 30px; width: auto; }
.pie-texto { max-width: 36ch; line-height: 1.65; }
.pie-tiempo { display: flex; align-items: center; gap: .6rem; margin-top: 1.2rem; padding: .7rem .9rem; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.pie-tiempo svg { width: 22px; height: 22px; flex: none; color: #7cc4ff; }
.pie-tiempo { display: inline-flex; }
.pie-tiempo:hover { background: rgba(255, 255, 255, .1); }
.pie-legal { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .86rem; color: rgba(255, 255, 255, .55); }
.pie-legal nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }

.flotantes { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.flotante { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 0; cursor: pointer; box-shadow: 0 10px 26px rgba(5, 16, 32, .3); transition: transform .2s, opacity .3s, visibility .3s; }
.flotante:hover { transform: translateY(-3px); }
.flotante svg { width: 22px; height: 22px; }
.flotante-subir { background: #fff; color: var(--verde-800); opacity: 0; visibility: hidden; }
.flotante-subir.visible { opacity: 1; visibility: visible; }
.flotante-tel { background: var(--acento); color: #fff; display: none; }

.aparece { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.aparece.visible { opacity: 1; transform: none; }
.grid > .aparece:nth-child(3n+2), .pasos > .aparece:nth-child(2) { transition-delay: .08s; }
.grid > .aparece:nth-child(3n), .pasos > .aparece:nth-child(3) { transition-delay: .16s; }
.pasos > .aparece:nth-child(4) { transition-delay: .24s; }
.no-js .aparece { opacity: 1; transform: none; }

/* Textos legales */
.legal { max-width: 860px; }
.legal h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin-bottom: 1rem; }
.legal h2 { font-size: 1.5rem; margin: 2.2rem 0 .7rem; }
.legal p, .legal li { color: #3f4d60; margin-bottom: .7rem; }
.legal ul { padding-left: 1.3rem; }
.legal a { color: var(--verde-700); text-decoration: underline; }

/* ---------- Adaptación a pantallas ---------- */
@media (max-width: 1100px) {
  .pie-columnas { grid-template-columns: 1fr 1fr; }
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .paso:nth-child(2)::after { display: none; }
  .clientes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  :root { --cab: 66px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .bloque-dos, .intro-grid, .contacto-grid, .clima-intro { grid-template-columns: 1fr; }
  .intro-sello { left: 16px; }
  .menu-boton { display: inline-flex; }
  .navegacion { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--borde); box-shadow: 0 20px 30px rgba(0, 0, 0, .12); display: none; padding: 12px 20px 20px; max-height: calc(100vh - var(--cab)); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 10px; }
  .navegacion.abierta { display: flex; }
  .menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .menu a, .menu button.submenu-boton { width: 100%; justify-content: space-between; padding: 13px 12px; font-size: 1rem; }
  .menu > li > a::after, .menu > li > button.submenu-boton::after { display: none; }
  .menu a[aria-current="page"] { background: var(--verde-50); }
  .submenu { position: static; box-shadow: none; border: 0; background: var(--crema); margin: 4px 0 6px; padding: 4px; min-width: 0; display: none; opacity: 1; visibility: visible; transform: none; }
  .submenu::before { display: none; }
  .tiene-submenu:hover > .submenu { display: none; }
  .tiene-submenu.abierto > .submenu { display: block; }
  .boton-cabecera { width: 100%; }
  .cifras { grid-template-columns: 1fr; }
  .hero-datos .contenedor { grid-template-columns: repeat(2, 1fr); }
  .hero-dato:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero-dato { padding: 14px 16px; }
  .hero-inicio .hero-texto { padding-bottom: 210px; }
  .hero-scroll { display: none; }
  .barra-datos .solo-ancho { display: none; }
}
@media (max-width: 680px) {
  body { font-size: 1rem; }
  .logo { height: 30px; }
  .barra-superior { display: none; }
  .grid, .pasos, .clientes { grid-template-columns: 1fr; }
  .paso::after { display: none; }
  .hero-texto h1 { max-width: none; }
  .hero-dato strong { font-size: 1.4rem; }
  .hero-dato { font-size: .82rem; }
  .contacto-panel-cabecera { padding: 1.2rem; }
  .contacto-panel-cabecera h3 { font-size: 1.25rem; }
  .contacto-cuerpo { padding: .9rem; }
  .contacto-linea { grid-template-columns: 42px 1fr; padding: .85rem; }
  .contacto-icono { width: 42px; height: 42px; }
  .mapa { min-height: 360px; }
  .cta-contenido { flex-direction: column; align-items: flex-start; }
  .pie-columnas { grid-template-columns: 1fr; }
  .flotante-tel { display: grid; }
  .ms-toolbar { position: static; }
  .clima-ficha { grid-template-columns: 1fr 1fr; }
}
@media print {
  .barra-superior, .cabecera, .flotantes, .pie, .ms-toolbar, .cta { display: none !important; }
  body { background: #fff; }
  .aparece { opacity: 1 !important; transform: none !important; }
}

/* ---------- 11. Animaciones ---------- */
.progreso { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 2000; background: linear-gradient(90deg, var(--verde-600), var(--cian)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
/* Entrada escalonada de la portada */
.hero-texto > * { opacity: 0; animation: subeHero .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.hero-texto > :nth-child(1) { animation-delay: .1s; }
.hero-texto > :nth-child(2) { animation-delay: .25s; }
.hero-texto > :nth-child(3) { animation-delay: .4s; }
.hero-texto > :nth-child(4) { animation-delay: .55s; }
.hero-texto > :nth-child(5) { animation-delay: .7s; }
@keyframes subeHero { from { opacity: 0; transform: translateY(28px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.hero-dato { opacity: 0; animation: subeHero .8s ease forwards; }
.hero-dato:nth-child(1) { animation-delay: .8s; } .hero-dato:nth-child(2) { animation-delay: .9s; } .hero-dato:nth-child(3) { animation-delay: 1s; } .hero-dato:nth-child(4) { animation-delay: 1.1s; }
.hero-texto h1 em { background: linear-gradient(90deg, #7cc4ff, #c9e8ff, #38bdf8, #7cc4ff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brillo 6s linear infinite; }
@keyframes brillo { to { background-position: -200% 0; } }
.hero-etiqueta::before { animation: latido 2s ease-in-out infinite; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 4px rgba(232, 137, 12, .25); } 50% { box-shadow: 0 0 0 9px rgba(232, 137, 12, 0); } }
/* Variantes de aparición */
.intro-grid > .aparece:first-child, .bloque-dos > .aparece:first-child { transform: translateX(-40px); }
.intro-grid > .aparece:nth-child(2), .bloque-dos > .aparece:nth-child(2), .contacto-grid > .aparece:nth-child(2) { transform: translateX(40px); }
.destacado.aparece, .cliente.aparece { transform: scale(.92); }
.aparece.visible { transform: none !important; }
.clientes > .aparece:nth-child(2) { transition-delay: .08s; } .clientes > .aparece:nth-child(3) { transition-delay: .16s; } .clientes > .aparece:nth-child(4) { transition-delay: .24s; }
.antetitulo::before, .antetitulo::after { transition: width .8s .2s ease; }
.cabeza-seccion:not(.visible-t) .antetitulo::before, .cabeza-seccion:not(.visible-t) .antetitulo::after { width: 0; }
/* Sello flotante y fotos */
.intro-sello { animation: flota 5s ease-in-out infinite; }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.intro-foto { overflow: visible; }
.intro-foto picture { display: block; border-radius: 28px; overflow: hidden; box-shadow: var(--sombra-fuerte); }
.intro-foto picture img { box-shadow: none; border-radius: 0; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.intro-foto:hover picture img { transform: scale(1.06); }
.intro-foto::before { content: ""; position: absolute; right: -18px; top: -18px; width: 120px; height: 120px; border-radius: 24px; background: repeating-linear-gradient(45deg, rgba(232, 137, 12, .28) 0 2px, transparent 2px 10px); z-index: -1; animation: flota 7s ease-in-out infinite reverse; }
/* Brillo al pasar por las tarjetas */
.tarjeta-media::before { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); pointer-events: none; }
a.tarjeta:hover .tarjeta-media::before { animation: barrido .9s ease; }
@keyframes barrido { to { left: 130%; } }
.boton-primario { position: relative; overflow: hidden; }
.boton-primario::after { content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); animation: barridoBoton 4.5s ease-in-out 2s infinite; }
@keyframes barridoBoton { 0%, 70% { left: -80%; } 100% { left: 140%; } }
/* Cinta con los servicios en movimiento */
.cinta { overflow: hidden; background: linear-gradient(90deg, var(--verde-700), var(--verde-600) 50%, var(--verde-700)); color: #fff; padding: 16px 0; position: relative; }
.cinta-oscura { background: var(--verde-900); }
.cinta-pista { display: flex; width: max-content; animation: cinta 45s linear infinite; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta span { display: inline-flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem; font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.35rem); white-space: nowrap; }
.cinta span::after { content: "✦"; font-family: var(--sans); font-size: .8em; opacity: .7; }
@keyframes cinta { to { transform: translateX(-50%); } }
/* Proceso: línea que se dibuja */
.pasos { position: relative; }
.pasos::before { content: ""; position: absolute; left: 0; right: 0; top: 52px; height: 2px; background: linear-gradient(90deg, rgba(124, 196, 255, .0), rgba(124, 196, 255, .5), rgba(124, 196, 255, 0)); transform: scaleX(0); transform-origin: left; transition: transform 1.6s ease .3s; z-index: 0; }
.pasos.visible-t::before { transform: scaleX(1); }
.paso { z-index: 1; backdrop-filter: blur(2px); }
.paso::before { transition: transform .4s; }
.paso:hover::before { transform: scale(1.12) rotate(-4deg); }
/* Preguntas frecuentes */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.faq { display: grid; gap: 12px; }
.faq-item { background: var(--crema); border: 1px solid var(--borde); border-radius: 18px; transition: background .25s, box-shadow .25s; }
.faq-item[open] { background: #fff; box-shadow: var(--sombra); }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font-weight: 800; color: var(--verde-900); position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; display: grid; place-items: center; background: var(--verde-800); color: #fff; font-weight: 600; transition: transform .3s, background .3s; }
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--acento); }
.faq-item p { padding: 0 22px 20px; color: var(--texto-suave); animation: subeHero .45s ease; }
/* Iconos de clientes y contacto */
.cliente svg, .contacto-icono { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.cliente:hover svg, .contacto-linea:hover .contacto-icono { transform: scale(1.12) rotate(-6deg); }
.cliente { transition: transform .3s, box-shadow .3s, opacity .7s ease; }
.cliente:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
@media (max-width: 980px) { .faq-grid { grid-template-columns: 1fr; } .pasos::before { display: none; } }
.cliente.aparece.visible:hover { transform: translateY(-4px) !important; }
@media (min-width: 981px) {
  .menu > li:last-child > a { margin-left: 8px; padding: 9px 18px; border: 1.5px solid var(--borde-fuerte); border-radius: 999px; transition: background .25s, color .25s, border-color .25s; }
  .menu > li:last-child > a::after { display: none; }
  .menu > li:last-child > a:hover, .menu > li:last-child > a[aria-current="page"] { background: var(--verde-800); border-color: var(--verde-800); color: #fff; }
}
/* Dron topográfico */
#dron .intro-grid { align-items: center; }
#dron p { color: rgba(255, 255, 255, .8); margin-bottom: 1rem; }
#dron strong { color: #fff; }
.dron-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dron-datos div { padding: 22px 20px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); transition: transform .3s, background .3s; }
.dron-datos div:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .1); }
.dron-datos strong { display: block; font-family: var(--serif); font-weight: 700; font-size: 2.2rem; line-height: 1.1; color: #7cc4ff !important; }
.dron-datos span { font-size: .9rem; color: rgba(255, 255, 255, .72); }
.entregables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(36px, 5vw, 56px); }
.entregable { position: relative; padding: 24px 24px 22px 24px; border-radius: 20px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-top: 3px solid var(--acento); transition: background .3s, transform .3s; }
.entregable:hover { background: rgba(255, 255, 255, .08); transform: translateY(-4px); }
.entregable h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.entregable p { font-size: .94rem; color: rgba(255, 255, 255, .7) !important; margin: 0 !important; line-height: 1.6; }
.entregables > .aparece:nth-child(3n+2) { transition-delay: .08s; } .entregables > .aparece:nth-child(3n) { transition-delay: .16s; }
@media (max-width: 980px) { .entregables { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .entregables, .dron-datos { grid-template-columns: 1fr; } }
#dron h2 { margin-bottom: 1.2rem; }
/* Política de cookies */
.legal-fecha { color: var(--texto-suave); font-size: .92rem; }
.legal-resumen { margin: 1.6rem 0 1rem; padding: 1.2rem 1.4rem; border-radius: 18px; background: var(--verde-50); border: 1px solid var(--borde); border-left: 4px solid var(--verde-600); }
.legal-resumen strong { display: block; color: var(--verde-900); margin-bottom: .4rem; }
.legal-resumen ul { margin: 0; }
.legal-resumen li { margin-bottom: .25rem; }
.tabla-legal-envoltorio { overflow-x: auto; margin: 1rem 0 1.2rem; border: 1px solid var(--borde); border-radius: 16px; background: #fff; box-shadow: var(--sombra-s); }
.tabla-legal { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .9rem; }
.tabla-legal th { text-align: left; padding: .8rem 1rem; background: var(--verde-900); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.tabla-legal td { padding: .85rem 1rem; border-top: 1px solid var(--borde); vertical-align: top; color: #3f4d60; line-height: 1.5; }
.tabla-legal code { font-size: .82rem; background: var(--verde-50); padding: .1rem .35rem; border-radius: 6px; color: var(--verde-800); }
.tabla-legal small { color: var(--texto-suave); }