/* ==========================================================================
   Agencia Arial - Landing page
   ========================================================================== */

:root {
  --color-primary: #0e7c86;
  --color-primary-dark: #0b616a;
  --color-primary-light: #dff2f3;
  --color-dark: #0f2a43;
  --color-text: #3a3f47;
  --color-muted: #6b7280;
  --color-bg: #ffffff;
  --color-bg-alt: #f6f8f9;
  --color-border: #e5e7eb;
  --color-success: #157347;
  --color-error: #c8102e;

  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 10px;
  --shadow: 0 4px 16px rgba(15, 42, 67, 0.08);
  --container-width: 1140px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Fondo difuminado de toda la portada: fijo al viewport (no al documento),
   para que se siga viendo igual aunque se haga scroll por las distintas
   secciones. Solo en la portada (body.pagina-inicio) — el resto de páginas
   no llevan esta foto de fondo. El pie de página se queda con su fondo
   oscuro sólido de siempre — mezclar la foto ahí debajo del texto claro
   del footer dejaría de leerse bien. */
body.pagina-inicio::before {
  content: "";
  position: fixed;
  inset: 0;
  /* Desde 2026-10-14 la web es solo de software: fondo del panel de gestión
     (antes, hero-fondo-yate.jpg de la etapa con Zona Pericial). */
  background-image: url("../assets/images/fondo-zona-software.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transform: scale(1.03);
  z-index: -2;
}

body.pagina-inicio::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.25));
  z-index: -1;
}

/* Mismo tratamiento que la portada (mismo blur/overlay), pero con la foto
   de recepción de las oficinas, solo en "Dónde estamos". */
body.pagina-donde-estamos::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../assets/images/fondo-donde-estamos.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transform: scale(1.03);
  z-index: -2;
}

body.pagina-donde-estamos::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.25));
  z-index: -1;
}

/* Mismo tratamiento (mismo blur/overlay), foto del despiece del velero,
   solo en "Zona Pericial". */
body.pagina-zona-pericial::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../assets/images/fondo-zona-pericial.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transform: scale(1.03);
  z-index: -2;
}

body.pagina-zona-pericial::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.25));
  z-index: -1;
}

/* Mismo tratamiento (mismo blur/overlay), despiece de la cámara térmica,
   solo en "Herramientas de peritación". */
body.pagina-herramientas-peritacion::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../assets/images/fondo-herramientas-peritacion.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transform: scale(1.03);
  z-index: -2;
}

body.pagina-herramientas-peritacion::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.25));
  z-index: -1;
}

/* Mismo tratamiento (mismo blur/overlay), medición de espesores de casco,
   solo en "Cómo lo hacemos". */
body.pagina-como-lo-hacemos::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../assets/images/fondo-como-lo-hacemos.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transform: scale(1.03);
  z-index: -2;
}

body.pagina-como-lo-hacemos::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.25));
  z-index: -1;
}

/* Mismo tratamiento (mismo blur/overlay), mockup del panel de gestión,
   solo en "Zona Software". */
body.pagina-zona-software::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../assets/images/fondo-zona-software.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transform: scale(1.03);
  z-index: -2;
}

body.pagina-zona-software::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.25));
  z-index: -1;
}

/* Mismo tratamiento (mismo blur/overlay), sala de servidores vista desde
   arriba, solo en "Nuestras infraestructuras". El velo blanco es más fuerte
   que en las demás porque la foto es mucho más oscura y el texto no se leía. */
body.pagina-nuestras-infraestructuras::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../assets/images/fondo-nuestras-infraestructuras.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transform: scale(1.03);
  z-index: -2;
}

body.pagina-nuestras-infraestructuras::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.5));
  z-index: -1;
}

/* En esta página las secciones de abajo dejan ver más el fondo que en el
   resto del sitio (sus tarjetas siguen siendo opacas, así el texto se lee). */
body.pagina-nuestras-infraestructuras .services,
body.pagina-nuestras-infraestructuras .why-us {
  background: rgba(255, 255, 255, 0.55);
}

/* Mismo tratamiento que "Nuestras infraestructuras" (foto igual de oscura:
   velo algo más fuerte y secciones semitransparentes), con el rack de
   servidores y el monitor, solo en "CRM para empresas y pago de impuestos". */
body.pagina-crm-para-empresas::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../assets/images/fondo-crm-para-empresas.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transform: scale(1.03);
  z-index: -2;
}

body.pagina-crm-para-empresas::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.5));
  z-index: -1;
}

body.pagina-crm-para-empresas .services,
body.pagina-crm-para-empresas .why-us {
  background: rgba(255, 255, 255, 0.55);
}

/* Mismo tratamiento (mismo blur/overlay que CRM para empresas), flota de
   ambulancias en su base, solo en "Gestión ambulancias Módulo 1". La foto es
   muy luminosa y con mucho detalle: el velo es el más fuerte, como en CRM. */
body.pagina-gestion-flotas::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../assets/images/fondo-gestion-flotas.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transform: scale(1.03);
  z-index: -2;
}

body.pagina-gestion-flotas::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.5));
  z-index: -1;
}

body.pagina-gestion-flotas .hero,
body.pagina-gestion-flotas .services,
body.pagina-gestion-flotas .why-us {
  background: rgba(255, 255, 255, 0.55);
}

/* Mismo tratamiento (mismo blur/overlay que el resto de Software), patio de
   colegio con alumnos, solo en "ERP Colegios". Foto luminosa: velo fuerte. */
body.pagina-erp-colegios::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../assets/images/fondo-erp-colegios.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(1.5px);
  transform: scale(1.03);
  z-index: -2;
}

body.pagina-erp-colegios::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.5));
  z-index: -1;
}

body.pagina-erp-colegios .hero,
body.pagina-erp-colegios .services,
body.pagina-erp-colegios .why-us,
body.pagina-erp-colegios .contact {
  background: rgba(255, 255, 255, 0.55);
}

/* Mismo tratamiento (mismo blur/overlay), escaparate de tiendas online en
   varios dispositivos, solo en "Desarrollo web - Ecommerce". Foto oscura y
   vertical: se centra en las pantallas y lleva el velo fuerte, como CRM. */
body.pagina-desarrollo-web::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../assets/images/fondo-desarrollo-web-ecommerce.jpg");
  background-size: cover;
  background-position: center 40%;
  filter: blur(1.5px);
  transform: scale(1.03);
  z-index: -2;
}

body.pagina-desarrollo-web::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.5));
  z-index: -1;
}

body.pagina-desarrollo-web .hero,
body.pagina-desarrollo-web .services,
body.pagina-desarrollo-web .why-us {
  background: rgba(255, 255, 255, 0.55);
}

/* Mismo tratamiento (mismo blur/overlay), robot asistente con paneles de
   chat, CRM y agenda, solo en "Desarrollo IA a medida". Foto oscura y
   vertical: centrada en el robot y con el velo fuerte, como CRM. */
body.pagina-desarrollo-ia::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../assets/images/fondo-desarrollo-ia.jpg");
  background-size: cover;
  background-position: center 35%;
  filter: blur(1.5px);
  transform: scale(1.03);
  z-index: -2;
}

body.pagina-desarrollo-ia::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.5));
  z-index: -1;
}

body.pagina-desarrollo-ia .hero,
body.pagina-desarrollo-ia .services,
body.pagina-desarrollo-ia .why-us {
  background: rgba(255, 255, 255, 0.55);
}

/* Mismo tratamiento (mismo blur/overlay), escaparate de tienda online en
   portátil, móvil y paneles, en todas las páginas de la Tienda (categorías,
   categoría, producto y gracias). Foto oscura y vertical: velo fuerte. */
body.pagina-tienda::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../assets/images/fondo-tienda.jpg");
  background-size: cover;
  background-position: center 45%;
  filter: blur(1.5px);
  transform: scale(1.03);
  z-index: -2;
}

body.pagina-tienda::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.5));
  z-index: -1;
}

body.pagina-tienda .hero,
body.pagina-tienda .services,
body.pagina-tienda .why-us {
  background: rgba(255, 255, 255, 0.55);
}

/* Mismo tratamiento (mismo blur/overlay), portátil y tableta con un blog,
   en todas las páginas del Blog (listado, artículo y artículo protegido).
   Foto oscura y vertical: velo fuerte; el artículo va en una hoja blanca
   para que el texto largo se lea cómodo. */
body.pagina-blog::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../assets/images/fondo-blog.jpg");
  background-size: cover;
  background-position: center 45%;
  filter: blur(1.5px);
  transform: scale(1.03);
  z-index: -2;
}

body.pagina-blog::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.5));
  z-index: -1;
}

body.pagina-blog .hero,
body.pagina-blog .services {
  background: rgba(255, 255, 255, 0.55);
}

body.pagina-blog main > article.container,
body.pagina-blog main > section.container {
  margin-top: 32px;
  margin-bottom: 32px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

h1, h2, h3, h4 {
  color: var(--color-dark);
  line-height: 1.25;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: underline;
}

img, svg { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
}

.skip-link:focus {
  left: 10px;
  top: 10px;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.85em 1.6em;
  border-radius: var(--radius);
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.btn:hover, .btn:focus {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover, .btn-primary:focus {
  background: var(--color-primary-dark);
  color: #fff;
}

.btn-secondary {
  background: var(--color-primary-dark);
  color: #fff;
  border-color: var(--color-primary-dark);
}

.btn-secondary:hover, .btn-secondary:focus {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--color-border);
  z-index: 500;
}

/* El cristal esmerilado va en una capa aparte: con backdrop-filter en la
   propia cabecera, Chrome/Edge pintaban el submenú desplegable semitransparente. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-dark);
}

.logo-icon {
  object-fit: contain;
}

.logo:hover, .logo:focus {
  text-decoration: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-dark);
  border-radius: 2px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: var(--color-dark);
  font-weight: 500;
}

.main-nav a:hover, .main-nav a:focus {
  color: var(--color-primary);
}

.nav-cta {
  white-space: nowrap;
}

/* Enlace discreto de acceso al panel del blog (admin), siempre visible a la
   derecha del todo, sin competir visualmente con el CTA de presupuesto. */
.nav-access {
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.4em 1em;
}

.nav-access:hover, .nav-access:focus {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Submenú desplegable (p.ej. "Herramientas de peritación" bajo "Zona Pericial") */
.nav-item-dropdown {
  position: relative;
}

.submenu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  max-width: min(280px, calc(100vw - 32px));
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 20;
}

/* El segundo desplegable consecutivo (Zona Software, justo después de Zona
   Pericial) se ancla por su borde derecho en vez del izquierdo, para que no
   quede cortado fuera de la ventana al estar más a la derecha del menú. */
.nav-item-dropdown + .nav-item-dropdown .submenu {
  left: auto;
  right: 0;
}

.nav-item-dropdown:hover .submenu,
.nav-item-dropdown:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* El submenú es un panel de dos columnas (una página por línea), no una fila:
   ".main-nav ul" lo ponía en horizontal y desbordaba la ventana. */
.main-nav .submenu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
  width: 540px;
  min-width: 0;
  max-width: calc(100vw - 32px);
  padding: 10px;
}

.submenu li {
  display: block;
}

.submenu a {
  display: block;
  padding: 10px 14px;
  white-space: normal;
  border-radius: 8px;
}

.main-nav .submenu a:hover,
.main-nav .submenu a:focus,
.main-nav .submenu a[aria-current="page"] {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* Hero */
.hero {
  padding: 64px 0;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.audit-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 40px;
  align-items: center;
}

.audit-image {
  width: 100%;
  border-radius: var(--radius);
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--color-muted);
  max-width: 46ch;
}

/* Un poco más de peso solo en las páginas con foto de fondo difuminada:
   el gris normal se lee peor ahí que sobre el blanco liso del resto del
   sitio. */
body.pagina-inicio .hero-subtitle,
body.pagina-donde-estamos .hero-subtitle,
body.pagina-zona-pericial .hero-subtitle,
body.pagina-herramientas-peritacion .hero-subtitle,
body.pagina-como-lo-hacemos .hero-subtitle,
body.pagina-zona-software .hero-subtitle,
body.pagina-nuestras-infraestructuras .hero-subtitle,
body.pagina-crm-para-empresas .hero-subtitle,
body.pagina-gestion-flotas .hero-subtitle,
body.pagina-erp-colegios .hero-subtitle,
body.pagina-desarrollo-web .hero-subtitle,
body.pagina-desarrollo-ia .hero-subtitle,
body.pagina-tienda .hero-subtitle,
body.pagina-blog .hero-subtitle {
  font-weight: 600;
  color: var(--color-dark);
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 1.5em;
}

/* Visualmente oculto pero accesible: para encabezados reales que exige la
   semántica/SEO de la página (lectores de pantalla, buscadores) cuando el
   título visible ya viene incluido dentro de una imagen, como el banner de
   la portada. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Portada: el hero deja de ser el grid de dos columnas (texto + foto) de
   las demás páginas — aquí es un único banner a todo el ancho con los
   botones debajo, así que se sobrescribe #inicio .hero-inner en vez de
   tocar .hero-inner (que sí usan el resto de páginas). */
/* (2026-10-14) La portada vuelve al hero de dos columnas (texto + foto)
   como el resto de páginas; el banner con texto de las tres áreas ya no se usa. */

.hero-banner {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}



.hero-graphic {
  justify-self: center;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 340px;
}

.hero-graphic-stack {
  flex-direction: column;
  gap: 12px;
}

.hero-image {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(15, 42, 67, 0.28);
}

/* Sections */
section {
  padding: 72px 0;
}

.section-lead {
  color: var(--color-muted);
  max-width: 60ch;
  margin-bottom: 2em;
}

.services-group-title {
  margin: 2.2em 0 1em;
}

.services-group-title:first-of-type {
  margin-top: 0;
}

/* Tarjetas de zona (Zona Pericial / Zona Software) en la home */
.zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.zone-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.zone-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.zone-card-image {
  width: 100%;
  height: 320px;
  object-fit: contain;
  background: #fff;
}

.zone-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 32px;
}

.zone-card-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

.zone-card .card-icon {
  width: 56px;
  height: 56px;
}

.zone-card p {
  color: var(--color-muted);
}

/* Services cards */
.services {
  background: rgba(255, 255, 255, 0.78);
}

.producto-detalle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 32px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  margin-bottom: 16px;
}

.card p {
  color: var(--color-muted);
  margin-bottom: 0;
}

.tool-image {
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 16px;
}

/* Tarjetas de la tienda: a diferencia de .tool-image (pensada para fotos de
   equipos/herramientas que no se pueden recortar), aquí las fotos de
   producto sí se pueden recortar para rellenar la tarjeta sin dejar bandas
   en blanco cuando la proporción de la imagen no coincide con la del hueco. */
.producto-imagen {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 16px;
}

/* Listado del blog: una fila compacta por entrada (miniatura + título +
   resumen) en vez de tarjetas grandes en cuadrícula, para que quepan muchas
   publicaciones sin llenar la pantalla. */
.blog-list {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  border-top: 1px solid var(--color-border);
}

.blog-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
}

.blog-list-item:hover .blog-list-titulo {
  color: var(--color-primary);
}

/* Miniatura vertical 9:16, el formato de las portadas (carteles de
   Instagram/TikTok): se ve el cartel entero en pequeño. */
.blog-list-imagen {
  width: 54px;
  height: 96px;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
  flex-shrink: 0;
}

.blog-list-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.blog-list-titulo {
  font-weight: 700;
  font-size: 1rem;
}

.blog-list-resumen {
  color: var(--color-muted);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pestañas para navegar el blog por grupo (Presentaciones, Post
   publicitarios, Instrucciones de uso) por encima del listado. */
.blog-grupos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.blog-grupo-tab {
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
}

.blog-grupo-tab:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.blog-grupo-tab.activo {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.blog-list-grupo {
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
}

/* Sin el padding general de <section> (72px arriba y abajo), que dejaba
   huecos blancos enormes entre las secciones del listado. */
.blog-seccion-grupo {
  margin-top: 40px;
  padding: 0;
}

/* Lista sobre fondo blanco para que no se mezcle con la foto del fondo del blog. */
body.pagina-blog .blog-list {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
body.pagina-blog .blog-list-item { padding: 12px; }
body.pagina-blog .blog-list-item:last-child { border-bottom: none; }

.blog-seccion-titulo {
  font-size: 1.4rem;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border);
}

.tool-pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-weight: 600;
  font-size: 0.9rem;
}

.tool-pdf-link::before {
  content: "\2193";
}

/* Why us */
.why-us {
  background: var(--color-bg-alt);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}

.feature p {
  color: var(--color-muted);
  margin-bottom: 0;
}

/* Contact */
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
}

.contact-info {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
}

.contact-details {
  list-style: none;
  padding: 0;
  margin: 1.5em 0 0;
}

.contact-details li {
  margin-bottom: 0.75em;
}

.contact-form {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
}

.datos-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  margin: 0 0 20px;
}

.datos-fieldset legend {
  font-weight: 600;
  color: var(--color-dark);
  padding: 0 6px;
}

.datos-fieldset[disabled] {
  display: none;
}

.tipo-solicitante-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  gap: 24px;
}

.tipo-solicitante-fieldset legend {
  font-weight: 600;
  color: var(--color-dark);
  width: 100%;
  margin-bottom: 8px;
}

.checkbox-label-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.checkbox-label-inline input {
  width: auto;
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.7em 0.85em;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.form-group.has-error input,
.form-group.has-error textarea {
  border-color: var(--color-error);
}

.error-message {
  display: block;
  color: var(--color-error);
  font-size: 0.85rem;
  min-height: 1.2em;
  margin-top: 4px;
}

.form-submit {
  width: 100%;
  border: none;
  font-size: 1rem;
}

.form-status {
  margin-top: 14px;
  font-weight: 600;
  min-height: 1.2em;
}

.form-status.success { color: var(--color-success); }
.form-status.error { color: var(--color-error); }

/* Footer */
.site-footer {
  background: var(--color-dark);
  color: #cbd2dc;
  padding: 40px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 24px 40px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #fff;
}

.footer-logo {
  border-radius: 6px;
  background: #fff;
  padding: 2px;
}

.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

.footer-contact li {
  margin-bottom: 6px;
}

.footer-contact strong {
  color: #fff;
}

.footer-contact a {
  color: #cbd2dc;
}

.footer-contact a:hover, .footer-contact a:focus {
  color: #fff;
}

.footer-social {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.footer-social a:hover, .footer-social a:focus {
  background: var(--color-primary);
  text-decoration: none;
}

.footer-copy, .footer-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
}

.footer-copy {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-note {
  color: #8b93a1;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive */
@media (max-width: 860px) {
  .hero-inner,
  .contact-inner,
  .audit-inner,
  .producto-detalle-grid {
    grid-template-columns: 1fr;
  }

  .hero-graphic {
    order: -1;
    max-width: 180px;
  }

  .audit-image {
    order: -1;
    max-width: 280px;
    margin: 0 auto;
  }
}

/* Blog: contenido renderizado a partir de Markdown */
.blog-content { line-height: 1.7; }
.blog-content h2 { margin-top: 1.6em; }
.blog-content h3 { margin-top: 1.3em; }
.blog-content p { margin-bottom: 1.2em; }
.blog-content img { max-width: 100%; border-radius: var(--radius); margin: 1em 0; }
.blog-content a { text-decoration: underline; }
.blog-content ul, .blog-content ol { margin-bottom: 1.2em; padding-left: 1.4em; }
.blog-content blockquote {
  border-left: 3px solid var(--color-border);
  margin: 1.2em 0;
  padding-left: 1em;
  color: var(--color-muted);
}
.blog-content pre {
  background: var(--color-bg-alt);
  padding: 1em;
  border-radius: var(--radius);
  overflow-x: auto;
}

@media (max-width: 720px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 20px 24px;
    display: none;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 4px;
  }

  .main-nav ul a {
    display: block;
    padding: 10px 0;
  }

  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0 0 0 16px;
    margin-top: 4px;
  }

  .main-nav .submenu {
    display: block;
    width: auto;
    padding: 0 0 0 16px;
  }

  .submenu a {
    padding: 8px 0;
    color: var(--color-muted);
  }

  .nav-cta {
    margin-top: 12px;
    text-align: center;
  }

  .nav-access {
    margin-top: 10px;
    text-align: center;
  }
}

/* Nuestras infraestructuras */
.infra-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.infra-gallery img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: block;
}

.partners-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.partner-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
}

.partner-logo {
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  margin-bottom: 16px;
}

.architecture-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.architecture-list li {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 0.95rem;
}

.architecture-list strong {
  display: block;
  color: var(--color-dark);
  margin-bottom: 4px;
}

/* Chips de funciones (disponibles / en hoja de ruta) */
.feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.feature-pills li {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.45em 1em;
  border-radius: 999px;
}

.feature-pills--proximamente li {
  background: transparent;
  color: var(--color-muted);
  font-weight: 500;
  border: 1px dashed var(--color-border);
}

.pills-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 24px 0 0;
  font-weight: 600;
}

/* Botón flotante de WhatsApp, presente en todas las páginas. */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 999;
  transition: transform 0.15s ease;
}
.whatsapp-float:hover,
.whatsapp-float:focus {
  transform: scale(1.08);
}
.whatsapp-float svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}
@media (max-width: 480px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 16px;
    right: 16px;
  }
  .whatsapp-float svg {
    width: 26px;
    height: 26px;
  }
}

/* Botón de contacto (chat de la web o WhatsApp) — public/js/chat-arial.js lo
   monta sobre .whatsapp-float cuando el asistente de IA está activo. */
.whatsapp-float.contacto-float { background: var(--color-primary); }
.contacto-menu {
  position: fixed; right: 24px; bottom: 94px; z-index: 1000; width: min(300px, calc(100vw - 32px));
  background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(15, 42, 67, 0.22); padding: 12px;
}
.contacto-menu[hidden], .chat-arial[hidden] { display: none; }
.contacto-menu-titulo { margin: 2px 4px 10px; font-weight: 600; color: var(--color-dark); }
.contacto-opcion {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 10px;
  background: none; text-align: left; font: inherit; color: var(--color-dark); cursor: pointer; text-decoration: none;
}
.contacto-opcion:hover, .contacto-opcion:focus-visible { background: var(--color-primary-light); outline: none; }
.contacto-opcion strong { display: block; }
.contacto-opcion small { display: block; color: var(--color-muted); font-size: 0.82rem; }
.contacto-icono { flex: none; width: 38px; height: 38px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 20px; }
.contacto-icono-chat { background-color: var(--color-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4 4h16a2 2 0 012 2v10a2 2 0 01-2 2H8l-4 4V6a2 2 0 012-2z'/%3E%3C/svg%3E"); }
.contacto-icono-wa { background-color: #25D366; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2a10 10 0 00-8.6 15.1L2 22l5-1.3A10 10 0 1012 2zm5.1 13.6c-.2.6-1.2 1.1-1.7 1.2-.4.1-1 .1-1.6-.1-.4-.1-.8-.3-1.4-.5-2.5-1.1-4.1-3.6-4.3-3.8-.1-.2-1-1.4-1-2.6s.6-1.8.9-2.1c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.4.2.5.7 1.7.8 1.9.1.1.1.3 0 .4l-.3.4-.4.4c-.1.1-.3.3-.1.5.1.3.6 1.1 1.4 1.7 1 .8 1.7 1.1 2 1.2.2.1.4.1.5 0 .1-.2.6-.7.8-1 .2-.2.3-.2.6-.1.2.1 1.5.7 1.7.8.2.1.4.2.5.3 0 .1 0 .6-.2 1.2z'/%3E%3C/svg%3E"); }

.chat-arial {
  position: fixed; right: 24px; bottom: 94px; z-index: 1000; display: flex; flex-direction: column;
  width: min(370px, calc(100vw - 32px)); height: min(560px, calc(100vh - 130px)); padding: 0; margin: 0;
  background: #fff; border-radius: 16px; box-shadow: 0 12px 36px rgba(15, 42, 67, 0.25); overflow: hidden;
}
.chat-arial-cabecera { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--color-primary); color: #fff; }
.chat-arial-cabecera strong, .chat-arial-cabecera small { display: block; color: #fff; }
.chat-arial-cabecera small { opacity: 0.85; font-size: 0.8rem; }
.chat-arial-cerrar { border: 0; background: none; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.chat-arial-mensajes { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #f6f8f9; }
.chat-arial-burbuja { max-width: 85%; padding: 8px 12px; border-radius: 14px; font-size: 0.93rem; line-height: 1.45; word-wrap: break-word; }
.chat-arial-burbuja a { color: inherit; text-decoration: underline; }
.chat-arial-burbuja small { display: block; font-size: 0.72rem; opacity: 0.75; margin-bottom: 2px; }
.chat-arial-burbuja.es-agente, .chat-arial-burbuja.es-humano { align-self: flex-start; background: #fff; color: var(--color-dark); border: 1px solid #e3e8ec; border-bottom-left-radius: 4px; }
.chat-arial-burbuja.es-humano { border-color: #f1c99a; }
.chat-arial-burbuja.es-cliente { align-self: flex-end; background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-arial-burbuja.es-error { align-self: center; background: #fdecec; color: #8a1c1c; font-size: 0.85rem; text-align: center; }
.chat-arial-escribiendo { display: flex; gap: 4px; }
.chat-arial-escribiendo span { width: 7px; height: 7px; border-radius: 50%; background: #9aa7b2; animation: chat-arial-puntos 1s infinite ease-in-out; }
.chat-arial-escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.chat-arial-escribiendo span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-arial-puntos { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
.chat-arial-formulario { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e3e8ec; }
.chat-arial-formulario textarea { flex: 1; resize: none; border: 1px solid #d5dde3; border-radius: 10px; padding: 9px 10px; font: inherit; font-size: 0.93rem; max-height: 110px; }
.chat-arial-formulario button { flex: none; width: 42px; border: 0; border-radius: 10px; background: var(--color-primary); color: #fff; font-size: 1.05rem; cursor: pointer; }
.chat-arial-formulario button:disabled { opacity: 0.5; cursor: wait; }
.chat-arial-aviso { margin: 0; padding: 0 12px 10px; font-size: 0.72rem; color: var(--color-muted); }
.chat-arial-aviso a { color: inherit; }
.chat-arial-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 480px) {
  .contacto-menu, .chat-arial { right: 16px; bottom: 78px; }
  .chat-arial { height: calc(100vh - 110px); }
}
@media (prefers-reduced-motion: reduce) { .chat-arial-escribiendo span { animation: none; } }

/* Planes del agente de IA (desarrollo-ia-a-medida.html) */
.planes-ia { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.planes-ia .card { display: flex; flex-direction: column; text-align: left; }
.planes-ia .card .btn { margin-top: auto; align-self: flex-start; }
.plan-destacado { border: 2px solid var(--color-primary); }
.planes-ia .plan-etiqueta { display: inline-block; align-self: flex-start; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 0.8rem; font-weight: 600; }
.plan-precio { font-size: 1.6rem; font-weight: 700; margin: 0.2em 0 0; color: var(--color-text); }
.plan-precio small { font-size: 0.85rem; font-weight: 400; }
.plan-antes { font-size: 1rem; font-weight: 400; text-decoration: line-through; opacity: 0.6; margin-right: 6px; }
.plan-cuota { font-weight: 600; margin: 0 0 1em; }
.plan-lista { margin: 0 0 1.4em; padding-left: 1.2em; }
.plan-lista li { margin-bottom: 0.4em; }

/* Aviso de cookies (public/js/medicion.js): solo aparece si hay Google o Meta configurados */
.aviso-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; max-width: 560px; margin: 0 auto; background: #fff; color: var(--color-text); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0,0,0,0.18); padding: 16px 18px; font-size: 0.95rem; }
.aviso-cookies p { margin: 0 0 12px; }
.aviso-cookies-botones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Preguntas frecuentes (desarrollo-ia-a-medida.html) */
.faq-ia { max-width: 860px; }
.faq-item { background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius); padding: 0 20px; margin-bottom: 12px; }
.faq-item summary { cursor: pointer; font-weight: 600; padding: 16px 32px 16px 0; list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--color-primary); line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { border-bottom: 1px solid #e5e7eb; }
.faq-item p { margin: 12px 0 16px; }

.h1-sub { display: block; margin-top: 0.35em; font-size: 0.55em; font-weight: 600; color: var(--color-primary); }

/* Página de IA en móvil: tarjetas compactas (icono a la izquierda del título)
   y enlaces de acción con zona de toque cómoda. */
.enlace-accion { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (max-width: 640px) {
  .cards-compactas { gap: 12px; }
  .cards-compactas .card { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 18px; }
  .cards-compactas .card-icon { width: 44px; height: 44px; margin: 0; font-size: 22px !important; }
  .cards-compactas .card h3 { margin: 0; font-size: 1.05rem; }
  .cards-compactas .card p { grid-column: 1 / -1; margin: 10px 0 0; }
}

/* Tablas, citas y listas de comprobación dentro de los artículos del blog (Markdown) */
.blog-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.2em 0; font-size: 0.95rem; }
.blog-content th, .blog-content td { border: 1px solid var(--color-border); padding: 8px 12px; text-align: left; vertical-align: top; }
.blog-content th { background: var(--color-primary-light); font-weight: 600; }
.blog-content blockquote { margin: 1.2em 0; padding: 12px 16px; border-left: 4px solid var(--color-primary); background: var(--color-bg-alt); border-radius: 0 var(--radius) var(--radius) 0; }
.blog-content blockquote p { margin: 0.3em 0; }
.blog-content li input[type="checkbox"] { margin-right: 6px; }
@media (max-width: 640px) {
  .blog-content table { font-size: 0.85rem; }
  .blog-content th, .blog-content td { padding: 6px 8px; }
}

/* Portada (2026-10-14): banner oscuro de IA con los cantos redondeados, el
   texto en el hueco libre de la izquierda y la foto del equipo flotando
   sobre la parte derecha. */
.hero-portada { padding: 40px 0 56px; }
.portada-banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 600px;
  padding: 64px 56px;
  border-radius: 28px;
  overflow: hidden;
  background: #0b0a35 url("../assets/images/hero-ia-software.jpg") center / cover no-repeat;
  box-shadow: 0 30px 70px rgba(28, 20, 110, 0.35), 0 0 0 1px rgba(140, 130, 255, 0.18) inset;
  isolation: isolate;
}
.portada-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(8, 6, 40, 0.88) 0%, rgba(8, 6, 40, 0.55) 38%, rgba(8, 6, 40, 0) 62%);
}
.portada-texto { max-width: 520px; color: #fff; }
.portada-etiqueta {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #e6e3ff;
  background: rgba(124, 108, 255, 0.22);
  border: 1px solid rgba(160, 150, 255, 0.45);
  backdrop-filter: blur(6px);
}
.portada-texto h1 {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  text-shadow: 0 2px 24px rgba(90, 70, 255, 0.45);
}
.portada-subtitulo { margin: 0 0 26px; color: rgba(236, 234, 255, 0.88); font-size: 1.08rem; line-height: 1.6; }
.portada-texto .btn-primary { box-shadow: 0 10px 28px rgba(14, 124, 134, 0.45); }
.portada-btn-claro {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
}
.portada-btn-claro:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.portada-equipo {
  position: absolute;
  right: 40px;
  bottom: 40px;
  width: 34%;
  max-width: 400px;
  margin: 0;
  padding: 6px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(160, 150, 255, 0.6), rgba(80, 200, 255, 0.35));
  box-shadow: 0 24px 60px rgba(6, 4, 40, 0.6), 0 0 40px rgba(110, 90, 255, 0.35);
}
.portada-equipo img { display: block; width: 100%; height: auto; border-radius: 19px; }

@media (max-width: 860px) {
  .portada-banner { flex-direction: column; min-height: 0; padding: 36px 24px 28px; background-position: 72% center; border-radius: 22px; }
  .portada-banner::before { background: linear-gradient(180deg, rgba(8, 6, 40, 0.85) 0%, rgba(8, 6, 40, 0.7) 60%, rgba(8, 6, 40, 0.55) 100%); }
  .portada-texto { max-width: none; }
  .portada-equipo { position: static; width: 100%; max-width: none; margin-top: 28px; border-radius: 20px; }
  .portada-equipo img { border-radius: 15px; }
}

/* Tienda: la misma foto del fondo, nítida, en el hueco derecho de la cabecera.
   Es vertical: se recorta a formato apaisado centrado en el portátil. */
.hero-image-tienda { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 52%; }

/* Tienda: el título y el texto de la cabecera, en un recuadro igual que las
   tarjetas de categoría (mismo fondo, borde, radio y relleno que .card). */
.hero-text-tarjeta {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
}
.hero-text-tarjeta h1 { margin-top: 0; }
.hero-text-tarjeta .hero-subtitle { margin-bottom: 0; }

/* Software: velo blanco también en la cabecera (en el móvil el texto quedaba
   encima de la parte más cargada de la foto de fondo). */
body.pagina-zona-software .hero { background: rgba(255, 255, 255, 0.55); }

/* Tienda: enlaces de las tarjetas con zona de toque cómoda en el móvil. */
body.pagina-tienda .card h3 a,
body.pagina-tienda .card > a { display: inline-block; padding: 6px 0; }

/* ---------------------------------------------------------------------------
   Portada orientada a conversión (2026-10-15): nota bajo los botones del
   hero, segundo enlace en las tarjetas, sección "Compruébelo antes de hablar
   con nosotros" y formulario corto propio (sin FormSubmit).
   --------------------------------------------------------------------------- */
.portada-nota { margin: 14px 0 0; color: rgba(236, 234, 255, 0.78); font-size: 0.92rem; }

.cards-grid .card { display: flex; flex-direction: column; }
.cards-grid .card p { flex: 1; margin-bottom: 18px; }
.cards-grid .card .btn { align-self: flex-start; }
.card-enlace { display: inline-block; margin-top: 12px; font-size: 0.92rem; font-weight: 600; }

.como-trabajamos { background: rgba(246, 248, 249, 0.86); }
.pruebas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.prueba { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; }
.prueba h3 { margin-top: 0; }
.prueba p { color: var(--color-muted); flex: 1; }
.prueba .btn { align-self: flex-start; margin-top: 6px; }
.prueba-lista, .prueba-pasos { margin: 0; padding-left: 20px; color: var(--color-muted); }
.prueba-lista li, .prueba-pasos li { margin-bottom: 10px; }
.prueba-lista a { font-weight: 600; }

.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field-ayuda { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--color-muted); }
.form-legal { margin: 10px 0 0; font-size: 0.82rem; color: var(--color-muted); }
.form-status.success { padding: 12px 14px; border-radius: 8px; background: #e8f5ee; }
.form-submit:disabled { opacity: 0.6; cursor: wait; }

/* --- ERP Colegios: fotos y módulos (página erp-colegios.html y portada) --- */
.erp-imagen { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18); }
.erp-dos-columnas { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: center; }
.erp-dos-columnas h2 { margin-top: 0; }
.erp-modulos .card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.erp-modulos .card p { margin: 0; font-size: 0.95rem; }
.erp-portada { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 36px; align-items: center; }
.erp-portada .feature-pills { margin-top: 12px; }
@media (max-width: 860px) {
  .erp-dos-columnas, .erp-portada { grid-template-columns: 1fr; gap: 22px; }
}

/* Precios de Gestión comercial y control económico: contenido arriba en las dos tarjetas. */
.planes-gestion .card p { flex: none; }
.planes-gestion .card .plan-lista { flex: 1; }
/* Cuatro planes (dos sin IA y dos con IA): rejilla de 2 × 2 en pantallas anchas */
@media (min-width: 721px) { .planes-gestion { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Portada en la cabecera de cada entrada del blog (views/blog/detalle.ejs): se ve
   entera, sin recortar (suelen ser verticales 9:16). Al lado del título en
   pantallas anchas; encima, centrada y con altura limitada, en el móvil. */
.blog-cabecera { margin: 12px 0 24px; }
.blog-portada { display: block; max-width: 100%; width: auto; height: auto; max-height: 62vh; margin: 0 auto 20px; border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); }
@media (min-width: 720px) {
  .blog-cabecera { display: grid; grid-template-columns: minmax(0, 38%) 1fr; gap: 28px; align-items: center; }
  .blog-portada { width: 100%; max-height: 560px; object-fit: contain; margin: 0; }
  .blog-cabecera h1 { margin-top: 0; }
}