/* ═══════════════════════════════════════════════════════════════
   Ultimas ofertas de empleo — Finance Generation
   ───────────────────────────────────────────────────────────────
   La maquetacion replica la de iberprax.es (hero con buscador,
   filas de resultado en rejilla, directorio de empresas, mi area),
   pero repintada con los tokens de FG: crema, carmesi, Playfair
   Display + Libre Baskerville + DM Sans.

   Todo cuelga de .fg-ofertas para no tocar ni una regla del resto
   de la web. Los tokens se derivan de los de FG con fallback, asi
   que si manana cambiais --crimson en styles.css, esta pestana
   cambia con el.
   ══════════════════════════════════════════════════════════════ */

.fg-ofertas {
  --of-fondo:        var(--cream, #fdf7f0);
  --of-panel:        #fffdfa;
  --of-panel-hondo:  var(--cream-dark, #f0e8dc);
  --of-tinta:        var(--black, #202020);
  --of-acento:       var(--crimson, #600203);
  --of-acento-claro: var(--crimson-light, #8a1315);
  --of-acento-pale:  var(--crimson-pale, #f5e8e8);
  --of-suave:        var(--gray-mid, #888);
  --of-tenue:        #a79d92;
  --of-linea:        var(--gray-line, #d9d0c5);
  --of-linea-fina:   rgba(217, 208, 197, 0.55);
  --of-hover:        rgba(96, 2, 3, 0.045);

  --of-display: var(--font-display, 'Playfair Display', Georgia, serif);
  --of-cuerpo:  var(--font-body, 'Libre Baskerville', Georgia, serif);
  --of-ui:      var(--font-ui, 'DM Sans', sans-serif);

  /* FG es una revista: esquinas rectas, no pastillas. Solo los
     botones de accion circulares conservan el radio del original. */
  --of-radio: 2px;

  background: var(--of-fondo);
  color: var(--of-tinta);
  font-family: var(--of-ui);
}

.fg-ofertas *,
.fg-ofertas *::before,
.fg-ofertas *::after { box-sizing: border-box; }

.fg-ofertas button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.fg-ofertas a { color: inherit; text-decoration: none; }

/* ─── Piezas comunes ─────────────────────────────────────────── */

.of-eyebrow {
  font-family: var(--of-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--of-acento);
  margin: 0 0 14px;
}

.of-titulo {
  font-family: var(--of-display);
  font-weight: 900;
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}

.of-titulo em {
  font-style: italic;
  font-weight: 400;
  color: var(--of-acento);
}

.of-sub {
  font-family: var(--of-cuerpo);
  font-size: 15px;
  line-height: 1.7;
  color: var(--of-tinta);
  margin: 0 0 16px;
}

.of-stats {
  font-family: var(--of-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--of-acento-claro);
  margin: 0 0 38px;
  min-height: 16px;
}

.of-btn-solido {
  background: var(--of-acento);
  color: var(--cream, #fdf7f0);
  padding: 12px 22px;
  font-family: var(--of-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.2s;
}
.of-btn-solido:hover { background: var(--of-acento-claro); }
.of-btn-solido:disabled { opacity: 0.5; cursor: default; }

.of-btn-linea {
  border: 1px solid var(--of-linea);
  padding: 10px 20px;
  font-family: var(--of-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--of-acento);
  transition: border-color 0.2s, background 0.2s;
}
.of-btn-linea:hover { border-color: var(--of-acento); background: var(--of-acento-pale); }

/* ─── Hero ───────────────────────────────────────────────────── */

.of-hero {
  /* Sin overflow:hidden: recortaria los paneles de los desplegables
     cuando se abren y sobresalen del hero. */
  position: relative;
  padding: 84px 48px 104px;
  text-align: center;
  border-bottom: 1px solid var(--of-linea);
}

.of-hero-inner { max-width: 780px; margin: 0 auto; }

/* ─── Barra de filtros ───────────────────────────────────────── */

.of-filtros {
  display: flex;
  max-width: 780px;
  margin: 0 auto;
  border: 1px solid var(--of-linea);
  background: var(--of-panel);
}

.of-campo {
  flex: 1;
  position: relative;
  padding: 16px 22px;
  text-align: left;
  border-right: 1px solid var(--of-linea-fina);
}
.of-campo:last-child { border-right: none; }

.of-campo label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--of-tenue);
  margin-bottom: 7px;
}

.of-campo input {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--of-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--of-tinta);
}
.of-campo input::placeholder { color: var(--of-tenue); font-weight: 400; }
.of-campo input:focus { outline: none; }

.of-desplegable-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  color: var(--of-tinta);
}

.of-desplegable-trigger .of-flecha {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--of-tenue);
  transition: transform 0.2s;
}
.of-desplegable-trigger[aria-expanded="true"] .of-flecha { transform: rotate(180deg); }
.of-desplegable-trigger .of-flecha svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }

.of-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: -1px;
  z-index: 40;
  min-width: 250px;
  max-width: 330px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 0;
  background: var(--of-panel);
  border: 1px solid var(--of-linea);
  box-shadow: 0 18px 40px rgba(32, 32, 32, 0.16);
  text-align: left;
}
.of-panel::-webkit-scrollbar { width: 6px; }
.of-panel::-webkit-scrollbar-thumb { background: var(--of-linea); }

.of-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 18px;
  font-size: 13px;
  color: var(--of-tinta);
  text-align: left;
  transition: background 0.12s;
}
.of-opcion:hover { background: var(--of-hover); }
.of-opcion .of-marca {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1px solid var(--of-linea);
  position: relative;
}
.of-opcion[aria-selected="true"] .of-marca { background: var(--of-acento); border-color: var(--of-acento); }
.of-opcion[aria-selected="true"] .of-marca::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--cream, #fdf7f0);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.of-ver-resultados {
  display: inline-block;
  margin-top: 32px;
  padding-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--of-acento);
  border-bottom: 1px solid var(--of-acento-claro);
  transition: opacity 0.2s;
}
.of-ver-resultados:hover { opacity: 0.7; }

/* ─── Resultados ─────────────────────────────────────────────── */

.of-seccion {
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 48px 110px;
}

.of-seccion h2 {
  font-family: var(--of-display);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.015em;
  margin: 0;
}

.of-cabecera-resultados {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 10px;
}

.of-orden { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.of-orden-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--of-tenue);
}

.of-orden-btn {
  padding: 6px 14px;
  border: 1px solid var(--of-linea);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--of-suave);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.of-orden-btn:hover { color: var(--of-acento); }
.of-orden-btn.activo {
  color: var(--of-acento);
  border-color: var(--of-acento);
  background: var(--of-acento-pale);
}

.of-nota {
  font-family: var(--of-cuerpo);
  font-size: 13px;
  line-height: 1.7;
  color: var(--of-suave);
  margin: 0 0 34px;
}

.of-filtros-activos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -18px 0 30px;
}
.of-filtros-activos:empty { display: none; }

.of-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--of-linea);
  background: var(--of-panel);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--of-tinta);
}
.of-chip button { font-size: 14px; line-height: 1; color: var(--of-tenue); }
.of-chip button:hover { color: var(--of-acento); }

.of-chip-limpiar {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--of-acento);
  border-bottom: 1px solid transparent;
}
.of-chip-limpiar:hover { border-bottom-color: var(--of-acento); }

/* ─── Fila de oferta ─────────────────────────────────────────── */

.of-lista { border-top: 1px solid var(--of-linea); }

.of-fila {
  /* La columna de provincia lleva ancho FIJO a proposito. Si fuera
     'auto', cada fila repartiria el espacio de empresa y titulo segun
     lo larga que fuese su provincia, y el titulo empezaria en un punto
     distinto en cada fila. Con ancho fijo, todas las filas parten
     exactamente del mismo sitio. */
  display: grid;
  grid-template-columns: 54px 1fr 1fr 140px 104px;
  align-items: center;
  gap: 24px;
  padding: 24px 16px;
  margin: 0 -16px;
  border-bottom: 1px solid var(--of-linea-fina);
  cursor: pointer;
  transition: background 0.15s;
  animation: of-entrada 0.35s ease both;
}
.of-fila:hover { background: var(--of-hover); }

@keyframes of-entrada {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .of-fila { animation: none; }
}

.of-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--of-linea);
  background: var(--of-panel);
  font-family: var(--of-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--of-acento);
}
.of-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

.of-empresa { min-width: 0; }

.of-empresa .of-cat {
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--of-acento-claro);
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.of-empresa .of-nombre {
  margin: 0;
  font-family: var(--of-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 23px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.of-fila-titulo {
  min-width: 0;
  font-family: var(--of-cuerpo);
  font-size: 13.5px;
  line-height: 20px;
  color: var(--of-tinta);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.of-provincia {
  font-size: 12.5px;
  color: var(--of-suave);
  text-align: right;
}
.of-provincia .of-extra {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--of-tenue);
}

.of-fecha {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--of-tenue);
}

/* Plazo de inscripción, cuando se conoce: es lo que más urge de una off-cycle. */
.of-plazo {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--of-acento);
}

.of-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.of-accion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--of-linea);
  border-radius: 50%;
  color: var(--of-tenue);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.of-accion:hover { border-color: var(--of-acento); color: var(--of-acento); }
.of-accion svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }

.of-accion.activa {
  background: var(--of-acento);
  border-color: var(--of-acento);
  color: var(--cream, #fdf7f0);
}
.of-accion.of-favorito.activa { background: transparent; border-color: var(--of-acento); }
.of-accion.of-favorito.activa svg { fill: var(--of-acento); stroke: var(--of-acento); }

.of-nueva {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  background: var(--of-acento);
  color: var(--cream, #fdf7f0);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Etiqueta del tipo de oferta (off-cycle / summer / graduate / junior),
   delante del título. Borde en vez de relleno para no competir con
   ".of-nueva", que sí va rellena. */
.of-tipo {
  display: inline-block;
  margin-right: 7px;
  padding: 1px 6px;
  border: 1px solid var(--of-acento-claro);
  color: var(--of-acento);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* ─── Estados ────────────────────────────────────────────────── */

.of-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 60px 0;
  text-align: center;
  font-family: var(--of-cuerpo);
  font-size: 14px;
  line-height: 1.7;
  color: var(--of-suave);
}
.of-vacio svg { width: 46px; height: 46px; fill: none; stroke: var(--of-tenue); stroke-width: 1.2; }

.of-esqueleto { border-bottom: 1px solid var(--of-linea-fina); padding: 24px 16px; margin: 0 -16px; }
.of-esqueleto span {
  display: block;
  height: 12px;
  background: linear-gradient(90deg, var(--of-panel-hondo) 25%, var(--of-panel) 50%, var(--of-panel-hondo) 75%);
  background-size: 400% 100%;
  animation: of-brillo 1.3s ease infinite;
}
.of-esqueleto span + span { margin-top: 10px; width: 60%; }
@keyframes of-brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ─── Empresas ───────────────────────────────────────────────── */

.of-categoria-titulo {
  font-family: var(--of-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--of-acento);
  margin: 48px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--of-linea);
}
.of-categoria-titulo:first-child { margin-top: 0; }

.of-empresas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.of-empresa-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--of-linea);
  background: var(--of-panel);
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
}
.of-empresa-card:hover { border-color: var(--of-acento); background: var(--of-acento-pale); }
.of-empresa-card .of-nombre { font-family: var(--of-display); font-size: 16px; font-weight: 700; }
.of-empresa-card .of-cuenta { font-size: 11px; font-weight: 600; color: var(--of-tenue); white-space: nowrap; }
.of-empresa-card:disabled { opacity: 0.55; cursor: default; }
.of-empresa-card:disabled:hover { border-color: var(--of-linea); background: var(--of-panel); }

/* ─── Mi area ────────────────────────────────────────────────── */

.of-pestanas { display: flex; gap: 22px; border-bottom: 1px solid var(--of-linea); margin-bottom: 30px; }

.of-pestana {
  position: relative;
  padding: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--of-suave);
}
.of-pestana.activa { color: var(--of-acento); }
.of-pestana.activa::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--of-acento);
}

/* ─── Avisos ─────────────────────────────────────────────────── */

.of-aviso {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 30px;
  border-left: 3px solid var(--of-acento);
  background: var(--of-acento-pale);
  font-family: var(--of-cuerpo);
  font-size: 13px;
  line-height: 1.6;
}
.of-aviso button {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--of-acento);
  border-bottom: 1px solid var(--of-acento);
}

/* ─── Avisos flotantes ───────────────────────────────────────── */

.of-toasts {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

.of-toast {
  padding: 12px 20px;
  background: var(--of-tinta);
  color: var(--cream, #fdf7f0);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 30px rgba(32, 32, 32, 0.25);
  animation: of-toast-in 0.25s ease both;
}
.of-toast.of-error { background: var(--of-acento); }
@keyframes of-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ─── Desplegable del menu ───────────────────────────────────── */

.of-nav-drop { position: relative; }

.of-nav-drop > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  /* "Últimas ofertas de empleo" es el rótulo más largo del menú y parte en
     dos líneas si se le deja, descolocando el resto de la barra. */
  white-space: nowrap;
}
.of-nav-drop > .nav-link svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform 0.2s; }
.of-nav-drop.abierto > .nav-link svg { transform: rotate(180deg); }

.of-nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 95;
  min-width: 252px;
  padding: 8px 0;
  background: var(--cream, #fdf7f0);
  border: 1px solid var(--gray-line, #d9d0c5);
  box-shadow: 0 16px 36px rgba(32, 32, 32, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.of-nav-drop.abierto .of-nav-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.of-nav-menu a {
  display: block;
  text-decoration: none;
  padding: 10px 20px;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black, #202020);
  transition: background 0.15s, color 0.15s;
}
.of-nav-menu a:hover { background: var(--crimson-pale, #f5e8e8); color: var(--crimson, #600203); }
.of-nav-menu a.activo { color: var(--crimson, #600203); }

.of-nav-menu .of-nav-sep { height: 1px; margin: 8px 0; background: var(--gray-line, #d9d0c5); }

.of-nav-menu .of-nav-pie {
  display: block;
  padding: 8px 20px 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--gray-mid, #888);
}

/* Version movil: dentro del menu lateral el desplegable se abre en
   acordeon, porque un panel flotante no cabe. */
.mobile-menu .of-nav-drop { width: 100%; }
.mobile-menu .of-nav-menu {
  position: static;
  min-width: 0;
  transform: none;
  opacity: 1;
  visibility: visible;
  border: none;
  box-shadow: none;
  background: transparent;
  display: none;
  padding: 4px 0 8px 16px;
}
.mobile-menu .of-nav-drop.abierto .of-nav-menu { display: block; }

/* ─── Responsive ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .of-fila {
    grid-template-columns: 42px 1fr auto;
    grid-template-areas:
      "logo empresa acciones"
      "logo titulo  titulo"
      "logo provincia provincia";
    gap: 6px 16px;
    align-items: start;
  }
  .of-logo      { grid-area: logo; width: 40px; height: 40px; }
  .of-empresa   { grid-area: empresa; }
  .of-fila-titulo { grid-area: titulo; -webkit-line-clamp: 3; }
  .of-provincia { grid-area: provincia; text-align: left; }
  .of-acciones  { grid-area: acciones; }
}

@media (max-width: 720px) {
  .of-hero { padding: 56px 20px 72px; }
  .of-seccion { padding: 52px 20px 80px; }
  .of-seccion h2 { font-size: 30px; }
  .of-filtros { flex-direction: column; }
  .of-campo { border-right: none; border-bottom: 1px solid var(--of-linea-fina); }
  .of-campo:last-child { border-bottom: none; }
  .of-panel { left: 0; right: 0; max-width: none; }
  .of-cabecera-resultados { flex-direction: column; align-items: flex-start; }
}


/* ═══════════════════════════════════════════════════════════════
   Tracker · «Próximamente»  (templates/ofertas/proximamente.html)
   ───────────────────────────────────────────────────────────────
   Se ve en /ofertas mientras el Tracker está cerrado. Sin fotos:
   tipografía, filetes y una maqueta de filas hecha con CSS, para
   no gastar ancho de banda. Todo cuelga de .of-pronto; los colores
   salen de los tokens de styles.css (:root), no a ojo.
   Ojo: app.css se carga DESPUÉS de esta hoja, así que lo que aquí
   retoca .newsletter-form va con .of-pronto delante para ganarle.
   ══════════════════════════════════════════════════════════════ */

.of-pronto {
  --pr-linea:  var(--gray-line, #d9d0c5);
  --pr-panel:  #fffdfa;
  --pr-tenue:  #a79d92;
  background: var(--cream, #fdf7f0);
  color: var(--black, #202020);
}

/* ─── Cabecera: texto a la izquierda, maqueta a la derecha ───── */

.of-pronto-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 88px 48px 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}

.of-pronto-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 18px;
}

.of-pronto-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--crimson);
  flex-shrink: 0;
}

.of-pronto-titulo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 9vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--black);
  margin: 0 0 14px;
}

.of-pronto-lema {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  color: var(--crimson);
  text-wrap: balance;
  margin: 0;
}

.of-pronto-filete {
  width: 64px;
  height: 2px;
  background: var(--crimson);
  margin: 30px 0 26px;
}

.of-pronto-intro {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  max-width: 34em;
  margin: 0 0 28px;
}

.of-pronto-sectores {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.of-pronto-sectores li {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
  border: 1px solid var(--pr-linea);
  padding: 6px 11px;
  border-radius: 2px;
}

/* ─── Maqueta: cómo serán las filas, sin datos ───────────────── */

.of-pronto-maqueta {
  background: var(--pr-panel);
  border: 1px solid var(--pr-linea);
  border-top: 3px solid var(--crimson);
  padding: 6px 24px 10px;
  box-shadow: 0 18px 40px -28px rgba(32, 32, 32, 0.35);
}

.of-pronto-maqueta-cab {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crimson-light);
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--pr-linea);
}

.of-pronto-fila {
  display: grid;
  grid-template-columns: 40px 1fr 30px 30px;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(217, 208, 197, 0.55);
}
.of-pronto-fila:last-child { border-bottom: none; }
/* Las de abajo se desvanecen: «hay más, pero aún no». */
.of-pronto-fila:nth-child(4) { opacity: 0.6; }
.of-pronto-fila:nth-child(5) { opacity: 0.3; }

.of-pronto-logo {
  width: 40px;
  height: 40px;
  background: var(--cream-dark);
  border: 1px solid var(--pr-linea);
}

.of-pronto-barras { display: flex; flex-direction: column; gap: 8px; }
.of-pronto-barra {
  display: block;
  height: 8px;
  width: 88%;
  background: var(--cream-dark);
}
.of-pronto-barra-corta {
  width: 42%;
  background: var(--crimson-pale);
}
.of-pronto-fila:nth-child(3) .of-pronto-barra:not(.of-pronto-barra-corta) { width: 72%; }
.of-pronto-fila:nth-child(4) .of-pronto-barra:not(.of-pronto-barra-corta) { width: 80%; }

.of-pronto-icono {
  width: 30px;
  height: 30px;
  border: 1px solid var(--pr-linea);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pr-tenue);
}
.of-pronto-icono svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.of-pronto-icono.activa {
  background: var(--crimson);
  border-color: var(--crimson);
  color: var(--cream);
}
.of-pronto-icono.activa polygon { fill: currentColor; }

/* ─── Tres puntos, separados por filetes ─────────────────────── */

.of-pronto-puntos {
  /* Mismo ancho de columna que el texto de arriba (1120 − 2×48), para
     que los filetes arranquen donde arranca el texto. */
  width: calc(100% - 96px);
  max-width: 1024px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--pr-linea);
  border-bottom: 1px solid var(--pr-linea);
}

.of-pronto-punto-item {
  padding: 40px 32px 44px;
  border-left: 1px solid var(--pr-linea);
}
.of-pronto-punto-item:first-child { border-left: none; padding-left: 0; }
.of-pronto-punto-item:last-child { padding-right: 0; }

.of-pronto-num {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--crimson);
  margin-bottom: 14px;
}

.of-pronto-punto-item h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 10px;
}

.of-pronto-punto-item p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.75;
  color: #4a4541;
  margin: 0;
}

/* ─── Avísame cuando abra ───────────────────────────────────── */

.of-pronto-aviso {
  width: calc(100% - 96px);
  max-width: 1024px;
  margin: 72px auto 96px;
  padding: 36px 40px;
  background: var(--cream-dark);
  border-left: 3px solid var(--crimson);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.of-pronto-aviso h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 8px;
}

.of-pronto-aviso p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.of-pronto .newsletter-form { max-width: none; gap: 0; }
.of-pronto .newsletter-form input[type="email"] {
  font-size: 14px;
  padding: 13px 14px;
  background: #fff;
  border-right: none;
}
.of-pronto .newsletter-form button {
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 13px 20px;
}

.of-pronto-enlace {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--crimson);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.of-pronto-enlace:hover { border-bottom-color: var(--crimson); }

/* ─── Tableta ───────────────────────────────────────────────── */

@media (max-width: 900px) {
  .of-pronto-hero {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 64px 32px 64px;
  }
  .of-pronto-maqueta { max-width: 520px; }
  .of-pronto-puntos { width: calc(100% - 64px); }
  .of-pronto-aviso {
    grid-template-columns: 1fr;
    gap: 22px;
    width: calc(100% - 64px);
    margin: 56px auto 80px;
  }
}

/* ─── Móvil ─────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .of-pronto-hero { padding: 48px 20px 48px; gap: 40px; }
  .of-pronto-filete { margin: 24px 0 22px; }
  .of-pronto-intro { font-size: 14px; }
  .of-pronto-maqueta { padding: 4px 16px 6px; }
  .of-pronto-fila { grid-template-columns: 34px 1fr 28px 28px; gap: 10px; padding: 13px 0; }
  .of-pronto-logo { width: 34px; height: 34px; }
  .of-pronto-icono { width: 28px; height: 28px; }

  .of-pronto-puntos {
    grid-template-columns: 1fr;
    width: calc(100% - 40px);
  }
  .of-pronto-punto-item,
  .of-pronto-punto-item:first-child,
  .of-pronto-punto-item:last-child {
    border-left: none;
    border-top: 1px solid var(--pr-linea);
    padding: 28px 0 30px;
  }
  .of-pronto-punto-item:first-child { border-top: none; }
  .of-pronto-punto-item h2 { font-size: 22px; }

  .of-pronto-aviso { width: calc(100% - 40px); margin: 48px auto 64px; padding: 28px 22px; }
  .of-pronto-aviso h2 { font-size: 24px; }
}

@media (max-width: 400px) {
  .of-pronto .newsletter-form { flex-direction: column; gap: 8px; }
  .of-pronto .newsletter-form input[type="email"] { border-right: 1px solid var(--pr-linea); }
}