/* ============================================================
   Espacio de una solución (/soluciones/<sol>/<espacio>/) —
   plantilla de marketing de 09/2026. Héroe oscuro y, debajo,
   la página en claro con los productos sobre blanco.
   Hoja propia de EspacioSolucion.astro.
   ============================================================ */

.se svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.se button { font: inherit; }

/* ---------- 1 · Héroe oscuro ---------- */
.se-heroe { position: relative; overflow: hidden; padding: 128px 0 56px; }
.se-heroe-foto {
  position: absolute; top: 0; right: 0; width: 62%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
}
.se-heroe-in { position: relative; z-index: 1; }
.se-migas { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.78rem; color: var(--text-dim); margin-bottom: 26px; }
.se-migas a { color: inherit; text-decoration: none; }
.se-migas a:hover { color: var(--text); }
.se-migas [aria-current] { color: var(--text); }
.se-heroe .marker { font-size: 0.72rem; margin-bottom: 10px; }
.se-heroe h1 { font-size: clamp(2rem, 3.6vw, 3rem); max-width: 18ch; }
.se-heroe .lead { margin-top: 14px; max-width: 52ch; font-size: 1rem; color: rgba(244, 246, 245, 0.8); }

/* ---------- En claro ---------- */
.se-claro {
  --c-fondo: #f1f3f2; --c-panel: #ffffff; --c-texto: #151917; --c-suave: #5c6562;
  --c-linea: rgba(16, 24, 21, 0.1); --c-verde: #00866f;
  background: var(--c-fondo); color: var(--c-texto); padding: 56px 0 80px;
}
.se-claro section { padding-top: 0; padding-bottom: 0; }
.se-claro p { color: var(--c-suave); }

/* ---------- 2 · La solución: un panel con el texto y qué incluye, el vídeo
   (si lo hay) a la derecha y, debajo, la banda espacio → tecnología → resultado */
.se-solucion { margin-bottom: 24px; }
.se-sol-panel {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 44px; align-items: center;
  padding: 34px 36px 30px; background: var(--c-panel); border: 1px solid var(--c-linea); border-radius: 14px;
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.35);
}
.se-sol-panel.con-video { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
/* con lista de productos al lado del vídeo: el texto arriba y el bloque vídeo + lista a todo el ancho */
.se-sol-panel.con-lista { grid-template-columns: minmax(0, 1fr); }
.se-video-bloque { display: contents; }
.con-lista .se-video-bloque { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(220px, 1fr); gap: 22px; align-items: stretch; }
.se-vlista { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.se-vlista-t { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-suave); margin: 0 0 4px 12px; }
.se-vlista ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.se-vlista li > button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: 10px; text-align: left; font: inherit; cursor: pointer;
  color: var(--c-texto); background: var(--c-fondo); border: 1px solid var(--c-linea); opacity: 0.55;
  transition: opacity 0.35s ease, background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.se-vlista li > button:hover, .se-vlista li.abierta > button { opacity: 1; }
.se-vlista li > button:focus-visible { outline: 2px solid var(--c-verde); outline-offset: 2px; }
.se-vlista li.on > button { opacity: 1; background: #fff; border-color: var(--c-verde); transform: translateX(4px); box-shadow: 0 8px 22px -14px rgba(0, 168, 148, 0.6); }
/* abierta: la fila y el desplegable forman una sola caja con el borde verde alrededor */
.se-vlista li.abierta { border-radius: 10px; border: 1px solid var(--c-verde); background: #fff; box-shadow: 0 8px 22px -14px rgba(0, 168, 148, 0.6); }
.se-vlista li.abierta > button { border: 0; border-radius: 10px 10px 0 0; background: #fff; transform: none; box-shadow: none; }
.se-vlista li.abierta > button:hover { background: #fff; }
.se-vchev { width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; transition: transform 0.3s ease; }
.se-vlista li.abierta .se-vchev { transform: rotate(180deg); }
/* el desplegable con «Ver producto»: cerrado no ocupa nada */
.se-vmas { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.se-vmas > div { overflow: hidden; min-height: 0; opacity: 0; transition: opacity 0.3s ease; }
/* «Ver el producto»: el botón teal de la web (como antes), sin flecha; al pasar el cursor solo se oscurece un poco, sin halo */
.se-vmas .btn { display: flex; justify-content: center; margin: 2px 12px 12px; padding: 9px 14px; font-size: 0.84rem; background: #22c6ad; color: #0a0c0b; box-shadow: none; transition: background 0.2s ease; }
.se-vmas .btn:hover { background: #45d9c0; color: #0a0c0b; box-shadow: none; transform: none; }
.se-vlista li.abierta .se-vmas { grid-template-rows: 1fr; }
.se-vlista li.abierta .se-vmas > div { opacity: 1; }
.se-vn {
  flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-linea); color: var(--c-texto); font-size: 0.82rem; font-weight: 700; transition: background 0.35s ease, color 0.35s ease;
}
.se-vlista li.on .se-vn { background: var(--c-verde); color: #fff; box-shadow: 0 0 0 4px rgba(0, 168, 148, 0.18); }
.se-vtxt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.se-vtxt b { font-size: 0.9rem; font-weight: 700; }
.se-vtxt small { font-size: 0.74rem; color: var(--c-verde); font-weight: 600; letter-spacing: 0.03em; }
.se-sol-txt h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--c-texto); margin-bottom: 12px; }
.se-sol-txt > p { font-size: 0.98rem; line-height: 1.6; max-width: 58ch; margin-bottom: 22px; }
.se-sol-txt > p strong { color: var(--c-texto); }
.se-incluye { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.se-incluye-t { font-size: 0.82rem; font-weight: 700; color: var(--c-texto); margin-right: 2px; }
.se-incluye ul { list-style: none; display: contents; }
.se-incluye li {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 10px; border-radius: 999px;
  background: var(--c-fondo); border: 1px solid var(--c-linea); font-size: 0.84rem; font-weight: 600; color: var(--c-texto);
}
.se-incluye svg { width: 18px; height: 18px; color: var(--c-verde); flex-shrink: 0; }

/* el vídeo: cartel con el botón de reproducir (como en Empresa); al pulsar, el reproductor */
.se-video {
  /* 16:9 con padding en vez de aspect-ratio: Safari en iPhone dejaba la caja a altura cero dentro de la rejilla */
  position: relative; height: 0; padding-bottom: 56.25%; border-radius: 12px; overflow: hidden; background: #000;
  box-shadow: 0 24px 50px -28px rgba(0, 60, 50, 0.6);
}
.se-video button { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; }
.se-video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.3s ease, transform 0.6s ease; }
.se-video button:hover img { opacity: 1; transform: scale(1.02); }
.se-video video, .se-video iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #000; }
.se-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 50%; background: var(--teal-bright); color: #0c0e0d;
  box-shadow: 0 0 0 10px rgba(47, 214, 188, 0.22), 0 0 40px rgba(47, 214, 188, 0.5); transition: transform 0.25s ease;
}
.se-video button:hover .se-play { transform: translate(-50%, -50%) scale(1.07); }
.se-play svg { width: 30px; height: 30px; fill: currentColor; stroke: none; margin-left: 3px; }
.se-play-txt {
  position: absolute; left: 16px; bottom: 14px; padding: 6px 12px; border-radius: 999px;
  background: rgba(12, 14, 13, 0.7); color: #fff; font-size: 0.8rem; font-weight: 700;
}

/* la banda de pasos, a todo el ancho del panel */
.se-pasos {
  grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 20px; align-items: center; padding-top: 24px; border-top: 1px solid var(--c-linea);
}
.se-pasos li:not(.se-paso-flecha) { display: flex; align-items: center; gap: 14px; min-width: 0; }
.se-paso-txt { display: grid; gap: 2px; font-size: 0.86rem; line-height: 1.4; color: var(--c-suave); }
.se-paso-txt b { color: var(--c-texto); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.se-ico {
  display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 10px;
  background: #121514; color: var(--teal-bright); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.5);
}
.se-ico svg { width: 23px; height: 23px; }
.se-paso-flecha { color: var(--teal); display: grid; place-items: center; }
.se-paso-flecha svg { width: 20px; height: 20px; stroke-width: 2; }

/* ---------- 3 · Productos ---------- */
.se-productos { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; scroll-margin-top: calc(var(--banner-h) + 120px); }
.se-prod-panel, .se-filtros {
  background: var(--c-panel); border: 1px solid var(--c-linea); border-radius: 14px;
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.35);
}
.se-prod-panel { padding: 26px 26px 30px; }
.se-prod-t { font-size: 1.25rem; font-weight: 800; color: var(--c-texto); margin-bottom: 16px; }
.se-prod-t span { color: var(--c-suave); font-weight: 700; }

.se-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.se-tab {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
  background: #e9edeb; color: var(--c-texto); border: 1px solid transparent;
  transition: background 0.2s ease;
}
.se-tab:hover { background: #dfe5e2; }
.se-tab .n { font-size: 0.75rem; color: var(--c-suave); }
.se-tab[aria-selected="true"] { background: var(--teal); color: #fff; }
.se-tab[aria-selected="true"] .n { color: rgba(255, 255, 255, 0.85); }

.se-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.se-grid[hidden] { display: none; }
.se .se-card {
  position: relative; background: #fff; border: 1px solid var(--c-linea); border-radius: 12px;
  box-shadow: 0 6px 18px -14px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.se .se-card:hover { transform: translateY(-3px); border-color: rgba(0, 168, 148, 0.5); box-shadow: 0 16px 30px -18px rgba(0, 60, 50, 0.45); }
.se-card-foto { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 18px; overflow: hidden; }
.se-card-foto img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s ease; }
.se-card:hover .se-card-foto img { transform: scale(1.04); }
.se .mini { background: #fff; color: var(--c-suave); border-color: var(--c-linea); }
.se .mini.is-on { background: var(--teal); color: #fff; border-color: var(--teal); }
.se-card-txt { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: end; padding: 4px 16px 16px; }
.se-card-tipo { grid-column: 1 / -1; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-verde); }
/* recomendado (Charmex Choice): etiqueta encima de la foto y borde verde */
.se-reco {
  position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 8px; border-radius: 99px; background: var(--c-verde); color: #fff;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 4px 12px -4px rgba(0, 134, 111, 0.6);
}
.se-reco svg { width: 12px; height: 12px; fill: currentColor; }
.se .se-card.es-recomendado { border-color: rgba(0, 134, 111, 0.55); box-shadow: 0 0 0 1px rgba(0, 134, 111, 0.25); }
.se-card-txt b {
  font-size: 0.86rem; line-height: 1.35; font-weight: 800; color: var(--c-texto);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.se-card-ir { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--teal); transition: background 0.2s ease, color 0.2s ease; }
.se-card-ir svg { width: 18px; height: 18px; stroke-width: 2; }
.se-card:hover .se-card-ir { background: var(--teal); color: #fff; }
.se .sin-resultados { grid-column: 1 / -1; color: var(--c-suave); }

.se-vacio {
  display: grid; justify-items: start; gap: 14px; padding: 34px 36px;
  background: var(--c-panel); border: 1px solid var(--c-linea); border-radius: 14px;
}
.se-vacio p { max-width: 60ch; }

/* filtros en claro: casillas en vez de botones */
.se-filtros { padding: 22px 20px 24px; position: sticky; top: calc(var(--banner-h) + 140px); }
.se-filtros h3 { font-size: 1rem; font-weight: 800; color: var(--c-texto); margin-bottom: 14px; }
.se-filtros .filtros-tab { display: grid; gap: 18px; }
.se-filtros .filtros-tab[hidden] { display: none; }
.se-buscar { position: relative; display: block; }
.se-buscar svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--c-suave); }
.se-buscar input {
  font: inherit; font-size: 0.85rem; width: 100%; color: var(--c-texto);
  background: #f6f8f7; border: 1px solid var(--c-linea); border-radius: 8px; padding: 10px 12px 10px 34px;
}
.se-buscar input:focus { outline: none; border-color: var(--teal); background: #fff; }
.se-filtros .fgroup { padding-top: 16px; border-top: 1px solid var(--c-linea); }
.se-filtros .fgroup h4 { font-size: 0.82rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--c-texto); margin-bottom: 10px; }
.se-filtros .fbtns { display: grid; gap: 8px; }
.se-filtros .fbtn {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 0; padding: 0; transform: none;
  font-size: 0.85rem; font-weight: 500; color: var(--c-texto);
}
.se-filtros .fbtn::before {
  content: ''; width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid #b8c1bd; background: #fff; box-shadow: none;
}
.se-filtros .fbtn:hover::before { border-color: var(--teal); }
.se-filtros .fbtn[aria-pressed="true"] { background: none; color: var(--c-texto); font-weight: 700; }
.se-filtros .fbtn[aria-pressed="true"]::before {
  border-color: var(--teal); box-shadow: none;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.se-filtros .fbtn .n, .se-filtros .fbtn[aria-pressed="true"] .n { color: var(--c-suave); font-weight: 500; font-size: 0.8rem; }
.se-filtros .frange .nums { display: flex; align-items: center; gap: 8px; }
.se-filtros .frange .nums input {
  width: 100%; min-width: 0; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--c-texto);
  background: none; border: 0; padding: 0; font-variant-numeric: tabular-nums;
}
.se-filtros .frange .nums input:last-child { text-align: right; }
.se-filtros .frange .sep { color: var(--c-suave); }
.se-filtros .frange .pista { background: #dfe5e2; }
.se-filtros .frange .relleno { background: var(--teal); box-shadow: none; }
.se-filtros .frange input[type="range"]::-webkit-slider-thumb { background: #fff; border: 2px solid var(--teal); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.se-filtros .frange input[type="range"]::-moz-range-thumb { background: #fff; border: 2px solid var(--teal); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.se-filtros .filter-count { color: var(--c-verde); font-size: 0.82rem; font-weight: 700; }
.se-filtros .filter-count:empty { display: none; }
.se-filtros .flimpiar {
  justify-self: start; border: 0; border-radius: 0; padding: 0; background: none; cursor: pointer;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--c-texto); text-decoration: underline; text-underline-offset: 3px;
}
.se-filtros .flimpiar:hover { color: var(--c-verde); background: none; }

/* ---------- 4 · Preguntas frecuentes: cabecera arriba y la lista a todo el ancho ---------- */
.se-faqs { margin-top: 56px; }
.se-faqs-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 40px; align-items: end; margin-bottom: 22px; }
.se-faqs-cab .marker { grid-column: 1 / -1; font-size: 0.72rem; margin-bottom: 4px; }
.se-faqs-cab h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); color: var(--c-texto); }
.se-faqs-cab p { font-size: 0.92rem; padding-bottom: 6px; }
.se-faqs-cab a { color: var(--c-verde); font-weight: 600; text-underline-offset: 3px; }
.se-faqs-lista { background: var(--c-panel); border: 1px solid var(--c-linea); border-radius: 14px; padding: 6px 32px; }
.se-faqs-lista details { border-top: 1px solid var(--c-linea); }
.se-faqs-lista details:first-child { border-top: 0; }
.se-faqs-lista summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 44px 18px 0; font-weight: 700; font-size: 1rem; line-height: 1.4; color: var(--c-texto);
}
.se-faqs-lista summary::-webkit-details-marker { display: none; }
.se-faqs-lista summary::after {
  content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  color: var(--teal); font-size: 1.3rem; font-weight: 700; line-height: 1;
}
.se-faqs-lista summary:hover { color: var(--c-verde); }
.se-faqs-lista details[open] summary::after { content: '–'; }
.se-faqs-lista details p { padding: 0 44px 20px 0; font-size: 0.94rem; line-height: 1.7; max-width: 84ch; }

/* ---------- Pantallas más estrechas ---------- */
@media (max-width: 1100px) {
  .se-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .se-sol-panel.con-video { grid-template-columns: 1fr; }
  .con-lista .se-video-bloque { grid-template-columns: 1fr; }
  .se-vlista li { min-width: 0; } /* en móvil, una fila por producto, una debajo de otra */
  .se-vlista li.on > button { transform: none; }
  .se-faqs-cab { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 860px) {
  .se-heroe-foto { width: 100%; opacity: 0.35; -webkit-mask-image: none; mask-image: none; }
  .se-productos { grid-template-columns: 1fr; }
  .se-filtros { position: static; order: -1; display: none; }
  .se-productos.filtros-abiertos .se-filtros { display: block; }
  .se-productos .filtros-toggle { order: -2; color: var(--c-texto); border-color: var(--c-linea); background: #fff; } /* fondo claro */
  .se-sol-panel { padding: 26px 22px 24px; }
  .se-pasos { grid-template-columns: 1fr; gap: 14px; }
  .se-paso-flecha { display: none; }
}
@media (max-width: 540px) {
  .se-grid { grid-template-columns: 1fr; }
  .se-faqs-lista { padding: 2px 16px; }
  .se-faqs-lista summary { font-size: 0.94rem; padding: 15px 38px 15px 0; }
  .se-faqs-lista details p { padding-right: 0; }
}

/* foto alineada por arriba (encuadre: 'arriba' en soluciones-portada.ts): en la
   cabecera empieza bajo el menú, para que no se corte lo de arriba (monoposte) */
.se-heroe-foto-arriba { top: 76px; height: calc(100% - 76px); object-position: center top; }