/* iVanNutrición · Ajustes móviles 2026-11-09.
   Solo Inicio, Reserva y Consigue tu descuento.
   NO cambia escritorio, Enfoques, Planes ni Sobre mí. */
@media (max-width:900px){
  body.page-home,body.page-como,body.page-reserva{
    width:100%;max-width:100%;overflow-x:clip
  }
  body.page-home .site-shell,
  body.page-como .site-shell,
  body.page-reserva .site-shell{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:clip!important
  }
  body.page-home .wrap,
  body.page-home .topbar-inner,
  body.page-como .wrap,
  body.page-reserva .wrap{
    width:calc(100% - 36px)!important;
    max-width:100%!important;
    margin-left:auto!important;margin-right:auto!important;
  }
  body.page-home .topbar,
  body.page-home .topbar-inner{
    height:auto!important;min-height:0!important
  }
  body.page-home .topbar-inner{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:space-between!important;
    align-items:center!important;
    border-radius:0!important;
    gap:7px 12px!important;
    padding:10px 0 8px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  body.page-home .topbar .brand{min-width:0;font-size:22px!important}
  body.page-home .topbar .brand .v7-brand-mark{
    width:41px!important;height:35px!important;flex:none
  }
  body.page-home .topbar .brand .v7-brand-name{min-width:0}
  body.page-home .topbar .brand .v7-brand-name strong{
    font-size:18px!important;white-space:nowrap
  }
  body.page-home .topbar .brand .v7-brand-name small{
    font-size:8px!important;letter-spacing:1px
  }
  body.page-home .topbar .top-cta{padding:9px 13px!important;white-space:normal!important}
  body.page-home .topbar .navigation{
    order:3;
    flex-basis:100%;
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    white-space:normal!important;
    gap:4px!important;
  }
  body.page-home .topbar .navigation a{
    text-align:center;font-size:11px!important;padding:8px 10px!important;
    line-height:1.3
  }

  /* Inicio: desactivar la cuadrícula de 3 columnas y las alturas de escritorio. */
  body.page-home .hero.v5-hero{
    display:block!important;
    height:auto!important;min-height:0!important;
    overflow:visible!important;
    padding:37px 0 77px!important;
  }
  body.page-home .hero.v5-hero .hero-inner{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:25px!important;
    height:auto!important;min-height:0!important;
    isolation:isolate;
  }
  body.page-home .hero.v5-hero .hero-intro{
    grid-column:auto!important;
    width:100%!important;min-width:0!important;
    max-width:none!important;
    padding:0!important;margin:0!important;
    align-self:auto!important;
  }
  body.page-home .hero.v5-hero .hero-intro h1{
    font-size:clamp(34px,5.8vw,49px)!important;
    line-height:1.13!important;
    letter-spacing:-1.45px!important;
    max-width:710px!important;
    overflow-wrap:anywhere;
  }
  body.page-home .hero.v5-hero .hero-intro>p:not(.eyebrow){
    font-size:15px!important;
    max-width:650px!important;
    line-height:1.66!important;
    margin-bottom:22px!important;
  }
  body.page-home .hero.v5-hero .hero-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    width:100%!important;
  }
  body.page-home .hero.v5-hero .hero-actions .pill{
    width:auto;max-width:100%;
    white-space:normal!important;
    min-height:48px;
    padding:11px 16px!important;
    font-size:12px!important
  }
  body.page-home .hero.v5-hero .hero-side{
    position:relative!important;
    z-index:5!important;
    grid-column:auto!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    align-self:stretch!important;
  }
  body.page-home .hero.v5-hero a.hero-service,
  body.page-home .hero.v5-hero a.hero-service:hover{
    width:100%!important;
    height:190px!important;min-height:0!important;
    padding:17px!important;
    border-radius:21px!important;
  }
  body.page-home .hero.v5-hero a.hero-service>span{
    width:80%!important;max-width:none!important
  }
  body.page-home .hero.v5-hero a.hero-service strong{
    font-size:19px!important;
    line-height:1.16!important;
    overflow-wrap:break-word;
  }
  body.page-home .hero.v5-hero a.hero-service small{
    font-size:11px!important;line-height:1.45!important;
    overflow-wrap:break-word
  }
  body.page-home .hero.v5-hero .hero-benefits{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;min-height:0!important;
    left:auto!important;top:auto!important;bottom:auto!important;
    margin:0!important;
    padding:14px 12px!important;
    gap:0!important;
    border-radius:18px!important;
  }
  body.page-home .hero.v5-hero .hero-benefits>span{
    display:flex;flex-direction:column;
    justify-content:center;align-items:center;text-align:center;
    gap:6px!important;min-width:0;
    padding:2px 9px!important;
    white-space:normal!important;
    font-size:10px!important;
  }
  body.page-home .hero.v5-hero .hero-benefits b{
    font-size:11px!important;line-height:1.25
  }
  body.page-home .hero.v5-hero .hero-benefits svg{
    flex:none;width:25px!important;height:25px!important
  }
  body.page-home .hero.v5-hero .v7-wave{
    position:absolute!important;
    bottom:-2px!important;left:0!important;
    width:100%!important;height:55px!important;
    pointer-events:none;
  }
  body.page-home .ivn-free-visit-card,
  body.page-home .ivn-free-visit-copy,
  body.page-home .ivn-free-visit-card *{min-width:0}
  body.page-home .page-cta-inner{
    width:100%;
    min-width:0;
    flex-wrap:wrap!important;
    gap:19px!important;
  }
  body.page-home .page-cta-inner h2{line-height:1.15}
  body.page-home .page-cta-inner .pill{
    white-space:normal;max-width:100%;
  }
  /* Reserva: medidas reales del dispositivo, no porcentajes + gap que superan 100%. */
  body.page-reserva .booking-section.scenic{padding:30px 0 48px!important}
  body.page-reserva .booking-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:23px!important;
    min-height:0!important;
    width:calc(100% - 36px)!important;
  }
  body.page-reserva .booking-intro,
  body.page-reserva .calendar,
  body.page-reserva .calendar-main,
  body.page-reserva .slots,
  body.page-reserva .calendar-grid{
    min-width:0!important;
    max-width:100%!important
  }
  body.page-reserva .booking-intro h2{
    max-width:100%!important;
    font-size:clamp(28px,5vw,40px)!important;
    line-height:1.15!important;
    overflow-wrap:break-word
  }
  body.page-reserva .booking-intro>p{
    font-size:14px!important;line-height:1.65!important
  }
  body.page-reserva .booking-benefits{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important
  }
  body.page-reserva .booking-benefits span{
    padding:13px 12px!important;
    min-width:0!important;
    line-height:1.4!important;
    overflow-wrap:break-word
  }
  body.page-reserva .calendar{
    padding:clamp(16px,3.5vw,25px)!important;
    margin:0!important;
    width:100%!important;
    max-width:100%!important;
    border-radius:22px!important;
    overflow:visible!important;
  }
  body.page-reserva .calendar-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;
    gap:12px!important;
    width:100%!important
  }
  body.page-reserva .calendar-main{
    padding:13px!important;
    overflow:hidden;
    width:100%!important
  }
  body.page-reserva .calendar-month{
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    min-width:0!important
  }
  body.page-reserva .calendar-month button{
    flex:none;min-width:28px;height:33px;
    display:grid;place-items:center;
    line-height:1;
    padding:0!important
  }
  body.page-reserva .calendar-month strong{
    min-width:0;
    font-size:clamp(12px,1.6vw,15px)!important;
    text-align:center;
    line-height:1.4;
    overflow-wrap:anywhere
  }
  body.page-reserva .calendar-weekdays,
  body.page-reserva .days{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:2px!important
  }
  body.page-reserva .days button,
  body.page-reserva .days span{
    min-width:0!important;width:100%!important;
    height:auto!important;
    aspect-ratio:1/1;
    min-height:26px!important;
    padding:0!important;
    font-size:clamp(10px,1.8vw,13px)!important;
  }
  body.page-reserva .slots{
    display:flex!important;flex-direction:column!important;
    align-items:stretch!important;
    gap:9px!important;
    width:100%!important
  }
  body.page-reserva #time-slots{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important
  }
  body.page-reserva #time-slots button{
    min-width:0!important;
    padding:12px 5px!important;
    line-height:1.35!important;
  }
  body.page-reserva #book-now,
  body.page-reserva #copy-booking-text{
    display:flex;justify-content:center;align-items:center;
    min-width:0!important;width:100%!important;
    min-height:45px!important;
    max-width:100%!important;
    margin:5px 0 0!important;
    padding:12px 9px!important;
    font-size:12px!important;
    line-height:1.4!important;
    white-space:normal!important;
    text-align:center!important;
  }
  body.page-reserva .calendar-disclaimer{
    font-size:11px!important;
    line-height:1.6!important;
    overflow-wrap:break-word
  }
  body.page-reserva .page-banner.scenic{
    padding:36px 0 37px!important
  }
  body.page-reserva .page-banner h1{
    font-size:clamp(32px,5.8vw,45px)!important;
    line-height:1.13!important
  }
  body.page-reserva .page-banner p{font-size:14px!important}

  /* Árbol: paisaje panorámico convertido en portada vertical envolvente. */
  body.page-como .ivn-scenic-main{
    overflow:visible!important;
    width:100%!important;
    max-width:100%!important;
    background:linear-gradient(150deg,#b68cd6,#eee0f7 75%);
  }
  body.page-como .ivn-reference-preview.ivn-scenic-base{
    width:100%!important;
    height:clamp(430px,73svh,690px)!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    background:#c6a5df!important;
  }
  body.page-como .ivn-reference-preview .ivn-scenic-photo{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    aspect-ratio:auto!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:50% 50%!important;
  }
  body.page-como .ivn-reference-preview .ivn-paths{
    display:none!important;
  }
  body.page-como .ivn-mobile-hero-caption{
    position:absolute;z-index:8;
    left:18px;right:18px;bottom:25px;
    padding:25px 23px;
    border:1px solid rgba(255,255,255,.90);
    border-radius:24px;
    background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(250,238,255,.83));
    backdrop-filter:blur(19px);
    -webkit-backdrop-filter:blur(19px);
    box-shadow:0 17px 40px rgba(44,19,82,.22),inset 0 1px 0 #fff;
  }
  body.page-como .ivn-mobile-kicker{
    display:block;color:#8d36b3;
    font-size:10px;line-height:1.3;font-weight:860;
    letter-spacing:1.75px;text-transform:uppercase
  }
  body.page-como .ivn-mobile-hero-caption h2{
    margin:11px 0 9px;color:#30184c;
    font-size:clamp(28px,4.3vw,40px);
    letter-spacing:-1px;line-height:1.12
  }
  body.page-como .ivn-mobile-hero-caption p{
    margin:0;color:#58456c;font-size:13px;line-height:1.6
  }
  body.page-como .ivn-mobile-hero-caption a{
    display:inline-flex;align-items:center;gap:12px;
    margin-top:16px;padding:11px 17px;
    border:1px solid rgba(255,221,255,.98);
    border-radius:13px;
    background:linear-gradient(100deg,#7f2ac0,#a63bd3);
    color:#fff;font-weight:780;font-size:12px;line-height:1.3;
    text-decoration:none
  }
  body.page-como .ivn-discount-gate{
    position:fixed!important;
    inset:0!important;
    z-index:100000!important;
    display:grid!important;
    place-items:center!important;
    padding:16px!important;
    overflow:auto!important;
  }
  body.page-como .ivn-discount-gate[hidden]{display:none!important}
  body.page-como .ivn-gate-card{
    width:min(100%,520px)!important;
    max-height:calc(100dvh - 32px);
    overflow:auto!important;
    padding:clamp(23px,5vw,36px)!important
  }
  body.page-como .ivn-mobile-rewards{
    display:block!important;
    padding:clamp(32px,6vw,65px) 0 clamp(60px,8vw,95px);
    background:
      radial-gradient(ellipse 57% 40% at 93% 7%,rgba(244,210,255,.46),transparent 75%),
      linear-gradient(165deg,#c19bdf 0%,#e7d6f5 48%,#d6b7eb 100%);
  }
  body.page-como .ivn-mobile-rewards-inner{
    width:calc(100% - 36px);
    max-width:700px;
    margin:0 auto;
    min-width:0;
  }
  body.page-como .ivn-mobile-rewards-head{text-align:center;margin-bottom:24px}
  body.page-como .ivn-mobile-rewards-head h2{
    color:#2d154d;line-height:1.15;
    letter-spacing:-1.1px;
    font-size:clamp(29px,5vw,40px);
    margin:13px auto 12px;
    max-width:550px
  }
  body.page-como .ivn-mobile-rewards-head p{
    color:#59436b;font-size:13px;
    line-height:1.65;max-width:550px;margin:0 auto 12px
  }
  body.page-como .ivn-mobile-rewards-progress{
    display:inline-block;
    margin:8px auto 0!important;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.8);
    border-radius:999px;
    background:rgba(255,255,255,.67);
    color:#713599!important;
    font-size:11px!important;
    font-weight:740
  }
  body.page-como .ivn-mobile-rewards-list{
    display:flex;flex-direction:column;gap:18px
  }
  body.page-como .ivn-mobile-branch{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.92);
    border-radius:24px;
    background:linear-gradient(132deg,rgba(255,255,255,.91),rgba(255,255,255,.75) 75%,rgba(252,239,255,.72));
    backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
    box-shadow:0 18px 47px rgba(81,40,131,.13),inset 0 1px 0 #fff
  }
  body.page-como .ivn-mobile-branch-header{
    display:flex;align-items:center;gap:15px;
    padding:23px 22px 18px;
    border-bottom:1px solid rgba(190,145,218,.17)
  }
  body.page-como .ivn-mobile-branch-count{
    display:grid;place-items:center;flex:none;
    width:47px;height:47px;
    border-radius:16px;
    background:linear-gradient(140deg,#7e35b4,#b45ace);
    color:#fff;
    font-size:14px;font-weight:850;
    box-shadow:0 7px 17px rgba(123,46,183,.19)
  }
  body.page-como .ivn-mobile-branch-header h3{
    font-size:clamp(19px,3.1vw,23px);
    margin:0 0 5px;
    line-height:1.2;
    color:#341d51;letter-spacing:-.6px
  }
  body.page-como .ivn-mobile-branch-header p{
    margin:0;color:#675575;font-size:12px;line-height:1.55
  }
  body.page-como .ivn-mobile-quest-list{display:flex;flex-direction:column;padding:9px 13px 17px}
  body.page-como .ivn-mobile-quest{
    display:flex;align-items:center;
    gap:12px;
    min-width:0;width:100%;
    min-height:78px;
    padding:13px 10px;
    margin:0;
    border:0;
    border-bottom:1px solid rgba(193,157,216,.20);
    border-radius:10px;
    color:#3c2658;
    background:transparent;
    font:inherit;
    text-align:left;
    cursor:pointer;
  }
  body.page-como .ivn-mobile-quest:last-child{border-bottom:0}
  body.page-como .ivn-mobile-quest-number{
    display:grid;place-items:center;
    width:42px;height:42px;
    flex:none;
    border:1px solid rgba(186,142,212,.26);
    border-radius:14px;
    background:#f2e6fa;
    color:#9c74b0;
    font-size:12px;font-weight:850
  }
  body.page-como .ivn-mobile-quest-info{
    min-width:0;flex:1;
    display:flex;flex-direction:column;gap:4px
  }
  body.page-como .ivn-mobile-quest-info strong{
    display:block;
    color:#35204f;
    font-size:13px;line-height:1.35;font-weight:800
  }
  body.page-como .ivn-mobile-quest-reward{
    display:block;font-size:11px;line-height:1.5;
    color:#84649b;font-weight:650
  }
  body.page-como .ivn-mobile-quest-state{
    flex:0 0 auto;
    max-width:105px;
    padding:6px 8px;
    border-radius:999px;
    background:rgba(235,222,244,.76);
    color:#8c76a0;
    font-size:10px;
    font-weight:800;
    text-align:center
  }
  body.page-como .ivn-mobile-quest[data-quest-state="available"]{
    background:linear-gradient(102deg,rgba(250,241,255,.93),rgba(255,255,255,.8));
    box-shadow:inset 3px 0 0 rgba(156,53,203,.74);
  }
  body.page-como .ivn-mobile-quest[data-quest-state="available"] .ivn-mobile-quest-number,
  body.page-como .ivn-mobile-quest[data-quest-state="done"] .ivn-mobile-quest-number{
    background:linear-gradient(120deg,#8137b6,#b35ed5);
    border-color:rgba(215,168,239,.88);
    color:#fff;
    box-shadow:0 4px 13px rgba(149,63,193,.21)
  }
  body.page-como .ivn-mobile-quest[data-quest-state="available"] .ivn-mobile-quest-state{
    background:#edd8fb;color:#7435a7
  }
  body.page-como .ivn-mobile-quest[data-quest-state="done"] .ivn-mobile-quest-state{
    background:#e4cbf6;color:#6b2c99
  }
  body.page-como .ivn-mobile-quest[data-quest-state="done"] .ivn-mobile-quest-reward{
    color:#8d35b0
  }
  body.page-como .ivn-mobile-goal{
    margin-top:12px;
    padding:17px 12px;
    border:1px solid rgba(205,167,229,.58)!important;
    border-radius:15px;
    background:linear-gradient(105deg,#f8efff,#f2e2fc);
    box-shadow:inset 0 1px 0 #fff
  }
  body.page-como .ivn-mobile-goal .ivn-mobile-quest-number{
    color:#a83fcc;font-size:27px
  }
  body.page-como .ivn-mobile-rewards-note{
    margin:22px auto 0;padding:0 6px;
    color:#654f72;font-size:12px;line-height:1.7;
    text-align:center;max-width:580px
  }
  body.page-como .ivn-mobile-quest:focus-visible,
  body.page-como .ivn-mobile-hero-caption a:focus-visible{
    outline:3px solid #852ac0;
    outline-offset:3px
  }
  body.page-como .ivn-mobile-quest:hover{
    background:rgba(253,243,255,.83)
  }
  /* Modal de premios accesible en teléfonos estrechos. */
  body.page-como .ivn-prize-overlay{
    padding:12px!important
  }
  body.page-como .ivn-prize-dialog{
    width:min(100%,560px)!important;
    max-width:100%!important;
    max-height:calc(100dvh - 24px)!important;
    border-radius:25px!important;
  }
  body.page-como .ivn-account-dialog,
  body.page-como .ivn-quest-dialog{max-width:calc(100vw - 20px)!important}
}
@media (min-width:901px){
  body.page-como .ivn-mobile-hero-caption,
  body.page-como .ivn-mobile-rewards{display:none!important}
}
@media (max-width:620px){
  body.page-home .topbar .top-cta{display:none!important}
  body.page-home .topbar .navigation{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px!important;
  }
  body.page-home .topbar .navigation a{
    display:flex;align-items:center;justify-content:center;
    min-height:35px;max-width:100%;padding:7px 6px!important;
    white-space:normal!important;
    line-height:1.25;
    font-size:10px!important
  }
  body.page-home .hero.v5-hero{padding-top:31px!important}
  body.page-home .hero.v5-hero .hero-intro h1{
    font-size:clamp(34px,8.4vw,44px)!important;
    margin-bottom:16px!important;
  }
  body.page-home .hero.v5-hero .hero-actions .pill{
    flex:1 1 140px;
    font-size:11px!important;
  }
  body.page-home .hero.v5-hero .hero-side{
    grid-template-columns:minmax(0,1fr)!important;
    gap:13px!important
  }
  body.page-home .hero.v5-hero a.hero-service,
  body.page-home .hero.v5-hero a.hero-service:hover{
    height:165px!important;
  }
  body.page-home .hero.v5-hero a.hero-service>span{
    width:69%!important
  }
  body.page-home .hero.v5-hero a.hero-service strong{
    font-size:20px!important
  }
  body.page-home .hero.v5-hero a.hero-service small{
    font-size:11px!important
  }
  body.page-home .hero.v5-hero .hero-benefits{
    padding:12px 4px!important
  }
  body.page-home .hero.v5-hero .hero-benefits>span{
    padding:3px 5px!important
  }
  body.page-home .hero.v5-hero .hero-benefits b{
    font-size:10px!important;overflow-wrap:anywhere
  }
  body.page-home .ivn-free-visit,
  body.page-home .page-cta{
    width:100%;
  }
  body.page-home .ivn-free-visit-card{
    padding:25px 21px!important
  }
  body.page-home .page-cta-inner{
    padding:23px 20px!important
  }
  /* Reserva: calendario y horas en bloques separados, 100% visibles. */
  body.page-reserva .calendar-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:17px!important
  }
  body.page-reserva .calendar-main{
    padding:12px!important
  }
  body.page-reserva #time-slots{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important
  }
  body.page-reserva #time-slots button{
    min-height:42px;
    padding:10px 5px!important;
  }
  body.page-reserva .calendar-month strong{font-size:14px!important}
  body.page-reserva .days button,
  body.page-reserva .days span{
    min-height:32px!important;
    font-size:12px!important
  }
  body.page-reserva .booking-intro h2{
    font-size:clamp(29px,7vw,37px)!important
  }
  body.page-reserva .booking-benefits span{
    padding:11px!important;
    min-height:70px!important;
    font-size:11px!important
  }
  body.page-reserva .calendar-title h3{
    font-size:22px!important
  }
  body.page-reserva .page-banner.scenic{
    padding:33px 0 32px!important
  }
  body.page-reserva .page-banner h1{
    font-size:clamp(31px,7vw,40px)!important
  }
}
@media (max-width:350px){
  body.page-home .wrap,
  body.page-home .topbar-inner,
  body.page-como .wrap,
  body.page-reserva .wrap{
    width:calc(100% - 28px)!important
  }
  body.page-como .ivn-mobile-rewards-inner{width:calc(100% - 28px)}
  body.page-como .ivn-mobile-branch-header{padding:19px 15px 15px}
  body.page-como .ivn-mobile-quest-list{padding:9px 7px 15px}
  body.page-como .ivn-mobile-quest{gap:7px;padding:10px 6px}
  body.page-como .ivn-mobile-quest-number{width:34px;height:39px}
  body.page-como .ivn-mobile-quest-info strong{font-size:12px}
  body.page-como .ivn-mobile-quest-reward{font-size:10px}
  body.page-como .ivn-mobile-quest-state{font-size:9px;padding:5px}
  body.page-home .hero.v5-hero .hero-intro h1{font-size:32px!important}
}
@media (prefers-reduced-motion:reduce){
  body.page-home .hero.v5-hero .hero-actions .pill,
  body.page-como .ivn-mobile-quest{transition:none!important}
}