/* ===========================================================
   FirstLook — componentes de las páginas interiores
   Se carga solo en páginas generadas (body.fl-pagina), después
   de firstlook-mejoras.css (de ahí salen --marca, --sp-*, --fs-*).
   =========================================================== */
:root{
  --tinta: #1f2a2c;
  --texto: #4e5a5c;
  --suave: #6b7678;
  --linea: #e4eced;
  --fondo-suave: #f3f9fa;
  --marca-btn: #2f8088;      /* blanco sobre este tono cumple contraste AA */
  --marca-btn-h: #256a71;
}

/* Cabecera compacta: el nombre ya está en la barra de menú */
body.fl-pagina .custom-header .logo{ width:84px !important; height:84px !important; margin:var(--sp-4) auto 0 !important; }
body.fl-pagina .site-branding{ display:none !important; }
body.fl-pagina .site-content-contain,
body.fl-pagina #content, body.fl-pagina #primary,
body.fl-pagina #main, body.fl-pagina .site-main{ display:block !important; width:auto !important; max-width:none !important; float:none !important; }

/* El tema fija html{font-size:1vw}: en móvil son 3,9px. El contenido lleva su propia base fija. */
body.fl-pagina .site-main{ font-size:16px; line-height:1.55; }
/* El tema pone en móvil .site-main a{width:100%;display:flex} (pensado para los iconos de la home). */
body.fl-pagina .site-main a{ width:auto; margin:0; }
body.fl-pagina .site-main .fl-boton,
body.fl-pagina .site-main .fl-boton-sec,
body.fl-pagina .site-main .fl-cta a{ display:inline-flex; }
body.fl-pagina .site-main .fl-mas{ display:inline-block; margin-top:14px; align-self:flex-start; }

.fl-wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }
.fl-wrap-estrecho{ max-width:820px; margin:0 auto; padding:0 20px; }

/* ---------- Hero ---------- */
.fl-hero{ text-align:center; padding:var(--sp-4) 20px var(--sp-3); }
.fl-eyebrow{ display:inline-block; font-size:12.48px; letter-spacing:.16em; text-transform:uppercase; color:var(--marca-ink); font-weight:400; margin:0 0 var(--sp-2); }
.fl-hero h1{ font-size:clamp(32px, 4.4vw, 49.6px); font-weight:300; line-height:1.14; letter-spacing:-.015em; color:var(--tinta); max-width:21ch; margin:0 auto var(--sp-3); }
.fl-hero .lead{ font-size:clamp(16.8px, 1.6vw, 19.52px); color:var(--texto); font-weight:300; line-height:1.62; max-width:60ch; margin:0 auto; }
.fl-ctas{ display:flex; flex-wrap:wrap; gap:12px 14px; justify-content:center; margin-top:var(--sp-4); }
.fl-boton, .fl-boton-sec{ display:inline-flex; align-items:center; gap:.5em; padding:14px 30px; border-radius:14px; font-size:16px; text-decoration:none; transition:background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; }
.fl-boton{ background:var(--marca-btn); color:#fff; }
.fl-boton:hover{ background:var(--marca-btn-h); color:#fff; transform:translateY(-1px); }
.fl-boton-sec{ background:#fff; color:var(--marca-btn); border:1px solid #cfe2e4; }
.fl-boton-sec:hover{ border-color:var(--marca-btn); color:var(--marca-btn-h); }
.fl-prueba{ margin:var(--sp-4) auto 0; max-width:62ch; font-size:14.08px; color:var(--suave); font-weight:300; line-height:1.6; }
.fl-prueba b{ color:var(--texto); font-weight:400; }

/* ---------- Secciones ---------- */
.fl-sec{ padding:var(--sp-6) 0 0; }
.fl-sec-head{ text-align:center; max-width:640px; margin:0 auto var(--sp-4); padding:0 20px; }
.fl-sec-head h2{ font-size:clamp(25.6px, 2.7vw, 34.4px); font-weight:300; color:var(--tinta); letter-spacing:-.01em; margin:0 0 10px; }
.fl-sec-head p{ color:var(--suave); font-weight:300; margin:0; line-height:1.6; }

/* Cabecera de categoría (Productos) */
.fl-cat-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; border-bottom:1px solid var(--linea); padding-bottom:12px; margin:var(--sp-5) 0 var(--sp-3); }
.fl-cat-head h2{ font-size:22.08px; font-weight:400; color:var(--marca-ink); margin:0; }
.fl-cat-head p{ color:var(--suave); font-weight:300; margin:0; font-size:15.2px; }

/* ---------- Rejilla de tarjetas ---------- */
/* Flex en vez de grid: 4 por fila en escritorio y las sobrantes centradas, sin huérfanas pegadas a un lado */
.fl-rejilla{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; }
.fl-rejilla > *{ flex:1 1 250px; max-width:300px; }
.fl-cat-head + .fl-rejilla{ justify-content:flex-start; }
@media (max-width:640px){ .fl-rejilla > *{ max-width:none; } }
.fl-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--linea); border-radius:20px; padding:28px 26px; transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease; }
.fl-card:hover{ transform:translateY(-4px); box-shadow:0 18px 42px rgba(47,128,136,.13); border-color:#d3e6e8; }
.fl-ic{ width:48px; height:48px; border-radius:14px; background:#ecf7f8; color:var(--marca-ink); display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:18px; }
.fl-card h3{ font-size:19.2px; font-weight:400; color:var(--tinta); margin:0 0 6px; line-height:1.3; }
.fl-card .para{ font-size:14.88px; color:var(--suave); font-weight:300; margin:0 0 14px; line-height:1.55; }
.fl-card p.txt{ font-size:15.2px; color:var(--texto); font-weight:300; margin:0; line-height:1.6; }
.fl-card ul{ list-style:none; padding:0; margin:0 0 18px; }
.fl-card li{ position:relative; padding:5px 0 5px 24px; font-size:14.4px; color:var(--texto); line-height:1.45; font-weight:300; }
.fl-card li::before{ content:'\f00c'; font-family:FontAwesome; position:absolute; left:0; top:6px; font-size:12.48px; color:var(--marca); }
.fl-precio{ margin-top:auto; padding-top:16px; border-top:1px dashed var(--linea); display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.fl-precio strong{ white-space:nowrap; font-size:19.52px; font-weight:400; color:var(--tinta); }
.fl-precio small{ font-size:12px; color:var(--suave); font-weight:300; text-align:right; }
.fl-mas{ margin-top:14px; color:var(--marca-btn); text-decoration:none; font-size:15.2px; }
.fl-mas:hover{ color:var(--marca-btn-h); text-decoration:underline; }

/* ---------- Banda suave (por qué / cómo) ---------- */
.fl-banda{ background:linear-gradient(180deg, var(--fondo-suave), #fff); border-radius:28px; padding:var(--sp-5) var(--sp-4); }
.fl-razones{ display:grid; grid-template-columns:repeat(auto-fit, minmax(185px, 1fr)); gap:28px; }
.fl-razon h3{ font-size:17.28px; font-weight:400; color:var(--tinta); margin:10px 0 6px; }
.fl-razon p{ font-size:14.88px; color:var(--suave); font-weight:300; margin:0; line-height:1.6; }
.fl-razon .fl-ic{ margin-bottom:0; }

.fl-pasos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:26px; counter-reset:paso; }
.fl-paso{ counter-increment:paso; }
.fl-paso::before{ content:counter(paso); display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--marca-btn); color:#fff; font-size:16.8px; margin-bottom:12px; }
.fl-paso h3{ font-size:17.28px; font-weight:400; color:var(--tinta); margin:0 0 6px; }
.fl-paso p{ font-size:14.88px; color:var(--suave); font-weight:300; margin:0; line-height:1.6; }

/* ---------- Preguntas frecuentes ---------- */
.fl-faq{ max-width:780px; margin:0 auto; padding:0 20px; }
.fl-faq details{ border-bottom:1px solid var(--linea); }
.fl-faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; font-size:16.8px; color:var(--tinta); font-weight:400; }
.fl-faq summary::-webkit-details-marker{ display:none; }
.fl-faq summary::after{ content:'+'; font-size:22.4px; color:var(--marca-ink); font-weight:300; transition:transform .3s ease; }
.fl-faq details[open] summary::after{ transform:rotate(45deg); }
.fl-faq details p{ margin:0 0 20px; color:var(--texto); font-weight:300; line-height:1.65; }

/* ---------- Proyectos destacados y chips ---------- */
.fl-destacados{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:20px; }
.fl-dest{ display:flex; gap:16px; align-items:flex-start; border:1px solid var(--linea); border-radius:18px; padding:22px; text-decoration:none; background:#fff; transition:transform .4s ease, box-shadow .4s ease; }
.fl-dest:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(47,128,136,.12); }
.fl-dest .ico{ flex:0 0 48px; width:48px; height:48px; border-radius:12px; object-fit:cover; background:#fff; border:1px solid var(--linea); }
.fl-dest h3{ margin:0 0 4px; font-size:16.8px; font-weight:400; color:var(--tinta); }
.fl-dest p{ margin:0; font-size:14.08px; color:var(--suave); font-weight:300; line-height:1.5; }
.fl-dest p.dom{ margin-top:6px; color:var(--marca-btn); font-size:13.12px; }
body.fl-pagina section[id], body.fl-pagina .fl-sec-head[id]{ scroll-margin-top:84px; }
.fl-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; max-width:1000px; margin:0 auto; padding:0 20px; }
.fl-cliente{ border:1px solid var(--linea); border-radius:999px; padding:9px 17px; font-size:14.08px; color:var(--texto); text-decoration:none; font-weight:300; background:#fff; transition:all .3s ease; }
a.fl-cliente:hover{ background:var(--marca-btn); color:#fff; border-color:var(--marca-btn); }

/* ---------- Galerías ---------- */
.fl-apps{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:30px; justify-items:center; }
.fl-app{ margin:0; text-align:center; }
/* Los iconos ya traen su forma (PNG transparente): la sombra sigue esa forma, no una caja */
.fl-app img{ display:block; margin:0 auto; width:100%; max-width:180px; height:auto; aspect-ratio:1/1; filter:drop-shadow(0 10px 18px rgba(0,0,0,.16)); transition:transform .4s ease; }
.fl-app img:hover{ transform:translateY(-5px); }
.fl-app figcaption{ margin-top:14px; color:var(--texto); font-weight:300; }
.fl-app figcaption small{ display:block; margin-top:4px; font-size:13px; color:var(--marca-btn); }
body.fl-pagina .fl-apps a{ display:block; text-decoration:none; color:inherit; }
body.fl-pagina .fl-apps a:hover figcaption small{ text-decoration:underline; }
@media (max-width:640px){ .fl-apps{ grid-template-columns:repeat(2, 1fr); gap:24px 16px; } }
/* 3 por fila en escritorio (9 proyectos = 3-3-3), 2 en tableta, 1 en móvil */
.fl-proyectos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
@media (max-width:900px){ .fl-proyectos{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .fl-proyectos{ grid-template-columns:1fr; } }
.fl-proy{ position:relative; margin:0; aspect-ratio:4/3; border-radius:18px; overflow:hidden; background-size:cover; background-position:center; box-shadow:0 10px 26px rgba(0,0,0,.10); }
.fl-proy figcaption{ position:absolute; left:0; right:0; bottom:0; padding:34px 16px 14px; background:linear-gradient(transparent, rgba(0,0,0,.74)); color:#fff; font-size:13.76px; font-weight:300; line-height:1.4; }

/* ---------- Equipo ---------- */
.fl-equipo{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 380px)); justify-content:center; gap:26px; }
.fl-miembro{ text-align:center; border:1px solid var(--linea); border-radius:22px; padding:38px 28px; background:#fff; }
.fl-foto{ width:132px; height:132px; border-radius:50%; background-size:cover; background-position:center; margin:0 auto 20px; box-shadow:0 12px 30px rgba(0,0,0,.12); }
.fl-miembro h3{ font-size:21.6px; font-weight:400; color:var(--tinta); margin:0 0 4px; }
.fl-miembro .rol{ color:var(--marca-ink); font-size:14.4px; margin:0 0 14px; letter-spacing:.02em; }
.fl-miembro .bio{ color:var(--texto); font-weight:300; font-size:15.2px; line-height:1.6; margin:0; }

/* ---------- Llamada final ---------- */
.fl-cta{ margin:var(--sp-6) auto var(--sp-5); max-width:1100px; padding:0 20px; }
.fl-cta > div{ background:linear-gradient(135deg, #2f8088, #3c9aa2 60%, #5bb6bd); color:#fff; border-radius:28px; padding:var(--sp-5) var(--sp-4); text-align:center; }
.fl-cta h2{ font-size:clamp(27.2px, 3vw, 36.8px); font-weight:300; margin:0 0 10px; color:#fff; }
.fl-cta p{ margin:0 auto var(--sp-3); max-width:52ch; color:rgba(255,255,255,.88); font-weight:300; line-height:1.6; }
.fl-cta a{ display:inline-flex; align-items:center; gap:.5em; background:#fff; color:var(--marca-btn-h); padding:14px 32px; border-radius:14px; text-decoration:none; font-size:16.32px; transition:transform .3s ease; }
.fl-cta a:hover{ transform:translateY(-2px); }

/* Logos de financiación (Kit Digital / NextGenerationEU) */
.fl-ayudas{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:22px 34px; padding:var(--sp-3) 20px var(--sp-5); }
.fl-ayudas img{ height:42px; width:auto; }

@media (max-width:640px){
  .fl-sec{ padding-top:var(--sp-5); }
  .fl-banda{ padding:var(--sp-4) 20px; border-radius:22px; }
  .fl-cta > div{ padding:var(--sp-4) 22px; border-radius:22px; }
  .fl-card{ padding:24px 22px; }
  .fl-ayudas img{ height:34px; }
}

/* Enlaces dentro de un párrafo: el tema en móvil pone .site-main a{display:flex} y los saca de la línea */
body.fl-pagina .site-main p a,
body.fl-pagina .site-main label a{ display:inline; width:auto; margin:0; text-align:inherit; }
.fl-prueba a{ color:var(--marca-btn); text-decoration:none; border-bottom:1px solid rgba(47,128,136,.35); }
.fl-prueba a:hover{ color:var(--marca-btn-h); border-bottom-color:var(--marca-btn-h); }

/* ---------- Contacto: brief + columna lateral ---------- */
.fl-sec.fl-sec-contacto{ padding-top:var(--sp-3); }
.fl-contacto{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:36px; align-items:start; max-width:1120px; margin:0 auto; padding:0 20px; }
.fl-lado{ position:sticky; top:calc(var(--nav-h) + 24px); display:flex; flex-direction:column; gap:16px; }
.fl-lado-caja{ background:#fff; border:1px solid var(--linea); border-radius:20px; padding:24px; }
.fl-lado-suave{ background:var(--fondo-suave); border-color:transparent; }
.fl-lado h2{ font-size:17.28px; font-weight:400; color:var(--tinta); margin:0 0 14px; line-height:1.3; }
.fl-lado p{ font-size:15px; color:var(--texto); font-weight:300; line-height:1.6; margin:0 0 10px; }
.fl-lado p:last-child{ margin-bottom:0; }
.fl-lado a{ color:var(--marca-btn); text-decoration:none; }
.fl-lado a:hover{ color:var(--marca-btn-h); text-decoration:underline; text-underline-offset:3px; }
body.fl-pagina .site-main .fl-lado a.fl-lado-enlace{ display:inline-flex; align-items:center; gap:10px; font-weight:400; }
.fl-lado-enlace .fa{ width:18px; text-align:center; font-size:16px; color:var(--marca-ink); }
.fl-lado-pasos{ list-style:none; counter-reset:paso; margin:0; padding:0; }
.fl-lado-pasos li{ counter-increment:paso; position:relative; margin:0; padding:2px 0 16px 42px; font-size:15px; line-height:1.55; color:var(--texto); font-weight:300; }
.fl-lado-pasos li:last-child{ padding-bottom:0; }
.fl-lado-pasos li::before{ content:counter(paso); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; background:#ecf7f8; color:var(--marca-btn); font-size:13px; font-weight:500; display:flex; align-items:center; justify-content:center; }
.fl-lado-pasos b{ display:block; color:var(--tinta); font-weight:500; }
@media (max-width:960px){
  .fl-contacto{ grid-template-columns:1fr; gap:24px; }
  .fl-lado{ position:static; }
}

/* ---------- Tablas (precios, calendario VeriFactu) ---------- */
.fl-tabla-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--linea); border-radius:20px; background:#fff; }
.fl-tabla{ width:100%; border-collapse:collapse; font-size:15px; line-height:1.5; color:var(--texto); margin:0; }
.fl-tabla caption{ caption-side:bottom; text-align:left; padding:12px 18px 16px; font-size:13px; color:var(--suave); font-weight:300; }
.fl-tabla th, .fl-tabla td{ padding:14px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--linea); font-weight:300; }
.fl-tabla thead th{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--suave); font-weight:500; background:var(--fondo-suave); white-space:nowrap; }
.fl-tabla tbody th{ color:var(--tinta); font-weight:400; min-width:170px; }
.fl-tabla tbody tr:last-child th, .fl-tabla tbody tr:last-child td{ border-bottom:0; }
.fl-tabla td.num{ white-space:nowrap; color:var(--tinta); font-weight:400; }
.fl-tabla a{ color:var(--marca-btn); text-decoration:none; }
.fl-tabla a:hover{ text-decoration:underline; }
body.fl-pagina .site-main .fl-tabla a{ display:inline; width:auto; margin:0; text-align:inherit; }
/* Móvil: cada fila, una ficha con etiquetas (sin desplazamiento horizontal) */
@media (max-width:640px){
  .fl-tabla-wrap{ overflow:visible; }
  .fl-tabla thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); }
  .fl-tabla, .fl-tabla tbody, .fl-tabla tr, .fl-tabla th, .fl-tabla td{ display:block; width:auto; }
  .fl-tabla{ display:flex; flex-direction:column; }
  .fl-tabla caption{ display:block; width:auto; order:2; padding:12px 18px 16px; border-top:1px solid var(--linea); }
  .fl-tabla tr{ padding:16px 18px; border-bottom:1px solid var(--linea); }
  .fl-tabla tbody tr:last-child{ border-bottom:0; }
  .fl-tabla th, .fl-tabla td{ padding:0; border:0; min-width:0; }
  .fl-tabla tbody th{ font-size:16.5px; margin-bottom:8px; }
  .fl-tabla td{ margin-top:6px; }
  .fl-tabla td.num{ display:inline-block; margin:0 22px 8px 0; font-size:16px; }
  .fl-tabla td[data-l]::before{ content:attr(data-l); display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--suave); font-weight:500; margin-bottom:1px; }
}
.fl-nota{ max-width:72ch; margin:18px auto 0; font-size:14.5px; color:var(--suave); font-weight:300; line-height:1.6; text-align:center; }
.fl-nota a{ color:var(--marca-btn); }
.fl-code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9em; background:#eef5f6; color:#1f5f66; padding:2px 7px; border-radius:6px; word-break:break-all; }

/* ---------- Comprobador VeriFactu ---------- */
.fl-vf{ display:grid; gap:18px; }
.fl-vf-form{ background:#fff; border:1px solid var(--linea); border-radius:20px; padding:26px 28px; box-shadow:0 18px 44px rgba(31,42,44,.06); }
.fl-vf-form fieldset{ border:0; margin:0 0 20px; padding:0; min-width:0; }
.fl-vf-form fieldset:last-child{ margin-bottom:0; }
.fl-vf-form legend{ font-size:16px; font-weight:500; color:var(--tinta); margin:0 0 10px; padding:0; }
.fl-vf-form label{ display:flex; align-items:flex-start; gap:10px; margin:0 0 8px; padding:10px 14px; border:1px solid #dfe8e9; border-radius:12px; font-size:15px; font-weight:300; color:var(--texto); cursor:pointer; line-height:1.45; transition:border-color .2s, background .2s; }
.fl-vf-form label:hover{ border-color:#bcd9dc; }
.fl-vf-form label:has(input:checked){ border-color:var(--marca-btn); background:#f1f8f9; color:var(--tinta); }
.fl-vf-form input[type="radio"]{ margin:3px 0 0; accent-color:var(--marca-btn); flex:0 0 auto; width:16px; height:16px; }
.fl-vf-res{ border-radius:20px; padding:24px 26px; border:1px solid var(--linea); background:var(--fondo-suave); }
.fl-vf-res p{ margin:0 0 10px; font-size:16px; line-height:1.6; color:var(--texto); font-weight:300; }
.fl-vf-res p:last-child{ margin-bottom:0; }
.fl-vf-res .fl-vf-titulo{ font-size:22px; font-weight:400; color:var(--tinta); }
.fl-vf-res b{ font-weight:500; color:var(--tinta); }
.fl-vf-res small{ display:inline-block; margin-top:8px; font-size:14px; color:var(--suave); }
.fl-vf-res a{ color:var(--marca-btn); }
.fl-vf-si{ background:#ecf7f8; border-color:#bfdfe2; }
.fl-vf-si .fl-vf-titulo{ color:#1f5f66; }
.fl-vf-no{ background:#f7f7f2; border-color:#e6e4d6; }
.fl-vf-que{ padding-top:10px; border-top:1px solid rgba(31,95,102,.15); }
@media (max-width:640px){ .fl-vf-form{ padding:20px 16px; } .fl-vf-res{ padding:20px 18px; } }
.fl-wrap-vf{ max-width:1080px; }
@media (min-width:900px){
  .fl-vf{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:start; gap:24px; }
  .fl-vf-res{ position:sticky; top:calc(var(--nav-h) + 24px); }
}

/* publicado 2026-11-03T23:19 */