/* R4 Hero CSS isolated from legacy PRO panels. Source: approved Hero R4 index.html. */
.r4-hero-wrap{
    --bg:#f6efe9;
    --hero:#fbf5ef;
    --cream:#fbf5ef;
    --nude:#f4e3d8;
    --blush:#e8c4c0;
    --dust:#d6aea7;
    --terracotta:#bb7c72;
    --wine:#8a1f4d;
    --wine-dark:#6f163d;
    --gold:#d8ab4e;
    --gold-soft:#ebd2a3;
    --text:#76585f;
    --line:#ebc8c3;
    --shadow:0 10px 28px rgba(123, 79, 74, .08), 0 4px 10px rgba(123,79,74,.05);
  
 width:100vw;position:relative;left:50%;margin-left:-50vw; box-sizing:border-box;}
@media(max-width:980px){.r4-hero-wrap{width:100vw;left:50%;margin-left:-50vw}}
/* full-bleed hero background */
  .r4-hero-wrap{
    position:relative;
    width:100%;
    overflow:hidden;
    background:
      radial-gradient(circle at 8% 8%, rgba(228,190,184,.9) 0 12%, transparent 12.2%),
      radial-gradient(circle at 88% 38%, rgba(239,211,205,.95) 0 15%, transparent 15.2%),
      radial-gradient(circle at 18% 82%, rgba(248,236,230,.95) 0 11%, transparent 11.2%),
      linear-gradient(180deg,#fcf6f0 0%, #f9f0ea 100%);
  }
  .r4-hero-wrap::before,
  .r4-hero-wrap::after{
    content:"";position:absolute;inset:auto auto 0 0;pointer-events:none;
  }
  .r4-hero-wrap::before{
    width:1400px;height:1400px;border:2px solid rgba(214,167,76,.8);border-radius:50%;
    left:-980px;top:-640px;opacity:.9;
  }
  .r4-hero-wrap::after{
    width:1200px;height:1200px;border:2px solid rgba(214,167,76,.6);border-radius:50%;
    right:-660px;top:-620px;opacity:.75;
  }
  .r4-soft-wave{
    position:absolute;left:0;right:0;bottom:-1px;height:140px;pointer-events:none;
    background:
      radial-gradient(120% 100% at 20% 100%, transparent 53%, rgba(233,199,196,.45) 53.4% 56%, transparent 56.3%),
      radial-gradient(100% 100% at 72% 100%, transparent 56%, rgba(228,190,184,.38) 56.2% 59%, transparent 59.2%),
      linear-gradient(180deg, transparent 0 58%, rgba(255,255,255,.55) 58% 100%);
  }
  .r4-shell{max-width:980px;margin:0 auto;padding:0 18px;position:relative;z-index:2}
  .r4-hero{padding:52px 0 36px; text-align:center; position:relative;}
  .r4-eyebrow{display:inline-block;padding:14px 28px;border-radius:999px;background:linear-gradient(180deg,#8f1f4f,#761740);color:white;font-size:20px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 0 rgba(152,112,103,.26), 0 6px 16px rgba(95,24,52,.18)}
  .r4-title{margin:28px auto 18px;line-height:.88;max-width:780px;font-family: Georgia, 'Times New Roman', serif;color:var(--wine-dark);font-weight:700;letter-spacing:-.03em;position:relative}
  .r4-title .r4-line1{display:block;font-size:clamp(54px,7vw,110px)}
  .r4-title .r4-line2{display:block;font-size:clamp(56px,7vw,114px);background:linear-gradient(180deg,#d8b56c,#b97e4e);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative}
  .r4-spark{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:2px solid rgba(214,167,76,.9);font-size:23px;color:#c79640;background:rgba(255,250,243,.85);vertical-align:top;margin-left:6px;transform:translateY(-12px)}
  .r4-leaf{position:absolute;left:34px;top:145px;width:122px;height:220px;opacity:.9}
  .r4-leaf svg{width:100%;height:100%}
  .r4-star{position:absolute;right:72px;top:150px;font-size:60px;color:#d9a64a;line-height:1;opacity:.9}
  .r4-subtitle{margin:0 auto;max-width:760px;font-size:clamp(28px,2.35vw,46px);line-height:1.24;color:#734b58;font-weight:700}
  .r4-metrics{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:34px auto 22px;max-width:760px}
  .r4-metric{display:inline-flex;align-items:center;justify-content:center;padding:15px 24px;border-radius:999px;background:rgba(255,250,247,.78);border:1.5px solid rgba(233,182,179,.9);box-shadow:0 3px 12px rgba(145,105,94,.05);font-size:28px;font-weight:700;color:#7b3c4d;min-width:205px}
  .r4-support{margin:8px auto 24px;max-width:760px;font-size:clamp(22px,1.8vw,32px);line-height:1.35;color:#875f68;font-weight:600}

  .r4-quick-start{position:relative;margin-top:26px;background:rgba(255,252,250,.82);backdrop-filter: blur(2px);border:1.5px solid rgba(231,193,188,.95);border-radius:36px;padding:36px 28px 28px;box-shadow:var(--shadow)}
  .r4-quick-start .r4-chip{display:inline-block;padding:14px 30px;border-radius:999px;background:linear-gradient(180deg,#8e1f4e,#781842);color:#fff;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:18px;box-shadow:0 5px 11px rgba(93,12,41,.07)}
  .r4-quick-start p{font-size:clamp(18px,1.55vw,30px);line-height:1.35;margin:18px 0 18px;color:#775862}
  .r4-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .r4-step{display:flex;align-items:center;gap:16px;min-height:76px;border:1.4px solid rgba(233,191,188,.96);border-radius:26px;background:rgba(255,255,255,.42);padding:18px 16px;font-weight:800;color:#8a1f4d;font-size:18px}
  .r4-num{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1.5px solid rgba(231,184,184,.95);background:rgba(255,255,255,.75);font-size:18px;color:#8a1f4d;flex:0 0 auto}

  .r4-section-spacer{max-width:980px;margin:0 auto;padding:30px 18px 80px}
  .r4-panel-placeholder{height:220px;border-radius:32px;background:linear-gradient(180deg,#fff8f5,#fff);border:1.4px solid rgba(232,199,191,.8)}

  @media (max-width: 980px){
    .r4-hero{padding-top:46px}
    .r4-leaf{left:10px;top:170px;width:96px;height:170px;opacity:.75}
    .r4-star{right:18px;top:160px;font-size:44px}
    .r4-metric{font-size:22px;min-width:190px;padding:14px 18px}
    .r4-support{font-size:20px}
  }
  @media (max-width: 760px){
    .r4-shell{padding:0 14px}
    .r4-hero{padding:38px 0 30px}
    .r4-eyebrow{padding:12px 22px;font-size:15px}
    .r4-title{margin-top:22px;margin-bottom:18px}
    .r4-title .r4-line1{font-size:76px}
    .r4-title .r4-line2{font-size:72px}
    .r4-spark{width:28px;height:28px;font-size:16px;transform:translateY(-8px)}
    .r4-subtitle{font-size:18px;max-width:360px}
    .r4-metrics{gap:12px;margin-top:24px}
    .r4-metric{font-size:14px;min-width:0;padding:12px 18px}
    .r4-support{font-size:15px;max-width:360px}
    .r4-quick-start{padding:26px 18px 20px;border-radius:28px;margin-top:18px}
    .r4-quick-start .r4-chip{font-size:14px;padding:12px 20px}
    .r4-quick-start p{font-size:17px;margin-top:12px}
    .r4-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .r4-step{min-height:80px;border-radius:22px;padding:12px 12px;font-size:14px}
    .r4-num{width:32px;height:32px;font-size:14px}
    .r4-leaf{width:80px;height:142px;left:6px;top:160px}
    .r4-star{right:16px;top:140px;font-size:36px}
    .r4-hero-wrap::before{left:-1040px;top:-700px}
    .r4-hero-wrap::after{right:-760px;top:-650px}
  }
  @media (max-width: 420px){
    .r4-title .r4-line1{font-size:65px}
    .r4-title .r4-line2{font-size:62px}
    .r4-metrics{max-width:330px}
    .r4-metric{font-size:13px;padding:11px 16px}
    .r4-step{font-size:13px}
  }

.r4-hero-wrap .r4-step{font-family:inherit;cursor:pointer;text-align:left;}
.r4-hero-wrap .r4-step:focus-visible{outline:3px solid #741536;outline-offset:3px;}

/*
 * HERO COMPACTO R4 · RECONSTRUCCION LIMITADA EN COPIA INDEPENDIENTE · 24SEP2026
 * Referencias: CSS MINI W34 (consulta), capturas reales aprobadas a 390/980/1440,
 * y captura final aprobada del ultimo boton de situaciones centrado.
 * Los archivos fuente exactos de la copia anterior no estaban disponibles:
 * estas reglas son una reconstruccion, NO una recuperacion byte a byte.
 * SOLO CSS: el encabezado y su aria-label siguen en app.js, pendiente de la fase
 * de integracion expresamente autorizada; no se ocultan ni cambian desde CSS.
 */

/* El Hero ocupa la anchura REAL del contenedor PRO: no desbordarlo 100vw. */
.r4-hero-wrap{
  width:100%;left:auto;margin-left:0;right:auto;isolation:isolate;
}
/* Curvas doradas conservadas en los bordes, fuera de las zonas de lectura. */
.r4-hero-wrap::before{
  width:1400px;height:1400px;left:-1300px;top:-1000px;
  opacity:.36;z-index:0;
}
.r4-hero-wrap::after{
  width:1300px;height:1300px;left:auto;right:-1200px;top:-1020px;
  opacity:.36;z-index:0;
}
.r4-hero-wrap .r4-soft-wave{z-index:0;height:72px;background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.55) 100%)}
.r4-hero-wrap .r4-shell{position:relative;z-index:1}
.r4-hero-wrap .r4-hero{padding:34px 0 12px}
.r4-hero-wrap .r4-eyebrow{padding:10px 20px;font-size:16px}
.r4-hero-wrap .r4-title{margin:22px auto 15px;max-width:100%;line-height:.94}
.r4-hero-wrap .r4-title .r4-line1{font-size:clamp(46px,5.3vw,76px)}
.r4-hero-wrap .r4-title .r4-line2{font-size:clamp(54px,5.9vw,84px)}
.r4-hero-wrap .r4-spark{width:31px;height:31px;font-size:17px;transform:translateY(0px)}
.r4-hero-wrap .r4-leaf{left:-5px;top:116px;width:90px;height:158px;opacity:.78;pointer-events:none}
.r4-hero-wrap .r4-star{right:20px;top:113px;font-size:28px;pointer-events:none}
.r4-hero-wrap .r4-subtitle{
  max-width:740px;font-size:clamp(19px,2.1vw,23px);line-height:1.3;
}
.r4-hero-wrap .r4-metrics{gap:9px;margin:22px auto 11px;max-width:740px}
.r4-hero-wrap .r4-metric{
  min-width:0;padding:10px 16px;font-size:15px;line-height:1.1;
}
.r4-hero-wrap .r4-support{
  max-width:740px;margin:10px auto 17px;font-size:16px;line-height:1.32;
}

/* Cuatro botones reales: dos columnas y dos filas, como en la propuesta. */
.r4-hero-wrap .r4-quick-start{
  margin-top:12px;padding:22px 22px 22px;border-radius:28px;
}
.r4-hero-wrap .r4-quick-start .r4-chip{
  padding:11px 20px;font-size:14px;
}
.r4-hero-wrap .r4-quick-start p{
  margin:12px 0 15px;font-size:16px;line-height:1.35;
}
.r4-hero-wrap .r4-steps{
  grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
.r4-hero-wrap .r4-step{
  min-width:0;min-height:56px;padding:10px 13px;gap:10px;
  border-radius:19px;font-size:14px;line-height:1.16;
}
.r4-hero-wrap .r4-step span:last-child{min-width:0}
.r4-hero-wrap .r4-num{
  width:30px;height:30px;flex:0 0 30px;font-size:14px;
}

/* Evitar que el bloque de situaciones monte sobre los cuatro pasos. */
.r4-hero-wrap + .shell > .stack{margin-top:22px}

/* Dos columnas en movil; tres solo cuando el ancho permite leer cada boton. */
.r4-hero-wrap + .shell > .stack > #needs .needs-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin-top:16px;
}
.r4-hero-wrap + .shell > .stack > #needs .need-card{
  min-width:0;min-height:51px;padding:10px 12px;gap:7px;
  border-radius:16px;font-size:13px;line-height:1.17;
}
.r4-hero-wrap + .shell > .stack > #needs .need-card > span:first-child{
  min-width:0;overflow-wrap:normal;
}
.r4-hero-wrap + .shell > .stack > #needs .need-card .arrow{
  width:26px;height:26px;flex:0 0 26px;
}

/* Ocho accesos en cuatro filas; conservan titulo y descripcion. */
.r4-hero-wrap + .shell > .stack > #shortcuts .quick-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin-top:16px;
}
.r4-hero-wrap + .shell > .stack > #shortcuts .quick-grid .nav-card{
  min-width:0;min-height:78px;padding:11px 12px;gap:9px;
  align-items:center;border-radius:16px;font-size:14px;line-height:1.22;
}
.r4-hero-wrap + .shell > .stack > #shortcuts .quick-grid .nav-card > span:first-child{
  min-width:0;
}
.r4-hero-wrap + .shell > .stack > #shortcuts .quick-grid .nav-card small{
  display:block;margin-top:6px;font-size:12px;line-height:1.26;
}
.r4-hero-wrap + .shell > .stack > #shortcuts .quick-grid .arrow{
  width:26px;height:26px;flex:0 0 26px;
}

@media(min-width:768px){
  .r4-hero-wrap + .shell > .stack > #needs .needs-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .r4-hero-wrap .r4-hero{padding:39px 0 17px}
  .r4-hero-wrap .r4-eyebrow{padding:10px 17px;font-size:13px}
  .r4-hero-wrap .r4-title{margin:21px auto 17px;line-height:.96}
  .r4-hero-wrap .r4-title .r4-line1{font-size:clamp(37px,9.8vw,51px)}
  .r4-hero-wrap .r4-title .r4-line2{font-size:clamp(56px,14.6vw,74px)}
  .r4-hero-wrap .r4-spark{width:27px;height:27px;font-size:15px;transform:translateY(0px)}
  .r4-hero-wrap .r4-subtitle{max-width:360px;font-size:17px;line-height:1.33}
  .r4-hero-wrap .r4-metrics{max-width:350px;gap:8px;margin:22px auto 12px}
  .r4-hero-wrap .r4-metric{padding:10px 12px;font-size:12px}
  .r4-hero-wrap .r4-support{max-width:350px;margin:10px auto 17px;font-size:14px}
  .r4-hero-wrap .r4-leaf{left:-28px;top:124px;width:76px;height:140px;opacity:.72}
  .r4-hero-wrap .r4-star{right:8px;top:98px;font-size:22px}
  .r4-hero-wrap .r4-quick-start{
    margin-top:4px;padding:18px 15px 18px;border-radius:27px;
  }
  .r4-hero-wrap .r4-quick-start .r4-chip{
    padding:10px 16px;font-size:12px;
  }
  .r4-hero-wrap .r4-quick-start p{
    margin:12px 0 14px;font-size:14px;line-height:1.45;
  }
  .r4-hero-wrap .r4-steps{gap:9px}
  .r4-hero-wrap .r4-step{
    min-height:65px;padding:10px 8px;gap:8px;
    border-radius:17px;font-size:12px;line-height:1.16;
  }
  .r4-hero-wrap .r4-num{
    width:27px;height:27px;flex:0 0 27px;font-size:12px;
  }
  .r4-hero-wrap + .shell > .stack{margin-top:23px}
  .r4-hero-wrap + .shell > .stack > #needs .needs-grid,
  .r4-hero-wrap + .shell > .stack > #shortcuts .quick-grid{gap:9px}
  .r4-hero-wrap + .shell > .stack > #needs .need-card{
    min-height:50px;padding:9px 10px;gap:6px;font-size:12px;
  }
  .r4-hero-wrap + .shell > .stack > #needs .need-card .arrow,
  .r4-hero-wrap + .shell > .stack > #shortcuts .quick-grid .arrow{
    width:24px;height:24px;flex:0 0 24px;
  }
  .r4-hero-wrap + .shell > .stack > #shortcuts .quick-grid .nav-card{
    min-height:108px;padding:11px 9px;gap:7px;
    align-items:flex-start;font-size:12px;line-height:1.2;
  }
  .r4-hero-wrap + .shell > .stack > #shortcuts .quick-grid .nav-card small{
    margin-top:6px;font-size:11px;line-height:1.3;
  }
}

@media(max-width:420px){
  .r4-hero-wrap .r4-shell{padding:0 14px}
  .r4-hero-wrap .r4-title .r4-line1{font-size:39px}
  .r4-hero-wrap .r4-title .r4-line2{font-size:62px}
  .r4-hero-wrap .r4-metrics{max-width:330px}
  .r4-hero-wrap .r4-metric{padding:9px 11px;font-size:12px}
  .r4-hero-wrap .r4-step{font-size:11.7px}
}

/* MT02 · Ajustes finales autorizados: fondo difuminado SOLO escritorio. */
@media (min-width: 981px){
  .r4-hero-wrap{
    background:
      radial-gradient(ellipse 520px 510px at -7% 6%, rgba(224,174,170,.32) 0%, rgba(237,204,196,.22) 41%, rgba(248,230,220,.08) 67%, transparent 83%),
      radial-gradient(ellipse 600px 560px at 109% 57%, rgba(222,173,174,.32) 0%, rgba(235,200,196,.22) 44%, rgba(247,227,218,.08) 70%, transparent 85%),
      radial-gradient(ellipse 450px 285px at 12% 101%, rgba(238,205,201,.23) 0%, rgba(248,233,225,.08) 58%, transparent 79%),
      radial-gradient(ellipse 460px 340px at 78% -8%, rgba(247,223,210,.22) 0%, transparent 78%),
      linear-gradient(180deg,#fcf6f0 0%,#f9f0ea 100%);
  }
}