
:root{
  --home-bg:#f2f1ec;
  --home-bg-2:#ecebe5;
  --home-text:#171b1f;
  --home-muted:#626a70;
  --home-orange:#f15a24;
}

.home-hero-refresh,
.areas-section--light{
  background:linear-gradient(180deg,var(--home-bg) 0%,var(--home-bg-2) 100%) !important;
}

/* HERO */
.home-hero-refresh{
  position:relative;
  overflow:hidden;
  min-height:300px;
  padding-top:68px;
  color:var(--home-text);
}
.home-hero-refresh__inner{
  position:relative;
  z-index:4;
  min-height:232px;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px 0 24px;
}
.home-hero-refresh__content{
  width:min(100%,860px);
  margin:0 auto;
  text-align:center;
}
.home-hero-refresh__logo{
  display:block;
  width:min(350px,30vw);
  height:auto;
  margin:0 auto 15px;
}
.home-hero-refresh h1{
  max-width:820px;
  margin:0 auto;
  color:var(--home-text);
  font-size:clamp(2.35rem,3.05vw,3.8rem);
  line-height:.96;
  letter-spacing:-.05em;
}
.home-hero-refresh__lead{
  max-width:700px;
  margin:12px auto 0;
  color:var(--home-muted);
  font-size:.97rem;
  line-height:1.58;
}

/* ELECTRIC BACKGROUND — fast subtle current, no moving circles */
.electric-field{
  position:absolute;
  z-index:1;
  width:min(33vw,520px);
  height:170px;
  pointer-events:none;
  opacity:.78;
}
.electric-field--left{left:0;top:102px}
.electric-field--right{right:0;top:135px}

.electric-path{
  position:absolute;
  display:block;
  height:2px;
  background:linear-gradient(90deg,
    rgba(241,90,36,0) 0%,
    rgba(241,90,36,.18) 18%,
    rgba(241,90,36,.42) 50%,
    rgba(241,90,36,.12) 78%,
    rgba(241,90,36,0) 100%);
  border-radius:999px;
  transform-origin:left center;
}
.electric-path::after{
  content:"";
  position:absolute;
  width:1px;
  background:rgba(241,90,36,.28);
}
.electric-path--l1{left:-6%;top:18px;width:72%}
.electric-path--l1::after{right:7%;top:0;height:42px}
.electric-path--l2{left:8%;top:78px;width:54%;transform:rotate(-1.2deg);opacity:.72}
.electric-path--l2::after{left:22%;top:-32px;height:32px}
.electric-path--l3{left:0;top:132px;width:42%;opacity:.45}

.electric-path--r1{right:-6%;top:18px;width:72%;transform-origin:right center}
.electric-path--r1::after{left:7%;top:0;height:42px}
.electric-path--r2{right:8%;top:78px;width:54%;transform:rotate(1.2deg);opacity:.72}
.electric-path--r2::after{right:22%;top:-32px;height:32px}
.electric-path--r3{right:0;top:132px;width:42%;opacity:.45}

/* flowing current appears as bright streaks running over the traces */
.electric-flow{
  position:absolute;
  height:2px;
  width:72px;
  border-radius:999px;
  background:linear-gradient(90deg,
    rgba(255,114,59,0) 0%,
    rgba(255,114,59,.25) 22%,
    rgba(255,142,96,.95) 50%,
    rgba(255,114,59,.25) 78%,
    rgba(255,114,59,0) 100%);
  box-shadow:0 0 8px rgba(255,106,46,.34);
  filter:blur(.1px);
}
.electric-flow--l1{left:-90px;top:18px;animation:flowL1 3.2s linear infinite}
.electric-flow--l2{left:-120px;top:78px;animation:flowL2 4.1s linear infinite .7s}
.electric-flow--r1{right:-90px;top:18px;animation:flowR1 3.5s linear infinite .3s}
.electric-flow--r2{right:-110px;top:78px;animation:flowR2 4.4s linear infinite 1.1s}

@keyframes flowL1{
  0%{transform:translateX(0);opacity:0}
  10%{opacity:.8}
  75%{transform:translateX(30vw);opacity:.75}
  100%{transform:translateX(34vw);opacity:0}
}
@keyframes flowL2{
  0%{transform:translateX(0);opacity:0}
  12%{opacity:.55}
  72%{transform:translateX(24vw);opacity:.55}
  100%{transform:translateX(28vw);opacity:0}
}
@keyframes flowR1{
  0%{transform:translateX(0);opacity:0}
  10%{opacity:.8}
  75%{transform:translateX(-30vw);opacity:.75}
  100%{transform:translateX(-34vw);opacity:0}
}
@keyframes flowR2{
  0%{transform:translateX(0);opacity:0}
  12%{opacity:.55}
  72%{transform:translateX(-24vw);opacity:.55}
  100%{transform:translateX(-28vw);opacity:0}
}

/* MAIN CARDS — flexible, never force crop */
.areas-section--light{
  padding:10px 0 20px !important;
}
.areas-section--light .areas-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
}
.areas-section--light .area-card{
  height:auto !important;
  min-height:clamp(410px,47vh,535px) !important;
  max-height:none !important;
  border:1px solid rgba(17,22,26,.11);
  box-shadow:0 12px 30px rgba(17,22,26,.08);
}

/* Tablet */
@media(min-width:621px) and (max-width:900px){
  .home-hero-refresh{min-height:370px}
  .home-hero-refresh__inner{min-height:302px;padding-top:30px}
  .home-hero-refresh__logo{width:min(330px,52vw)}
  .electric-field{opacity:.42}
  .areas-section--light .areas-grid{grid-template-columns:1fr !important}
  .areas-section--light .area-card{min-height:500px !important}
}

/* Mobile: simple first screen, cards begin already within/just after first viewport */
@media(max-width:620px){
  .home-hero-refresh{
    min-height:auto;
    padding-top:64px;
  }
  .home-hero-refresh__inner{
    min-height:0;
    padding:34px 0 28px;
  }
  .home-hero-refresh__logo{
    width:min(232px,66vw);
    margin-bottom:20px;
  }
  .home-hero-refresh h1{
    max-width:96%;
    font-size:clamp(2.05rem,9.8vw,2.8rem);
    line-height:.98;
  }
  .home-hero-refresh__lead{
    max-width:94%;
    margin-top:13px;
    font-size:.94rem;
    line-height:1.52;
  }

  /* Circuit effects reduced strongly on mobile */
  .electric-field{
    width:44%;
    height:92px;
    opacity:.23;
  }
  .electric-field--left{top:76px}
  .electric-field--right{top:auto;bottom:10px}
  .electric-path--l2,.electric-path--l3,.electric-path--r2,.electric-path--r3,
  .electric-flow--l2,.electric-flow--r2{
    display:none;
  }
  .electric-path--l1,.electric-path--r1{width:80%}
  .electric-flow--l1,.electric-flow--r1{
    width:54px;
    animation-duration:2.6s;
  }

  .areas-section--light{
    padding-top:6px !important;
  }
  .areas-section--light .areas-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .areas-section--light .area-card{
    min-height:445px !important;
  }
}

@media(max-width:390px){
  .home-hero-refresh__inner{padding-top:28px;padding-bottom:24px}
  .home-hero-refresh__logo{width:min(215px,64vw)}
  .home-hero-refresh h1{font-size:clamp(1.95rem,9.2vw,2.65rem)}
  .electric-field{opacity:.18}
}

@media(prefers-reduced-motion:reduce){
  .electric-flow{animation:none !important}
}


/* ==========================================================================
   PERGE v9.1 — Electric traces refinadas
   Más largas, menos "cuadriculadas", manteniendo el lenguaje técnico.
   ========================================================================== */

/* Make the electric zones wider and more fluid */
.electric-field{
  width:min(42vw,680px);
  height:190px;
  opacity:.74;
}
.electric-field--left{
  left:-3vw;
  top:96px;
}
.electric-field--right{
  right:-3vw;
  top:128px;
}

/* Long, slightly diagonal paths */
.electric-path{
  height:1.5px;
  background:linear-gradient(
    90deg,
    rgba(241,90,36,0) 0%,
    rgba(241,90,36,.13) 10%,
    rgba(241,90,36,.38) 36%,
    rgba(241,90,36,.46) 52%,
    rgba(241,90,36,.2) 76%,
    rgba(241,90,36,0) 100%
  );
  transform-origin:center;
}

/* Left paths */
.electric-path--l1{
  left:-4%;
  top:18px;
  width:88%;
  transform:rotate(-1.8deg);
}
.electric-path--l1::after{
  right:12%;
  top:-2px;
  height:54px;
  transform:rotate(14deg);
  transform-origin:top center;
  background:linear-gradient(
    180deg,
    rgba(241,90,36,.34),
    rgba(241,90,36,.08)
  );
}
.electric-path--l2{
  left:5%;
  top:90px;
  width:72%;
  transform:rotate(2.4deg);
  opacity:.64;
}
.electric-path--l2::after{
  left:32%;
  top:-42px;
  height:44px;
  transform:rotate(-18deg);
  transform-origin:bottom center;
  background:linear-gradient(
    180deg,
    rgba(241,90,36,.1),
    rgba(241,90,36,.3)
  );
}
.electric-path--l3{
  left:-2%;
  top:148px;
  width:58%;
  transform:rotate(-2deg);
  opacity:.34;
}

/* Right paths */
.electric-path--r1{
  right:-4%;
  top:18px;
  width:88%;
  transform:rotate(1.8deg);
}
.electric-path--r1::after{
  left:12%;
  top:-2px;
  height:54px;
  transform:rotate(-14deg);
  transform-origin:top center;
  background:linear-gradient(
    180deg,
    rgba(241,90,36,.34),
    rgba(241,90,36,.08)
  );
}
.electric-path--r2{
  right:5%;
  top:90px;
  width:72%;
  transform:rotate(-2.4deg);
  opacity:.64;
}
.electric-path--r2::after{
  right:32%;
  top:-42px;
  height:44px;
  transform:rotate(18deg);
  transform-origin:bottom center;
  background:linear-gradient(
    180deg,
    rgba(241,90,36,.1),
    rgba(241,90,36,.3)
  );
}
.electric-path--r3{
  right:-2%;
  top:148px;
  width:58%;
  transform:rotate(2deg);
  opacity:.34;
}

/* Longer streaks and slightly faster current */
.electric-flow{
  width:96px;
  height:1.7px;
  box-shadow:0 0 10px rgba(255,106,46,.34);
}
.electric-flow--l1{
  left:-120px;
  top:18px;
  animation:flowL1v91 2.7s linear infinite;
}
.electric-flow--l2{
  left:-140px;
  top:90px;
  animation:flowL2v91 3.6s linear infinite .55s;
}
.electric-flow--r1{
  right:-120px;
  top:18px;
  animation:flowR1v91 2.9s linear infinite .25s;
}
.electric-flow--r2{
  right:-140px;
  top:90px;
  animation:flowR2v91 3.8s linear infinite .9s;
}

@keyframes flowL1v91{
  0%{transform:translateX(0) rotate(-1.8deg);opacity:0}
  8%{opacity:.78}
  78%{transform:translateX(38vw) rotate(-1.8deg);opacity:.72}
  100%{transform:translateX(44vw) rotate(-1.8deg);opacity:0}
}
@keyframes flowL2v91{
  0%{transform:translateX(0) rotate(2.4deg);opacity:0}
  10%{opacity:.5}
  76%{transform:translateX(31vw) rotate(2.4deg);opacity:.48}
  100%{transform:translateX(36vw) rotate(2.4deg);opacity:0}
}
@keyframes flowR1v91{
  0%{transform:translateX(0) rotate(1.8deg);opacity:0}
  8%{opacity:.78}
  78%{transform:translateX(-38vw) rotate(1.8deg);opacity:.72}
  100%{transform:translateX(-44vw) rotate(1.8deg);opacity:0}
}
@keyframes flowR2v91{
  0%{transform:translateX(0) rotate(-2.4deg);opacity:0}
  10%{opacity:.5}
  76%{transform:translateX(-31vw) rotate(-2.4deg);opacity:.48}
  100%{transform:translateX(-36vw) rotate(-2.4deg);opacity:0}
}

/* On mobile, keep traces subtle and flatter */
@media(max-width:620px){
  .electric-field{
    width:52%;
    height:88px;
    opacity:.16;
  }
  .electric-field--left{left:-12%;top:74px}
  .electric-field--right{right:-12%;bottom:6px;top:auto}
  .electric-path--l1,
  .electric-path--r1{
    width:92%;
    transform:none;
  }
  .electric-path--l1::after,
  .electric-path--r1::after{
    display:none;
  }
  .electric-flow--l1,
  .electric-flow--r1{
    width:58px;
    animation-duration:2.3s;
  }
}

/* ==========================================================================
   PERGE v9.1 — Home header logo reveal
   ========================================================================== */
.home-page .site-header--consistent .nav-brand--home-scroll{
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .24s ease, transform .24s ease;
}

.home-page .site-header--consistent.is-scrolled .nav-brand--home-scroll,
.home-page .site-header--consistent.is-menu-open .nav-brand--home-scroll{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Keep nav aligned identically even while logo is visually hidden */
.home-page .nav-wrap--consistent{
  grid-template-columns:154px 1fr auto !important;
}

@media(max-width:820px){
  .home-page .nav-wrap--consistent{
    grid-template-columns:132px 1fr auto !important;
  }
}

@media(max-width:390px){
  .home-page .nav-wrap--consistent{
    grid-template-columns:120px 1fr auto !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .home-page .site-header--consistent .nav-brand--home-scroll{
    transition:none !important;
  }
}


/* ==========================================================================
   PERGE v9.2 — Circuit current paths
   3 líneas de circuito cruzan todo el hero; el pulso recorre el mismo trazado.
   ========================================================================== */

/* Hide obsolete V9.1 electric fields if any legacy markup remains */
.electric-field{display:none!important}

.hero-current-circuit{
  position:absolute;
  inset:68px 0 0;
  z-index:1;
  width:100%;
  height:calc(100% - 68px);
  pointer-events:none;
  overflow:visible;
}

.hero-current-circuit path{
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Static traces */
.circuit-base{
  stroke:rgba(241,90,36,.18);
  stroke-width:1.25;
}
.circuit-base--2{stroke:rgba(241,90,36,.14)}
.circuit-base--3{stroke:rgba(241,90,36,.10)}

/* Bright moving electrical segment */
.circuit-current{
  stroke:#ff6b2f;
  stroke-width:2;
  filter:url(#currentGlow);
  stroke-dasharray:95 1650;
  stroke-dashoffset:0;
  opacity:.72;
}

.circuit-current--1{
  animation:circuitFlow1 4.4s linear infinite;
}
.circuit-current--2{
  animation:circuitFlow2 5.2s linear infinite .7s;
  opacity:.58;
  stroke-dasharray:72 1750;
}
.circuit-current--3{
  animation:circuitFlow3 6s linear infinite 1.45s;
  opacity:.46;
  stroke-dasharray:62 1800;
}

@keyframes circuitFlow1{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-1745}
}
@keyframes circuitFlow2{
  from{stroke-dashoffset:260}
  to{stroke-dashoffset:-1562}
}
@keyframes circuitFlow3{
  from{stroke-dashoffset:520}
  to{stroke-dashoffset:-1342}
}

/* Keep the central copy readable while the traces still cross the full background */
.home-hero-refresh__content{
  position:relative;
  z-index:3;
}
.home-hero-refresh__content::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-28px -54px;
  background:radial-gradient(
    ellipse at center,
    rgba(242,241,236,.96) 0%,
    rgba(242,241,236,.92) 44%,
    rgba(242,241,236,.58) 68%,
    rgba(242,241,236,0) 100%
  );
  pointer-events:none;
}

/* Mobile: same circuit language, but much quieter */
@media(max-width:620px){
  .hero-current-circuit{
    inset:64px 0 0;
    height:calc(100% - 64px);
    opacity:.5;
  }
  .circuit-base{
    stroke-width:1;
    stroke:rgba(241,90,36,.11);
  }
  .circuit-base--2{stroke:rgba(241,90,36,.08)}
  .circuit-base--3{stroke:rgba(241,90,36,.06)}

  .circuit-current{
    stroke-width:1.5;
    opacity:.34;
    filter:none;
    stroke-dasharray:58 1650;
  }
  .circuit-current--2{
    opacity:.24;
    stroke-dasharray:48 1750;
  }
  .circuit-current--3{
    opacity:.18;
    stroke-dasharray:40 1800;
  }

  .home-hero-refresh__content::before{
    inset:-20px -22px;
    background:radial-gradient(
      ellipse at center,
      rgba(242,241,236,.98) 0%,
      rgba(242,241,236,.94) 52%,
      rgba(242,241,236,.58) 76%,
      rgba(242,241,236,0) 100%
    );
  }
}

@media(prefers-reduced-motion:reduce){
  .circuit-current{
    animation:none!important;
    opacity:.22;
  }
}


/* ==========================================================================
   PERGE v9.3 — Desktop normalization
   Mantiene la composición de la home consistente entre resoluciones comunes.
   ========================================================================== */

@media(min-width:901px){

  .home-hero-refresh .shell,
  .areas-section--light .shell{
    width:min(92vw, 1380px);
  }

  .home-hero-refresh{
    min-height:clamp(285px, 31vw, 330px);
    padding-top:68px;
  }

  .home-hero-refresh__inner{
    min-height:auto;
    height:auto;
    padding-top:20px;
    padding-bottom:22px;
  }

  .home-hero-refresh__content{
    width:min(100%, 860px);
  }

  .home-hero-refresh__logo{
    width:clamp(285px, 22vw, 350px);
    margin-bottom:14px;
  }

  .home-hero-refresh h1{
    font-size:clamp(2.65rem, 3vw, 3.85rem);
    max-width:800px;
  }

  .home-hero-refresh__lead{
    max-width:670px;
    font-size:clamp(.94rem, .9vw, 1rem);
    margin-top:11px;
  }

  .areas-section--light{
    padding-top:10px !important;
    padding-bottom:18px !important;
  }

  .areas-section--light .areas-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .areas-section--light .area-card{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:0.82 / 1;
  }

  .areas-section--light .area-card__content{
    padding:clamp(22px, 1.8vw, 30px);
  }

  .areas-section--light .area-card h2{
    font-size:clamp(2rem, 2.4vw, 3rem);
    line-height:.98;
  }

  .areas-section--light .area-card p{
    font-size:clamp(.88rem, .82vw, .98rem);
    line-height:1.5;
  }
}

/* Notebooks bajos: 1366x768 / 1440x800 */
@media(min-width:901px) and (max-height:820px){

  .home-hero-refresh{min-height:250px}

  .home-hero-refresh__inner{
    padding-top:12px;
    padding-bottom:14px;
  }

  .home-hero-refresh__logo{
    width:clamp(245px, 19vw, 290px);
    margin-bottom:9px;
  }

  .home-hero-refresh h1{
    font-size:clamp(2.25rem, 2.45vw, 3.1rem);
  }

  .home-hero-refresh__lead{
    margin-top:7px;
    font-size:.9rem;
  }

  .areas-section--light{padding-top:8px !important}

  .areas-section--light .area-card{
    aspect-ratio:0.90 / 1;
  }

  .areas-section--light .area-card__content{padding:20px}

  .areas-section--light .area-card h2{
    font-size:clamp(1.85rem, 2.1vw, 2.6rem);
  }
}

/* Desktop medio: 1536x864 / 1440x900 */
@media(min-width:901px) and (min-height:821px) and (max-height:980px){

  .home-hero-refresh{min-height:275px}

  .home-hero-refresh__logo{
    width:clamp(270px, 20vw, 315px);
  }

  .home-hero-refresh h1{
    font-size:clamp(2.45rem, 2.7vw, 3.45rem);
  }

  .areas-section--light .area-card{
    aspect-ratio:0.86 / 1;
  }
}

/* Full HD */
@media(min-width:901px) and (min-height:981px) and (max-height:1200px){

  .home-hero-refresh{min-height:305px}

  .home-hero-refresh__logo{
    width:clamp(300px, 21vw, 340px);
  }

  .home-hero-refresh h1{
    font-size:clamp(2.8rem, 3vw, 3.85rem);
  }

  .areas-section--light .area-card{
    aspect-ratio:0.82 / 1;
  }
}

/* 1440p y pantallas altas */
@media(min-width:901px) and (min-height:1201px){

  .home-hero-refresh{min-height:320px}

  .home-hero-refresh__logo{width:340px}

  .home-hero-refresh h1{font-size:3.75rem}

  .home-hero-refresh__lead{font-size:1rem}

  .areas-section--light .area-card{
    aspect-ratio:0.80 / 1;
    max-height:560px !important;
  }
}

/* Ultrawide */
@media(min-width:2100px){

  .home-hero-refresh .shell,
  .areas-section--light .shell{
    width:min(86vw, 1500px);
  }

  .home-hero-refresh__content{width:860px}

  .areas-section--light .areas-grid{
    gap:16px !important;
  }
}


/* ==========================================================================
   PERGE v9.4 — Card height correction
   Reemplaza aspect-ratio por alturas controladas y recupera el contenido
   hacia la zona inferior de las cards.
   ========================================================================== */

@media(min-width:901px){

  .areas-section--light .area-card{
    aspect-ratio:auto !important;
    height:460px !important;
    min-height:460px !important;
    max-height:460px !important;
  }

  /* Devuelve el contenido a una posición más baja y natural */
  .areas-section--light .area-card__content{
    margin-top:auto;
    padding:26px !important;
  }

  .areas-section--light .area-card h2{
    font-size:clamp(1.9rem,2.15vw,2.65rem) !important;
    line-height:.98;
  }

  .areas-section--light .area-card p{
    font-size:.9rem !important;
    line-height:1.48;
  }
}

/* Notebooks bajos */
@media(min-width:901px) and (max-height:820px){
  .areas-section--light .area-card{
    height:400px !important;
    min-height:400px !important;
    max-height:400px !important;
  }

  .areas-section--light .area-card__content{
    padding:20px !important;
  }

  .areas-section--light .area-card h2{
    font-size:clamp(1.7rem,1.9vw,2.25rem) !important;
  }

  .areas-section--light .area-card p{
    font-size:.84rem !important;
  }
}

/* Desktop medio: 821–980px de alto */
@media(min-width:901px) and (min-height:821px) and (max-height:980px){
  .areas-section--light .area-card{
    height:435px !important;
    min-height:435px !important;
    max-height:435px !important;
  }
}

/* Full HD */
@media(min-width:901px) and (min-height:981px) and (max-height:1200px){
  .areas-section--light .area-card{
    height:485px !important;
    min-height:485px !important;
    max-height:485px !important;
  }
}

/* Pantallas altas */
@media(min-width:901px) and (min-height:1201px){
  .areas-section--light .area-card{
    height:515px !important;
    min-height:515px !important;
    max-height:515px !important;
  }
}

/* Ajustes de encuadre por card */
.areas-section--light .area-card--orange .area-card__media img{
  object-position:center 48%;
}
.areas-section--light .area-card--blue .area-card__media img{
  object-position:center 50%;
}
.areas-section--light .area-card--green .area-card__media img{
  object-position:center 48%;
}
