@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Base styles extracted from index.php */
    :root{
      /* Paleta AA/AAA comprobada (altas relaciones de contraste) */
      --bg-hero:#36aaa7;           /* verde turquesa VendoYo */
      --bg-hero-pattern:#03b199;   /* tono para textura sutil */
      --brand:#36aaa7;             /* acento enlaces */
      --text:#0f172a;              /* casi negro */
      --muted:#6b7280;             /* texto secundario */
      --surface:#ffffff;           /* tarjetas */
      --surface-alt:#f8fafc;       /* secciones */
      --pricing-bg:#f0f9f9;        /* tarifa/calculadora */
      --border-soft:#e2e8f0;
      --ring:#0a62c2;              /* foco accesible */
      --ok:#1b8f3a;                /* iconos/éxito */
      --warn:#b77900;              /* avisos */
      --cta:#ffd60a;               /* botón amarillo alto contraste */
      --cta-text:#111111;          /* texto en CTA (contraste AA+) */
      --shadow: 0 12px 36px rgba(15,23,42,.08);
      --radius: 16px;
      --maxw: 1120px;
    }
    .container-nav-main{
      width: 1100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    nav{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: start;  
    }

    /* Fuerzo 3 columnas para "¿Qué es VendoYo?" en desktop */
    @media (min-width: 901px){
      .grid-quees{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; align-items: stretch }
    }

    /* Fuente personalizada */
    @font-face {
      font-family: 'Ackno';
      src: url('../fonts/ACKNO.TTF') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    /* Reset accesible y tipografía del sistema */
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:var(--surface-alt);
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    h1,h2,h3,h4,h5,h6{
      font-family:"Ackno","Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,sans-serif;
      font-weight:700;
      letter-spacing:.2px;
    }
    img{max-width:100%;height:auto}
    a{color:var(--brand)}
    a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:3px solid var(--ring);outline-offset:2px}
    .visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

    /* Skip link */
    .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
    .skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#fff;color:#000;padding:.6rem 1rem;border-radius:8px;box-shadow:var(--shadow);z-index:9999}
    .gtm-noscript-frame{display:none;visibility:hidden}

    /* Header / Nav */
    header{background: white;color:#ffffff;margin-top:0;}
    .nav{position:fixed;top:0;left:0;right:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:.6rem 1rem;background:var(--bg-hero);border-bottom:0;box-shadow:none;margin:0;}
    .logo{font-family: 'Ackno', sans-serif; font-size: 1.8rem; letter-spacing: 1px;}
    .logo a{color:#ffffff;text-decoration:none;font-weight:normal;}
    .menu{display:flex;gap:1rem}
    .menu a{color:#ffffff;text-decoration:none;font-weight:600}
    .menu a:hover{text-decoration:underline}
    .menu-btn{display:none}
    @media (min-width: 901px){
      .menu{display:flex !important}
      .menu-btn{display:none !important}
    }
    .nav.is-stuck{box-shadow:0 6px 18px rgba(0,0,0,.08);border-bottom:1px solid #dbe3ee}
    .logo{font-family: 'Ackno', sans-serif; font-size: 1.8rem; letter-spacing: 1px;}
    .logo a{color:var(--text);text-decoration:none;font-weight:normal;}
    .menu{display:flex;gap:1rem}
    .menu a{
      color:var(--text);
      text-decoration:none;
      font-weight:600;
      box-shadow: 1px 1px 15px rgba(53, 53, 53, 0.343);
      padding: .4rem .8rem;
      border-radius: 1.5rem;
    }
    .menu a:hover{
      text-decoration: none;
      background-color: white;
      color: var(--bg-hero) !important;
    }
    .menu-btn{display:none}

    /* Hero */
    .hero{position:relative;isolation:isolate; text-align: center;}
    .hero-inner{max-width:800px;margin:56px auto 0;padding:4.5rem 1rem 3rem;}
    .hero h1{color:#ffffff;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.2;margin:0 0 1.5rem}
    .hero p{color:#eafff9;margin:0 0 2rem; font-size: 1.1rem; line-height: 1.6; max-width: 700px; margin-left: auto; margin-right: auto;}
    .hero-price-note{color:var(--bg-hero-pattern);font-weight:600}
    .hero-recaptcha{display:flex;justify-content:center;align-items:center;width:100%;margin-bottom:.6rem}
    .cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--bg-hero);color:white;font-weight:800;border:0;border-radius:999px;padding:.95rem 1.25rem;text-decoration:none;box-shadow:var(--shadow)}
    .cta:hover{filter:brightness(.98)}

    /* Textura hero (puntos sutiles) */

    /* Badges bajo hero */
    .badges{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.25rem}
    .badge{background:rgba(255,255,255,.18);color:#ffffff;border:1px solid rgba(255,255,255,.4);padding:.4rem .7rem;border-radius:999px;font-size:.9rem}

    main{display:block}
    section{padding:3rem 1rem;scroll-margin-top:84px}
    .container{max-width:var(--maxw);margin:0 auto}

    /* Cards generales */
    .grid-3{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid-2{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
    /* Forzar 3 columnas en desktop para "¿Qué es VendoYo?" */
    .grid-quees{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
    .card{background:var(--surface);border:1px solid #e3e9f2;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.2rem}
    .card h3{margin:.2rem 0 .5rem;font-size:1.15rem;text-align:center}
    .muted{color:var(--muted)}

    /* Comparativa accesible */
    .table-wrap{overflow:auto;border:1px solid #e3e9f2;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
    table{width:100%;border-collapse:collapse}
    caption{padding:1rem;font-weight:700;text-align:left}
    th,td{padding:1rem;border-top:1px solid #e9eef6;text-align:left}
    tr:nth-child(even){background:var(--surface-alt)}

    /* Por qué elegirnos */
    .grid-4{display:grid;gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr))}

    /* CTA final */
    .cta-section{
      background:#ffffff;
      text-align:center;
      border-top:1px solid #eef2f6;
    }
    .cita-container{
      max-width:800px;
      margin:2.5rem auto 0;
      text-align:center;
      padding:1.6rem 1.8rem;
      background:#ffffff;
      border-radius:18px;
      border:2px solid rgba(54,170,167,0.2);
      box-shadow:0 12px 24px rgba(15,23,42,0.06);
    }
    .cita-text{font-style:italic;font-size:1rem;color:var(--muted);margin:0;line-height:1.6}

    /* Footer */
    footer{background:#0B0F13;color:#e9eef6}
    footer a{color:#fff}
    .footer-inner{max-width:var(--maxw);margin:0 auto;padding:2rem 1rem;display:grid;gap:1rem;grid-template-columns:2fr 1fr}
    .legal{font-size:.9rem;color:#cfd7e6}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding:1rem 1rem;text-align:center;color:#cfd7e6}

    /* Responsive */
    @media (max-width: 900px){
      .hero-inner{max-width: 90%;}
      /* Forzar 1 columna en móvil para todas las rejillas principales */
      .grid-3,.grid-4,.grid-2,.grid-quees,.grid-servicios{grid-template-columns:1fr !important}
      .footer-inner{grid-template-columns:1fr}
      /* Menú móvil: mostrar burger y ocultar links */
      .menu-btn{display:inline-flex !important;background:transparent;border:2px solid #ffffff;color:#ffffff;border-radius:10px;padding:.4rem .6rem}
      .menu{display:none !important}
      .menu[aria-expanded="true"]{display:flex !important;flex-direction:column;gap:.6rem;position:absolute;top:64px;right:16px;background:#ffffff;border:1px solid #dbe3ee;padding:1rem;border-radius:12px;box-shadow:var(--shadow);z-index:1000}
      /* Centrados en móvil */
      .hero-inner > div:first-child{ text-align:center }
      .hero .cta{ margin: 0 auto }
      .badges{ justify-content:center }
      .container > h2{ text-align:center }
      .table-wrap{ margin: 0 auto }
      caption{ text-align:center }
      table th, table td{ padding:.85rem }
    }
      /* Forzar 1 columna en móvil para todas las rejillas principales */
      .grid-3,.grid-4,.grid-2,.grid-quees,.grid-servicios{grid-template-columns:1fr !important}
      .footer-inner{grid-template-columns:1fr}
      /* Menú móvil: mostrar burger y ocultar links */
      .menu-btn{display:inline-flex;background:transparent;border:2px solid currentColor;color:var(--text);border-radius:10px;padding:.4rem .6rem}
      .menu{display:none}
      .menu[aria-expanded="true"]{display:flex;flex-direction:column;gap:.6rem;position:absolute;top:64px;right:16px;background:#ffffff;border:1px solid #dbe3ee;padding:1rem;border-radius:12px;box-shadow:var(--shadow);z-index:1000}
      /* Centrados en móvil */
      .hero-inner > div:first-child{ text-align:center }
      .hero .cta{ margin: 0 auto }
      .badges{ justify-content:center }
      .container > h2{ text-align:center }
      .table-wrap{ margin: 0 auto }
      caption{ text-align:center }
      table th, table td{ padding:.85rem }
    
      /* Grids a 1 columna en móvil */
      .grid-3,.grid-4,.grid-2{grid-template-columns:1fr}
      .footer-inner{grid-template-columns:1fr}
      /* Menú móvil: mostrar burger y ocultar links */
      .menu-btn{display:inline-flex;background:transparent;border:2px solid currentColor;color:var(--text);border-radius:10px;padding:.4rem .6rem}
      .menu{display:none}
      .menu[aria-expanded="true"]{display:flex;flex-direction:column;gap:.6rem;position:absolute;top:64px;right:16px;background:#ffffff;border:1px solid #dbe3ee;padding:1rem;border-radius:12px;box-shadow:var(--shadow);z-index:1000}
      /* Centrados en móvil */
      .hero-inner > div:first-child{ text-align:center }
      .hero .cta{ margin: 0 auto }
      .badges{ justify-content:center }
      .container > h2{ text-align:center }
      .table-wrap{ margin: 0 auto }
      caption{ text-align:center }
      table th, table td{ padding:.85rem }
    
      /* Grids a 1 columna en móvil */
      .grid-3,.grid-4,.grid-2{grid-template-columns:1fr}
      .footer-inner{grid-template-columns:1fr}
      /* Menú móvil: mostrar burger y ocultar links */
      .menu-btn{display:inline-flex;background:transparent;border:2px solid currentColor;color:var(--text);border-radius:10px;padding:.4rem .6rem}
      .menu{display:none}
      .menu[aria-expanded="true"]{display:flex;flex-direction:column;gap:.6rem;position:absolute;top:64px;right:16px;background:#ffffff;border:1px solid #dbe3ee;padding:1rem;border-radius:12px;box-shadow:var(--shadow);z-index:1000}
      /* Centrados en móvil */
      .hero-inner > div:first-child{ text-align:center }
      .hero .cta{ margin: 0 auto }
      .badges{ justify-content:center }
      .container > h2{ text-align:center }
      .table-wrap{ margin: 0 auto }
      caption{ text-align:center }
      table th, table td{ padding:.85rem }
    
      /* Grids a 1 columna en móvil */
      .grid-3,.grid-4{grid-template-columns:1fr}
      .footer-inner{grid-template-columns:1fr}
      .menu-btn{display:inline-flex;background:transparent;border:2px solid currentColor;color:var(--text);border-radius:10px;padding:.4rem .6rem}
      .menu{display:none}
      .menu[aria-expanded="true"]{display:flex;flex-direction:column;gap:.6rem;position:absolute;top:64px;right:16px;background:#ffffff;border:1px solid #dbe3ee;padding:1rem;border-radius:12px;box-shadow:var(--shadow);z-index:1000}
      /* Centrados en móvil */
      .hero-inner > div:first-child{ text-align:center }
      .hero .cta{ margin: 0 auto }
      .badges{ justify-content:center }
      .container > h2{ text-align:center }
      .table-wrap{ margin: 0 auto }
      caption{ text-align:center }
      table th, table td{ padding:.85rem }
    
      /* Grids a 1 columna en móvil */
      .grid-3{grid-template-columns:1fr}
      .grid-4{grid-template-columns:1fr}
      .footer-inner{grid-template-columns:1fr}
      .menu-btn{display:inline-flex;background:transparent;border:2px solid currentColor;color:var(--text);border-radius:10px;padding:.4rem .6rem}
      .menu{display:none}
      .menu[aria-expanded="true"]{display:flex;flex-direction:column;gap:.6rem;position:absolute;top:64px;right:16px;background:#ffffff;border:1px solid #dbe3ee;padding:1rem;border-radius:12px;box-shadow:var(--shadow);z-index:1000}
      /* Centrados en móvil */
      .hero-inner > div:first-child{ text-align:center }
      .hero .cta{ margin: 0 auto }
      .badges{ justify-content:center }
      .container > h2{ text-align:center }
      .table-wrap{ margin: 0 auto }
      caption{ text-align:center }
      table th, table td{ padding:.85rem }
    
      .grid-3{grid-template-columns:1fr 1fr}
      .grid-4{grid-template-columns:1fr 1fr}
      .footer-inner{grid-template-columns:1fr}
      .menu-btn{display:inline-flex;background:transparent;border:2px solid currentColor;color:var(--text);border-radius:10px;padding:.4rem .6rem}
      .menu{display:none}
      .menu[aria-expanded="true"]{display:flex;flex-direction:column;gap:.6rem;position:absolute;top:64px;right:16px;background:#ffffff;border:1px solid #dbe3ee;padding:1rem;border-radius:12px;box-shadow:var(--shadow);z-index:1000}
      /* Centrados en móvil */
      .hero-inner > div:first-child{ text-align:center }
      .hero .cta{ margin: 0 auto }
      .badges{ justify-content:center }
    
      .grid-3{grid-template-columns:1fr 1fr}
      .grid-4{grid-template-columns:1fr 1fr}
      .footer-inner{grid-template-columns:1fr}
      .menu-btn{display:inline-flex;background:transparent;border:2px solid currentColor;color:var(--text);border-radius:10px;padding:.4rem .6rem}
      .menu{display:none}
      .menu[aria-expanded="true"]{
        display:flex;
        flex-direction:column;
        gap:.6rem;
        position:absolute;
        top:66px;
        right:1px;
        background: var(--bg-hero);
        border:none;
        padding:1rem;
        border-radius: 12px;
        box-shadow:var(--shadow);
        z-index:1000;
        width: 60%;
        height: auto;
      }

    /* Respeto a preferencias del usuario */
    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      .cta{transition:none}
    }
      /* Tabla comparativa: versión card en móvil */
    @media (max-width:600px){
      .table-wrap{overflow:visible}
      table.responsive{border:0}
      table.responsive thead{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
      table.responsive tbody,table.responsive tr,table.responsive td,table.responsive th{display:block}
      table.responsive tr{background:#fff;margin:0 0 1rem;border:1px solid #e3e9f2;border-radius:var(--radius);box-shadow:var(--shadow)}
      table.responsive th[scope="row"],table.responsive td{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.9rem 1rem;border:0}
      table.responsive th[scope="row"]::before{content:"Valor vivienda";font-weight:600;color:var(--muted)}
      table.responsive td:nth-child(2)::before{content:"4% Tradicional";font-weight:600;color:var(--muted)}
      table.responsive td:nth-child(3)::before{content:"VendoYo.com";font-weight:600;color:var(--muted)}
      table.responsive td:nth-child(4)::before{content:"Ahorro";font-weight:600;color:var(--muted)}
    }
      /* Fuerzo 3 columnas en desktop para Servicios incluidos */
    @media (min-width: 901px){
      .grid-servicios{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; align-items: stretch }
    }
      /* Refuerzo de layout: ¿Qué es VendoYo? -> 3 columnas en desktop */
    @media (min-width: 901px){
      .grid-quees{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; align-items: stretch }
    }
      /* Correcciones solicitadas: navbar sin franja blanca, textos blancos y tarjeta lateral legible */
    .nav{border-bottom:0 !important;box-shadow:0 8px 18px rgba(0,0,0,.12) !important}
    .nav .logo a,.nav .menu a,.menu-btn{color:#ffffff;}
    .menu-btn{border-color:#ffffff !important}

    /* Hero: limitar color claro a la columna izquierda y restaurar color normal dentro de la tarjeta */
    .hero p{color:inherit}
    .hero-inner > div:first-child p{color:#eafff9}

    /* Tarjeta lateral del hero (comparativa) */
    .hero aside.card{background:#ffffff !important;color:var(--text) !important;border:1px solid rgba(0,0,0,.08) !important;box-shadow:0 22px 48px rgba(0,0,0,.18) !important}
    .hero aside.card caption, .hero aside.card th, .hero aside.card td{color:var(--text) !important}

    /* Sistema de notificaciones */
    .notification {
      position: fixed;
      top: 80px;
      right: 20px;
      max-width: 400px;
      padding: 1rem 1.5rem;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
      z-index: 9999;
      display: flex;
      align-items: center;
      gap: 12px;
      animation: slideIn 0.3s ease-out;
      font-weight: 500;
    }
    .notification.success {
      background: #10b981;
      color: white;
    }
    .notification.error {
      background: #ef4444;
      color: white;
    }
    .notification-icon {
      font-size: 24px;
      flex-shrink: 0;
    }
    .notification-close {
      margin-left: auto;
      background: none;
      border: none;
      color: inherit;
      font-size: 24px;
      cursor: pointer;
      padding: 0;
      line-height: 1;
      opacity: 0.8;
    }
    .notification-close:hover {
      opacity: 1;
    }
    @keyframes slideIn {
      from {
        transform: translateX(400px);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }
    @keyframes slideOut {
      from {
        transform: translateX(0);
        opacity: 1;
      }
      to {
        transform: translateX(400px);
        opacity: 0;
      }
    }
    .notification.hiding {
      animation: slideOut 0.3s ease-in forwards;
    }

    /* Estado de carga del botón */
    .hero-submit-button:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
    .hero-submit-button.loading {
      position: relative;
      color: transparent;
    }
    .hero-submit-button.loading::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      top: 50%;
      left: 50%;
      margin-left: -10px;
      margin-top: -10px;
      border: 3px solid rgba(255,255,255,0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    @media (max-width: 768px) {
      .notification {
        top: 70px;
        right: 10px;
        left: 10px;
        max-width: none;
      }
    }

    /* Calculadora de ahorro */
    .calc-section{
      background:var(--pricing-bg);
      padding:72px 20px;
    }
    .calc-shell{max-width:560px;margin:0 auto}
    .calc-card{
      background:#ffffff;
      border-radius:24px;
      padding:28px;
      border:1px solid #e2f2f1;
      box-shadow:0 24px 50px rgba(15,23,42,.12);
    }
    .calc-head{display:flex;gap:.75rem;align-items:center;margin-bottom:1.2rem}
    .calc-icon{
      width:40px;height:40px;border-radius:10px;
      background:var(--bg-hero);
      color:#ffffff;display:flex;align-items:center;justify-content:center;
      box-shadow:0 10px 20px rgba(54,170,167,.3);
    }
    .calc-title{margin:0;font-size:1.1rem;font-weight:700}
    .calc-sub{margin:0;color:var(--muted);font-weight:500;font-size:.85rem}
    .calc-value{display:flex;justify-content:space-between;align-items:center;gap:12px}
    .calc-label{color:var(--muted);font-weight:600;margin:0;font-size:.9rem}
    .calc-amount{
      text-align:right;
      font-size:clamp(1.7rem,4vw,2.4rem);
      font-weight:800;
      color:var(--bg-hero);
      letter-spacing:.4px;
    }
    .calc-slider{margin-top:.9rem}
    .calc-range{
      width:100%;
      appearance:none;
      height:6px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--bg-hero) 0%,var(--bg-hero) var(--calc-progress,0%),#dbe8e7 var(--calc-progress,0%),#dbe8e7 100%);
      outline:none;
    }
    .calc-range::-webkit-slider-runnable-track{height:6px;background:transparent;border-radius:999px}
    .calc-range::-webkit-slider-thumb{
      appearance:none;
      width:18px;height:18px;border-radius:50%;
      background:#ffffff;border:2px solid var(--bg-hero);
      box-shadow:0 6px 14px rgba(54,170,167,.35);
      margin-top:-6px;cursor:pointer;
    }
    .calc-range::-moz-range-track{height:6px;background:#dbe8e7;border-radius:999px}
    .calc-range::-moz-range-progress{height:6px;background:var(--bg-hero);border-radius:999px}
    .calc-range::-moz-range-thumb{
      width:18px;height:18px;border-radius:50%;
      background:#ffffff;border:2px solid var(--bg-hero);
      box-shadow:0 6px 14px rgba(54,170,167,.35);
      cursor:pointer;
    }
    .calc-range-labels{
      display:flex;justify-content:space-between;
      font-size:.75rem;color:#9aa4b2;margin-top:.4rem;font-weight:600;
    }
    .calc-compare{display:grid;gap:.6rem;margin-top:1.2rem}
    .calc-pill{
      display:flex;align-items:center;gap:.8rem;
      padding:.8rem 1rem;border-radius:14px;border:1px solid;
    }
    .calc-pill--trad{background:#fff1f1;border-color:#ffd9d9}
    .calc-pill--vend{background:#ecf9f7;border-color:#d7efeb}
    .calc-pill-icon{
      width:36px;height:36px;border-radius:10px;
      display:flex;align-items:center;justify-content:center;flex-shrink:0;
    }
    .calc-pill--trad .calc-pill-icon{background:#ffe4e4;color:#e74b4b}
    .calc-pill--vend .calc-pill-icon{background:#dff3f1;color:var(--bg-hero)}
    .calc-pill-title{font-weight:700;font-size:.9rem}
    .calc-pill-sub{color:var(--muted);font-size:.75rem}
    .calc-pill-value{margin-left:auto;font-weight:800;font-size:1rem}
    .calc-pill--trad .calc-pill-value{color:#e23636}
    .calc-pill--vend .calc-pill-value{color:var(--bg-hero)}
    .calc-savings{
      margin-top:1rem;
      background:#0f172a;
      border-radius:16px;
      padding:1rem 1.2rem;
      color:#ffffff;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
      text-align:center;
    }
    .calc-savings-label{
      font-size:.7rem;font-weight:700;letter-spacing:.14em;
      color:var(--bg-hero-pattern);display:flex;align-items:center;gap:.5rem;justify-content:center;
    }
    .calc-savings-value{
      margin-top:.35rem;
      font-size:clamp(1.6rem,4vw,2.4rem);
      font-weight:800;
      display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;justify-content:center;
    }
    .calc-savings-percent{font-size:.9rem;color:var(--bg-hero-pattern);font-weight:700}
    .calc-cta{
      display:block;text-align:center;margin-top:1rem;
      padding:.95rem 1.2rem;
      background:var(--bg-hero);
      color:#ffffff;border-radius:12px;text-decoration:none;font-weight:700;
      text-transform:uppercase;
      letter-spacing:.08em;
      box-shadow:0 12px 28px rgba(54,170,167,.3);
      font-size:.8rem;
    }
    .calc-cta:hover{filter:brightness(.98)}
    .calc-disclaimer{text-align:center;color:#9aa4b2;font-size:.7rem;margin-top:.6rem}
    .calc-note{text-align:center;color:#9aa4b2;font-size:.7rem;margin-top:.2rem}
    @media (max-width: 768px){
      .calc-card{padding:2rem 1.5rem 1.6rem;border-radius:22px}
      .calc-head{flex-direction:column;align-items:flex-start}
      .calc-pill{flex-wrap:wrap}
      .calc-pill-value{width:100%;text-align:right;margin-left:0}
    }

/* Stitch layout overrides */
    main{background:var(--surface-alt)}
    header{background:#ffffff}
    .hero{background:#ffffff;text-align:left}
    .nav{
      position:sticky;
      top:0;
      background:var(--bg-hero);
      box-shadow:0 8px 20px rgba(15,23,42,.12);
      border-bottom:0;
    }
    .nav .logo a{color:#ffffff;letter-spacing:.6px;text-transform:uppercase}
    .menu{gap:1.5rem}
    .menu a{
      color:rgba(255,255,255,.9);
      background:transparent;
      box-shadow:none;
      padding:.35rem .6rem;
      border-radius:999px;
      font-weight:600;
    }
    .menu a:hover{color:#ffffff;background:rgba(255,255,255,.16)}
    .menu a:last-child{
      border:1px solid rgba(255,255,255,.75);
      padding:.35rem .9rem;
    }
    .menu a:last-child:hover{
      background:#ffffff;
      color:var(--bg-hero);
    }
    .menu-btn{color:#ffffff;border-color:#ffffff}
    .cta{
      background:var(--bg-hero);
      border-radius:14px;
      padding:1rem 1.6rem;
      box-shadow:0 12px 28px rgba(54,170,167,.3);
    }
    .cta:hover{filter:brightness(.98)}
    footer{background:#0f172a;color:#e2e8f0}
    footer a{color:#cbd5f5}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.08);color:#94a3b8}

/* WhatsApp floating button */
    .whatsapp-float {
      position: fixed;
      width: 56px;
      height: 56px;
      bottom: 24px;
      right: 24px;
      background-color: #25d366;
      color: #FFF;
      border-radius: 999px;
      text-align: center;
      font-size: 26px;
      box-shadow: 0 12px 24px rgba(15,23,42,0.2);
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease-in-out;
    }
    .whatsapp-float:hover {
      background-color: #128C7E;
      transform: scale(1.1);
    }
    @media (max-width: 768px) {
      .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 18px;
        right: 18px;
      }
    }