/* Web pública de InfoQR (dominio principal): portada, sectores y ejemplos.
   Tipografías autoalojadas: Overpass (rótulos, emparentada con la señalética
   de carretera), Source Sans 3 (texto) y Overpass Mono (direcciones y códigos). */
@font-face { font-family:'Overpass'; font-weight:800; font-display:swap; src:url('fuentes/overpass-800.woff2') format('woff2'); }
@font-face { font-family:'Overpass'; font-weight:700; font-display:swap; src:url('fuentes/overpass-700.woff2') format('woff2'); }
@font-face { font-family:'Overpass Mono'; font-weight:500; font-display:swap; src:url('fuentes/overpass-mono-500.woff2') format('woff2'); }
@font-face { font-family:'Source Sans 3'; font-weight:400; font-display:swap; src:url('fuentes/source-sans-3-400.woff2') format('woff2'); }
@font-face { font-family:'Source Sans 3'; font-weight:400; font-style:italic; font-display:swap; src:url('fuentes/source-sans-3-400i.woff2') format('woff2'); }
@font-face { font-family:'Source Sans 3'; font-weight:600; font-display:swap; src:url('fuentes/source-sans-3-600.woff2') format('woff2'); }

:root {
    --tinta:#0e1a33;
    --tinta-2:#18284a;
    --cobalto:#2563eb;
    --cobalto-osc:#1d4ed8;
    --cobalto-claro:#e8efff;
    --cal:#f4f6fa;
    --pizarra:#475569;
    --linea:#dfe5ef;
    --senal:#ffc83d;
    --f-display:'Overpass', 'Segoe UI', system-ui, sans-serif;
    --f-texto:'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    --f-mono:'Overpass Mono', ui-monospace, 'Cascadia Mono', monospace;
    --radio:14px;
    --sombra:0 18px 40px -18px rgba(14,26,51,.28);
}

html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { font-family:var(--f-texto); font-size:18px; line-height:1.6; color:var(--tinta); background:#fff; -webkit-font-smoothing:antialiased; }
h1, h2, h3, h4 { font-family:var(--f-display); font-weight:800; letter-spacing:-.02em; line-height:1.08; color:inherit; }
h3 { font-weight:700; letter-spacing:-.01em; }
a { color:var(--cobalto); }
a:hover { color:var(--cobalto-osc); }
img { max-width:100%; height:auto; }
:focus-visible { outline:3px solid var(--senal); outline-offset:2px; border-radius:4px; }
.web-saltar { position:absolute; left:-9999px; top:8px; z-index:200; background:var(--tinta); color:#fff; padding:8px 14px; border-radius:8px; }
.web-saltar:focus { left:8px; color:#fff; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* ---------- Botones ---------- */
.web-btn { display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-family:var(--f-display); font-weight:700; font-size:16px; line-height:1; padding:15px 24px 13px; border-radius:10px; border:2px solid transparent; text-decoration:none; transition:transform .15s, background-color .15s, color .15s, border-color .15s; white-space:nowrap; }
.web-btn:hover { transform:translateY(-1px); }
.web-btn-sm { font-size:14px; padding:10px 16px 8px; }
.web-btn-primario { background:var(--cobalto); color:#fff; }
.web-btn-primario:hover { background:var(--cobalto-osc); color:#fff; }
.web-btn-amarillo { background:var(--senal); color:var(--tinta); }
.web-btn-amarillo:hover { background:#ffd76b; color:var(--tinta); }
.web-btn-claro { border-color:rgba(255,255,255,.55); color:#fff; }
.web-btn-claro:hover { background:#fff; color:var(--tinta); }
.web-btn-borde { border-color:var(--tinta); color:var(--tinta); }
.web-btn-borde:hover { background:var(--tinta); color:#fff; }

/* ---------- Marca ---------- */
/* El icono es el patrón de posición de un QR (cuadrado dentro de cuadrado). */
.web-marca { display:inline-flex; align-items:center; gap:9px; font-family:var(--f-display); font-weight:800; font-size:25px; letter-spacing:-.03em; color:var(--tinta); text-decoration:none; line-height:1; }
.web-marca b { color:var(--cobalto); font-weight:800; }
.web-marca:hover { color:var(--tinta); }
.web-marca-ico { width:22px; height:22px; border:4px solid currentColor; border-radius:5px; position:relative; flex-shrink:0; margin-top:-3px; }
.web-marca-ico::after { content:''; position:absolute; inset:3px; background:var(--cobalto); border-radius:2px; }
.web-marca-claro, .web-marca-claro:hover { color:#fff; }
.web-marca-claro b { color:var(--senal); }
.web-marca-claro .web-marca-ico::after { background:var(--senal); }

/* ---------- Navegación ---------- */
.web-nav { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--linea); }
.web-nav-in { display:flex; align-items:center; flex-wrap:wrap; min-height:68px; }
.web-nav-toggle { margin-left:auto; border:0; background:none; font-size:22px; color:var(--tinta); padding:8px; display:none; }
.web-menu { margin-left:auto; }
.web-menu > ul { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:6px; }
.web-menu-link { display:block; background:none; border:0; font-family:var(--f-texto); font-weight:600; font-size:16px; color:var(--tinta); text-decoration:none; padding:8px 12px; border-radius:8px; }
.web-menu-link:hover, .web-menu-link.activo { color:var(--cobalto); background:var(--cobalto-claro); }
.web-dropdown { border:1px solid var(--linea); border-radius:12px; box-shadow:var(--sombra); padding:8px; min-width:270px; }
.web-dropdown .dropdown-item { border-radius:8px; padding:9px 12px; font-weight:600; font-size:16px; display:flex; gap:12px; align-items:center; color:var(--tinta); }
.web-dropdown .dropdown-item i { width:20px; text-align:center; color:var(--cobalto); }
.web-dropdown .dropdown-item:hover { background:var(--cal); }
@media (max-width: 991.98px) {
    .web-nav-toggle { display:block; }
    .web-menu { display:none; }
}

/* Menú de móvil: panel lateral derecho (offcanvas de Bootstrap) */
.web-panel { --bs-offcanvas-width:min(380px, 88vw); background:var(--tinta); color:#dbe3f1; border-left:0 !important; }
.web-panel-cab { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #1f2b47; }
.web-panel-cerrar { width:42px; height:42px; border-radius:50%; border:0; background:rgba(255,255,255,.08); color:#fff; font-size:18px; }
.web-panel-cerrar:hover { background:var(--senal); color:var(--tinta); }
.web-panel-cuerpo { padding:12px 20px 28px; overflow-y:auto; flex-grow:1; }
.web-panel a { color:#fff; text-decoration:none; }
.web-panel-menu, .web-panel-sectores, .web-panel-contacto { list-style:none; margin:0; padding:0; }
.web-panel-menu a { display:block; font-family:var(--f-display); font-weight:800; font-size:24px; letter-spacing:-.02em; padding:9px 0 7px; }
.web-panel-menu a.activo, .web-panel-menu a:hover { color:var(--senal); }
.web-panel-tit { font-family:var(--f-mono); font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:#7f8db0; margin:26px 0 10px; }
.web-panel-sectores a { display:flex; align-items:center; gap:12px; padding:8px 0; font-size:17px; font-weight:600; }
.web-panel-sectores i { width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,.08); color:var(--senal); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.web-panel-sectores a.activo, .web-panel-sectores a:hover { color:var(--senal); }
.web-panel-botones { display:grid; gap:10px; margin-top:28px; }
.web-panel-contacto a { display:flex; align-items:center; gap:12px; padding:6px 0; font-size:16px; color:#dbe3f1; word-break:break-all; }
.web-panel-contacto i { color:var(--senal); width:18px; text-align:center; }
.web-panel-contacto a:hover { color:#fff; }
.web-panel-legal { margin:28px 0 0; font-size:14px; color:#7f8db0; }
.web-panel-legal a { color:#b8c3d9; text-decoration:underline; }
.web-panel:focus, .web-panel:focus-visible { outline:none; }
.web-panel .web-btn-amarillo, .web-panel .web-btn-amarillo:hover { color:var(--tinta); }
.offcanvas-backdrop.show { opacity:.6; }

/* ---------- Etiqueta (antetítulo) ---------- */
.web-etiqueta { display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-weight:500; font-size:14px; letter-spacing:.02em; color:var(--cobalto); margin-bottom:14px; }
.web-etiqueta::before { content:''; width:12px; height:12px; border:3px solid currentColor; border-radius:3px; box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 6px currentColor; flex-shrink:0; }
.web-oscuro .web-etiqueta { color:var(--senal); }
.web-oscuro .web-etiqueta::before { box-shadow:inset 0 0 0 2px var(--tinta), inset 0 0 0 6px currentColor; }

/* ---------- Secciones ---------- */
.web-sec { padding:96px 0; }
.web-sec-cal { background:var(--cal); }
.web-oscuro { background:var(--tinta); color:#fff; }
.web-sec-tit { font-size:clamp(30px, 3.6vw, 46px); margin:0 0 16px; max-width:20ch; }
.web-sec-sub { font-size:20px; color:var(--pizarra); max-width:60ch; margin:0 0 48px; }
.web-oscuro .web-sec-sub { color:#b8c3d9; }
.web-centro { text-align:center; }
.web-centro .web-sec-tit, .web-centro .web-sec-sub { margin-left:auto; margin-right:auto; }
@media (max-width: 767.98px) { .web-sec { padding:64px 0; } .web-sec-sub { font-size:18px; margin-bottom:32px; } }

/* Hueco de imagen mientras no se sube la foto definitiva */
.web-hueco { background:
    linear-gradient(135deg, rgba(37,99,235,.85), rgba(14,26,51,.95)),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,.06) 18px 20px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.06) 18px 20px);
    background-color:var(--tinta); min-height:200px; }

/* ---------- Hero de la portada ---------- */
.web-hero { position:relative; background:var(--tinta); color:#fff; overflow:hidden; }
.web-hero-foto { position:absolute; inset:0; }
.web-hero-foto img, .web-hero-foto .web-hueco { width:100%; height:100%; object-fit:cover; object-position:30% center; }
.web-hero-foto::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,26,51,.05) 0%, rgba(14,26,51,.35) 38%, rgba(14,26,51,.9) 58%, var(--tinta) 78%); }
.web-hero-in { position:relative; display:grid; grid-template-columns:1fr minmax(0, 600px); min-height:min(78vh, 720px); align-items:center; padding-top:72px; padding-bottom:72px; }
.web-hero-txt { grid-column:2; }
.web-hero h1 { font-size:clamp(36px, 4.1vw, 58px); margin:0 0 22px; }
.web-hero h1 em { font-style:normal; white-space:nowrap; text-decoration:underline; text-decoration-color:var(--senal); text-decoration-thickness:.13em; text-underline-offset:.16em; text-decoration-skip-ink:none; }
.web-hero-lead { font-size:21px; color:#d3dbea; margin:0 0 30px; max-width:52ch; }
.web-hero-botones { display:flex; flex-wrap:wrap; gap:12px; }
.web-hero-checks { list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:6px 20px; font-size:16px; color:#b8c3d9; }
.web-hero-checks i { color:var(--senal); margin-right:6px; }
.web-hero .web-hero-placa { position:absolute; left:max(24px, calc(50% - 600px)); bottom:40px; }
@media (max-width: 991.98px) {
    .web-hero-foto { position:relative; height:300px; }
    .web-hero-foto::after { background:linear-gradient(180deg, transparent 50%, var(--tinta) 100%); }
    .web-hero-in { grid-template-columns:1fr; min-height:0; padding-top:8px; padding-bottom:56px; }
    .web-hero-txt { grid-column:1; }
    .web-hero .web-hero-placa { display:none; }
}

/* Placa con QR: el elemento propio de la web. Imita una placa esmaltada atornillada. */
.web-placa { display:flex; align-items:center; gap:14px; background:#fff; color:var(--tinta); border-radius:12px; padding:12px 18px 12px 12px; box-shadow:0 20px 40px -12px rgba(0,0,0,.5); position:relative; max-width:300px; text-decoration:none; transform:rotate(-2deg); transition:transform .2s; }
.web-placa:hover { transform:rotate(0) scale(1.03); color:var(--tinta); }
.web-placa::before, .web-placa::after { content:''; position:absolute; top:7px; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #fff, #9aa6b8); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.web-placa::before { left:7px; } .web-placa::after { right:7px; }
.web-placa svg { width:92px; height:92px; flex-shrink:0; color:var(--tinta); }
.web-placa-txt { font-family:var(--f-display); font-weight:800; font-size:17px; line-height:1.15; }
.web-placa-txt small { display:block; font-family:var(--f-mono); font-weight:500; font-size:12px; color:var(--pizarra); margin-top:6px; letter-spacing:0; }

/* ---------- Sectores (tarjetas con foto) ---------- */
.web-sectores { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.web-sector { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:340px; border-radius:var(--radio); overflow:hidden; color:#fff; text-decoration:none; isolation:isolate; }
.web-sector > img, .web-sector > .web-hueco { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .5s; }
.web-sector::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(14,26,51,0) 30%, rgba(14,26,51,.88) 100%); }
.web-sector:hover > img { transform:scale(1.05); }
.web-sector-in { padding:24px; }
.web-sector-ico { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; background:var(--senal); color:var(--tinta); border-radius:10px; font-size:18px; margin-bottom:12px; }
.web-sector h3 { font-size:24px; margin:0 0 6px; }
.web-sector p { margin:0; font-size:16px; color:#dbe3f1; line-height:1.45; }
.web-sector-flecha { position:absolute; top:20px; right:20px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; transition:background .2s; }
.web-sector:hover .web-sector-flecha { background:var(--senal); color:var(--tinta); }
.web-sector:hover, .web-sector:focus { color:#fff; }
@media (max-width: 991.98px) { .web-sectores { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 575.98px) { .web-sectores { grid-template-columns:1fr; } .web-sector { min-height:280px; } }

/* ---------- Móvil (maqueta de la web pública de una entidad) ---------- */
.web-movil { width:300px; max-width:100%; aspect-ratio:9/18.5; background:#0b1222; border-radius:44px; padding:11px; box-shadow:0 40px 80px -30px rgba(14,26,51,.55), inset 0 0 0 2px #2b3650; position:relative; margin:0 auto; }
.web-movil::before { content:''; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:84px; height:22px; background:#0b1222; border-radius:20px; z-index:3; }
.web-movil-pantalla { width:100%; height:100%; border-radius:34px; overflow:hidden; background:#f3f4f6; position:relative; }
.web-movil-pantalla > img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }

/* Pantallas dibujadas en HTML (imitan /public) */
.mv { position:absolute; inset:0; display:flex; flex-direction:column; font-family:var(--f-texto); font-size:13px; color:#1e293b; background:#f5f6f8; opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; }
.mv.activo { opacity:1; visibility:visible; }
.mv-barra { flex-shrink:0; padding:44px 14px 10px; background:var(--mv-color, #2d6a4f); color:#fff; font-weight:600; font-size:13px; display:flex; align-items:center; gap:10px; }
.mv-barra i { opacity:.85; }
.mv-portada { height:118px; flex-shrink:0; background:var(--mv-color, #2d6a4f); position:relative; overflow:hidden; }
.mv-portada img { width:100%; height:100%; object-fit:cover; }
.mv-portada::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55)); }
.mv-portada span { position:absolute; left:12px; right:12px; bottom:9px; z-index:1; color:#fff; font-weight:600; font-size:15px; line-height:1.15; font-family:var(--f-display); }
.mv-cuerpo { padding:10px; overflow:hidden; flex-grow:1; }
.mv-intro { font-size:11.5px; color:#475569; margin:2px 2px 10px; line-height:1.4; }
.mv-tiles { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mv-tile { background:#fff; border-radius:10px; padding:12px 6px; text-align:center; font-size:11.5px; font-weight:600; line-height:1.2; box-shadow:0 1px 3px rgba(0,0,0,.07); display:flex; flex-direction:column; gap:6px; align-items:center; }
.mv-tile i { color:var(--mv-color, #2d6a4f); font-size:18px; }
.mv-lista { display:flex; flex-direction:column; gap:7px; }
.mv-item { background:#fff; border-radius:10px; padding:10px 12px; box-shadow:0 1px 3px rgba(0,0,0,.06); display:flex; align-items:center; gap:10px; font-weight:600; font-size:12.5px; }
.mv-item i.fa-chevron-right, .mv-item i.fa-chevron-down { margin-left:auto; color:#94a3b8; font-size:10px; }
.mv-item-txt { font-weight:400; color:#64748b; font-size:11.5px; padding:0 12px 10px; margin-top:-4px; background:#fff; border-radius:0 0 10px 10px; line-height:1.4; }
.mv-item.abierto { border-radius:10px 10px 0 0; box-shadow:none; }
.mv-fecha { flex-shrink:0; width:38px; text-align:center; background:var(--mv-color, #2d6a4f); color:#fff; border-radius:7px; padding:4px 0 3px; font-size:15px; font-weight:700; line-height:1; font-family:var(--f-display); }
.mv-fecha small { display:block; font-size:8.5px; text-transform:uppercase; font-weight:600; margin-top:2px; letter-spacing:.05em; }
.mv-sub { display:block; font-weight:400; color:#64748b; font-size:11px; margin-top:2px; }
.mv-mapa { height:210px; border-radius:10px; position:relative; overflow:hidden; margin-bottom:8px; background:
    linear-gradient(115deg, transparent 47%, #fff 47%, #fff 50%, transparent 50%),
    linear-gradient(25deg, transparent 58%, #fff 58%, #fff 61%, transparent 61%),
    linear-gradient(160deg, transparent 30%, #fde9a8 30%, #fde9a8 33%, transparent 33%),
    radial-gradient(ellipse at 80% 85%, #b9dcf5 0 22%, transparent 23%),
    radial-gradient(ellipse at 15% 20%, #cfe8c4 0 20%, transparent 21%),
    #eef0e6; }
.mv-pin { position:absolute; width:22px; height:22px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--mv-color, #2d6a4f); box-shadow:0 2px 4px rgba(0,0,0,.3); }
.mv-pin::after { content:''; position:absolute; inset:6px; background:#fff; border-radius:50%; }
.mv-boton { display:flex; gap:6px; margin-top:8px; }
.mv-boton span { flex:1; text-align:center; padding:7px 4px; border-radius:8px; background:var(--mv-color, #2d6a4f); color:#fff; font-size:11px; font-weight:600; }
.mv-boton span.sec { background:#e2e8f0; color:#1e293b; }
.mv-pie { flex-shrink:0; text-align:center; font-size:9px; color:#94a3b8; padding:6px; }

/* ---------- "Lo que ve tu cliente" ---------- */
.web-demo { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:64px; align-items:center; }
.web-demo-tabs { display:flex; flex-direction:column; gap:10px; }
.web-demo-tab { text-align:left; display:flex; gap:16px; align-items:flex-start; padding:18px 20px; border:2px solid transparent; border-radius:var(--radio); background:transparent; color:inherit; transition:background-color .2s, border-color .2s; width:100%; }
.web-demo-tab:hover { background:#fff; }
.web-demo-tab.activo { background:#fff; border-color:var(--cobalto); box-shadow:var(--sombra); }
.web-demo-tab-ico { width:44px; height:44px; flex-shrink:0; border-radius:11px; background:var(--cobalto-claro); color:var(--cobalto); display:flex; align-items:center; justify-content:center; font-size:19px; }
.web-demo-tab.activo .web-demo-tab-ico { background:var(--cobalto); color:#fff; }
.web-demo-tab strong { display:block; font-family:var(--f-display); font-size:19px; font-weight:700; margin-bottom:2px; }
.web-demo-tab-txt span { font-size:16px; color:var(--pizarra); line-height:1.45; display:block; }
@media (max-width: 991.98px) {
    /* En móvil: título, móvil y debajo las pestañas como píldoras deslizables */
    .web-demo { grid-template-columns:minmax(0, 1fr); gap:0; }
    .web-demo-intro { display:contents; }
    .web-demo-movil { order:1; margin:0 0 24px; }
    .web-demo-tabs { order:2; flex-direction:row; overflow-x:auto; scroll-snap-type:x proximity; gap:8px; margin:0 -12px; padding:6px 12px 10px; scrollbar-width:none; }
    .web-demo-tabs::-webkit-scrollbar { display:none; }
    .web-demo-tab { flex:0 0 auto; width:auto; align-items:center; gap:10px; padding:8px 16px 8px 8px; border-radius:40px; scroll-snap-align:start; background:#fff; }
    .web-demo-tab-ico { width:34px; height:34px; border-radius:50%; font-size:15px; }
    .web-demo-tab strong { font-size:16px; margin:0; white-space:nowrap; }
    .web-demo-tab-txt span { display:none; }
}

/* ---------- Pasos ---------- */
.web-pasos { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; counter-reset:paso; }
.web-paso { background:#fff; border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; display:flex; flex-direction:column; }
.web-paso-img { aspect-ratio:4/3; overflow:hidden; background:var(--cal); }
.web-paso-img img, .web-paso-img .web-hueco { width:100%; height:100%; object-fit:cover; }
.web-paso-txt { padding:24px; }
.web-paso-num { font-family:var(--f-mono); font-size:14px; color:var(--cobalto); margin-bottom:8px; display:block; }
.web-paso h3 { font-size:23px; margin:0 0 8px; }
.web-paso p { margin:0; color:var(--pizarra); font-size:17px; }
.web-paso code { font-family:var(--f-mono); font-size:15px; color:var(--tinta); background:var(--cobalto-claro); padding:1px 6px; border-radius:5px; }
@media (max-width: 991.98px) { .web-pasos { grid-template-columns:1fr; max-width:560px; margin:0 auto; } }

/* ---------- Banda con foto ---------- */
.web-banda { position:relative; color:#fff; overflow:hidden; background:var(--tinta); }
.web-banda > img, .web-banda > .web-hueco { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.web-banda::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,26,51,.92) 0%, rgba(14,26,51,.7) 50%, rgba(14,26,51,.25) 100%); z-index:1; }
.web-banda .container { position:relative; z-index:2; padding-top:110px; padding-bottom:110px; }
.web-banda h2 { font-size:clamp(32px, 4.2vw, 54px); max-width:15ch; margin:0 0 18px; }
.web-banda p { font-size:20px; color:#d3dbea; max-width:46ch; margin:0 0 30px; }
.web-banda-datos { display:flex; flex-wrap:wrap; gap:14px 40px; list-style:none; padding:0; margin:0; }
.web-banda-datos li { font-family:var(--f-display); font-weight:700; font-size:18px; display:flex; align-items:center; gap:10px; }
.web-banda-datos i { color:var(--senal); }

/* ---------- Funciones ---------- */
.web-funciones { display:grid; grid-template-columns:repeat(3, 1fr); gap:44px 40px; }
.web-funcion { display:flex; gap:16px; }
.web-funcion i { flex-shrink:0; width:46px; height:46px; border-radius:12px; background:var(--cobalto-claro); color:var(--cobalto); display:flex; align-items:center; justify-content:center; font-size:19px; }
.web-funcion h3 { font-size:20px; margin:4px 0 6px; }
.web-funcion p { margin:0; color:var(--pizarra); font-size:17px; line-height:1.5; }
@media (max-width: 991.98px) { .web-funciones { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 575.98px) { .web-funciones { grid-template-columns:1fr; gap:28px; } }

/* ---------- Tarjetas de ejemplos ---------- */
.web-ejemplos { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.web-ejemplo { display:flex; flex-direction:column; background:#fff; border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; text-decoration:none; color:var(--tinta); transition:transform .2s, box-shadow .2s; }
.web-ejemplo:hover { transform:translateY(-4px); box-shadow:var(--sombra); color:var(--tinta); }
.web-ejemplo-img { aspect-ratio:16/10; overflow:hidden; position:relative; }
.web-ejemplo-img img, .web-ejemplo-img .web-hueco { width:100%; height:100%; object-fit:cover; min-height:0; }
.web-ejemplo-sector { position:absolute; left:12px; top:12px; background:rgba(255,255,255,.94); color:var(--tinta); font-size:13px; font-weight:600; padding:4px 10px; border-radius:20px; }
.web-ejemplo-sector i { color:var(--cobalto); margin-right:5px; }
.web-ejemplo-txt { padding:20px 22px 24px; display:flex; flex-direction:column; flex-grow:1; }
.web-ejemplo-ent { font-family:var(--f-mono); font-size:13px; color:var(--cobalto); margin-bottom:8px; }
.web-ejemplo h3 { font-size:21px; margin:0 0 8px; }
.web-ejemplo p { font-size:16px; color:var(--pizarra); margin:0 0 16px; line-height:1.5; }
.web-ejemplo-mas { margin-top:auto; font-weight:600; font-size:16px; color:var(--cobalto); }
@media (max-width: 991.98px) { .web-ejemplos { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 575.98px) { .web-ejemplos { grid-template-columns:1fr; } }

.web-filtros { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.web-filtro { border:1px solid var(--linea); background:#fff; color:var(--tinta); font-weight:600; font-size:15px; padding:8px 16px; border-radius:30px; }
.web-filtro.activo, .web-filtro:hover { background:var(--tinta); color:#fff; border-color:var(--tinta); }

/* ---------- Planes ---------- */
.web-planes { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; align-items:stretch; }
.web-plan { background:#fff; border:1px solid var(--linea); border-radius:18px; padding:32px 28px; display:flex; flex-direction:column; position:relative; }
.web-plan.destacado { border:2px solid var(--cobalto); box-shadow:var(--sombra); }
.web-plan-cinta { position:absolute; top:-14px; left:28px; background:var(--senal); color:var(--tinta); font-family:var(--f-display); font-weight:700; font-size:13px; padding:5px 12px 3px; border-radius:20px; }
.web-plan-nombre { font-family:var(--f-mono); font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--pizarra); }
.web-plan-precio { font-family:var(--f-display); font-weight:800; font-size:48px; letter-spacing:-.03em; line-height:1; margin:14px 0 6px; }
.web-plan-precio small { font-size:17px; font-weight:700; color:var(--pizarra); letter-spacing:0; }
.web-plan-anual { font-size:15px; color:var(--pizarra); min-height:24px; }
.web-plan-anual b { color:var(--tinta); }
.web-plan-ahorro { background:#dcfce7; color:#15803d; padding:1px 8px; border-radius:20px; font-size:13px; font-weight:600; margin-left:4px; }
.web-plan-lema { font-size:17px; color:var(--pizarra); margin:16px 0 20px; }
.web-plan ul { list-style:none; padding:0; margin:0 0 28px; }
.web-plan li { padding:7px 0; font-size:16px; display:flex; gap:10px; align-items:baseline; border-top:1px solid var(--cal); }
.web-plan li i { width:16px; }
.web-plan li .fa-check { color:#16a34a; }
.web-plan li .fa-xmark { color:#cbd5e1; }
.web-plan li.no { color:#94a3b8; }
.web-plan .web-btn { margin-top:auto; width:100%; }
.web-planes-nota { text-align:center; color:var(--pizarra); font-size:15px; margin-top:28px; }
@media (max-width: 991.98px) { .web-planes { grid-template-columns:1fr; max-width:480px; margin:0 auto; } }

/* ---------- FAQ ---------- */
.web-faq .accordion-item { border:1px solid var(--linea); border-radius:12px !important; margin-bottom:10px; overflow:hidden; }
.web-faq .accordion-button { font-family:var(--f-display); font-weight:700; font-size:18px; color:var(--tinta); padding:20px 22px 18px; background:#fff; box-shadow:none; }
.web-faq .accordion-button:not(.collapsed) { color:var(--cobalto); background:#fff; }
.web-faq .accordion-button:focus-visible { box-shadow:inset 0 0 0 3px var(--senal); }
.web-faq .accordion-body { padding:0 22px 22px; color:var(--pizarra); font-size:17px; }

/* ---------- CTA final ---------- */
.web-cta { position:relative; background:var(--cobalto) var(--cta-img, none) center/cover; color:#fff; text-align:center; padding:110px 0; isolation:isolate; }
.web-cta::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(14,26,51,.82), rgba(23,52,140,.88)); }
.web-cta h2 { font-size:clamp(32px, 4.4vw, 56px); margin:0 auto 16px; max-width:18ch; }
.web-cta p { font-size:20px; color:#d3dbea; max-width:52ch; margin:0 auto 32px; }
.web-cta-botones { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }

/* ---------- Pie ---------- */
.web-pie { background:#0a1328; color:#b8c3d9; padding:72px 0 28px; font-size:16px; }
.web-pie a { color:#dbe3f1; text-decoration:none; }
.web-pie a:hover { color:var(--senal); }
.web-pie-txt { margin:18px 0 22px; max-width:34ch; }
.web-pie-tit { font-family:var(--f-mono); font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:#7f8db0; margin-bottom:14px; }
.web-pie-lista { list-style:none; padding:0; margin:0; }
.web-pie-lista li { margin-bottom:9px; }
.web-pie-legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:56px; padding-top:22px; border-top:1px solid #1f2b47; font-size:14px; }
.web-pie .web-btn-primario { color:#fff; }

/* ---------- Páginas interiores (sector y ejemplo) ---------- */
.web-cab { position:relative; color:#fff; background:var(--tinta); overflow:hidden; isolation:isolate; }
.web-cab > img, .web-cab > .web-hueco { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.web-cab::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(14,26,51,.94) 0%, rgba(14,26,51,.78) 45%, rgba(14,26,51,.2) 100%); }
.web-cab .container { padding-top:56px; padding-bottom:88px; }
.web-cab h1 { font-size:clamp(34px, 4.6vw, 60px); max-width:20ch; margin:18px 0 18px; }
.web-cab-lead { font-size:21px; color:#d3dbea; max-width:56ch; margin:0 0 30px; }
@media (max-width: 767.98px) { .web-cab::before { background:linear-gradient(180deg, rgba(14,26,51,.7), rgba(14,26,51,.94)); } .web-cab .container { padding-bottom:56px; } }

.web-migas ol { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px; font-size:15px; color:#b8c3d9; }
.web-migas li + li::before { content:'/'; margin-right:6px; color:#64748b; }
.web-migas a { color:#dbe3f1; text-decoration:none; }
.web-migas a:hover { color:var(--senal); }

.web-prosa p { font-size:19px; color:#334155; margin-bottom:1.1em; }
.web-prosa strong { color:var(--tinta); }

.web-aside { border:1px solid var(--linea); border-radius:var(--radio); padding:24px; position:sticky; top:96px; }
.web-aside-lista { list-style:none; padding:0; margin:0 0 20px; }
.web-aside-lista li { border-top:1px solid var(--linea); }
.web-aside-lista a { display:block; padding:10px 0; font-weight:600; color:var(--tinta); text-decoration:none; font-size:17px; }
.web-aside-lista a:hover { color:var(--cobalto); }

.web-contenidos { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.web-contenido { background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:26px 24px; }
.web-contenido i { font-size:22px; color:var(--cobalto); margin-bottom:14px; display:block; }
.web-contenido h3 { font-size:20px; margin:0 0 8px; }
.web-contenido p { margin:0; font-size:16.5px; color:var(--pizarra); line-height:1.5; }
@media (max-width: 991.98px) { .web-contenidos { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 575.98px) { .web-contenidos { grid-template-columns:1fr; } }

.web-donde { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.web-donde-img { border-radius:18px; overflow:hidden; aspect-ratio:4/3; }
.web-donde-img img, .web-donde-img .web-hueco { width:100%; height:100%; object-fit:cover; }
.web-lista-qr { list-style:none; padding:0; margin:24px 0 0; }
.web-lista-qr li { position:relative; padding:12px 0 12px 38px; border-top:1px solid var(--linea); font-size:17.5px; }
.web-lista-qr li::before { content:''; position:absolute; left:2px; top:16px; width:18px; height:18px; border:4px solid var(--tinta); border-radius:4px; box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 9px var(--senal); }
.web-lista-qr b { font-weight:600; }
@media (max-width: 991.98px) { .web-donde { grid-template-columns:1fr; gap:32px; } }

.web-ventajas { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.web-ventaja { border-top:4px solid var(--senal); padding-top:20px; }
.web-ventaja h3 { font-size:22px; margin:0 0 8px; }
.web-ventaja p { color:#b8c3d9; margin:0; font-size:17px; }
@media (max-width: 767.98px) { .web-ventajas { grid-template-columns:1fr; gap:28px; } }

.web-recom { display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:#fff; border:2px solid var(--cobalto); border-radius:18px; padding:28px 32px; }
.web-recom-txt { max-width:60ch; }
.web-recom-txt strong { font-family:var(--f-display); font-size:22px; display:block; margin-bottom:4px; }
.web-recom-txt p { margin:0; color:var(--pizarra); font-size:17px; }

/* Ejemplo: estructura */
.web-ej-intro { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:72px; align-items:start; }
.web-ej-movil { position:sticky; top:100px; }
.web-ej-movil figcaption { text-align:center; font-family:var(--f-mono); font-size:13px; color:var(--pizarra); margin-top:14px; }
.web-ej-moviles { display:flex; gap:28px; justify-content:center; }
.web-ej-moviles .web-movil { width:270px; }
@media (max-width: 991.98px) { .web-ej-intro { grid-template-columns:1fr; gap:40px; } .web-ej-movil { position:static; } }
@media (max-width: 640px) { .web-ej-moviles .web-movil:nth-child(2) { display:none; } }

.web-subtit { font-size:28px; margin:48px 0 16px; }
.web-subtit:first-child { margin-top:0; }
.web-estructura { display:flex; flex-direction:column; gap:12px; }
.web-est-sec { border:1px solid var(--linea); border-radius:var(--radio); background:#fff; overflow:hidden; }
.web-est-cab { display:flex; gap:14px; align-items:center; padding:16px 20px; }
.web-est-cab i { width:40px; height:40px; border-radius:10px; background:var(--cobalto-claro); color:var(--cobalto); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.web-est-cab strong { font-family:var(--f-display); font-size:19px; display:block; line-height:1.2; }
.web-est-tipo { font-family:var(--f-mono); font-size:12.5px; color:var(--pizarra); }
.web-est-fichas { list-style:none; margin:0; padding:0 20px 16px 74px; display:flex; flex-wrap:wrap; gap:6px; }
.web-est-fichas li { font-size:14.5px; background:var(--cal); border-radius:20px; padding:3px 12px; }
.web-est-qr { font-size:14.5px; color:var(--pizarra); padding:10px 20px; border-top:1px dashed var(--linea); background:#fcfdff; }
.web-est-qr i { color:var(--cobalto); margin-right:6px; }

.web-tabla-qr { width:100%; border-collapse:collapse; font-size:17px; }
.web-tabla-qr th { font-family:var(--f-mono); font-weight:500; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--pizarra); text-align:left; padding:0 16px 10px 0; border-bottom:2px solid var(--tinta); }
.web-tabla-qr td { padding:14px 16px 14px 0; border-bottom:1px solid var(--linea); vertical-align:top; }
.web-tabla-qr td:first-child { font-weight:600; width:45%; }
@media (max-width: 575.98px) { .web-tabla-qr, .web-tabla-qr tbody, .web-tabla-qr tr, .web-tabla-qr td { display:block; width:auto !important; } .web-tabla-qr thead { display:none; } .web-tabla-qr td { border:0; padding:0; } .web-tabla-qr tr { padding:12px 0; border-bottom:1px solid var(--linea); } }

.web-consejos { list-style:none; padding:0; margin:0; counter-reset:c; display:grid; gap:14px; }
.web-consejos li { background:var(--cal); border-radius:12px; padding:16px 20px 16px 56px; position:relative; font-size:17px; }
.web-consejos li::before { content:'\f0eb'; font-family:'Font Awesome 5 Pro', 'Font Awesome 5 Free'; font-weight:900; position:absolute; left:20px; top:16px; color:var(--cobalto); }

/* ---------- Páginas legales ---------- */
.web-legal { max-width:820px; margin:0 auto; padding:56px 20px 96px; }
.web-legal h1 { font-size:40px; margin-bottom:8px; }
.web-legal .lead { color:var(--pizarra); font-size:17px; margin-bottom:32px; }
.web-legal h2 { font-size:23px; margin-top:36px; margin-bottom:12px; }
.web-legal h3 { font-size:19px; margin-top:26px; }
.web-legal h4 { font-size:17px; margin-top:18px; }
.web-legal p, .web-legal li { font-size:16.5px; line-height:1.65; color:#334155; }

/* Aparición suave al hacer scroll (solo si hay JS: web.js añade .web-js) */
.web-js .web-aparece { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.web-js .web-aparece.visto { opacity:1; transform:none; }

/* Alias de iconos de Font Awesome 6 sobre la versión 5 que usa el proyecto */
.fa-building-columns:before{content:"\f19c"}.fa-calendar-days:before{content:"\f073"}.fa-chart-column:before{content:"\f080"}.fa-circle-info:before{content:"\f05a"}.fa-circle-question:before{content:"\f059"}.fa-file-lines:before{content:"\f15c"}.fa-gears:before{content:"\f085"}.fa-helmet-safety:before{content:"\f807"}.fa-house-chimney:before{content:"\f015"}.fa-list-check:before{content:"\f0ae"}.fa-location-dot:before{content:"\f3c5"}.fa-map-location-dot:before{content:"\f5a0"}.fa-mountain-sun:before{content:"\f6fc"}.fa-pen-to-square:before{content:"\f044"}.fa-person-hiking:before{content:"\f6ec"}.fa-person-swimming:before{content:"\f5c4"}.fa-photo-film:before{content:"\f87c"}.fa-rotate:before{content:"\f2f1"}.fa-screwdriver-wrench:before{content:"\f7d9"}.fa-share-nodes:before{content:"\f1e0"}.fa-triangle-exclamation:before{content:"\f071"}.fa-xmark:before{content:"\f00d"}

.web-demo-enlace { text-align:center; margin:18px 0 0; font-weight:600; font-size:16px; }
.web-demo-enlace a { text-decoration:none; }

/* Pantallas con captura real: barra de estado oscura para que la isla del móvil no tape la cabecera */
.web-movil-pantalla.cap { background:#0b1222; }
.web-movil-pantalla.cap > img { position:absolute; left:0; right:0; bottom:0; top:34px; height:calc(100% - 34px); }
.web-movil-pantalla.cap .mv { inset:34px 0 0 0; background:#fff; }