/* ======================= FONTS ======================= */ 
@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ======================= CORE / RESET ======================= */
:root{
  --main-blue:#0079c8;
  --main-orange:#db3907;
  --main-lila:#d02670;
  --ink:#00335b;
  --bg:#F5F5F5;
  --card:#ffffff;
  --muted:#4d5b66;
  --line:#e9eef2;
  --shadow:0 10px 22px rgba(0,0,0,.08);
  --card-pad: 1.5rem;
  --white:#fff;
  --next-bg:#f8f9fa;
  --prod-d1:#003366;   
  --prod-d2:#001B48;   
  --hero-bg:#DDEDF9;
  --error-color: #b00020;
  --mobile-cta-h: 60px;


  --hero-max:1440px;
  --hero-pad:80px;


  --nav-h:84px;    
}
@media (min-width:768px){
  :root{ --nav-h:104px; } 
}

@media (max-width: 767px){
  body{
    padding-bottom: calc(var(--mobile-cta-h) + env(safe-area-inset-bottom));
  }
}



*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;margin:0}
body{
  font-family:"Montserrat",Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;font-synthesis-style:none;
  line-height:1.5;color:var(--ink);background:var(--bg);
}
@supports (font-variation-settings: normal){ body{font-variation-settings:"wght" 400;} }
strong,b{font-weight:700}
h1,h2,h3,h4,h5,h6{font-weight:700;margin:0 0 .5em}

/* Evita salts per modals */
body.pum-open,body.modal-open{padding-right:0!important;overflow:hidden}



/* ======================= COOKIE BANNER (custom) ======================= */
.cookie-banner {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    padding: 1rem;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    border-radius: 6px;
}

.cookie-banner p {
    margin: 0 0 .5rem
}

.cookie-banner a {
    color: #0079c8;
    text-decoration: underline;
    font-size: 14px;
    margin-left: .5rem
}

.cookie-buttons {
    display: flex;
    gap: .5rem;
    margin-top: .5rem
}

.cookie-buttons button {
    background: #0079c8;
    color: #fff;
    border: none;
    padding: .5rem 1rem;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px
}

.cookie-buttons button#reject-cookies {
    background: #373535
}

@media (max-width: 768px) {
    .cookie-banner {
        bottom:5rem
    }
}




.lp-navbar{
  position:fixed;top:0;left:0;z-index:9999;width:100%;
  background:#fff;padding:.3rem 1.5rem;border:0;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  transition:padding .3s ease, background-color .3s ease, box-shadow .3s ease;
  opacity:0;transform:translateY(-20px);animation:fadeInNavbar .6s ease forwards;
  box-sizing:border-box;
}
@keyframes fadeInNavbar{
  to{ opacity:1; transform:translateY(0); }
}



.lp-navbar.scrolled{padding:.3rem 1.2rem;background-color:#ffffffee;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

#logo{width:5rem;height:7rem;overflow:hidden;display:block;flex-shrink:0;transition:height .3s,width .3s}
.lp-navbar.scrolled #logo{height:2.5rem;width:9rem}
#logo-img{width:100%;height:auto;display:block;transform-origin:top left;transition:transform .3s}
.lp-navbar.scrolled #logo-img{transform:translateY(-80%)}

.lp-title{display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.lp-title-main{font-size:1.2rem;font-weight:700;color:var(--ink);line-height:1.2}
.lp-title-sub{font-size:1.2rem;color:var(--main-blue);font-weight:400;margin-top:.3rem}
.lp-navbar.scrolled .lp-title-main{font-size:1.1rem;opacity:.85}
.lp-navbar.scrolled .lp-title-sub{font-size:1rem;opacity:.6}

.lp-cta{flex-shrink:0;white-space:nowrap;margin-top:4px}
.btn-open-modal.lp-btn{
  padding:.6rem 1.4rem;font-size:1rem;line-height:1;display:flex;align-items:center;border-radius:10px;
  font-weight:600;background:var(--main-orange);color:#fff;text-decoration:none;transition:transform .2s ease, box-shadow .2s ease;
}
.lp-navbar.scrolled .lp-btn{padding:.6rem 1.4rem;font-size:rem}
.btn-open-modal.lp-btn:hover{transform:scale(1.05) translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.lp-container{display:flex;align-items:center;justify-content:space-between;padding:.4rem 1.2rem;max-width:1280px;margin:0 auto}
.lp-branding{display:flex;align-items:center;gap:1rem}
.title-mobile,.mobile-cta-bar{display:none}

body.admin-bar .lp-navbar{ top:32px; }
body.admin-bar .header-spacer{ margin-top:32px; }
@media (max-width:782px){
  body.admin-bar .lp-navbar{ top:46px; }
  body.admin-bar .header-spacer{ margin-top:46px; }
}

.hero-row{
  position:relative;width:100%;min-height:65vh;display:flex;align-items:flex-start;
  padding:3rem 1.5rem 1rem;background:#ECFAF9;overflow:hidden;
}
.hero-wrap,.hero,.hero-section{ margin-top: calc(var(--nav-h) + 20px); }

.hero-inner{
  max-width:var(--hero-max);margin:0 auto;display:grid;gap:16rem;
  grid-template-columns:1fr 1fr;grid-template-areas:"copy form";position:relative;z-index:2;
}

.hero-bg{
  position:absolute;
  z-index: 0;                
  width:25vw; height:auto;
  left:51%; top:55%;
  transform: translate(-45%, -55%);
  object-fit: contain;
  pointer-events:none; user-select:none;
}



.hero-card{border-radius:8px;max-width:440px;background:transparent}
.hero-card--copy{display:grid;justify-items:start;grid-area:copy;background:var(--main-orange);opacity:0.92;padding:.8rem;text-align: center}
.hero-card--form{grid-area:form;background:var(--card);opacity:.92;border-radius:12px;padding:1rem}
.hero-card--copy .cta-box{margin-left:0;margin-right:auto}
.copy-col{display:flex;flex-direction:column;align-items:flex-start;padding-top:2rem;gap:1rem}

.hero-title{font-size:clamp(1.8rem,3.2vw,2.4rem);line-height:1.15;color:var(--white);margin:0 0 1rem}
.hero-price{line-height:1.15;color:var(--white);margin:0 0 1rem;justify-self: center}
.hero-price .price{font-size: clamp(3.6em, 8vw, 5rem);font-weight: 600}
.hero-price .month{font-size: 1.2rem;font-weight: 400}
.hero-sub{font-size:clamp(1rem,1.6vw,1.125rem);color:var(--white);margin:0}
.form-title{font-size:22px;font-weight:800;color:var(--ink);text-align:center;margin:0 0 1rem}

.cta-box{background:var(--main-blue);color:#fff;border-radius:12px;max-width:400px;width:100%;padding:.4rem;text-align:center}
.cta-now{font-weight:800;letter-spacing:.2px;margin-bottom:.25rem}
.discount{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:600;line-height:1.05}
.summer-months{font-size:.9rem;opacity:.95}

.hero-card--copy .cta-box{ 
  margin:0;                   
}

.copy-col > .cta-box{
  margin: 0 auto;              
  align-self: center;          
  width: 100%;
  max-width: 400px;            
  float:none;
  position:static;
  padding:.8rem;
}

.form-wrapper{display:grid;gap:1rem}
.form-area{margin:.25rem 0 0}



.benefits{
  background:#f8f9fa;
}

.benefits-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnes */
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.benefits-divider {
  width: 80px;            /* wider than before */
  height: 4px;
  background: #d02670;    /* your strong accent color */
  border-radius: 4px;
  margin: 0 auto 40px auto;
}



.benefit-box {
  background: #ffffff;
  padding: 30px 20px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  max-width: 360px;
  flex: 1 1 300px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.benefit-icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  background-color: #e6f2fa;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.5rem;
  color: #0079c8;
}

.benefit-box h3 {
  font-size: 18px;
  font-weight: 700;
  color: #00335b;
  margin-bottom: 10px;
}

.benefit-box p {
  font-size: 15px;
  color: #555;
  margin: 0;
}








/* Brand color titles */
.benefit h3.blue { color: #0079c8; }


/* ======================= WHY SANITAS ======================= */
.why-sanitas-section{ text-align:center; background:#f1f8fc; }
.why-sanitas-title{font-size:1.8rem;color:var(--ink);margin-bottom:40px;padding-top:20px}
.why-sanitas-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;max-width:1200px;margin:0 auto;padding:0 20px 40px;
}
.why-item{text-align:center}
.why-icon{width:32px;height:32px;margin-bottom:8px;color:var(--main-blue);fill:currentColor;stroke:currentColor;stroke-width:2}
.why-item p{font-size:.95rem;color:#333;line-height:1.4}

/* ======================= PRODUCTES ======================= */
.product-heading-block{text-align:center;margin-bottom:40px;padding:0 20px;}
.product-heading-block h2{font-size:1.8rem;font-weight:700;color:var(--white);margin-bottom:10px}
.product-heading-block p{font-size:1rem;color:var(--white);max-width:600px;margin:0 auto}


.product-columns--2{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:4rem;max-width:916px;margin:2rem auto;padding:0 1rem;
}
.product-box{
  background:#fff;border-radius:16px;box-shadow:var(--shadow);
  padding:1.5rem;display:flex;flex-direction:column;gap:1rem;position:relative;
}
.product-type-title{font-weight:800;color:var(--ink);text-align:center;margin:0 0 .35rem;line-height:1.1}


.product-type-title .product-type-sub{
  display:block;
  margin-top:.15rem;
  min-height:1.05rem;   /* reserva espai encara que estigui buit */
  opacity:.75;
  font-weight:400;
}

.products{background: radial-gradient(circle at center, #003366 57%, #001B48 90%);
    /* background-size: 205px; */
    padding: 1rem 2rem;}

.subplan{border-top:1px solid var(--line);padding-top:1rem}
.subplan:first-of-type{border-top:none;padding-top:0}
.subplan-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.25rem}
.subplan-title{font-weight:800;color:var(--main-blue);margin-bottom:.25rem;font-size:1.05rem}
.subplan-bullets{margin:0 0 .75rem 1.1rem;padding:0;padding-bottom:1rem;}
.subplan-bullets li{margin:.25rem 0}
.subplan-bottom{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1rem}

.price{font-size:1.1rem;text-align:center}
.price strong{font-size:2rem;font-weight:800;color:#0D1846;margin:0 .2rem;display:inline-block;line-height:1.2}
.price .unit{font-size:1rem;opacity:.8}

.btn-open-modal{font-size:.95rem;background:var(--main-lila);color:#fff;text-decoration:none;border-radius:10px;padding:.55rem .9rem;font-weight:700;transition:transform .2s ease,box-shadow .2s ease;  border: none;cursor: pointer;}
.btn-open-modal:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.15)}
.link-details{color:var(--main-blue);text-decoration:none;font-weight:600}
.link-details:hover{text-decoration:underline}
.badge{display:inline-block;line-height:1;font-weight:700;padding:.25rem .45rem;border-radius:8px;font-size:.7rem}
.badge--group{background:#0D1846;color:#fff}
.subplan-note{margin-top:.4rem;font-size:.85rem;opacity:.8}

/* Primera subplan ressaltada */
.subplan:is(:first-child){outline:3px solid rgba(208,38,112,.15);border-radius:12px;padding:1rem}

/* Badge -15% al 2n producte enganxat al cantó */
.product-columns--2 .product-box:nth-child(2)::after{
  content:"-15%";
  position:absolute;top:0;right:0;transform:translate(35%,-35%);
  background:var(--main-lila);color:var(--white);font-weight:800;font-size:.9rem;line-height:1;
  padding:.35rem .6rem;border-radius:12px;box-shadow:0 8px 18px rgba(0,0,0,.12);z-index:2;pointer-events:none;
  display:none;
}


.faq-item {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  max-width: 900px;   
  margin: 0 auto 12px auto; 
  padding: 0.6rem 1rem;     
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.4s ease forwards;
}

.faq-item:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}


.faq-question {
  width: 100%;
  background-color: #f8f9fa;
  color: #00335b;
  font-weight: 600;
  text-align: left;
  padding: 0.6rem 1rem !important;
  border: none;
  outline: none;
  font-size: 0.95rem;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
    line-height: 1.3;
  min-height: auto !important;
}



.faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: #0079c8;
  transition: transform 0.3s ease;
}

.faq-question.active::after {
  content: "–";
  transform: translateY(-50%) rotate(0deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  background: #fff;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 16px;
}

.faq-answer p {
  margin: 16px 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
}

.faq-section-title {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #00335b;
  margin-bottom: 0px;
}

.faq-section-title::after {
  content: "";
  display: block;
   width: 100px;
  height: 3px;
  background-color: #d02670;
  margin: 16px auto 0;
  border-radius: 2px;
}

.faq-section {
  padding: 60px 20px;
  background-color: #f9f9f9;
    background: linear-gradient(to bottom, #ffffff 0%, #f9f9f9 100%);
  padding-top: 40px; /* if needed, to balance */
  width: 100%;
}



.faq-item:nth-child(1) { animation-delay: 0.1s; }
.faq-item:nth-child(2) { animation-delay: 0.2s; }
/* etc */

/* ======================= FOOTER ======================= */
.site-footer{
  background:#0D1846;color:#fff;text-align:center;font-size:.95rem;
  padding:30px 20px;border-top:1px solid #0D1846;
}
.footer-content{max-width:960px;margin:0 auto}
.footer-content p{margin-bottom:10px;font-size:.9rem;color:#fff}
.footer-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:8px}
.footer-links a{color:#fff;text-decoration:none;font-weight:500;transition:color .2s ease}
.footer-links a:hover{text-decoration:underline}

/* ======================= UTILITARIS / ANIMACIONS ======================= */
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ======================= HEADINGS ======================= */
h1{font-size:2rem}
h2{font-size:1.6rem}
h3{font-size:1.25rem}
h4{font-size:1.1rem}
h5{font-size:1rem}
h6{font-size:.9rem}

.product-box h2{font-size:1.6rem;line-height:1.15;font-weight:800;color:var(--ink);margin:0 0 .5rem}
.product-box h2 small{display:block;font-size:1rem;opacity:.75;margin-top:.15rem}
.product-box p,.product-box li{font-size:1rem;line-height:1.4}


.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999999;

  /* clave: el contenedor del modal ocupa viewport */
  overflow: hidden;
}

.modal.is-open{ display:block; }

/* el overlay está bien */
.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}

/* clave: limitar alto y permitir scroll interno */
.modal-dialog{
  position: relative;
  margin: 5vh auto;
  max-width: 600px;

  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;

  max-height: calc(100vh - 10vh); /* 5vh arriba + 5vh abajo */
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* iOS */
}

/* opcional pero recomendable para evitar “scroll chaining” */
.modal-dialog{
  overscroll-behavior: contain;
}
.modal-close { position: absolute; top:.1rem; right:.1rem; border:0; background:none; font-size:2rem; cursor:pointer; }

/* ======================= RESPONSIVE ======================= */

@media (max-width:1200px){
  .hero-inner{
    display:flex;flex-direction:column;align-items:center;gap:1.5rem;
    max-width:720px;margin:0 auto;padding:2rem 1rem;
  }
  .hero-card--form{
    width:100%;max-width:720px;background:#fff;border-radius:12px;
    padding:1.5rem;box-shadow:0 6px 18px rgba(0,0,0,.08);margin-top:1.5rem;min-height:440px;
  }
  .hero-card--form button{ margin:1rem auto 0;display:flex;align-items:center;justify-content:center;}
}

@media (min-width:1201px){
  .hero-inner{
    display:grid;grid-template-columns:1fr 1fr;
    gap: clamp(14rem,20vw,20rem);
    max-width:1440px;margin:0 auto;padding:0 5rem;align-items:start;
  }
  .hero-card--form{
    grid-column:2;align-self:start;background:#fff;border-radius:12px;padding:1rem;
    box-shadow:0 8px 22px rgba(0,0,0,.12);max-width:410px;margin:0;margin-left:auto;
    margin-top: clamp(16px, 2vw, 120px);
  }
}

/* —— Ultra-wide (≥1600) —— */
@media (min-width:1600px){
  .hero-inner{gap:26rem}
  .hero-row{background-size:53vw;background-position:center clamp(3px, 37%, 98px);}
}

/* —— 981–1200 —— */
@media (min-width:981px) and (max-width:1200px){
  .hero-inner{grid-template-columns:1fr .9fr;justify-content:center;max-width:1100px;margin:0 auto;gap:6rem}
}

/* —— 768–1200 (tablet) —— */
@media (min-width:768px) and (max-width:1200px){


.hero-bg {
        position: absolute;
        z-index: 0;
        inset: 0;
        width: 100%;
        height: 112%;
        object-fit: cover;
        object-position: -24% 50%;
        pointer-events: none;
        transform: none;
        user-select: none;}




  .hero-inner{
    position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.5rem;
    max-width:720px;margin:0 auto
  }


    
  .hero-card--copy{border-radius:12px;padding:1.8rem;box-shadow:0 8px 22px rgba(0,0,0,.12);width:100%;
  }
  .cta-box{
    width:100%;max-width:480px;margin:0 auto;border-radius:12px;padding:1rem;box-shadow:0 6px 16px rgba(0,0,0,.15);
  }

    .benefits-row {
      grid-template-columns: repeat(2, 1fr) !important;
      justify-items: center;
    gap: 20px !important;
    text-align: center;
  }

  /* PRODUCTES: 2 a dalt + 1 centrat a sota (triangle) */
  .product-columns--2{
    --cols-gap:2rem;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--cols-gap);justify-items:stretch;align-items:stretch;max-width:1100px;
  }
  .product-columns--2 > *{max-width:none;margin:0;width:100%;box-sizing:border-box}
  .product-columns--2 > :nth-child(3){
    grid-column:1 / -1;width:calc((100% - var(--cols-gap))/2);justify-self:center;
  }

  /* WHY: dues columnes */
  .why-sanitas-grid{
    grid-template-columns:repeat(2,1fr);gap:24px;max-width:820px;margin:0 auto;
  }
  .why-icon{width:36px;height:36px}
}

/* —— <768 (mòbil) —— */
@media (max-width:767.98px){

  .final-cta {
    display:none !important;
  }


  /* Títols i CTA a navbar (versió fosca a mòbil) */
  .lp-container{flex-direction:column;align-items:flex-start}
  .title-desktop{display:none}
  .title-mobile{display:inline}
  .lp-branding{flex-direction:row;align-items:center;width:100%}

  #logo{height:3.2rem!important;width:8rem!important;flex-shrink:0}
  .lp-navbar.scrolled #logo{height:3.2rem!important;width:8rem!important}
  #logo-img{transform:translateY(-75%)!important;width:100%;height:auto}

  .lp-title{flex-grow:1;max-width:calc(100% - 6rem);text-align:center}
  .lp-title-main{font-size:.9rem;line-height:1;margin:0;color:#ffffff}
  .lp-title-sub{display:none!important}
  .lp-navbar{background: var(--ink);}

  .lp-cta{display:none}

  .copy-col{gap:2rem}
  
  .hero-row{padding:0} 

  .hero-inner{
    position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1rem;
    max-width:640px;margin:0 auto;padding:2rem;}


  .hero-bg{
  position: absolute;
  z-index: 0;
  inset: 0;                
  width: min(90vw, 420px);
  object-fit: contain;        
  transform: translate(0%, 3%);
  pointer-events: none;
  user-select: none;}

    .benefits-row { grid-template-columns: 1fr; }

  .benefit-box {
    width: 100%;
    max-width: 100%;
     position: relative;
    padding-top: 50px; 
  }
  
   .benefit-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 40px;
    right: 40px;
    height: 3px;
    background-color: #d02670; /* your purple */
    border-radius: 4px;
  }


  /* HERO plena pantalla amb text en targeta */

  .hero-wrap{margin-top: 50px}


    
  .hero-card--copy{
    border-radius:12px;padding:1.25rem;box-shadow:0 6px 16px rgba(0,0,0,.08);width:100%;
  }

.hero-card--form{min-height:700px}

  .product-columns--2{
    display:grid;grid-template-columns:1fr;gap:1.5rem;
    width:min(640px,100%);margin-inline:auto;padding-inline:16px;justify-items:center;box-sizing:border-box;
  }
  .product-columns--3 .product-box{width:100%;max-width:560px;justify-self:center}

  .why-sanitas-grid{
    grid-template-columns:1fr !important;gap:18px;padding:0 16px 32px;max-width:640px;margin:0 auto;
  }
  .why-sanitas-title{font-size:1.6rem;margin-bottom:28px}
  .why-item p{font-size:.95rem}

  .mobile-cta-bar{display:none;opacity:0;transform:translateY(100%);transition:opacity .4s ease,transform .4s ease;position:fixed;bottom:0;left:0;width:100%;background:#ffffff;padding:.8rem 1rem;box-shadow:0 -2px 8px rgba(0,0,0,.1);z-index:10000;justify-content:center;align-items:center}
  .mobile-cta-bar.visible{display:flex;opacity:1;transform:translateY(0)}
  .btn-open-modal.mobile-cta-btn{background:#d02670;color:#fff;padding:.6rem 1.4rem;font-size:1rem;font-weight:600;text-decoration:none;border-radius:8px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:background-color .3s ease}
  .btn-open-modal.mobile-cta-btn:hover{background:#a11d56}
}

/* ======================= FINAL CTA ======================= */
.final-cta{
  background: linear-gradient(135deg, #0079c8, #005c9e);
  color:#fff;
  width:100%;
  margin-left:calc(-50vw + 50%);
  padding:60px 20px;
  border-radius:0;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  text-align:center;
}


.final-cta h2{
  margin:0;
  font-weight:800;
  line-height:1.2;
  display:inline-flex;          /* icona enganxada al text */
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:clamp(1.6rem, 3.2vw, 3rem);
  color:#fff;
  font-size: 2.4rem;
}

.final-cta .icon{
  width:56px;
  height:56px;
  display:inline-block;
  flex:0 0 auto;
  color:#fff;
}

.btn-open-modal.final-cta-btn{
  display:inline-block;
  background:#d02670;
  color:#fff;
  padding:0.9rem 1.6rem;
  font-weight:700;
  border-radius:8px;
  text-decoration:none;
  transition: background .3s ease, transform .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}

.btn-open-modal.final-cta-btn:hover{
  background:#b81d5f;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}









 .lp-form{
  background:#fff !important;            
  border:1px solid rgba(0,0,0,.04);
  border-radius:14px;
  padding:1.45rem !important;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  position:relative;
  overflow:hidden;
  font-family: "Montserrat", sans-serif;
}


 .lp-form::after{
  content:"";
  position:absolute; inset:-20% -10% auto -10%;
  height:50%;
  background:radial-gradient(60% 60% at 50% 0%,
              rgba(0,121,200,.14), rgba(0,0,0,0));
  pointer-events:none;
}


.lp-form .grid {
  display: grid;
  gap: 12px 14px;
}

@media (min-width: 768px) {
  .lp-form .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .lp-form .field.half  { grid-column: span 6; }
  .lp-form .field.third { grid-column: span 4; }
  .lp-form .field.full  { grid-column: span 12; }
}

.lp-form .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lp-form .field label {
  font-size: 14px;
  font-weight: 600;
  color: #00335b;
}

.lp-form .field input,
.lp-form .field select {
  width: 100%;
  height: 44px;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid #e1e6ea;
  font-size: 14px;
}

.lp-form .field input:focus,
.lp-form .field select:focus {
  border-color: #0079c8;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,121,200,.18);
}





.lp-form input,
.lp-form select,
.lp-form textarea,
.lp-form button,
.lp-form label{
  font-family: inherit;
}


.checkbox-field {
  width: 100%;
  margin-top: 1rem;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.3;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  height: auto;
  margin: 0.15rem 0 0;
  flex: 0 0 auto;
}

.checkbox-label span {
  display: inline;
}

/* Submit button */
.lp-form input[type="submit"],
.lp-form button[type="submit"]{
  width: 64%;
  height: 46px;
  margin: 1rem auto 0;
  border: 0;
  border-radius: 10px;
  font-weight: 800;
  background: var(--main-lila);
  color: #fff;
  font-size: 1.3rem;
  letter-spacing: .2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform .08s ease-out,
              box-shadow .12s ease-out,
              filter .2s ease;
}

/* Hover */
.lp-form input[type="submit"]:hover,
.lp-form button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  filter: brightness(1.05);
}

/* Active (click) */
.lp-form input[type="submit"]:active,
.lp-form button[type="submit"]:active{
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
  filter: brightness(.98);
}

/* Focus (accessibilitat, sense lletjor) */
.lp-form input[type="submit"]:focus-visible,
.lp-form button[type="submit"]:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(208,38,112,.35),
    0 6px 14px rgba(0,0,0,.18);
}

/* Disabled (quan HTML5 bloqueja submit) */
.lp-form input[type="submit"]:disabled,
.lp-form button[type="submit"]:disabled{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

.company{visibility:hidden !important}




.form-success {
  display: none;
  min-height: 360px;
  padding: 2.4rem 2rem;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;

  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}



.form-success h3 {
  font-size: 1.7rem;
  font-weight: 800;
  margin: 0;
}

.form-success p {
  font-size: 1.05rem;
  color: #555;
  margin: 0;
  max-width: 420px;
  line-height: 1.45;
}

@media (max-width: 768px) {
  .form-success {
    min-height: 300px;
    padding: 2rem 1.4rem;
  }
  .form-success h3 { font-size: 1.45rem; }
}


.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-error {
  display: none;
  margin-top: 1rem;
  color: var(--error-color);
  font-size: 0.95rem;
  line-height: 1.4;
}

.form-error.is-visible {
  display: block;
}

.lp-form .is-invalid {
  border-color: var(--error-color) !important;
  color: var(--error-color);
}

.lp-form .is-invalid::placeholder {
  color: var(--error-color);
  opacity: 0.85;
}

.lp-form select.is-invalid {
  color: var(--error-color);
}

.lp-form .field:has(.is-invalid) label {
  color: var(--error-color);
}

.lp-form label:has(+ .is-invalid),
.lp-form .is-invalid + label {
  color: var(--error-color);
}

.lp-form .field-error {
  color: var(--error-color);
  font-size: 0.85rem;
  margin-top: 0.35rem;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .form-error {
    font-size: 1.02rem;
    padding: 14px;
  }

  .lp-form .field-error {
    font-size: 0.95rem;
  }
}

.is-hidden { display: none !important; }


.form-success.is-visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#ts-slot,
#ts-slot-pop {
  margin: 1rem 0;
}

.dob-warning{
  padding: 12px 14px;
  margin: 0 0 12px;
  border-radius: 10px;
  background: #fff7e6;
  border: 1px solid #f5c26b;
  color: #6b4b00;
  font-size: 14px;
  line-height: 1.35;
}