/* app/assets/stylesheets/public_event.css */

/* ==========================================================================
   1) TOKENS (variables)
   ========================================================================== */
:root{
  /* Base */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #fafafe;      /* fondo suave para bloques */
  --text: #071013;
  --muted: #5b616b;
  --border: #dfe0e2;

  /* Paleta (tu propuesta) */
  --primary: #854fff;
  --primary-soft: #e4dcfd;   /* “matiz” */
  --accent: #ffba00;

  /* Contrastes */
  --primary-contrast: #ffffff;
  --accent-contrast: #071013;

  /* Layout */
  --container: 1120px;
  --gutter: 18px;

  /* UI */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 30px rgba(7,16,19,.08);

  /* Spacing */
  --section-y: clamp(36px, 5vw, 64px);

  /* Buttons */
  --btn-h: 44px;

  /* Focus */
  --focus: 0 0 0 3px rgba(133,79,255,.25);

  /* =========================================================
     TIPOGRAFÍA (5 tamaños + 5 pesos) — NORMALIZADO
     ========================================================= */
  /* Tamaños */
  --fs-1: 12px;                         /* legal/meta/hints */
  --fs-2: 14px;                         /* UI: nav/botones/chips */
  --fs-3: 15px;                         /* cuerpo */
  --fs-4: clamp(22px, 2.2vw, 34px);     /* títulos de bloque / h3 / secciones */
  --fs-5: clamp(28px, 3.6vw, 44px);     /* títulos grandes (hero / h1) */

  /* Pesos */
  --fw-1: 450; /* regular */
  --fw-2: 650; /* medium (tu UI actual) */
  --fw-3: 700; /* semibold */
  --fw-4: 800; /* bold */
  --fw-5: 900; /* black */

  /* Line-heights (no cuentan como tamaños/pesos, pero ayudan a consistencia) */
  --lh-1: 1.10; /* títulos */
  --lh-2: 1.45; /* base */
  --lh-3: 1.65; /* lectura */
}

/* Temas por evento (opcionales): sobrescribe tokens */
body.theme-ocupat{ --primary: #0f766e; }
body.theme-mislata{ --primary: #1d4ed8; }

/* Nota: ideal que event.custom_css solo sobrescriba variables:
   :root{ --primary:#b91c1c; --bg:#fff7ed; }
*/

/* ==========================================================================
   2) RESET + BASE
   ========================================================================== */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size: var(--fs-3);
  font-weight: var(--fw-1);
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-2);
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

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

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ==========================================================================
   3) PRIMITIVAS (universales)
   ========================================================================== */

/* Secciones */
.pe-section{
  background: var(--mod-bg-1, var(--surface));
  color: var(--mod-text-1, var(--text));
  padding: var(--section-y) 0;
}
.pe-section--tight{ padding: 32px 0; }
.pe-section--flush{ padding: 0; }

/* Secciones 2 */

.pe-section2{
  background: var(--mod-bg-1, var(--surface));
  color: var(--mod-text-2, var(--text));
  padding: var(--section-y) 0;
}
.pe-section2--tight{ padding: 32px 0; }
.pe-section2--flush{ padding: 0; }

/* Card: nivel 2 de fondo por defecto */
.pe-card{
  background: var(--mod-bg-2, var(--surface));
  color: var(--mod-text-1, var(--text));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Stack / Grid */
.pe-stack{ display: grid; gap: 14px; }
.pe-stack--sm{ gap: 24px; }
.pe-stack--lg{ gap: 20px; }

.pe-grid{
  display: grid;
  gap: 18px;
}
.pe-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pe-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pe-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 920px){
  .pe-grid--2, .pe-grid--3, .pe-grid--4{ grid-template-columns: 1fr; }
}

/* Prose (texto enriquecido) */
.pe-prose{ width: 100%; }
.pe-prose > :first-child{ margin-top: 0; }
.pe-prose > :last-child{ margin-bottom: 0; }

.pe-prose h1, .pe-prose h2, .pe-prose h3{
  margin: 0 0 12px;
  line-height: var(--lh-1);
  color: var(--mod-text-1, var(--text));
}

.pe-prose h1{
  font-size: var(--fs-5);
  font-weight: var(--fw-5);
}
.pe-prose h2{
  font-size: var(--fs-4);
  font-weight: var(--fw-5);
}
.pe-prose h3{
  font-size: var(--fs-4);
  font-weight: var(--fw-4);
}

.pe-prose p{
  margin: 0 0 12px;
  color: var(--mod-text-2, var(--muted));
  font-size: var(--fs-3);
  font-weight: var(--fw-1);
  line-height: var(--lh-3);
}
.pe-prose a{
  color: var(--mod-accent-1, var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pe-prose strong{ color: var(--mod-text-1, var(--text)); }

.pe-prose ul, .pe-prose ol{
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--mod-text-2, var(--muted));
  font-size: var(--fs-3);
  line-height: var(--lh-3);
}
.pe-prose li{
  margin: 6px 0;
  font-size: var(--fs-3);
  line-height: var(--lh-3);
}

.pe-title {
  font-weight: var(--fw-4);
  font-size: var(--fs-4);
  line-height: var(--lh-1);
  margin: 0 0 10px;
}

/* Prose 2 */

.pe-prose2{
  width: 100%;
  color: var(--mod-text-2, var(--text));
}
.pe-prose2 > :first-child{ margin-top: 0; }
.pe-prose2 > :last-child{ margin-bottom: 0; }

.pe-prose2 h1, .pe-prose2 h2, .pe-prose2 h3{
  margin: 0 0 12px;
  line-height: var(--lh-1);
  color: var(--mod-text-2, var(--text));
}

.pe-prose2 h1{
  font-size: var(--fs-5);
  font-weight: var(--fw-5);
}
.pe-prose2 h2{
  font-size: var(--fs-4);
  font-weight: var(--fw-5);
}
.pe-prose2 h3{
  font-size: var(--fs-4);
  font-weight: var(--fw-4);
}

.pe-prose2 p{
  margin: 0 0 12px;
  color: var(--mod-text-2, var(--muted));
  font-size: var(--fs-3);
  font-weight: var(--fw-1);
  line-height: var(--lh-3);
}
.pe-prose2 a{
  color: var(--mod-accent-2, var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pe-prose2 strong{ color: var(--mod-text-2, var(--text)); }

.pe-prose2 ul, .pe-prose2 ol{
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--mod-text-2, var(--muted));
  font-size: var(--fs-3);
  line-height: var(--lh-3);
}
.pe-prose2 li{
  margin: 6px 0;
  font-size: var(--fs-3);
  line-height: var(--lh-3);
}

/* ==========================================================================
   4) COMPONENTES (reusables)
   ========================================================================== */

/* Header / Menú (versión base — luego hay override “flotante” al final) */
.pe-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.pe-title {
  font-weight: var(--fw-4);
  font-size: var(--fs-4);
  line-height: var(--lh-1);
  margin: 0 0 10px;
}

.pe-header__inner{
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.pe-brand{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 160px;
}
.pe-brand__logo{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--border);
  overflow: hidden;
}
.pe-brand__title{
  font-weight: var(--fw-3);
  font-size: var(--fs-2);
  line-height: var(--lh-1);
}

.pe-nav{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.pe-nav a{
  font-size: var(--fs-2);
  font-weight: var(--fw-2);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
}
.pe-nav a:hover{ background: rgba(0,0,0,.04); }

.pe-header__right{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 10px
}

/* Language switch */
.pe-lang{
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
}
.pe-lang a{
  font-size: var(--fs-1);
  font-weight: var(--fw-3);
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--muted);
}
.pe-lang a.is-active{
  background: rgba(0,0,0,.06);
  color: var(--text);
}

.pe-autocomplete__dropdown{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 80;

  list-style: none;
  margin: 0;
  padding: 6px;

  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 14px;
  box-shadow: var(--shadow);

  max-height: 260px;
  overflow: auto;
}

.pe-autocomplete__option{
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}

.pe-autocomplete__option:hover{
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 16px;
  border-radius: 999px;
  font-weight: var(--fw-2);
  font-size: var(--fs-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .04s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  user-select: none;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn:focus{ outline: none; box-shadow: var(--focus); }

.btn--primary{
  background: var(--primary);
  color: var(--primary-contrast);
}
.btn--primary:hover{ filter: brightness(0.98); }

.btn--secondary{
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.btn--secondary:hover{
  background: color-mix(in srgb, var(--text) 4%, var(--surface-2));
}

.btn--soft{
  background: var(--mod-bg-2);
  color: var(--mod-text-2);
}
.btn--soft:hover{ filter: brightness(0.99); }

.btn--ghost{
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn--ghost:hover{ background: rgba(0,0,0,.04); }

.btn--accent{
  background: var(--accent);
  color: var(--accent-contrast);
}
.btn--accent:hover{ filter: brightness(0.98); }

/* Pills / chips (para filtros, tags) */
.pe-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: var(--fs-2);
  font-weight: var(--fw-2);
  color: var(--text);
}
.pe-chip--soft{
  border-color: transparent;
  background: var(--surface-2);
}

/* Inputs (para páginas tipo “ofertas” con filtros) */
.pe-field{
  width: 100%;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
  color: var(--text);
  font-size: var(--fs-2);
  font-weight: var(--fw-1);
}
.pe-field:focus{ outline: none; box-shadow: var(--focus); }

/* ==========================================================================
   5) PATRONES DE MÓDULO (finos)
   ========================================================================== */

/* HERO */
.hero{
  position: relative;
  min-height: 340px;
  padding: 64px 0;
  overflow: hidden;
  color: var(--mod-text-1, #fff);
  background: var(--mod-bg-1, var(--text));
}
.hero__bg{
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: .95;
}
.hero__overlay{
  position: absolute;
  inset: 0;
  /*background: linear-gradient(180deg, rgba(7,16,19,.40), rgba(7,16,19,.70));*/
}
.hero__content{ position: relative; z-index: 2; }

.hero__stack{
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
}
.hero__logo{
  width: 600px;
  max-width: 90vw;
  margin-bottom: 4px;
  /*filter: drop-shadow(0 10px 30px rgba(0,0,0,.45));*/
}
.hero__kicker{
  font-weight: var(--fw-2);
  font-size: var(--fs-2);
  letter-spacing: .02em;
  opacity: .92;
}
.hero__title{
  font-weight: var(--fw-5);
  font-size: var(--fs-5);
  line-height: 1.05;
  margin: 0;
}
.hero__subtitle{
  max-width: 760px;
  margin: 0;
  opacity: .92;
  font-size: var(--fs-3);
  font-weight: var(--fw-1);
  line-height: var(--lh-3);
}
.hero__actions{
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}

/* SPLIT genérico (texto + imagen / texto + mapa / etc.) */
.split{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
}
@media (max-width: 920px){
  .split{ grid-template-columns: 1fr; }
}

.split__title{
  font-weight: var(--fw-4);
  font-size: var(--fs-4);
  line-height: var(--lh-1);
  margin: 0 0 24px;
}
.split__text{
  color: var(--mod-text-2, var(--muted));
  margin: 0 0 16px;
  font-size: var(--fs-3);
  font-weight: var(--fw-1);
  line-height: var(--lh-3);
}
.split__actions{
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}
.split__media{
  /*border-radius: var(--radius);*/
  overflow: hidden;
  /*border: 1px solid var(--border);*/
  /*box-shadow: var(--shadow);*/
}
.split__media img{ width: 100%; height: auto; display:block; }
.split--right .split__media{ order: 2; }
@media (max-width: 920px){
  .split--right .split__media{ order: 0; }
}

/* Variante “flush” (dos mitades pegadas, ideal mapa) */
.split--flush{
  gap: 0;
  /*border-radius: var(--radius);*/
  overflow: hidden;
  /*border: 1px solid var(--border);*/
  /*box-shadow: var(--shadow);*/
  background: var(--surface);
}
.split--flush .split__media{
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.split--flush .split__content{
  padding: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
}
@media (max-width: 920px){
  .split--flush .split__content{ padding: 28px; }
}

/* MAP media */
.pe-map{
  position: relative;
  background: var(--surface-2);
  min-height: 520px;
}
.pe-map iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 920px){
  .pe-map{ min-height: 360px; }
}

/* CARDS grid (ofertas, empresas, etc.) */
.pe-cards{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px){
  .pe-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .pe-cards{ grid-template-columns: 1fr; }
}

.pe-card--pad{ padding: 18px; }
.pe-card__title{
  margin: 0 0 6px;
  font-weight: var(--fw-4);
  font-size: var(--fs-2);
  line-height: var(--lh-1);
  color: var(--mod-text-2, var(--text));
}
.pe-card__meta{
  color: var(--muted);
  font-size: var(--fs-1);
  font-weight: var(--fw-1);
  line-height: var(--lh-2);
}

/* CAROUSEL sin JS (scroll horizontal + snap) */
.pe-carousel{
  overflow: hidden;
}
.pe-carousel__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.pe-carousel__item{ scroll-snap-align: start; }

/* LOGO GRID (empresas/colaboradoras) */
.pe-logo-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
}
@media (max-width: 920px){
  .pe-logo-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pe-logo{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 12px;
  display: grid;
  place-items: center;
  min-height: 72px;
}
.pe-logo img{ max-height: 44px; width: auto; }

/* SCHEDULE (programa/agenda) */
.pe-schedule{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.pe-schedule__row{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.pe-schedule__row:last-child{ border-bottom: 0; }
.pe-schedule__time{
  font-weight: var(--fw-4);
  font-size: var(--fs-2);
  color: var(--text);
}
.pe-schedule__desc{
  color: var(--muted);
  font-size: var(--fs-3);
  font-weight: var(--fw-1);
}
@media (max-width: 640px){
  .pe-schedule__row{ grid-template-columns: 1fr; }
}

/* Actividdaes */

.activities-program__title {
  color: var(--mod-text-2, var(--text));
}

/* ==========================================================================
   6) Compat temporal con tu módulo rtm-* (recomendación: migrar a split+pe-prose)
   ========================================================================== */
.rtm-split{ /* alias a split--flush */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface);
  min-height: 520px;
}
@media (max-width: 920px){
  .rtm-split{ grid-template-columns: 1fr; min-height: auto; }
}
.rtm-text{
  padding: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
}
@media (max-width: 920px){
  .rtm-text{ padding: 28px; }
}
.rtm-prose{ width: 100%; max-width: 560px; }
.rtm-map{ position: relative; background: var(--surface-2); }
.rtm-map iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 920px){
  .rtm-map{ height: 360px; }
}

.oc{
  --oc-bg: var(--mod-bg-1, var(--bg));
  --oc-fg: var(--mod-text-1, var(--text));
  --oc-accent: var(--mod-accent-1, var(--primary));
  background: var(--oc-bg);
  color: var(--oc-fg);
}

/* Para que el fondo “respire” y no choque con secciones blancas */
.oc.pe-section{
  padding: 46px 0;
}

.oc.pe-section2{
  padding: 46px 0;
}

.oc__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.oc__title{
  margin: 0;
  font-weight: var(--fw-4);
  font-size: var(--fs-4);
  letter-spacing: -0.01em;
  line-height: var(--lh-1);
}

.oc__hint{
  color: color-mix(in srgb, var(--oc-fg) 55%, transparent);
  font-size: var(--fs-1);
  font-weight: var(--fw-2);
  white-space: nowrap;
}

.oc__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px; /* evita cortar sombras */
}

/* ocultar scrollbar (Firefox + WebKit) */
.oc__viewport{ scrollbar-width: none; }
.oc__viewport::-webkit-scrollbar{ display:none; }

/* Track en 2 filas que scrollea horizontalmente */
.oc__track{
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: minmax(260px, 320px);
  gap: 14px;
}

/* En móvil: 1 fila */
@media (max-width: 920px){
  .oc__track{
    grid-template-rows: 1fr;
    grid-auto-columns: minmax(240px, 86vw);
  }
}

.oc-card{
  scroll-snap-align: start;
  position: relative;

  /* “Tarjeta” compatible con fondos claros/oscuros */
  background: color-mix(in srgb, var(--oc-bg) 8%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--oc-fg) 14%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);

  padding: 16px 16px 14px;
  min-height: 132px;
}

.oc-card__badge{
  position: absolute;
  left: 14px;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--oc-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--oc-accent) 18%, transparent);
}

.oc-card__title{
  font-weight: var(--fw-5);
  font-size: var(--fs-2);
  line-height: var(--lh-1);
  margin-top: 2px;
  padding-left: 20px; /* deja hueco a la “badge” */
  color: var(--oc-fg);
}

.oc-card__company{
  margin-top: 8px;
  font-weight: var(--fw-3);
  font-size: var(--fs-2);
  color: color-mix(in srgb, var(--oc-fg) 78%, transparent);
}

.oc-card__meta{
  margin-top: 6px;
  font-size: var(--fs-1);
  font-weight: var(--fw-1);
  color: color-mix(in srgb, var(--oc-fg) 56%, transparent);
}

/* (opcional) CTA si luego añades link */
.oc-card__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: var(--fs-2);
  font-weight: var(--fw-4);
  color: var(--oc-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* MÓDULO: Partners (logos en grid) */
.pe-partners{
  background: var(--mod-bg-1, transparent);
  color: var(--mod-text-1, inherit);
}

.pe-partners__grid{
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
  margin-top: 28px;
}

@media (max-width: 1200px){
  .pe-partners__grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 920px){
  .pe-partners__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .pe-partners__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pe-partners__tile{
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--mod-bg-2);
  box-shadow: var(--shadow);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /*transition: transform .05s ease, border-color .15s ease, background .15s ease;*/
}

/*.pe-partners__tile:hover{
  border-color: color-mix(in srgb, var(--mod-accent-1, var(--primary)) 45%, var(--border));
}

.pe-partners__tile:active{ transform: translateY(1px); }*/

.pe-partners__logo{
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
}

.pe-partners__fallback{
  width: 72%;
  height: 72%;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: var(--fw-4);
  font-size: var(--fs-2);
  letter-spacing: .02em;
  background: color-mix(in srgb, var(--mod-accent-1, var(--primary)) 14%, white);
  color: var(--mod-text-1, var(--text));
}

/* =========================
   MÓDULO: Footer (logos + rrss + legales)
   ========================= */
.pe-footer{
  background: var(--mod-bg-1, var(--surface));
  color: var(--mod-text-1, var(--text));
  border-top: 1px solid var(--border);
  padding: 28px 0;
}

.pe-footer__logos{
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: center;
  justify-content: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}

.pe-footer__logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: calc(var(--radius) - 4px);
  transition: background .15s ease, transform .06s ease;
}

.pe-footer__logo img{
  max-height: 120px;
  width: auto;
  display: block;
}

.pe-footer__bottom{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  justify-content: space-between;
}

.pe-footer__social{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.pe-footer__socialIcon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.7);
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.pe-footer__socialIcon:hover{
  background: rgba(255,255,255,1);
  border-color: rgba(0,0,0,.12);
}
.pe-footer__socialIcon:active{
  transform: translateY(1px);
}
.pe-footer__socialIcon img{
  width: 30px;
  height: 30px;
  display: block;
}

.pe-footer__legal{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-1);
  font-weight: var(--fw-1);
  color: var(--mod-text-2, var(--muted));
}
.pe-footer__legal a{
  font-size: var(--fs-1);
  font-weight: var(--fw-1);
  color: var(--mod-text-2, var(--muted));
}
.pe-footer__legal a:hover{
  color: var(--mod-text-2, var(--muted));
}

@media (max-width: 920px){
  .pe-footer__bottom{
    justify-content: center;
  }
  .pe-footer__logo img{
    max-height: 110px;
  }
}


/* =========================
   MÓDULO: Forum features (título + texto + grid iconos)
   ========================= */
.ff-card{
  background: var(--mod-bg-2, var(--surface));
  color: var(--mod-text-1, var(--text));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 44px 38px;
}

.ff-head{
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
}

.ff-title{
  margin: 0;
  font-weight: var(--fw-4);
  font-size: var(--fs-4);
  line-height: var(--lh-1);
  letter-spacing: -0.01em;
}

.ff-body{
  margin-top: 12px;
  color: var(--mod-text-2, var(--muted));
  font-size: var(--fs-3);
  line-height: var(--lh-3);
}

/* Grid */
.ff-grid{
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 980px){
  .ff-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .ff-card{ padding: 28px 18px; }
  .ff-grid{ grid-template-columns: 1fr; }
}

.ff-item{
  border-radius: calc(var(--radius) - 4px);
  padding: 18px 16px;
  text-align: center;
  background: white;
  border: 1px solid rgba(0,0,0,.05);
}

.ff-item--link{
  display: block;
}
.ff-item--link:hover{
  border-color: rgba(0,0,0,.12);
  transform: translateY(-1px);
}

.ff-icon{
  width: 124px;
  height: 124px;
  object-fit: contain;
  display: inline-block;
  margin: 0 auto 10px;
}

.ff-item-title{
  font-weight: var(--fw-4);
  font-size: var(--fs-2);
  color: var(--mod-accent-1, var(--primary));
  line-height: var(--lh-1);
  margin-bottom: 6px;
}

.ff-item-text{
  color: var(--mod-text-2, var(--muted));
  font-size: var(--fs-2);
  font-weight: var(--fw-1);
  line-height: var(--lh-3);
}

/* Prose base reutilizable (si no lo tienes ya) */
.pe-prose > :first-child{ margin-top: 0; }
.pe-prose > :last-child{ margin-bottom: 0; }
.pe-prose p{ margin: 0 0 12px; }
.pe-prose ul, .pe-prose ol{ margin: 0 0 12px; padding-left: 18px; }
.pe-prose li{ margin: 6px 0; }


/* Mapa */
.rtm-stack{
  display: grid;
  gap: 18px;
}

/* Card superior (texto) */
.rtm-card{
  padding: 22px;
}

/* Card del mapa */
.rtm-mapCard{
  overflow: hidden; /* para que overlay/máscara no “salgan” */
}

/* Wrapper relativo para overlay/máscara */
.rtm-mapWrap{
  position: relative;
  min-height: 420px;
  background: var(--surface-2);
}

.rtm-mapFrame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ✅ “Ocultar” el place-card de Google:
   No podemos hacer display:none dentro del iframe,
   así que tapamos la zona típica (arriba-izquierda). */
.rtm-mapMask{
  position: absolute;
  left: 8px;
  top: 8px;
  width: clamp(220px, 30vw, 360px);
  height: clamp(90px, 16vw, 140px);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  pointer-events: none;
  z-index: 2;
}

/* Card flotante (tu contenido) */
.rtm-mapOverlay{
  position: absolute;
  left: 8px;
  top: 8px;
  width: clamp(220px, 30vw, 360px);
  height: clamp(90px, 16vw, 140px);
  z-index: 3; /* encima de la máscara */
  max-width: min(420px, calc(100% - 20px));
  padding: 16px 16px;
  border-radius: 0;
  border: 0;
  background: var(--surface);
}

/* Cuando no hay URL */
.rtm-mapEmpty{
  padding: 22px;
}


/* Header / Menú (override flotante) */
.pe-header{
  /* flotante */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;

  /* tokens */
  background: var(--mod-bg-1, var(--bg));
  color: var(--text);

  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.pe-header__inner{
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  background: transparent;
}

/* “reserva” bajo el header fixed */
.pe-header-spacer{ height: 64px; }
@media (min-width: 920px){
  .pe-header-spacer{ height: 72px; }
}

.pe-brand{
  display: flex;
  align-items: center;
  min-width: 56px;
}

.pe-brand__logoLink{
  width: auto;
  max-height: 80px;
  overflow: hidden;
  display: grid;
  place-items: left;
}

.pe-brand__logoImg{
  width: auto;
  max-height: 80px;
  object-fit: cover; /* favicon/banners recortan bien */
  display: block;
}

.pe-brand__logoFallback{
  font-weight: var(--fw-5);
  font-size: var(--fs-2);
  color: var(--text);
}

/* Nav */
.pe-nav{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.pe-nav__link{
  font-size: var(--fs-2);
  font-weight: var(--fw-2);
  color: var(--mod-text-2);
  padding: 8px 10px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}

.pe-nav__link:hover{
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.pe-nav__link.is-active{
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

/* Si quieres que en móvil el nav no “empuje” demasiado, puedes ocultarlo */
@media (max-width: 520px){
  .pe-nav{ display: none; }
}

.jo-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.jo-title{
  margin:0;
  font-weight: var(--fw-4);
  font-size: var(--fs-4);
  line-height: var(--lh-1);
}
.jo-hint{
  color: var(--mod-text-2, var(--muted));
  font-size: var(--fs-1);
  font-weight: var(--fw-2);
  white-space: nowrap;
}

@media (max-width: 920px){
  .jo-head{ flex-direction: column; align-items: flex-start; }
  .jo-hint{ white-space: normal; }
}

.jo-filters .jo-label{
  display:block;
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 6px;
}

.jo-checks{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  padding-top: 26px; /* alinear con labels/inputs en grid */
}
@media (max-width: 920px){
  .jo-checks{ padding-top: 0; }
}

.jo-check{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: var(--fs-2);
  font-weight: var(--fw-2);
  color: var(--text);
}

.jo-actions{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: end;
}

.jo-cards{ margin-top: 16px; }

.jo-card__excerpt{
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-2);
  line-height: var(--lh-3);
  min-height: 44px;
}

.jo-card__tags,
.jo-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.jo-card__actions{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

.jo-alert{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  margin: 10px 0 14px;
}
.jo-alert--ok{
  background: color-mix(in srgb, #22c55e 10%, var(--surface));
  border-color: color-mix(in srgb, #22c55e 35%, var(--border));
  color: #166534;
}
.jo-alert--bad{
  background: color-mix(in srgb, #ef4444 10%, var(--surface));
  border-color: color-mix(in srgb, #ef4444 35%, var(--border));
  color: #991b1b;
}
.jo-alert--info{
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
}

.companies-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.companies-grid__card{
  height: 100%;
}

.companies-grid__stack{
  gap: 14px;
  height: 100%;
}

.companies-grid__logoWrap{
  height: 132px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: var(--mod-bg-2, var(--surface));
  display: grid;
  place-items: center;
  overflow: hidden;
}

.companies-grid__logo{
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.companies-grid__fallback{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--mod-accent-1, var(--primary)) 14%, white);
  color: var(--mod-text-1, var(--text));
  font-weight: var(--fw-4);
  font-size: var(--fs-4);
}

.companies-grid__type{
  font-size: var(--fs-1);
  font-weight: var(--fw-3);
  color: var(--mod-text-2, var(--muted));
  text-transform: uppercase;
  letter-spacing: .04em;
}

.companies-grid__title{
  margin: 0;
  font-size: var(--fs-2);
  color: var(--mod-text-2, var(--text));
}

.companies-grid__excerpt{
  margin: 0;
  color: var(--mod-text-2, var(--muted));
  font-size: var(--fs-2);
  line-height: var(--lh-3);
}

.companies-grid__excerpt--empty{
  opacity: .8;
}

.companies-grid__actions{
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

.company-detail__hero{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 22px;
  align-items: center;
}

.company-detail__logoWrap{
  min-height: 180px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--mod-bg-2, var(--surface));
  display: grid;
  place-items: center;
  overflow: hidden;
}

.company-detail__logo{
  width: 84%;
  height: 84%;
  object-fit: contain;
}

.company-detail__fallback{
  width: 92px;
  height: 92px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--mod-accent-1, var(--primary)) 14%, white);
  color: var(--mod-text-1, var(--text));
  font-weight: var(--fw-4);
  font-size: var(--fs-4);
}

.company-detail__type{
  font-size: var(--fs-1);
  font-weight: var(--fw-3);
  color: var(--mod-text-2, var(--muted));
  text-transform: uppercase;
  letter-spacing: .04em;
}

.company-detail__title{
  margin: 0;
}

.company-detail__slogan{
  margin: 0;
  color: var(--mod-text-2, var(--muted));
  font-size: var(--fs-3);
  line-height: var(--lh-3);
}

.company-detail__companyName{
  color: var(--mod-text-2, var(--muted));
  font-size: var(--fs-2);
}

.company-detail__metaGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.company-detail__metaCard{
  background: var(--mod-bg-2, var(--surface));
}

.company-detail__sectionTitle{
  margin: 0 0 10px;
  font-size: var(--fs-2);
}

.company-detail__metaItem{
  color: var(--mod-text-2, var(--muted));
  font-size: var(--fs-2);
  line-height: var(--lh-3);
}

.company-detail__metaItem strong{
  color: var(--mod-text-1, var(--text));
}

.company-detail__metaItem a{
  color: var(--mod-accent-1, var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.company-detail__socials{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.company-detail__socialLink{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--mod-bg-2, var(--surface));
  color: var(--mod-accent-1, var(--primary));
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .06s ease;
}

.company-detail__socialLink:hover{
  background: color-mix(in srgb, var(--mod-accent-1, var(--primary)) 10%, var(--mod-bg-2, var(--surface)));
  color: var(--mod-text-1, var(--text));
  border-color: color-mix(in srgb, var(--mod-accent-1, var(--primary)) 35%, var(--border));
}

.company-detail__socialLink:active{
  transform: translateY(1px);
}

.company-detail__socialIconWrap{
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}


.company-detail__socialIcon{
  width: 20px;
  height: 20px;
  display: block;
}

.company-detail__socialIcon svg,
.company-detail__socialIcon path,
.company-detail__socialIcon circle,
.company-detail__socialIcon rect,
.company-detail__socialIcon polygon,
.company-detail__socialIcon line,
.company-detail__socialIcon polyline{
  fill: currentColor;
  stroke: currentColor;
}

@media (max-width: 1000px){
  .companies-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px){
  .company-detail__hero{
    grid-template-columns: 1fr;
  }

  .company-detail__metaGrid{
    grid-template-columns: 1fr;
  }
}

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


.company-detail-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.65fr) minmax(280px, .95fr);
  gap:18px;
  align-items:start;
}

.company-detail-layout--single{
  grid-template-columns:minmax(0, 1fr);
}

.company-detail-layout__main,
.company-detail-layout__aside{
  min-width:0;
}

.company-detail__mainCard,
.company-detail__offersCard,
.company-detail__metaCard{
  background:var(--mod-bg-2, var(--surface));
  color:var(--mod-text-1, var(--text));
}

.company-detail__hero{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:22px;
  align-items:center;
}

.company-detail__logoWrap{
  min-height:180px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--mod-text-1, var(--text)) 10%, var(--border));
  background:var(--mod-bg-3, var(--surface-2));
  display:grid;
  place-items:center;
  overflow:hidden;
}

.company-detail__logo{
  width:84%;
  height:84%;
  object-fit:contain;
}

.company-detail__fallback{
  width:92px;
  height:92px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb, var(--mod-accent-1, var(--primary)) 14%, white);
  color:var(--mod-text-1, var(--text));
  font-weight:var(--fw-4);
  font-size:var(--fs-4);
}

.company-detail__type{
  font-size:var(--fs-1);
  font-weight:var(--fw-3);
  color:var(--mod-text-2, var(--muted));
  text-transform:uppercase;
  letter-spacing:.04em;
}

.company-detail__title{
  margin:0;
}

.company-detail__slogan{
  margin:0;
  color:var(--mod-text-2, var(--muted));
  font-size:var(--fs-3);
  line-height:var(--lh-3);
}

.company-detail__companyName{
  color:var(--mod-text-2, var(--muted));
  font-size:var(--fs-2);
}

.company-detail__sectionTitle{
  margin:0 0 10px;
  font-size:var(--fs-2);
  font-weight:var(--fw-4);
  color:var(--mod-text-1, var(--text));
}

.company-detail__metaItem{
  color:var(--mod-text-2, var(--muted));
  font-size:var(--fs-2);
  line-height:var(--lh-3);
}

.company-detail__metaItem strong{
  color:var(--mod-text-1, var(--text));
}

.company-detail__metaItem a{
  color:var(--mod-accent-1, var(--primary));
  text-decoration:underline;
  text-underline-offset:2px;
}

.company-detail__socials{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.company-detail__socialLink{
  width:42px;
  height:42px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb, var(--mod-text-1, var(--text)) 10%, var(--border));
  background:var(--mod-bg-3, var(--surface-2));
  color:var(--mod-accent-1, var(--primary));
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .06s ease;
}

.company-detail__socialLink:hover{
  background:color-mix(in srgb, var(--mod-accent-1, var(--primary)) 10%, var(--mod-bg-3, var(--surface-2)));
  color:var(--mod-text-1, var(--text));
  border-color:color-mix(in srgb, var(--mod-accent-1, var(--primary)) 35%, var(--border));
}

.company-detail__socialLink:active{
  transform:translateY(1px);
}

.company-detail__socialIconWrap{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:inherit;
}

.company-detail__socialIcon{
  width:20px;
  height:20px;
  display:block;
}

.company-detail__socialIcon svg,
.company-detail__socialIcon path,
.company-detail__socialIcon circle,
.company-detail__socialIcon rect,
.company-detail__socialIcon polygon,
.company-detail__socialIcon line,
.company-detail__socialIcon polyline{
  fill:currentColor;
  stroke:currentColor;
}

.company-detail__gallery{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.company-detail__galleryItem{
  display:block;
  border-radius:14px;
  overflow:hidden;
  background:var(--mod-bg-3, var(--surface-2));
  border:1px solid color-mix(in srgb, var(--mod-text-1, var(--text)) 8%, var(--border));
}

.company-detail__galleryImg{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}

.company-detail__videoFrame{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:14px;
  overflow:hidden;
  background:var(--mod-bg-3, var(--surface-2));
}

.company-detail__videoFrame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.company-detail__asideActions{
  display:flex;
  justify-content:flex-start;
  margin-top:4px;
}

/* ==========================================================================
   COMPANY DETAIL - OFFERS
   ========================================================================== */

.company-detail__offersGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 4px;
}

.company-detail__offersGrid .oc-card{
  min-height: 100%;
}



.company-detail-offerCard{
  background:var(--mod-bg-3, var(--surface-2));
  color:var(--mod-text-1, var(--text));
  box-shadow:none;
  border:1px solid color-mix(in srgb, var(--mod-text-1, var(--text)) 8%, var(--border));
  height:100%;
}

.company-detail-offerCard__head{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:12px;
  align-items:start;
}

.company-detail-offerCard__logoWrap{
  width:52px;
  height:52px;
  border-radius:12px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:var(--mod-bg-2, var(--surface));
  border:1px solid color-mix(in srgb, var(--mod-text-1, var(--text)) 8%, var(--border));
}

.company-detail-offerCard__logo{
  width:78%;
  height:78%;
  object-fit:contain;
}

.company-detail-offerCard__logoFallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-weight:var(--fw-4);
  font-size:var(--fs-2);
  color:var(--mod-text-1, var(--text));
  background:color-mix(in srgb, var(--mod-accent-1, var(--primary)) 14%, white);
}

.company-detail-offerCard__title{
  margin:0;
  color:var(--mod-text-1, var(--text));
}

.company-detail-offerCard__company{
  color:var(--mod-text-2, var(--muted));
  font-size:var(--fs-2);
  font-weight:var(--fw-3);
  line-height:var(--lh-2);
}

.company-detail-offerCard__location{
  color:var(--mod-text-2, var(--muted));
  font-size:var(--fs-2);
  line-height:var(--lh-2);
}

.company-detail-offerCard__excerpt{
  margin:0;
  color:var(--mod-text-2, var(--muted));
  font-size:var(--fs-2);
  line-height:var(--lh-3);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 920px){
  .company-detail-layout{
    grid-template-columns:1fr;
  }

    .company-detail__offersGrid{
    grid-template-columns: 1fr;
  }

  .company-detail__hero{
    grid-template-columns:1fr;
  }

  .company-detail__gallery{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .company-detail-offerCard__head{
    grid-template-columns:44px 1fr;
  }

  .company-detail-offerCard__logoWrap{
    width:44px;
    height:44px;
  }
}

.program-tabs__tab{
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--mod-text-1, var(--text)) 12%, var(--border));
  border-bottom: 1px solid color-mix(in srgb, var(--mod-text-1, var(--text)) 12%, var(--border));
  background: var(--mod-bg-3, var(--surface-2));
  color: var(--mod-text-2, var(--muted));
  border-radius: 14px 14px 0 0;
  padding: 10px 16px;
  font-size: var(--fs-2);
  font-weight: var(--fw-3);
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .06s ease;
  position: relative;
}

.program-tabs__tab:hover{
  background: color-mix(in srgb, var(--mod-accent-1, var(--primary)) 8%, var(--mod-bg-3, var(--surface-2)));
  color: var(--mod-text-1, var(--text));
}

.program-tabs__tab.is-active{
  background: var(--mod-bg-2, var(--surface));
  color: var(--mod-text-1, var(--text));
  border-color: color-mix(in srgb, var(--mod-text-1, var(--text)) 12%, var(--border));
  border-bottom-color: var(--mod-bg-2, var(--surface)); /* truco para que se funda con la tarjeta */
  z-index: 3;
}

.program-tabs__panelWrap{
  background: var(--mod-bg-2, var(--surface));
  position: relative;
  z-index: 1;
}

.program-tabs__panel{
  display: none;
}

.program-tabs__panel.is-active{
  display: block;
}

@media (max-width: 640px){
  .program-tabs{
    gap: 6px;
  }

  .program-tabs__tab{
    padding: 9px 12px;
    font-size: var(--fs-1);
  }
}

/* =========================================================
   JOB OFFERS CAROUSEL
   ========================================================= */

/* El track del carrusel de ofertas queda en una sola fila */
.oc__track--offers{
  grid-template-rows: 1fr;
  grid-auto-columns: minmax(320px, 360px);
}

@media (max-width: 920px){
  .oc__track--offers{
    grid-auto-columns: minmax(280px, 86vw);
  }
}

.oc-card__companyRow{
  display:grid;
  grid-template-columns: 52px 1fr;
  gap:12px;
  align-items:start;
  min-height:52px;
}

.oc-card__companyLogoWrap{
  width:52px;
  height:52px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  flex-shrink:0;
}

.oc-card__companyLogoLink{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:12px;
}

.oc-card__companyLogo{
  width:52px;
  height:52px;
  object-fit:contain;
  display:block;
}

.oc-card__companyLogoFallback{
  width:52px;
  height:52px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:var(--fs-2);
  font-weight:var(--fw-4);
  color:var(--oc-fg);
  background:color-mix(in srgb, var(--oc-accent) 14%, white);
}

.oc-card__companyCol{
  min-width:0;
  display:flex;
  align-items:center;
  min-height:52px;
}

.oc-card__companyLink{
  display:inline-block;
  color:color-mix(in srgb, var(--oc-fg) 78%, transparent);
  font-size:var(--fs-2);
  font-weight:var(--fw-3);
  line-height:var(--lh-2);
  text-decoration:none;
}

.oc-card__companyLink:hover{
  color:var(--oc-accent);
  text-decoration:underline;
  text-underline-offset:2px;
}

.oc-card__companyLink--static:hover{
  color:color-mix(in srgb, var(--oc-fg) 78%, transparent);
  text-decoration:none;
}

.oc-card__offerTitle{
  margin:0;
  color:var(--oc-fg);
  font-size:var(--fs-2);
  font-weight:var(--fw-5);
  line-height:var(--lh-1);
  min-height: calc(var(--fs-2) * 2.2);
}

.oc-card__offerLocation{
  color:color-mix(in srgb, var(--oc-fg) 62%, transparent);
  font-size:var(--fs-1);
  font-weight:var(--fw-3);
  line-height:var(--lh-2);
  min-height: calc(var(--fs-1) * 1.8);
}

.oc-card__offerExcerpt{
  color:color-mix(in srgb, var(--oc-fg) 62%, transparent);
  font-size:var(--fs-2);
  font-weight:var(--fw-1);
  line-height:var(--lh-3);
  min-height: 74px;
  overflow:hidden;
}

.oc-card__tagsRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-height: 34px;
  align-content:flex-start;
}

.oc-card__tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:6px 10px;
  border-radius:999px;
  font-size:var(--fs-1);
  font-weight:var(--fw-3);
  line-height:1;
  color:var(--oc-fg);
  background:color-mix(in srgb, var(--oc-accent) 10%, white);
  border:1px solid color-mix(in srgb, var(--oc-accent) 18%, transparent);
  white-space:nowrap;
}

.oc-card__actionBtn{
  min-width: 112px;
}

@media (max-width: 640px){
  .oc-card__topRow,
  .company-detail-offerCard__topRow{
    grid-template-columns: 92px 1fr;
    gap: 12px;
  }

  .oc-card__logoFrame,
  .company-detail-offerCard__logoWrap--wide{
    width: 92px;
    height: 52px;
  }

  .oc-card__offerTitle,
  .company-detail-offerCard__title{
    font-size: 18px;
  }

  .oc-card__offerExcerpt,
  .company-detail-offerCard__excerpt{
    min-height: auto;
  }
}

.oc__track--offers{
  grid-template-rows: 1fr;
  grid-auto-columns: minmax(420px, 48%);
  gap: 18px;
  align-items: stretch;
}

.oc-card--offer2{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  height: 100%;
  padding: 18px;
}

.oc-card__topRow{
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  align-items: start;
}

.oc-card__topText{
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: start;
}

.oc-card__logoFrame{
  width: 116px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--oc-fg) 10%, transparent);
  background: color-mix(in srgb, var(--oc-bg) 30%, white);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.oc-card__logoFrameLink{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.oc-card__logoWide{
  width: 84%;
  height: 70%;
  object-fit: contain;
  display: block;
}

.oc-card__logoWideFallback{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: var(--fs-2);
  font-weight: var(--fw-4);
  color: var(--oc-fg);
  background: color-mix(in srgb, var(--oc-accent) 12%, white);
}

.oc-card__offerTitle{
  margin: 0;
  padding-left: 0;
  font-size: clamp(18px, 1.25vw, 22px);
  line-height: 1.12;
  font-weight: var(--fw-4);
  color: var(--oc-fg);
  min-height: 0;
}

.oc-card__companyLink,
.oc-card__companyLink--static{
  font-size: var(--fs-2);
  font-weight: var(--fw-3);
  line-height: var(--lh-2);
  color: color-mix(in srgb, var(--oc-fg) 80%, transparent);
  text-decoration: none;
}

.oc-card__companyLink:hover{
  color: var(--oc-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.oc-card__offerLocation{
  font-size: var(--fs-2);
  line-height: var(--lh-2);
  color: color-mix(in srgb, var(--oc-fg) 64%, transparent);
  min-height: 20px;
}

.oc-card__offerExcerpt{
  font-size: var(--fs-2);
  line-height: var(--lh-3);
  color: color-mix(in srgb, var(--oc-fg) 68%, transparent);
  min-height: 78px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.oc-card__tagsRow{
  min-height: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.oc-card__tag{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: var(--fs-1);
  font-weight: var(--fw-3);
  line-height: 1;
  color: var(--oc-fg);
  background: color-mix(in srgb, var(--oc-accent) 10%, white);
  border: 1px solid color-mix(in srgb, var(--oc-accent) 18%, transparent);
  white-space: nowrap;
}

.oc-card__actionBtn{
  min-width: 128px;
}

.company-detail-offerCard__inner{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 320px;
  height: 100%;
}

.company-detail-offerCard__topRow{
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  align-items: start;
}

.company-detail-offerCard__topText{
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: start;
}

.company-detail-offerCard__logoWrap--wide{
  width: 116px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mod-text-1, var(--text)) 8%, var(--border));
  background: var(--mod-bg-2, var(--surface));
  overflow: hidden;
  display: grid;
  place-items: center;
}

.company-detail-offerCard__logo--wide{
  width: 84%;
  height: 70%;
  object-fit: contain;
}

.company-detail-offerCard__logoFallback--wide{
  width: 100%;
  height: 100%;
  font-size: var(--fs-2);
  display: grid;
  place-items: center;
}

.company-detail-offerCard__title{
  margin: 0;
  font-size: clamp(18px, 1.2vw, 22px);
  line-height: 1.12;
  min-height: 0;
  color: var(--mod-text-1, var(--text));
}

.company-detail-offerCard__company{
  color: var(--mod-text-2, var(--muted));
  font-size: var(--fs-2);
  font-weight: var(--fw-3);
  line-height: var(--lh-2);
}

.company-detail-offerCard__location{
  color: var(--mod-text-2, var(--muted));
  font-size: var(--fs-2);
  line-height: var(--lh-2);
  min-height: 20px;
}

.company-detail-offerCard__excerpt{
  margin: 0;
  color: var(--mod-text-2, var(--muted));
  font-size: var(--fs-2);
  line-height: var(--lh-3);
  min-height: 78px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.oc-card__offerExcerpt{
  font-size: var(--fs-2);
  line-height: var(--lh-3);
  color: color-mix(in srgb, var(--oc-fg) 68%, transparent);
  min-height: calc(1.65em * 3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

.oc-card__bottomRow{
  margin-top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.oc-card__tagsRow{
  min-height: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.oc-card__actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.oc-card__actionBtn{
  width: 132px;
  min-width: 132px;
  height: 44px;
  padding: 0 16px;
}

.company-detail-offerCard__excerpt{
  margin: 0;
  color: var(--mod-text-2, var(--muted));
  font-size: var(--fs-2);
  line-height: var(--lh-3);
  min-height: calc(1.65em * 3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

.company-detail-offerCard__bottomRow{
  margin-top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.company-detail-offerCard__tagsRow{
  min-height: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.company-detail-offerCard__tag{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: var(--fs-1);
  font-weight: var(--fw-3);
  line-height: 1;
  color: var(--mod-text-1, var(--text));
  background: color-mix(in srgb, var(--mod-accent-1, var(--primary)) 10%, white);
  border: 1px solid color-mix(in srgb, var(--mod-accent-1, var(--primary)) 18%, transparent);
  white-space: nowrap;
}

.company-detail-offerCard__actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.company-detail-offerCard__actionBtn{
  width: 132px;
  min-width: 132px;
  height: 44px;
  padding: 0 16px;
}

@media (max-width: 640px){
  .oc-card__bottomRow,
  .company-detail-offerCard__bottomRow{
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .oc-card__actions,
  .company-detail-offerCard__actions{
    justify-content: flex-start;
  }
}


.job-offers-grid__filtersCard,
.job-offers-grid__tableCard,
.job-offers-grid__emptyCard{
  background: var(--mod-bg-2, var(--surface));
  color: var(--mod-text-1, var(--text));
  border: 1px solid color-mix(in srgb, var(--mod-text-1, var(--text)) 10%, var(--border));
}

.job-offers-grid__search{
  background: var(--mod-bg-3, var(--surface-2));
  color: var(--mod-text-1, var(--text));
  border: 1px solid color-mix(in srgb, var(--mod-text-1, var(--text)) 10%, var(--border));
}

.job-offers-grid__search::placeholder{
  color: var(--mod-text-2, var(--muted));
}

/* ==========================================================================
   JOB OFFER DETAIL
   ========================================================================== */

.job-offer-detail__card{
  background: var(--mod-bg-2, var(--surface));
  color: var(--mod-text-1, var(--text));
}

.job-offer-detail__hero{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.job-offer-detail__logoWrap{
  min-height: 140px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--mod-text-1, var(--text)) 10%, var(--border));
  background: var(--mod-bg-3, var(--surface-2));
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 16px;
}

.job-offer-detail__logo{
  width: 100%;
  height: 100%;
  max-height: 92px;
  object-fit: contain;
}

.job-offer-detail__logoFallback{
  width: 84px;
  height: 84px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--mod-accent-1, var(--primary)) 14%, white);
  color: var(--mod-text-1, var(--text));
  font-weight: var(--fw-4);
  font-size: var(--fs-4);
}

.job-offer-detail__heroText{
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
}

.job-offer-detail__title{
  margin: 0;
}

.job-offer-detail__company{
  font-size: var(--fs-2);
  font-weight: var(--fw-4);
  color: var(--mod-text-1, var(--text));
  line-height: var(--lh-2);
}

.job-offer-detail__location{
  font-size: var(--fs-2);
  color: var(--mod-text-2, var(--muted));
  line-height: var(--lh-2);
}

.job-offer-detail__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.job-offer-detail__chip{
  background: var(--mod-bg-3, var(--surface-2));
  color: var(--mod-text-1, var(--text));
  border-color: transparent;
}

.job-offer-detail__section{
  padding-top: 6px;
}

.job-offer-detail__applicationBox{
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--mod-bg-3, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--mod-text-1, var(--text)) 8%, var(--border));
  box-shadow: none;
}

.job-offer-detail__applicationHint{
  color: var(--mod-text-2, var(--muted));
  margin-top: 4px;
}

@media (max-width: 920px){
  .job-offer-detail__hero{
    grid-template-columns: 1fr;
  }

  .job-offer-detail__logoWrap{
    min-height: 120px;
  }

  .job-offer-detail__logo{
    max-height: 76px;
  }
}

.pe-header__inner--menu{
  display:flex;
  align-items:center;
  gap:16px;
}

.pe-header__desktop{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:auto;
  flex-wrap:nowrap;
}

.pe-nav--desktop{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.pe-nav__button{
  appearance:none;
  background:none;
  border:none;
  cursor:pointer;
  margin:0;
}

.pe-mobileMenu{
  display:none;
  margin-left:auto;
  margin-right:6px;
  position:relative;
}

.pe-mobileMenu > summary{
  list-style:none;
}

.pe-mobileMenu > summary::-webkit-details-marker{
  display:none;
}

.pe-menuToggle{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background:var(--mod-bg-2, var(--surface));
  display:grid;
  place-content:center;
  gap:5px;
  cursor:pointer;
  user-select:none;
  box-shadow:none;
}

.pe-menuToggle span{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background:var(--text);
  transition:transform .18s ease, opacity .18s ease;
}

.pe-mobileMenu[open] .pe-menuToggle span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.pe-mobileMenu[open] .pe-menuToggle span:nth-child(2){
  opacity:0;
}

.pe-mobileMenu[open] .pe-menuToggle span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.pe-mobileMenu__panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:min(360px, calc(100vw - (var(--gutter) * 2)));
  background:var(--mod-bg-2, var(--surface));
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:14px;
}

.pe-mobileNav{
  display:grid;
  gap:8px;
}

.pe-mobileNav__link{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
  font-size:var(--fs-2);
  font-weight:var(--fw-2);
  color:var(--text);
  background:transparent;
  border:1px solid transparent;
  text-align:left;
}

.pe-mobileNav__link:hover{
  background:color-mix(in srgb, var(--text) 6%, transparent);
}

.pe-mobileNav__link.is-active{
  background:var(--surface-2);
  border-color:color-mix(in srgb, var(--border) 70%, transparent);
}

.pe-mobileNav__button{
  appearance:none;
  cursor:pointer;
}

.pe-mobileMenu__footer{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  display:flex;
  justify-content:flex-end;
}

.pe-lang--mobile{
  margin-left:auto;
}

@media (min-width: 921px){
  .pe-mobileMenu{
    display:none;
  }

  .pe-header__desktop{
    display:flex;
  }
}

@media (max-width: 920px){
  .pe-header__desktop{
    display:none;
  }

  .pe-mobileMenu{
    display:block;
  }

  .pe-header__inner{
    padding:8px 0;
  }

  .pe-header-spacer{
    height:72px;
  }

  .pe-brand__logoImg{
    max-height:56px;
  }

  .pe-brand__logoLink{
    max-height:56px;
  }
}