/* iVanNutrición — Enfoques V20
   Una sola superficie visual por tarjeta. Fotografía de alta resolución
   en el fondo y texto sobre degradado lateral sin cortes duros.
   Se conserva la proporción cuadrada de las dos tarjetas de escritorio. */
body.multi-page.page-enfoques .approach-stage{
 position:relative;isolation:isolate;min-height:0;
 padding:22px 0 35px;
 background-color:#eee4fc;
 background-image:linear-gradient(112deg,rgba(251,245,255,.8),rgba(244,229,255,.67)),
   url('assets/alpine_landscape_v3.webp');
 background-size:cover;background-position:center 53%;background-repeat:no-repeat;
}
body.multi-page.page-enfoques .approach-stage::before{
 content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(255,255,255,.13),transparent 60%,rgba(238,218,255,.14))
}
body.multi-page.page-enfoques .approach-wrap{
 position:relative;z-index:1;width:calc(100% - 94px);max-width:1320px;
}
body.multi-page.page-enfoques .approach-heading{
 display:flex;justify-content:space-between;align-items:center;gap:22px;
 min-height:78px;margin:0 0 18px;
}
body.multi-page.page-enfoques .approach-heading .eyebrow{
 color:#8532c7;font-size:10px;letter-spacing:1.7px;font-weight:850;margin:0 0 5px
}
body.multi-page.page-enfoques .approach-heading h1{
 margin:0 0 6px;font-size:clamp(28px,2.55vw,36px);
 line-height:1.12;font-weight:850;letter-spacing:-1.1px;color:#211350;
}
body.multi-page.page-enfoques .approach-heading p:not(.eyebrow){
 color:#514077;font-size:12px;line-height:1.5;margin:0
}
body.multi-page.page-enfoques .approach-find-link{
 display:inline-flex;align-items:center;gap:12px;flex:none;
 padding:11px 18px;border-radius:999px;
 border:1px solid rgba(255,255,255,.93);
 background:linear-gradient(120deg,rgba(255,255,255,.82),rgba(246,235,255,.71));
 color:#732dc0;text-decoration:none;font-size:12px;font-weight:750;
 box-shadow:0 5px 17px rgba(80,36,142,.11);
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
 transition:transform .2s,box-shadow .2s,background .2s;
}
body.multi-page.page-enfoques .approach-grid{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 align-items:stretch;gap:24px;
}
body.multi-page.page-enfoques .approach-card{
 position:relative;isolation:isolate;display:block;
 width:100%;height:auto;min-height:0;aspect-ratio:1 / 1;
 overflow:hidden;border:1.5px solid rgba(255,255,255,.94);
 border-radius:30px;background:linear-gradient(125deg,#fcf8ff,#f2e4ff);
 color:#251450;text-decoration:none;
 box-shadow:0 14px 36px rgba(75,32,135,.15),inset 0 1px 0 rgba(255,255,255,.86);
 transition:transform .26s cubic-bezier(.2,.73,.2,1),box-shadow .26s,border-color .26s;
}
/* Fotografía integrada: sin filas ni bordes internos ni corte horizontal. */
body.multi-page.page-enfoques .approach-card__visual{
 position:absolute;inset:0;z-index:0;display:block;
 overflow:hidden;width:100%;height:100%;
 background:linear-gradient(110deg,#f5ebff,#e2d6f8);
}
body.multi-page.page-enfoques .approach-card--performance .approach-card__visual{
 background:linear-gradient(115deg,#f3ecff,#dbe4ff)
}
body.multi-page.page-enfoques .approach-card__visual::after{content:none;display:none}
body.multi-page.page-enfoques .approach-card__visual img{
 position:absolute;display:block;
 width:112%;height:112%;max-width:none;
 left:auto;right:-5%;top:-6%;bottom:auto;
 object-fit:cover;object-position:100% 50%;
 opacity:1;border:0;border-radius:0;
 -webkit-mask-image:none;mask-image:none;
 filter:contrast(1.075) saturate(1.10);
 transform:scale(1);
 transform-origin:75% 50%;
 transition:transform .38s cubic-bezier(.2,.72,.2,1),filter .32s ease;
}
body.multi-page.page-enfoques .approach-card--digest .approach-card__visual img{
 object-position:100% 50%;filter:contrast(1.09) saturate(1.13)
}
body.multi-page.page-enfoques .approach-card--performance .approach-card__visual img{
 object-position:100% 49%;
}
/* La foto se funde gradualmente con el cristal de lectura; el fondo
   permanece visible a la derecha. No hay una segunda tarjeta blanca. */
body.multi-page.page-enfoques .approach-card::before{
 content:"";display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
 background:
  linear-gradient(90deg,
   rgba(253,249,255,.985) 0%,
   rgba(253,249,255,.96) 27%,
   rgba(252,247,255,.86) 41%,
   rgba(252,245,255,.58) 54%,
   rgba(247,238,255,.16) 75%,
   rgba(249,239,255,.015) 93%),
  linear-gradient(180deg,rgba(255,255,255,.09),transparent 48%,rgba(241,219,255,.08));
}
body.multi-page.page-enfoques .approach-card::after{content:none;display:none}
body.multi-page.page-enfoques .approach-card__copy{
 position:absolute;z-index:2;inset:0 auto 0 0;grid-row:auto;grid-column:auto;
 box-sizing:border-box;
 display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;
 width:64%;height:100%;min-height:0;
 padding:clamp(34px,4.2vw,62px) 6px clamp(28px,3.2vw,46px) clamp(28px,3.6vw,49px);
 border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
body.multi-page.page-enfoques .approach-card__eyebrow{
 display:inline-block;color:#8731c8;
 letter-spacing:1.65px;font-weight:850;font-size:10px;line-height:1.4;
 margin:0 0 12px;
}
body.multi-page.page-enfoques .approach-card h2{
 font-size:clamp(28px,2.85vw,41px);line-height:1.1;letter-spacing:-1.05px;
 font-weight:850;color:#221250;margin:0 0 23px;
}
body.multi-page.page-enfoques .approach-card__features{
 list-style:none;display:grid;gap:10px;padding:0;margin:0;
}
body.multi-page.page-enfoques .approach-card__features li{
 display:flex;align-items:flex-start;gap:11px;
 font-size:clamp(12px,1.15vw,15px);font-weight:550;
 line-height:1.42;color:#382957;margin:0;
 text-shadow:0 1px 0 rgba(255,255,255,.42);
}
body.multi-page.page-enfoques .approach-card__features li::before{
 content:"✓";flex:none;color:#9531db;
 font-size:20px;line-height:1.03;font-weight:900;
}
body.multi-page.page-enfoques .approach-card__button.pill.primary{
 margin-top:auto;display:inline-flex;align-items:center;justify-content:center;
 gap:12px;min-height:47px;padding:10px 19px;
 border-radius:999px;border:1px solid rgba(253,227,255,.98);
 color:#fff;font-size:clamp(12px,1.1vw,14px);font-weight:800;
 white-space:nowrap;text-decoration:none;
 background:linear-gradient(112deg,#7d1ddb 0%,#a528dc 53%,#da3acb 100%);
 box-shadow:
  inset 0 2px 1px rgba(255,255,255,.52),
  inset 0 -3px 4px rgba(78,18,134,.22),
  0 4px 0 rgba(96,27,154,.13),
  0 10px 20px rgba(115,34,184,.25)!important;
 transition:transform .22s,box-shadow .22s,filter .22s;
}
body.multi-page.page-enfoques .approach-card__button>span{
 font-size:19px;line-height:1;font-weight:840
}
body.multi-page.page-enfoques .approach-card:focus-visible{
 outline:3px solid #9534d4;outline-offset:4px
}
body.multi-page.page-enfoques .page-cta.scenic{padding:21px 0 33px}
@media (hover:hover) and (pointer:fine){
 body.multi-page.page-enfoques .approach-find-link:hover{
  transform:translateY(-2px);background:rgba(255,255,255,.96);
  box-shadow:0 9px 23px rgba(82,33,149,.17)
 }
 body.multi-page.page-enfoques .approach-card:hover{
  transform:translateY(-3px) scale(1.005);border-color:#fff;
  box-shadow:0 19px 43px rgba(73,31,145,.22),0 0 19px rgba(224,152,252,.17)
 }
 body.multi-page.page-enfoques .approach-card:hover .approach-card__visual img{
  transform:scale(1.025);filter:brightness(1.065) contrast(1.085) saturate(1.115)
 }
 body.multi-page.page-enfoques .approach-card:hover .approach-card__button.pill.primary{
  transform:translateY(-2px);filter:brightness(1.045);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.6),0 5px 0 rgba(96,27,154,.11),
    0 14px 24px rgba(115,34,184,.32)!important
 }
}
@media(min-width:901px) and (max-width:1199px){
 body.multi-page.page-enfoques .approach-wrap{width:calc(100% - 54px)}
 body.multi-page.page-enfoques .approach-grid{gap:16px}
 body.multi-page.page-enfoques .approach-card__copy{width:71%;padding:30px 0 29px 25px}
 body.multi-page.page-enfoques .approach-card__eyebrow{font-size:9px;margin-bottom:9px}
 body.multi-page.page-enfoques .approach-card h2{font-size:29px;margin-bottom:15px}
 body.multi-page.page-enfoques .approach-card__features{gap:7px}
 body.multi-page.page-enfoques .approach-card__features li{font-size:12px;gap:7px}
 body.multi-page.page-enfoques .approach-card__button.pill.primary{
  font-size:11px;min-height:41px;padding:9px 13px;gap:8px
 }
}
@media(max-width:900px){
 body.multi-page.page-enfoques .approach-stage{padding:18px 0 32px}
 body.multi-page.page-enfoques .approach-wrap{width:calc(100% - 36px)}
 body.multi-page.page-enfoques .approach-heading{flex-wrap:wrap;gap:12px}
 body.multi-page.page-enfoques .approach-heading h1{font-size:29px}
 body.multi-page.page-enfoques .approach-grid{grid-template-columns:1fr;gap:19px}
 body.multi-page.page-enfoques .approach-card{
  aspect-ratio:5 / 4;max-width:720px;margin-inline:auto;
 }
 body.multi-page.page-enfoques .approach-card__copy{width:61%;padding:32px 0 32px 33px}
 body.multi-page.page-enfoques .approach-card h2{font-size:32px}
}
@media(max-width:560px){
 body.multi-page.page-enfoques .approach-card{
  min-height:420px;aspect-ratio:auto;border-radius:23px
 }
 body.multi-page.page-enfoques .approach-card__visual img{
  width:132%;height:107%;top:-3.5%;right:-20%
 }
 body.multi-page.page-enfoques .approach-card::before{
  background:linear-gradient(90deg,rgba(253,249,255,.975),rgba(252,246,255,.86) 35%,
   rgba(250,239,255,.47) 69%,rgba(252,245,255,.09))
 }
 body.multi-page.page-enfoques .approach-card__copy{width:83%;padding:28px 5px 28px 22px}
 body.multi-page.page-enfoques .approach-card h2{font-size:28px;margin-bottom:18px}
 body.multi-page.page-enfoques .approach-card__features{gap:7px}
 body.multi-page.page-enfoques .approach-card__features li{font-size:12px}
 body.multi-page.page-enfoques .approach-card__button.pill.primary{
  font-size:11px;padding:9px 12px;min-height:42px
 }
}
@media(prefers-reduced-motion:reduce){
 body.multi-page.page-enfoques .approach-card,
 body.multi-page.page-enfoques .approach-card__visual img,
 body.multi-page.page-enfoques .approach-card__button,
 body.multi-page.page-enfoques .approach-find-link{
  transition:none!important;
 }
 body.multi-page.page-enfoques .approach-card:hover,
 body.multi-page.page-enfoques .approach-card__visual img,
 body.multi-page.page-enfoques .approach-card:hover .approach-card__visual img{
  transform:none!important;
 }
}
