/* ============================================================
   UJP home-staging · home.css (webproX)
   HERO + BOTONERA + OFERTA (scopeados, tokens unificados) + secciones intermedias.
   ============================================================ */

/* ========== HERO ========== */

  .ujp-hero-wrap{
    
    --font-display: "Amelia Basis", Georgia, serif;
    --font-ui: 'Inter', system-ui, sans-serif;

    --guindo-deep:  #3d0e18;
    --guindo-base:  #5E1626;
    --guindo-mid:   #6B1B31;
    --guindo-soft:  #7E1A3A;
    --gold:         #E6D4A8;
    --gold-soft:    #E6D4A8;
    --gold-deep:    #D9B978;
    --cream:        #FBF8F4;
    --cream-dim:    rgba(244,234,221,0.62);
    --line:         rgba(237,214,164,0.28);
  }
.ujp-hero-wrap,
.ujp-hero-wrap *{ margin:0; padding:0; box-sizing:border-box; }
.ujp-hero-wrap{
    font-family: var(--font-ui);
    background: var(--guindo-deep);
    color: var(--cream);
    -webkit-font-smoothing: antialiased;
    
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow-x: hidden;
  }
.ujp-hero-wrap .hero{
    position: relative; overflow: hidden;
    background:
      radial-gradient(120% 130% at 78% 8%, rgba(126,26,58,0.55) 0%, rgba(78,12,32,0) 55%),
      radial-gradient(90% 120% at 12% 95%, rgba(46,7,18,0.9) 0%, rgba(78,12,32,0) 60%),
      linear-gradient(160deg, #5E1626 0%, #380A18 55%, #2A0610 100%);
  }
.ujp-hero-wrap .hero::before{
    content:""; position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(237,214,164,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(237,214,164,0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(900px) rotateX(58deg) scale(2.4);
    transform-origin: top center;
    mask-image: radial-gradient(70% 60% at 70% 20%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(70% 60% at 70% 20%, #000 0%, transparent 75%);
    opacity:.7;
  }
.ujp-hero-wrap .hero::after{
    content:""; position:absolute; top:-180px; right:-120px;
    width:620px; height:620px; border-radius:50%;
    background: radial-gradient(circle, rgba(237,214,164,0.16) 0%, rgba(237,214,164,0) 65%);
    pointer-events:none;
  }
.ujp-hero-wrap .hero-inner{
    position: relative; z-index:2;
    max-width: 1280px; margin:0 auto; padding: 80px 32px 0;
    display:grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items:end;
  }
.ujp-hero-wrap .eyebrow{ display:flex; align-items:center; gap:14px; color: var(--gold); font-size:12.5px; letter-spacing:0.32em; font-weight:500; text-transform:uppercase; margin-bottom:26px; }
.ujp-hero-wrap .eyebrow::before{ content:""; width:38px; height:1px; background: var(--gold); opacity:.8; }
.ujp-hero-wrap .hero h1{ font-family: var(--font-display); font-weight:600; font-size: clamp(38px, 4.2vw, 58px); line-height: 1.0; letter-spacing: -0.01em; margin-bottom: 26px; }
.ujp-hero-wrap .hero h1 .accent{ display:block; font-style: italic; font-weight:400; color: var(--gold-soft); }
.ujp-hero-wrap .hero p.lead{ font-size: 17px; line-height:1.75; color: var(--cream-dim); max-width: 460px; margin-bottom: 38px; }
.ujp-hero-wrap .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.ujp-hero-wrap a.btn,
.ujp-hero-wrap a.btn:link,
.ujp-hero-wrap a.btn:visited,
.ujp-hero-wrap a.btn:hover,
.ujp-hero-wrap a.btn:focus,
.ujp-hero-wrap a.btn:active{ text-decoration:none !important; }
.ujp-hero-wrap .btn{ display:inline-flex; align-items:center; gap:9px; padding: 15px 26px; border-radius: 10px; font-size:15px; font-weight:500; text-decoration:none; cursor:pointer; transition: transform .15s ease, background .2s ease, box-shadow .2s ease; }
.ujp-hero-wrap .btn i{ width:17px; height:17px; }
.ujp-hero-wrap a.btn-primary,
.ujp-hero-wrap a.btn-primary:link,
.ujp-hero-wrap a.btn-primary:visited,
.ujp-hero-wrap a.btn-primary:hover,
.ujp-hero-wrap a.btn-primary:focus,
.ujp-hero-wrap a.btn-primary:active{ color: var(--guindo-base) !important; }
.ujp-hero-wrap .btn-primary{ background: var(--cream); }
.ujp-hero-wrap .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.ujp-hero-wrap .lupi-zone{
    position: relative;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
    min-height: 560px;
  }
.ujp-hero-wrap .lupi-glow{
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    width: 440px; height: 440px; border-radius:50%;
    background: radial-gradient(circle, rgba(237,214,164,0.22) 0%, rgba(237,214,164,0) 68%);
    z-index:1; pointer-events:none;
  }
.ujp-hero-wrap .lupi-figure{
    position: relative; z-index:2;
    width: 100%; max-width: 680px;
    margin-top: 20px;
    display:flex; align-items:flex-end; justify-content:center;
    animation: lupi-float 5s ease-in-out infinite;
  }
@keyframes lupi-float{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-14px); }
  }
.ujp-hero-wrap .lupi-figure img{
    width: 100%; height: auto; display:block;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.45));
  }
.ujp-hero-wrap .lupi-shadow{
    position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width: 320px; height: 32px; border-radius:50%;
    background: radial-gradient(ellipse, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 70%);
    z-index:1;
    animation: lupi-shadow-pulse 5s ease-in-out infinite;
  }
@keyframes lupi-shadow-pulse{
    0%,100%{ transform: translateX(-50%) scale(1); opacity:.5; }
    50%{ transform: translateX(-50%) scale(0.86); opacity:.32; }
  }
.ujp-hero-wrap .lupi-placeholder{
    width: 320px; height: 420px; border-radius: 18px;
    border: 2px dashed rgba(237,214,164,0.45);
    background: rgba(237,214,164,0.05);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    text-align:center; padding: 24px; color: var(--gold-soft);
  }
.ujp-hero-wrap .lupi-placeholder i{ width:46px; height:46px; opacity:.6; }
.ujp-hero-wrap .lupi-placeholder b{ font-size:15px; font-weight:600; }
.ujp-hero-wrap .lupi-placeholder span{ font-size:12.5px; line-height:1.5; color: var(--cream-dim); max-width: 220px; }
.ujp-hero-wrap .lupi-figure.has-img .lupi-placeholder{ display:none; }
.ujp-hero-wrap .lupi-figure:not(.has-img) img{ display:none; }
.ujp-hero-wrap .lupi-figure:not(.has-img) ~ .lupi-shadow{ display:none; }
.ujp-hero-wrap a.lupi-badge,
.ujp-hero-wrap a.lupi-badge:link,
.ujp-hero-wrap a.lupi-badge:visited,
.ujp-hero-wrap a.lupi-badge:hover,
.ujp-hero-wrap a.lupi-badge:focus,
.ujp-hero-wrap a.lupi-badge:active{
    color: var(--cream) !important;
    text-decoration:none !important;
  }
.ujp-hero-wrap .lupi-badge{
    position:absolute; z-index:3; top: 16px; right: 6px;
    display:inline-flex; align-items:center; gap:8px;
    background: rgba(20,4,9,0.65); border:1px solid var(--line);
    font-size:12.5px; font-weight:500;
    padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(6px);
    cursor:pointer;
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
  }
.ujp-hero-wrap .lupi-badge i{ width:14px; height:14px; color: var(--gold) !important; }
.ujp-hero-wrap .lupi-badge .lupi-badge-arrow{ transition: transform .25s ease; opacity:.85; color: var(--cream) !important; }
.ujp-hero-wrap .lupi-badge:hover{
    border-color: var(--gold); background: rgba(20,4,9,0.8);
    transform: translateY(-2px);
  }
.ujp-hero-wrap .lupi-badge:hover i{ color: var(--gold) !important; }
.ujp-hero-wrap .lupi-badge:hover .lupi-badge-arrow{ color: var(--cream) !important; }
.ujp-hero-wrap .lupi-badge:hover .lupi-badge-arrow{ transform: translateX(3px); }
.ujp-hero-wrap .stats-bar{ position:relative; z-index:2; border-top: 1px solid rgba(255,255,255,0.07); background: rgba(20,4,9,0.35); }
.ujp-hero-wrap .stats-bar-inner{ max-width:1280px; margin:0 auto; padding:26px 32px; display:flex; align-items:center; justify-content:center; gap:64px; flex-wrap:wrap; }
.ujp-hero-wrap .stat-h{ display:flex; align-items:center; gap:16px; }
.ujp-hero-wrap .stat-h .num{ font-family: var(--font-display); font-weight:600; font-size:42px; line-height:1; color: var(--cream); letter-spacing:-0.01em; }
.ujp-hero-wrap .stat-h .num .plus{ color: var(--gold); }
.ujp-hero-wrap .stat-h .label{ font-size:clamp(15px,1rem,16px); line-height:1.4; color: var(--cream-dim); max-width:185px; }
.ujp-hero-wrap .stat-h-sep{ width:1px; height:46px; background: var(--line); }
@media (max-width: 680px){
.ujp-hero-wrap .stats-bar-inner{ gap:30px; }
.ujp-hero-wrap .stat-h-sep{ display:none; }
}
@media (max-width: 920px){
.ujp-hero-wrap .hero-inner{ grid-template-columns: 1fr; gap:32px; }
.ujp-hero-wrap .lupi-zone{ min-height: 420px; order: -1; padding-top: 56px; }
.ujp-hero-wrap .nav-links{ display:none; }
.ujp-hero-wrap .lupi-badge{
      top: 8px; right: auto; left: 50%; transform: translateX(-50%);
    }
.ujp-hero-wrap .lupi-badge:hover{ transform: translateX(-50%) translateY(-2px); }
.ujp-hero-wrap .lupi-figure{ max-width: 420px; margin-top: 0; }
.ujp-hero-wrap .lupi-glow{ width: 340px; height: 340px; }
}

/* ========== BOTONERA ========== */

    .botonera-ujp {
      --ujp-wine: #6B1B31;
      --ujp-magenta: #BD2453;
      --ujp-magenta-dark: #8a1d3f;
      --ujp-magenta-light: #e84a7a;
    }

    .botonera-ujp,
    .botonera-ujp *,
    .botonera-ujp *::before,
    .botonera-ujp *::after { margin: 0; padding: 0; box-sizing: border-box; }

    .botonera-ujp { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
    .botonera-ujp .container { max-width: 1200px; margin: 0 auto; overflow: visible !important; }

    .botonera-ujp .botonera {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: 15px 20px; padding: 1rem 0; overflow: visible !important;
    }

    .botonera-ujp .boton {
      display: flex; flex-direction: column; align-items: center;
      text-decoration: none; padding: 10px 8px; cursor: pointer;
      transition: transform 0.3s ease;
    }
    .botonera-ujp .boton:hover { transform: translateY(-6px); }

    /* CÍRCULO — reposo claro premium */
    .botonera-ujp .boton__icono {
      position: relative; width: 74px; height: 74px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 13px; overflow: visible;
      background: radial-gradient(125% 95% at 30% 18%, #ffffff 0%, #fdf4f6 55%, #f7e6ec 100%);
      border: 1.5px solid rgba(189,36,83,0.28);
      box-shadow: 0 6px 18px rgba(189,36,83,0.12), inset 0 1px 2px rgba(255,255,255,0.95);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* reflejo vidrioso superior */
    .botonera-ujp .boton__icono::before {
      content: ''; position: absolute; top: 7%; left: 16%;
      width: 42%; height: 30%;
      background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, transparent 100%);
      border-radius: 50%; z-index: 2; transition: opacity 0.3s ease;
    }

    /* anillo pulsante */
    .botonera-ujp .boton__icono::after {
      content: ''; position: absolute; inset: -6px; border-radius: 50%;
      border: 2px solid var(--ujp-magenta);
      opacity: 0; transform: scale(0.8); transition: all 0.4s ease;
    }

    /* ÍCONO Lucide — magenta forzado (blindaje vs azul de WP) */
    .botonera-ujp .boton__icono i[data-lucide],
    .botonera-ujp .boton__icono svg {
      width: 31px; height: 31px; position: relative; z-index: 3;
      color: var(--ujp-magenta) !important;
      stroke: var(--ujp-magenta) !important;
      stroke-width: 1.85; transition: all 0.3s ease;
    }

    /* HOVER — el círculo se llena de magenta, el ícono pasa a blanco */
    .botonera-ujp .boton:hover .boton__icono {
      background: linear-gradient(135deg, #BD2453 0%, #8a1d3f 100%);
      border-color: transparent;
      box-shadow: 0 14px 34px rgba(189,36,83,0.45), 0 0 38px rgba(189,36,83,0.30);
      transform: scale(1.1) rotate(4deg);
    }
    .botonera-ujp .boton:hover .boton__icono::before {
      background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, transparent 100%);
    }
    .botonera-ujp .boton:hover .boton__icono::after {
      opacity: 0.65; transform: scale(1); animation: ujp-pulse-ring 1.5s ease-out infinite;
    }
    .botonera-ujp .boton:hover .boton__icono i[data-lucide],
    .botonera-ujp .boton:hover .boton__icono svg {
      color: #ffffff !important; stroke: #ffffff !important;
      transform: scale(1.08);
      filter: drop-shadow(0 0 8px rgba(255,255,255,0.55));
    }
    .botonera-ujp .boton:hover .boton__icono svg * {
      color: #ffffff !important; stroke: #ffffff !important;
    }

    @keyframes ujp-pulse-ring {
      0% { transform: scale(1); opacity: 0.65; }
      100% { transform: scale(1.5); opacity: 0; }
    }

    /* badge enlace externo */
    .botonera-ujp .boton[target="_blank"] .boton__icono .external-badge {
      position: absolute; top: -3px; right: -3px;
      width: 20px; height: 20px;
      background: var(--ujp-magenta); color: #fff;
      font-size: 10px; font-weight: 700; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      opacity: 0; transform: scale(0.5); transition: all 0.3s ease; z-index: 5;
    }
    .botonera-ujp .boton[target="_blank"]:hover .boton__icono .external-badge {
      opacity: 1; transform: scale(1); background: #fff; color: var(--ujp-magenta);
    }

    /* TÍTULO */
    .botonera-ujp .boton__titulo {
      font-size: 13px; font-weight: 600; color: var(--ujp-wine);
      text-align: center; line-height: 1.3; max-width: 110px;
      transition: color 0.3s ease;
    }
    /* blindaje del título contra el azul de enlace de WP */
    .botonera-ujp a.boton,
    .botonera-ujp a.boton:link,
    .botonera-ujp a.boton:visited,
    .botonera-ujp a.boton:hover,
    .botonera-ujp a.boton:focus,
    .botonera-ujp a.boton:active { text-decoration: none !important; }
    .botonera-ujp a.boton .boton__titulo { color: var(--ujp-wine) !important; }
    .botonera-ujp .boton:hover .boton__titulo { color: var(--ujp-magenta) !important; }

    /* ===== DROPDOWN BECAS ===== */
    .botonera-ujp .boton-dropdown {
      position: relative; display: flex; flex-direction: column; align-items: center;
      padding: 10px 8px; cursor: pointer; overflow: visible !important;
      z-index: 100; transition: transform 0.3s ease;
    }
    .botonera-ujp .boton-dropdown:hover { transform: translateY(-6px); }
    .botonera-ujp .boton-dropdown:hover .boton__icono {
      background: linear-gradient(135deg, #BD2453 0%, #8a1d3f 100%);
      border-color: transparent;
      box-shadow: 0 14px 34px rgba(189,36,83,0.45), 0 0 38px rgba(189,36,83,0.30);
      transform: scale(1.1) rotate(4deg);
    }
    .botonera-ujp .boton-dropdown:hover .boton__icono::before {
      background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, transparent 100%);
    }
    .botonera-ujp .boton-dropdown:hover .boton__icono::after {
      opacity: 0.65; transform: scale(1); animation: ujp-pulse-ring 1.5s ease-out infinite;
    }
    .botonera-ujp .boton-dropdown:hover .boton__icono i[data-lucide],
    .botonera-ujp .boton-dropdown:hover .boton__icono svg {
      color: #ffffff !important; stroke: #ffffff !important; transform: scale(1.08);
      filter: drop-shadow(0 0 8px rgba(255,255,255,0.55));
    }
    .botonera-ujp .boton-dropdown:hover .boton__icono svg * {
      color: #ffffff !important; stroke: #ffffff !important;
    }
    .botonera-ujp .boton-dropdown:hover .boton__titulo { color: var(--ujp-magenta) !important; }

    .botonera-ujp .boton-dropdown .boton__titulo { color: var(--ujp-wine); }
    .botonera-ujp .boton-dropdown .boton__titulo::after {
      content: ' \25BE'; font-size: 10px; opacity: 0.6;
    }

    .botonera-ujp .dropdown-menu {
      position: absolute; top: 100%; left: 50%;
      transform: translateX(-50%) translateY(-5px);
      background: #fff; border-radius: 12px;
      box-shadow: 0 10px 40px rgba(104,27,49,0.2), 0 2px 10px rgba(0,0,0,0.08);
      padding: 8px 0; min-width: 180px;
      opacity: 0; visibility: hidden;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      z-index: 9999; border: 1px solid rgba(189,36,83,0.1);
    }
    .botonera-ujp .dropdown-menu.open {
      opacity: 1; visibility: visible; transform: translateX(-50%) translateY(5px);
    }
    .botonera-ujp .dropdown-menu::before {
      content: ''; position: absolute; top: -7px; left: 50%;
      transform: translateX(-50%) rotate(45deg);
      width: 14px; height: 14px; background: #fff;
      border-top: 1px solid rgba(189,36,83,0.1);
      border-left: 1px solid rgba(189,36,83,0.1);
    }
    .botonera-ujp .dropdown-menu a {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 18px; text-decoration: none;
      color: var(--ujp-wine); font-size: 13px; font-weight: 500;
      transition: all 0.2s ease;
    }
    .botonera-ujp .dropdown-menu a:link,
    .botonera-ujp .dropdown-menu a:visited { color: var(--ujp-wine) !important; text-decoration: none !important; }
    .botonera-ujp .dropdown-menu a:hover {
      background: linear-gradient(90deg, rgba(189,36,83,0.08) 0%, transparent 100%);
      color: var(--ujp-magenta) !important;
    }
    .botonera-ujp .dropdown-menu a i[data-lucide],
    .botonera-ujp .dropdown-menu a svg {
      width: 16px; height: 16px; color: var(--ujp-magenta) !important;
      stroke: var(--ujp-magenta) !important; stroke-width: 1.9;
    }
    .botonera-ujp .dropdown-menu a + a { border-top: 1px solid rgba(189,36,83,0.08); }

    @media (hover: hover) and (pointer: fine) {
      .botonera-ujp .boton-dropdown:hover .dropdown-menu {
        opacity: 1; visibility: visible; transform: translateX(-50%) translateY(5px);
      }
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 767px) {
      .botonera-ujp .botonera { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 10px; padding: 1rem 0.5rem; }
      .botonera-ujp .boton, .botonera-ujp .boton-dropdown { width: 100%; padding: 8px 4px; }
      .botonera-ujp .boton__icono { width: 64px; height: 64px; margin-bottom: 10px; }
      .botonera-ujp .boton__icono i[data-lucide], .botonera-ujp .boton__icono svg { width: 27px; height: 27px; }
      .botonera-ujp .boton__titulo { font-size: 11px; max-width: 90px; }
      .botonera-ujp .dropdown-menu { min-width: 160px; }
    }
    @media (max-width: 374px) {
      .botonera-ujp .boton__icono { width: 56px; height: 56px; }
      .botonera-ujp .boton__icono i[data-lucide], .botonera-ujp .boton__icono svg { width: 23px; height: 23px; }
      .botonera-ujp .boton__titulo { font-size: 10px; }
    }
    @media (min-width: 768px) and (max-width: 1023px) {
      .botonera-ujp .botonera { display: grid; grid-template-columns: repeat(5, 1fr); gap: 25px 15px; }
      .botonera-ujp .boton__icono { width: 68px; height: 68px; }
      .botonera-ujp .boton__icono i[data-lucide], .botonera-ujp .boton__icono svg { width: 28px; height: 28px; }
    }
    @media (min-width: 1024px) {
      .botonera-ujp .botonera { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 10px; }
      .botonera-ujp .boton, .botonera-ujp .boton-dropdown { flex: 1; max-width: 120px; min-width: 90px; }
      .botonera-ujp .boton__icono { width: 74px; height: 74px; }
      .botonera-ujp .boton__titulo { font-size: 12px; max-width: 110px; }
    }
    @media (min-width: 1280px) {
      .botonera-ujp .botonera { gap: 20px; }
      .botonera-ujp .boton, .botonera-ujp .boton-dropdown { max-width: 130px; }
      .botonera-ujp .boton__icono { width: 78px; height: 78px; }
      .botonera-ujp .boton__icono i[data-lucide], .botonera-ujp .boton__icono svg { width: 33px; height: 33px; }
      .botonera-ujp .boton__titulo { font-size: 13px; }
    }

    @media (hover: none) and (pointer: coarse) {
      .botonera-ujp .boton:active, .botonera-ujp .boton-dropdown:active { transform: scale(0.95); }
      .botonera-ujp .boton:active .boton__icono {
        background: linear-gradient(135deg, #BD2453 0%, #8a1d3f 100%); border-color: transparent;
      }
      .botonera-ujp .boton:active .boton__icono i[data-lucide],
      .botonera-ujp .boton:active .boton__icono svg { color:#fff !important; stroke:#fff !important; }
      .botonera-ujp .boton:active .boton__titulo { color: var(--ujp-magenta) !important; }
    }

    .botonera-ujp .boton:focus-visible,
    .botonera-ujp .boton-dropdown:focus-visible {
      outline: 3px solid var(--ujp-magenta); outline-offset: 4px; border-radius: 12px;
    }

    @media (prefers-reduced-motion: reduce) {
      .botonera-ujp *, .botonera-ujp *::before, .botonera-ujp *::after {
        animation-duration: 0.01ms !important; transition-duration: 0.15s !important;
      }
    }
  
/* ========== OFERTA ========== */

    /* google font import removido (viene del child) */

    .oa-grid-embed{
      --borgona:#5E1626; --radius:24px;
      --ease:cubic-bezier(.22,.61,.36,1);
      --shadow:0 20px 44px -18px rgba(46,8,28,.42), 0 4px 12px -8px rgba(46,8,28,.30);
      --shadow-hover:0 36px 70px -22px rgba(46,8,28,.54), 0 6px 16px -8px rgba(46,8,28,.36);
      --font:"Amelia Basis","Inter",-apple-system,sans-serif;
      font-family:var(--font);
      display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
      max-width:1400px; margin:0 auto;
    }
    @media (max-width:1024px){ .oa-grid-embed{ grid-template-columns:repeat(2,1fr); gap:22px; } }

    /* ===== Móvil: carrusel horizontal con scroll-snap (tipo Apple) ===== */
    @media (max-width:680px){
      .oa-grid-embed{
        display:flex;
        grid-template-columns:none;
        gap:16px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;            /* Firefox */
        padding:4px 20px 8px;            /* aire lateral + espacio para la sombra */
        margin-left:-20px; margin-right:-20px;  /* full-bleed dentro del contenedor */
        scroll-padding-left:20px;
      }
      .oa-grid-embed::-webkit-scrollbar{ display:none; }   /* WebKit */
      .oa-grid-embed .oa-card{
        flex:0 0 78%;                    /* ~1.2 cards visibles → invita a deslizar */
        scroll-snap-align:start;
        min-height:420px;
      }
    }

    .oa-grid-embed .oa-card{
      position:relative; display:flex; flex-direction:column; justify-content:space-between;
      min-height:462px; padding:30px; border-radius:var(--radius);
      color:#fff; text-decoration:none; overflow:hidden; isolation:isolate;
      box-shadow:var(--shadow);
      transition:transform .5s var(--ease), box-shadow .5s var(--ease);
    }
    .oa-grid-embed .oa-photo{
      position:absolute; inset:0; z-index:-2;
      background-size:cover; background-position:center;
      transform:scale(1.001); transition:transform .8s var(--ease);
    }
    .oa-grid-embed .oa-card::before{
      content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
      background:
        linear-gradient(to top, rgba(26,5,16,.90) 0%, rgba(26,5,16,.42) 38%, rgba(26,5,16,.12) 70%, rgba(26,5,16,.05) 100%),
        linear-gradient(rgba(74,8,38,.14), rgba(74,8,38,.14));
    }
    .oa-grid-embed .oa-card::after{
      content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
    }
    .oa-grid-embed .oa-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-hover); }
    .oa-grid-embed .oa-card:hover .oa-photo{ transform:scale(1.055); }
    .oa-grid-embed .oa-card:focus-visible{ outline:2px solid var(--borgona); outline-offset:3px; }

    /* ícono — sello frosted glass tipo Apple, más visible sobre la foto */
    .oa-grid-embed .oa-icon{
      width:58px; height:58px; display:flex; align-items:center; justify-content:center;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.38);
      background:rgba(255,255,255,.12);
      backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
      box-shadow:0 4px 18px -6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
    }
    .oa-grid-embed .oa-icon svg{ width:28px; height:28px; stroke:#fff; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

    .oa-grid-embed .oa-name{
      font-weight:600; font-size:26px; line-height:1.16; letter-spacing:-0.01em;
      text-shadow:0 1px 12px rgba(0,0,0,.25); color:#fff; margin:0;
    }
    .oa-grid-embed .oa-desc{
      margin:8px 0 0; font-size:13.5px; font-weight:400; line-height:1.5; color:rgba(255,255,255,.74);
    }
    .oa-grid-embed .oa-cta{
      margin-top:20px; display:inline-flex; align-items:center; gap:8px;
      font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
      color:rgba(255,255,255,.82); transition:color .4s var(--ease);
    }
    .oa-grid-embed .oa-cta svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease); }
    .oa-grid-embed .oa-card:hover .oa-cta{ color:#fff; }
    .oa-grid-embed .oa-card:hover .oa-cta svg{ transform:translateX(5px); }

    /* reveal en carga */
    .oa-grid-embed .oa-card{ opacity:0; transform:translateY(18px); animation:oaEmbedUp .7s var(--ease) forwards; }
    .oa-grid-embed .oa-card:nth-child(1){ animation-delay:.06s; }
    .oa-grid-embed .oa-card:nth-child(2){ animation-delay:.14s; }
    .oa-grid-embed .oa-card:nth-child(3){ animation-delay:.22s; }
    .oa-grid-embed .oa-card:nth-child(4){ animation-delay:.30s; }
    @keyframes oaEmbedUp{ to{ opacity:1; transform:translateY(0); } }

    @media (prefers-reduced-motion:reduce){
      .oa-grid-embed .oa-card{ animation:none; opacity:1; transform:none; transition:none; }
      .oa-grid-embed .oa-card:hover{ transform:none; }
      .oa-grid-embed .oa-photo,
      .oa-grid-embed .oa-cta svg{ transition:none; }
      .oa-grid-embed .oa-card:hover .oa-photo{ transform:scale(1.001); }
    }
  
/* ============================================================
   UJP home-staging · secciones intermedias (webproX)
   Estilo de las secciones que unen los bloques del sistema
   (Noticias, Valoraciones, Videos, intro UJP, IAJU, Inst. Hermanas).
   Consume tokens de sistema.css. Todo scopeado bajo .ujp-home.
   ============================================================ */

.ujp-home { font-family: var(--ujp-font-body); color: var(--ujp-ink); }

/* contenedor centrado para el contenido intermedio (los bloques traen su propio layout) */
.ujp-home .home-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
  text-align: center;
}
.ujp-home .home-section.tight { padding-top: 1.5rem; }

.ujp-home .home-title {
  font-family: var(--ujp-font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  font-weight: var(--ujp-fw-bold);
  color: var(--ujp-wine);
  margin: 0 0 1.2rem;
  line-height: 1.15;
}
.ujp-home .home-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin: .9rem auto 0;
  background: var(--ujp-gold);
  border-radius: 999px;
}

.ujp-home .home-text {
  max-width: 68ch;
  margin: 0 auto 1.6rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ujp-muted);
}
.ujp-home .home-text a { color: var(--ujp-magenta); text-decoration: underline; }
.ujp-home .home-text p { margin: 0 0 1rem; }
.ujp-home .home-text p:last-child { margin-bottom: 0; }

.ujp-home .home-divider {
  width: 100%;
  max-width: 1080px;
  height: 1px;
  margin: 0 auto;
  background: var(--ujp-line);
  border: 0;
}

.ujp-home .home-cta { margin-top: .4rem; }

/* imágenes de ancho contenido, centradas */
.ujp-home .home-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--ujp-radius);
}
.ujp-home .home-img-wrap { text-align: center; padding: 1rem 1.5rem; }

/* fila de logos (Instituciones Hermanas) */
.ujp-home .home-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 3.5rem;
  padding: 1rem 1.5rem 0;
}
.ujp-home .home-logos a { display: inline-flex; transition: transform .2s, opacity .2s; opacity: .9; }
.ujp-home .home-logos a:hover { transform: translateY(-3px); opacity: 1; }
.ujp-home .home-logos img { height: 84px; width: auto; }

/* wrapper de cada embed Elfsight: aire y centrado, sin tocar el widget */
.ujp-home .home-embed { max-width: 1300px; margin: 0 auto; padding: .5rem 1rem 2.5rem; }

/* espaciadores */
.ujp-home .home-spacer { height: 3rem; }
.ujp-home .home-spacer.lg { height: 4.5rem; }

@media (max-width: 560px) {
  .ujp-home .home-section { padding: 2.5rem 1.2rem; }
  .ujp-home .home-logos img { height: 60px; }
  .ujp-home .home-logos { gap: 1.8rem 2.2rem; }
}

/* ============================================================
   home-2col · secciones zigzag (imagen/texto o texto/galería lado a lado)
   Reales de la home: Videos [texto|galería] · UJP [imagen|texto] · IAJU [texto|imagen]
   ============================================================ */
.ujp-home .home-2col {
  max-width: 1320px; margin: 0 auto; padding: 3.5rem 1.5rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
.ujp-home .home-2col .col-text { text-align: left; }
.ujp-home .home-2col .home-title { text-align: left; }
.ujp-home .home-2col .home-title::after { margin-left: 0; margin-right: auto; }
.ujp-home .home-2col .home-text { margin-left: 0; margin-right: 0; text-align: left; max-width: none; }
.ujp-home .home-2col .home-cta { text-align: left; }
.ujp-home .home-2col .col-media img { width: 100%; height: auto; display: block; border-radius: var(--ujp-radius); }
.ujp-home .home-2col .col-media [class*="elfsight-app-"] { width: 100%; }
@media (max-width: 760px) {
  .ujp-home .home-2col { grid-template-columns: 1fr; gap: 1.6rem; padding: 2.5rem 1.2rem; text-align: center; }
  .ujp-home .home-2col .col-text, 
  .ujp-home .home-2col .home-title, 
  .ujp-home .home-2col .home-text, 
  .ujp-home .home-2col .home-cta { text-align: center; }
  .ujp-home .home-2col .home-title::after { margin-left: auto; margin-right: auto; }
  /* en mobile: la imagen/galería primero, luego el texto (excepto UJP que ya va imagen-arriba) */
  .ujp-home .home-2col.media-first .col-media { order: -1; }
}

/* ---- (feedback Augus) quitar la línea dorada debajo de los títulos ---- */
.ujp-home .home-title::after { display: none !important; }

/* ---- (feedback Augus) AUSJAL: SOLO el botón de abajo = borgoña del sistema ---- */
.ujp-home .ujpaus-vermas {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--ujp-wine, #5E1626) !important;
  color: #fff !important;
  border: 1px solid var(--ujp-wine-deep, #420F1B) !important;
  border-radius: 999px !important;
  padding: .72rem 1.9rem !important;
  font-family: var(--ujp-font-body, "Inter", sans-serif) !important;
  font-style: normal !important;
  font-weight: 700 !important; font-size: .95rem !important; letter-spacing: .3px;
  text-decoration: none !important;
  box-shadow: 0 10px 26px -8px rgba(94,22,38,.5) !important;
  transition: transform .35s ease, box-shadow .6s ease, background .35s ease !important;
}
/* gloss superior tipo .ujp-btn-wine */
.ujp-home .ujpaus-vermas::before {
  content: ''; position: absolute; top: 1px; left: 3px; right: 3px; height: 46%;
  border-radius: 999px 999px 50% 50%; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 70%, transparent);
}
.ujp-home .ujpaus-vermas:hover {
  background: #671A2D !important; transform: translateY(-2px);
  box-shadow: 0 14px 34px -8px rgba(94,22,38,.5), 0 0 22px 2px rgba(255,255,255,.4) !important;
}

/* el de arriba: link de texto plano (redundante) — sin botón */
.ujp-home .ujpaus-vermas-top {
  display: inline !important;
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important;
  color: #BD2453 !important; font-weight: 600 !important; font-size: .9rem !important; font-style: normal !important;
  text-decoration: underline !important;
}
.ujp-home .ujpaus-vermas-top:hover { color: #5E1626 !important; }

/* botón orbital del hero: aire entre ícono y texto */
.ujp-home .ujp-btn-orbit span { display: inline-flex; align-items: center; gap: .55rem; }
.ujp-home .ujp-btn-orbit svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   (feedback Augus) BANDAS · ritmo vertical consistente + fondos alternados
   para diferenciar/delinear secciones. Botón orbital con más aire.
   ============================================================ */
.ujp-home .home-band { padding: 4.75rem clamp(1rem, 4vw, 2rem); }
.ujp-home .home-band--tint { background: #FBF8F4; }          /* paper */
.ujp-home .home-band > .home-title { text-align: center; max-width: 1080px; margin: 0 auto 2.2rem; }
.ujp-home .home-band .home-embed { padding: 0 !important; margin: 0 auto; max-width: 1320px; }
.ujp-home .home-band > .home-2col { padding: 0; margin: 0 auto; }
.ujp-home .home-band > .home-logos { padding-top: 1rem; }
@media (max-width: 760px) { .ujp-home .home-band { padding: 3.25rem 1.2rem; } }

/* botón orbital del hero: más padding (aire alrededor del ícono + texto) */
.ujp-home .ujp-btn-orbit { padding: 21px 56px; }
.ujp-home .ujp-btn-orbit span { gap: .7rem; }

/* ============================================================
   (feedback Augus · QA mobile)
   ============================================================ */
/* safety anti-overflow horizontal + grid items que puedan encoger */
.ujp-home { overflow-x: clip; }
.ujp-home .home-2col { min-width: 0; }
.ujp-home .home-2col > * { min-width: 0; }                 /* clave: evita que la galería empuje el ancho */
.ujp-home .home-2col .home-title,
.ujp-home .home-2col .home-text { overflow-wrap: break-word; }
.ujp-home .home-2col .col-media,
.ujp-home .home-2col .col-media > * { max-width: 100%; }

/* Instituciones Hermanas en mobile: un logo por fila (más ordenado) */
@media (max-width: 600px) {
  .ujp-home .home-logos { flex-direction: column; gap: 2rem; }
  .ujp-home .home-logos img { height: 72px; }
}