:root{
    --navy:#0a1726;
    --navy2:#11253b;
    --steel:#1c3b56;
    --blue:#3b96ee;
    --blue-dark:#1763ac;
    --blue-light:#9cd0ff;
    --cream:#e9eff7;
    --line:rgba(233,239,247,0.12);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Karla',sans-serif;
    background:var(--navy);
    color:var(--cream);
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:'Big Shoulders Display',sans-serif; font-weight:800; letter-spacing:0.5px; line-height:1.05; text-transform:uppercase;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .blueprint{
    position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.5;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 36px 36px;
  }
  .container{max-width:1100px; margin:0 auto; padding:0 22px; position:relative; z-index:1;}

  /* ===== TOP BAR ===== */
  .topbar{background:var(--navy2); border-bottom:1px solid var(--line); font-size:0.82rem; position:sticky; top:0; z-index:50;}
  .topbar .container{display:flex; justify-content:space-between; align-items:center; padding:9px 22px; gap:10px; flex-wrap:wrap;}
  .topbar .hrs{color:rgba(233,239,247,0.65);}
  .topbar .call{display:flex; gap:16px; align-items:center;}
  .topbar a.phone{font-weight:700; color:var(--blue-light);}

  /* ===== HEADER / NAV ===== */
  header.main{background:var(--navy); border-bottom:1px solid var(--line); position:sticky; top:33px; z-index:49;}
  nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
  .logo{font-family:'Big Shoulders Display',sans-serif; font-size:1.3rem; font-weight:800; text-transform:uppercase; letter-spacing:1px;}
  .logo span{color:var(--blue-light);}
  .nav-links{display:flex; gap:22px; font-size:0.85rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;}
  .nav-links a:hover{color:var(--blue-light);}
  .nav-cta{background:var(--blue); color:var(--navy); padding:10px 18px; border-radius:6px; font-weight:700; font-size:0.85rem; text-transform:uppercase; white-space:nowrap;}
  @media(max-width:780px){ .nav-links{display:none;} }

  /* ===== BREADCRUMB ===== */
  .breadcrumb{font-size:0.78rem; color:rgba(233,239,247,0.5); padding:14px 0 0;}
  .breadcrumb a{color:rgba(233,239,247,0.6);}
  .breadcrumb a:hover{color:var(--blue-light);}
  .breadcrumb .sep{margin:0 6px; opacity:0.5;}

  /* ===== HERO ===== */
  .hero{
    padding:64px 0 56px;
    background:
      linear-gradient(160deg, rgba(59,150,238,0.12), transparent 50%),
      linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
    border-bottom:1px solid var(--line);
    position:relative;
  }
  .hero-grid{display:grid; grid-template-columns: 1.15fr 0.85fr; gap:40px; align-items:center;}
  @media(max-width:860px){ .hero-grid{grid-template-columns:1fr;} }
  .badge-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
  .badge{
    background:rgba(59,150,238,0.14); border:1px solid rgba(59,150,238,0.4);
    color:var(--blue-light); font-size:0.74rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.5px; padding:5px 12px; border-radius:30px;
  }
  .hero h1{font-size:clamp(2rem,5.5vw,3.1rem); margin-bottom:16px;}
  .hero h1 .hl{color:var(--blue-light);}
  .hero p.lead{font-size:1.05rem; color:rgba(233,239,247,0.78); max-width:520px; margin-bottom:26px;}
  .cta-row{display:flex; gap:14px; flex-wrap:wrap;}
  .btn{display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:8px; font-weight:700; font-size:0.95rem; text-transform:uppercase; letter-spacing:0.4px; transition:transform 0.15s, box-shadow 0.15s; cursor:pointer; border:none;}
  .btn-primary{background:var(--blue); color:var(--navy); box-shadow:0 8px 24px rgba(59,150,238,0.3);}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(59,150,238,0.4);}
  .btn-outline{background:transparent; color:var(--cream); border:1.5px solid rgba(233,239,247,0.35);}
  .btn-outline:hover{border-color:var(--blue-light); color:var(--blue-light);}

  .hero-panel{background:var(--navy2); border:1px solid var(--line); border-radius:14px; padding:26px; position:relative;}
  .hero-panel::before{
    content:'DIAGNÓSTICO RÁPIDO'; position:absolute; top:-12px; left:20px;
    background:var(--blue); color:var(--navy); font-size:0.7rem; font-weight:800;
    padding:4px 12px; border-radius:20px; letter-spacing:1px;
  }
  .hero-panel ul{list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:13px;}
  .hero-panel li{display:flex; gap:10px; align-items:flex-start; font-size:0.92rem; color:rgba(233,239,247,0.85);}
  .hero-panel li .ico{color:var(--blue-light); font-weight:800;}

  /* ===== TRUST STRIP ===== */
  .trust-strip{border-bottom:1px solid var(--line); padding:22px 0; background:rgba(255,255,255,0.015);}
  .trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center;}
  @media(max-width:700px){ .trust-grid{grid-template-columns:repeat(2,1fr);} }
  .trust-grid .num{font-family:'Big Shoulders Display'; font-size:1.7rem; color:var(--blue-light); font-weight:800;}
  .trust-grid .lbl{font-size:0.75rem; text-transform:uppercase; letter-spacing:0.5px; color:rgba(233,239,247,0.6);}

  /* ===== SECTION GENERIC ===== */
  section{padding:64px 0;}
  .sec-tag{color:var(--blue-light); font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; margin-bottom:10px;}
  .sec-title{font-size:clamp(1.6rem,4vw,2.3rem); margin-bottom:14px;}
  .sec-lead{color:rgba(233,239,247,0.65); max-width:600px; margin-bottom:36px; font-size:0.98rem;}

  /* ===== PHOTO SECTION ===== */
  .photo-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:36px; align-items:center;}
  @media(max-width:780px){ .photo-grid{grid-template-columns:1fr;} }
  .photo-frame{border-radius:16px; overflow:hidden; border:1px solid var(--line); position:relative;}
  .photo-frame img{width:100%; height:100%; object-fit:cover; display:block;}
  .photo-frame::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(10,23,38,0.4)); pointer-events:none;}
  .photo-text ul{list-style:none; display:flex; flex-direction:column; gap:12px; margin-top:18px;}
  .photo-text li{display:flex; gap:10px; align-items:flex-start; font-size:0.92rem; color:rgba(233,239,247,0.8);}
  .photo-text li .ico{color:var(--blue-light); font-weight:800; flex-shrink:0;}

  /* ===== SERVICES ===== */
  .services-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px;}
  @media(max-width:860px){ .services-grid{grid-template-columns:1fr;} }
  .service-card{background:var(--navy2); border:1px solid var(--line); border-radius:14px; padding:26px; position:relative; overflow:hidden; display:block; transition:border-color 0.15s, transform 0.15s;}
  .service-card:hover{border-color:var(--blue); transform:translateY(-3px);}
  .service-card .icon-box{width:54px; height:54px; border-radius:10px; background:rgba(59,150,238,0.14); display:flex; align-items:center; justify-content:center; font-size:1.7rem; margin-bottom:16px;}
  .service-card h3{font-size:1.25rem; margin-bottom:10px; text-transform:none;}
  .service-card p{font-size:0.88rem; color:rgba(233,239,247,0.65); margin-bottom:14px;}
  .service-card .symptoms{display:flex; flex-wrap:wrap; gap:6px;}
  .service-card .symptoms span{font-size:0.72rem; background:rgba(255,255,255,0.05); border:1px solid var(--line); padding:4px 10px; border-radius:20px; color:rgba(233,239,247,0.7);}
  .service-card .arrow{color:var(--blue-light); font-size:0.82rem; font-weight:700; display:inline-block; margin-top:6px;}

  /* ===== GUÍA / CAUSAS ===== */
  .guia-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  @media(max-width:860px){ .guia-grid{grid-template-columns:1fr;} }
  .guia-card{background:rgba(255,255,255,0.02); border:1px solid var(--line); border-radius:14px; padding:24px;}
  .guia-card h3{font-size:1.05rem; margin-bottom:12px; text-transform:none; font-family:'Karla'; font-weight:700; color:var(--blue-light);}
  .guia-card p{font-size:0.87rem; color:rgba(233,239,247,0.68); margin-bottom:10px;}
  .guia-card ul{list-style:none; display:flex; flex-direction:column; gap:6px;}
  .guia-card ul li{font-size:0.83rem; color:rgba(233,239,247,0.6); padding-left:16px; position:relative;}
  .guia-card ul li::before{content:'—'; position:absolute; left:0; color:var(--blue-light);}

  /* ===== AREAS ===== */
  .areas-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
  @media(max-width:700px){ .areas-grid{grid-template-columns:repeat(2,1fr);} }
  .area-card{background:var(--navy2); border:1px solid var(--line); border-radius:10px; padding:18px; text-align:center; font-weight:700; font-family:'Big Shoulders Display'; font-size:1rem; letter-spacing:0.3px;}
  .area-card .pin{color:var(--blue-light); display:block; font-size:1.2rem; margin-bottom:6px;}

  /* ===== PROCESS ===== */
  .process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative;}
  @media(max-width:860px){ .process-grid{grid-template-columns:1fr;} }
  .process-num{width:42px; height:42px; border-radius:50%; background:var(--blue); color:var(--navy); font-family:'Big Shoulders Display'; font-weight:800; font-size:1.1rem; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
  .process-step h4{font-size:1.05rem; margin-bottom:8px; text-transform:none;}
  .process-step p{font-size:0.85rem; color:rgba(233,239,247,0.6);}

  /* ===== WHY US ===== */
  .why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
  @media(max-width:700px){ .why-grid{grid-template-columns:1fr;} }
  .why-item{display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,0.015);}
  .why-item .ico{font-size:1.5rem; flex-shrink:0;}
  .why-item h4{font-size:1rem; margin-bottom:6px; text-transform:none;}
  .why-item p{font-size:0.85rem; color:rgba(233,239,247,0.6);}

  /* ===== REVIEWS PLACEHOLDER ===== */
  .reviews-note{border:1.5px dashed rgba(59,150,238,0.4); border-radius:12px; padding:22px; background:rgba(59,150,238,0.06); font-size:0.88rem; color:rgba(233,239,247,0.7);}
  .reviews-note strong{color:var(--blue-light);}

  /* ===== FAQ ===== */
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; cursor:pointer; font-weight:700; font-size:1rem;}
  .faq-q .plus{color:var(--blue-light); font-size:1.3rem; transition:transform 0.2s; flex-shrink:0;}
  .faq-item.active .plus{transform:rotate(45deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height 0.25s ease; font-size:0.9rem; color:rgba(233,239,247,0.65);}
  .faq-item.active .faq-a{max-height:220px; padding-bottom:20px;}

  /* ===== FINAL CTA ===== */
  .final-cta{background:linear-gradient(135deg, var(--blue-dark), var(--blue)); color:var(--navy); text-align:center; padding:60px 0;}
  .final-cta h2{color:var(--navy); margin-bottom:14px;}
  .final-cta p{color:rgba(10,23,38,0.8); max-width:520px; margin:0 auto 28px;}
  .final-cta .btn-primary{background:var(--navy); color:var(--cream); box-shadow:0 8px 24px rgba(10,23,38,0.3);}
  .final-cta .btn-outline{border-color:rgba(10,23,38,0.3); color:var(--navy);}
  .final-cta .btn-outline:hover{border-color:var(--navy); color:var(--navy);}

  /* ===== DISCLAIMER ===== */
  .disclaimer{font-size:0.78rem; color:rgba(233,239,247,0.45); max-width:680px; line-height:1.6;}

  /* ===== FOOTER ===== */
  footer{background:var(--navy2); border-top:1px solid var(--line); padding:40px 0 24px; font-size:0.82rem; color:rgba(233,239,247,0.55);}
  .footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:30px; margin-bottom:26px;}
  @media(max-width:700px){ .footer-grid{grid-template-columns:1fr;} }
  footer h5{font-family:'Karla'; text-transform:uppercase; font-size:0.78rem; letter-spacing:1px; color:var(--cream); margin-bottom:12px;}
  footer ul{list-style:none; display:flex; flex-direction:column; gap:8px;}
  footer ul li a:hover{color:var(--blue-light);}
  .footer-bottom{border-top:1px solid var(--line); padding-top:18px; font-size:0.76rem; line-height:1.7;}

  /* ===== OTHER BRANDS LINKS ===== */
  .other-brands{display:flex; flex-wrap:wrap; gap:10px;}
  .other-brands a{
    border:1.5px solid var(--line); border-radius:8px; padding:10px 18px;
    font-size:0.85rem; font-weight:600; color:rgba(233,239,247,0.75);
    transition:border-color 0.15s, color 0.15s;
  }
  .other-brands a:hover{border-color:var(--blue); color:var(--blue-light);}

  /* ===== FLOATING BUTTONS ===== */
  .floating-actions{position:fixed; bottom:18px; right:18px; z-index:60; display:flex; flex-direction:column; gap:10px; align-items:flex-end;}
  .float-btn{
    display:flex; align-items:center; gap:8px;
    border-radius:50px; padding:14px 20px; font-weight:700; font-size:0.88rem;
    box-shadow:0 8px 24px rgba(0,0,0,0.4); white-space:nowrap;
  }
  .float-btn.wa{background:linear-gradient(135deg, var(--blue-dark), var(--blue)); color:var(--navy);}
  .float-btn.call{background:var(--navy2); color:var(--cream); border:1.5px solid var(--blue);}

  @media(max-width:600px){
    .float-btn{padding:13px 16px; font-size:0.82rem;}
  }