:root{
    --blue-primary:#2D63C7;
    --blue-secondary:#2687D8;
    --turquoise:#22C2D6;
    --lime:#A7CC1D;
    --white:#F7F7F7;
    --marble:#D9D9D9;
    --ink:#0E2340;
    --ink-soft:#4C5C74;
    --ink-faint:#8496AC;

    --grad-blue: linear-gradient(135deg, var(--blue-primary), var(--blue-secondary));
    --grad-cool: linear-gradient(135deg, var(--blue-secondary), var(--turquoise));

    --font-display:'Bricolage Grotesque', sans-serif;
    --font-body:'Sora', sans-serif;
    --font-mono:'Space Mono', monospace;

    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 10px;

    --container: 1180px;
    --edge: clamp(20px, 5vw, 64px);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    background:var(--white);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit; cursor:pointer;}

  :focus-visible{
    outline:3px solid var(--turquoise);
    outline-offset:3px;
    border-radius:4px;
  }

  .wrap{
    max-width:var(--container);
    margin:0 auto;
    padding-left:var(--edge);
    padding-right:var(--edge);
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--blue-primary);
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:700;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:2px;
    background:var(--lime);
    display:inline-block;
  }

  h1,h2,h3{
    font-family:var(--font-display);
    color:var(--ink);
    line-height:1.06;
    letter-spacing:-0.01em;
  }

  .lede{
    font-size:clamp(16px,1.7vw,18.5px);
    color:var(--ink-soft);
    line-height:1.65;
    max-width:46ch;
  }

  /* ===== Buttons ===== */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 28px;
    border-radius:100px;
    font-weight:600;
    font-size:15px;
    border:2px solid transparent;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--grad-blue);
    color:#fff;
    box-shadow:0 10px 24px -8px rgba(45,99,199,.55);
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -8px rgba(45,99,199,.6); }
  .btn-ghost{
    background:transparent;
    color:var(--ink);
    border-color:var(--marble);
  }
  .btn-ghost:hover{ border-color:var(--blue-secondary); color:var(--blue-primary); transform:translateY(-2px); }
  .btn-sm{ padding:10px 18px; font-size:13.5px; }

  /* ===== Marble blobs ===== */
  .blob{
    position:absolute;
    filter: blur(2px);
    z-index:0;
    pointer-events:none;
  }

  /* ===== Nav ===== */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(247,247,247,.82);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(217,217,217,.9);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:16px; padding-bottom:16px;
  }
  .logo{
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-display);
    font-weight:700;
    font-size:19px;
    color:var(--ink);
  }
  .logo .mark{
    width:38px; height:38px;
    border-radius:11px;
    background:var(--grad-blue);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:15px; font-weight:800;
    flex-shrink:0;
  }
  .logo .name b{ color:var(--turquoise); }
  .nav-links{
    display:flex; align-items:center; gap:34px;
    font-size:14.5px; font-weight:500; color:var(--ink-soft);
  }
  .nav-links a{ position:relative; padding:4px 0; transition:color .2s; }
  .nav-links a:hover{ color:var(--blue-primary); }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:-2px;
    width:0; height:2px; background:var(--lime);
    transition:width .25s ease;
  }
  .nav-links a:hover::after{ width:100%; }
  .nav-cta{ display:flex; align-items:center; gap:14px; }
  .burger{ display:none; background:none; border:0; color:var(--ink); padding:6px; }

  .mobile-nav{
    display:none;
    flex-direction:column;
    gap:2px;
    padding:6px var(--edge) 18px;
    background:var(--white);
    border-top:1px solid var(--marble);
  }
  .mobile-nav a{
    display:block;
    padding:12px 4px;
    font-size:15px;
    font-weight:500;
    color:var(--ink-soft);
    border-bottom:1px solid var(--marble);
  }
  .mobile-nav a:hover{ color:var(--blue-primary); }
  .mobile-nav.open{ display:flex; }

  /* ===== Hero ===== */
  .hero{
    position:relative;
    padding-top:clamp(36px,5vw,56px);
    padding-bottom:clamp(36px,5vw,54px);
    overflow:hidden;
  }
  .hero .wrap{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:56px;
    align-items:center;
    position:relative;
    z-index:2;
  }
  .hero h1{
    font-size:clamp(30px,3.9vw,46px);
    margin-top:14px;
    margin-bottom:18px;
  }
  .hero h1 .lime{ color:var(--lime); }
  .hero h1 .turq{ color:var(--turquoise); }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }
  .trust-row{
    display:flex; flex-wrap:wrap; gap:26px;
    margin-top:28px; padding-top:22px;
    border-top:1px solid var(--marble);
  }
  .trust-item{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-soft); font-weight:500; }
  .trust-item svg{ width:20px; height:20px; color:var(--blue-primary); flex-shrink:0; }

  .hero-visual{
    position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .tooth-card{
    position:relative;
    background:#fff;
    border-radius:32px;
    padding:38px;
    box-shadow:0 30px 60px -20px rgba(14,35,64,.18);
    width:100%;
    max-width:460px;
  }
  .tooth-card .tag{
    position:absolute; top:26px; left:26px;
    font-family:var(--font-mono);
    font-size:11px; letter-spacing:.08em;
    background:var(--white); border:1px solid var(--marble);
    padding:6px 12px; border-radius:100px; color:var(--ink-soft);
  }
  .pulse{
    animation:pulse 2.4s ease-in-out infinite;
    transform-origin:center;
  }
  .pulse2{ animation-delay:.6s; }
  .pulse3{ animation-delay:1.2s; }
  @keyframes pulse{
    0%{ transform:scale(.55); opacity:.65; }
    80%{ transform:scale(1.5); opacity:0; }
    100%{ transform:scale(1.5); opacity:0; }
  }
  .draw-path{
    stroke-dasharray:900;
    stroke-dashoffset:900;
    animation:draw 1.8s ease forwards .2s;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }

  .hero-hub{ text-align:center; padding-top:14px; }
  .hero-hub-center{
    width:64px; height:64px; border-radius:18px;
    background:var(--grad-blue);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 18px;
    box-shadow:0 12px 22px -8px rgba(45,99,199,.5);
  }
  .hero-hub-center svg{ width:28px; height:28px; }
  .hero-hub-title{
    font-family:var(--font-display);
    font-weight:600;
    font-size:19px;
    color:var(--ink);
    margin-bottom:6px;
  }
  .hero-hub-sub{
    font-size:13.5px;
    color:var(--ink-soft);
    max-width:30ch;
    margin:0 auto 28px;
    line-height:1.5;
  }
  .mini-badges{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px 10px;
  }
  .mini-badge{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    animation:fadeUp .6s ease backwards;
  }
  .mini-badge:nth-child(1){ animation-delay:.05s; }
  .mini-badge:nth-child(2){ animation-delay:.15s; }
  .mini-badge:nth-child(3){ animation-delay:.25s; }
  .mini-badge:nth-child(4){ animation-delay:.35s; }
  .mini-badge:nth-child(5){ animation-delay:.45s; }
  .mini-badge:nth-child(6){ animation-delay:.55s; }
  @keyframes fadeUp{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .mini-icon{
    width:42px; height:42px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    color:#fff; flex-shrink:0;
  }
  .mini-icon svg{ width:19px; height:19px; }
  .mini-badge span{
    font-size:11.5px; font-weight:600; color:var(--ink-soft);
    line-height:1.25;
  }

  /* ===== Marquee ===== */
  .marquee{
    background:var(--ink);
    padding:16px 0;
    overflow:hidden;
    white-space:nowrap;
    position:relative;
  }
  .marquee-track{
    display:inline-flex;
    animation:scroll 26s linear infinite;
  }
  .marquee span{
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:.1em;
    color:var(--white);
    padding:0 22px;
    display:inline-flex;
    align-items:center;
    gap:22px;
    text-transform:uppercase;
  }
  .marquee span i{ color:var(--lime); font-style:normal; }
  @keyframes scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }

  /* ===== Section shells ===== */
  section{ position:relative; }
  .section-pad{ padding-top:clamp(40px,6vw,70px); padding-bottom:clamp(40px,6vw,70px); }
  .services.section-pad{ padding-top: 10px; }
  .section-head{ max-width:640px; margin-bottom:52px; }
  .section-head h2{ font-size:clamp(28px,3.6vw,42px); margin-top:16px; }

  /* ===== Especialidades ===== */
  .specialty{ background:var(--white); }
  .especialidades-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
  .spec-card{
    background:#fff;
    border:1px solid var(--marble);
    border-radius:var(--radius-md);
    padding:24px 26px;
    display:flex; gap:18px; align-items:flex-start;
    transition:border-color .25s, transform .25s;
  }
  .spec-card:hover{ border-color:var(--turquoise); transform:translateX(4px); }
  .spec-icon{
    width:46px; height:46px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; color:#fff;
  }
  .spec-icon svg{ width:22px; height:22px; }
  .spec-card h3{ font-size:16px; margin-bottom:6px; }
  .spec-card p{ font-size:14.5px; color:var(--ink-soft); line-height:1.55; }

  /* ===== Servicios ===== */
  .services{
    background:linear-gradient(180deg, var(--white) 0%, #EEEEEE 100%);
  }
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  .service-card{
    background:#fff;
    border-radius:var(--radius-md);
    padding:30px 26px;
    border:1px solid transparent;
    box-shadow:0 8px 24px -14px rgba(14,35,64,.18);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .service-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 34px -16px rgba(45,99,199,.28);
  }
  .service-card .spec-icon{ margin-bottom:18px; }
  .service-card h3{ font-size:17.5px; margin-bottom:8px; }
  .service-card p{ font-size:14px; color:var(--ink-soft); line-height:1.55; }
  .service-card.featured{
    background:var(--grad-blue);
    color:#fff;
  }
  .service-card.featured h3, .service-card.featured p{ color:#fff; }
  .service-card.featured .spec-icon{ background:rgba(255,255,255,.18) !important; }
  .service-card.featured p{ color:rgba(255,255,255,.85); }

  /* ===== Proceso ===== */
  .process{ background:var(--ink); color:#fff; }
  .process .eyebrow{ color:var(--turquoise); }
  .process .eyebrow::before{ background:var(--lime); }
  .process h2{ color:#fff; }
  .process-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:10px;
  }
  .process-step{
    position:relative;
    padding:34px 26px;
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
  }
  .process-num{
    font-family:var(--font-display);
    font-size:44px;
    font-weight:700;
    background:linear-gradient(135deg, var(--turquoise), var(--lime));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    margin-bottom:14px;
  }
  .process-step h3{ color:#fff; font-size:18px; margin-bottom:10px; }
  .process-step p{ color:rgba(255,255,255,.68); font-size:14.5px; line-height:1.6; }

  /* ===== Nosotros ===== */
  .about{ background:var(--white); }
  .about-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:60px;
    align-items:center;
  }
  .about-card{
    background:#fff;
    border-radius:var(--radius-lg);
    padding:40px;
    box-shadow:0 20px 50px -24px rgba(14,35,64,.22);
    position:relative;
  }
  .avatar{
    width:96px; height:96px; border-radius:24px;
    background:var(--grad-cool);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-family:var(--font-display); font-size:32px; font-weight:700;
    margin-bottom:22px;
  }
  .about-card h3{ font-size:22px; margin-bottom:4px; }
  .about-card .role{ font-family:var(--font-mono); font-size:12px; color:var(--blue-primary); letter-spacing:.06em; margin-bottom:18px; display:block; }
  .about-card p{ color:var(--ink-soft); font-size:15px; line-height:1.7; }
  .about-badges{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
  .badge{
    font-size:12.5px; font-weight:600; color:var(--blue-primary);
    background:#EAF1FC; padding:8px 14px; border-radius:100px;
  }
  .about-copy .lede{ max-width:none; margin-bottom:20px; }
  .stat-row{ display:flex; gap:36px; margin-top:34px; flex-wrap:wrap; }
  .stat b{ display:block; font-family:var(--font-display); font-size:34px; color:var(--blue-primary); }
  .stat span{ font-size:13px; color:var(--ink-soft); }

  /* ===== Social ===== */
  .social{ background:linear-gradient(135deg, #eef4fc, var(--white)); }
  .social-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  .social-card{
    background:#fff;
    border-radius:var(--radius-md);
    padding:30px;
    display:flex; flex-direction:column; gap:16px;
    border:1px solid var(--marble);
    transition:transform .3s, box-shadow .3s;
  }
  .social-card:hover{ transform:translateY(-6px); box-shadow:0 20px 34px -18px rgba(14,35,64,.25); }
  .social-top{ display:flex; align-items:center; gap:14px; }
  .social-icon{
    width:48px; height:48px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    color:#fff; flex-shrink:0;
  }
  .social-icon svg{ width:24px; height:24px; }
  .social-card h3{ font-size:16.5px; }
  .social-card span.handle{ font-size:13px; color:var(--ink-soft); font-family:var(--font-mono); }
  .social-card p{ font-size:14px; color:var(--ink-soft); line-height:1.55; }
  .social-cta{ font-size:13.5px; font-weight:600; color:var(--blue-primary); display:inline-flex; align-items:center; gap:6px; margin-top:auto; }
  .social-cta svg{ width:15px; height:15px; transition:transform .2s; }
  .social-card:hover .social-cta svg{ transform:translateX(3px); }

  /* ===== Contacto ===== */
  .contact{ background:var(--white); }
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:stretch;
  }
  .contact-info{ display:flex; flex-direction:column; gap:26px; }
  .info-row{ display:flex; gap:16px; align-items:flex-start; }
  .info-icon{
    width:42px; height:42px; border-radius:12px;
    background:#EAF1FC; color:var(--blue-primary);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .info-icon svg{ width:20px; height:20px; }
  .info-row h4{ font-size:14.5px; margin-bottom:4px; font-family:var(--font-display); }
  .info-row p{ font-size:14px; color:var(--ink-soft); line-height:1.6; }
  .hours-table{ width:100%; border-collapse:collapse; margin-top:4px; }
  .hours-table td{ padding:4px 0; font-size:13.5px; color:var(--ink-soft); }
  .hours-table td:first-child{ font-weight:600; color:var(--ink); width:120px; }

  .map-card{
    border-radius:var(--radius-lg);
    background:var(--grad-blue);
    position:relative;
    min-height:340px;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .map-card .pin{ position:relative; z-index:2; text-align:center; color:#fff; }
  .map-card .pin svg{ width:52px; height:52px; margin:0 auto 14px; }
  .map-card .pin b{ font-family:var(--font-display); font-size:19px; display:block; }
  .map-card .pin span{ font-size:13px; opacity:.85; }
  .map-grid-lines{ position:absolute; inset:0; opacity:.18; }

  /* ===== Footer ===== */
  footer{ background:var(--ink); color:rgba(255,255,255,.7); padding-top:64px; }
  .footer-top{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:40px;
    padding-bottom:44px;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .footer-top .logo{ color:#fff; }
  .footer-top p{ font-size:13.5px; margin-top:14px; max-width:32ch; line-height:1.6; color:rgba(255,255,255,.55); }
  .footer-col h5{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--turquoise); margin-bottom:16px; }
  .footer-col a{ display:block; font-size:14px; margin-bottom:10px; color:rgba(255,255,255,.72); transition:color .2s; }
  .footer-col a:hover{ color:#fff; }
  .footer-social{ display:flex; gap:10px; margin-top:6px; }
  .footer-social a{
    width:38px; height:38px; border-radius:10px;
    background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center;
  }
  .footer-social a svg{ width:18px; height:18px; }
  .footer-social a:hover{ background:var(--grad-cool); }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center;
    padding:24px 0; font-size:12.5px; flex-wrap:wrap; gap:10px;
  }
  .color-strip{ display:flex; height:6px; }
  .color-strip span{ flex:1; }

  /* ===== Responsive ===== */
  @media (max-width: 980px){
    .nav-links{ display:none; }
    .burger{ display:flex; align-items:center; justify-content:center; }
    .hero .wrap{ grid-template-columns:1fr; }
    .hero-visual{ order:-1; }
    .especialidades-grid, .about-grid, .contact-grid{ grid-template-columns:1fr; }
    .especialidades-grid{ grid-template-columns:repeat(2,1fr); }
    .services-grid{ grid-template-columns:repeat(2,1fr); }
    .process-grid{ grid-template-columns:1fr; }
    .social-grid{ grid-template-columns:1fr; }
    .footer-top{ grid-template-columns:1fr; }
  }
  @media (max-width: 560px){
    .especialidades-grid{ grid-template-columns:1fr; }
    .services-grid{ grid-template-columns:1fr; }
    .hero-actions{ flex-direction:column; align-items:stretch; }
    .btn{ justify-content:center; }
    .trust-row{ flex-direction:column; gap:14px; }
    .stat-row{ gap:24px; }
    .mini-badges{ grid-template-columns:repeat(3,1fr); gap:14px 6px; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  }