/* ============================================================
   Dental Line Panamá — Landing page
   Estilo inspirado en "Dentist Personal Web Landing Page"
   Adaptado a la marca (azul + crema) · 100% responsive · estático
   ============================================================ */

:root{
  --blue:        #0d6fc7;
  --blue-600:    #0a5aa5;
  --blue-700:    #084a89;
  --blue-400:    #3f9bdd;
  --blue-050:    #eaf4fc;
  --navy:        #14233f;
  --ink:         #33415c;
  --muted:       #6c7a93;
  --sky:         #dcecfa;   /* fondo secciones claras */
  --sky-2:       #eef6fd;
  --cream:       #f7f4ee;   /* tono del logo */
  --sand:        #f2ece1;   /* acento cálido / footer */
  --line:        #e7ecf3;
  --white:       #ffffff;
  --shadow-sm:   0 4px 14px rgba(20,35,63,.06);
  --shadow-md:   0 16px 40px rgba(20,35,63,.10);
  --shadow-lg:   0 30px 70px rgba(20,35,63,.16);
  --radius:      22px;
  --radius-sm:   14px;
  --maxw:        1200px;
  --font-head:   'Poppins', system-ui, sans-serif;
  --font-body:   'Inter', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  font-size:17px;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-head); color:var(--navy); line-height:1.12; margin:0; font-weight:700; letter-spacing:-.02em; }
p{ margin:0; }
section{ position:relative; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--font-head); font-weight:600; font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue); display:inline-flex; align-items:center; gap:.55rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--blue); border-radius:2px; }
.text-blue{ color:var(--blue); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-head); font-weight:600; font-size:.98rem;
  padding:.9rem 1.6rem; border-radius:999px; cursor:pointer; border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 10px 24px rgba(13,111,199,.30); }
.btn-primary:hover{ background:var(--blue-600); transform:translateY(-2px); box-shadow:0 16px 30px rgba(13,111,199,.38); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:#cdd9e8; }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.btn-white{ background:#fff; color:var(--navy); box-shadow:var(--shadow-sm); }
.btn-white:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); color:var(--blue); }
.btn-wa{ background:#25d366; color:#fff; box-shadow:0 10px 24px rgba(37,211,102,.32); }
.btn-wa:hover{ background:#1fb457; transform:translateY(-2px); }

/* ---------- Top bar ---------- */
.topbar{
  background:var(--navy); color:#cfdcee; font-size:.83rem;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:9px; padding-bottom:9px; }
.topbar-info{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.topbar-info span{ display:inline-flex; align-items:center; gap:.45rem; }
.topbar-info svg{ width:15px; height:15px; color:var(--blue-400); }
.topbar a{ color:#cfdcee; transition:color .15s; display:inline-flex; align-items:center; gap:.4rem; }
.topbar a:hover{ color:#fff; }

/* ---------- Header / Nav ---------- */
.header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.88); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:12px; padding-bottom:12px; }
.brand img{ height:44px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-family:var(--font-head); font-weight:500; font-size:.96rem; color:var(--navy); position:relative; padding:4px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--blue); border-radius:2px; transition:width .2s ease; }
.nav-links a:hover{ color:var(--blue); }
.nav-links a:hover::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.nav-phone{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-head); font-weight:600; color:var(--navy); font-size:.95rem; }
.nav-phone svg{ width:18px; height:18px; color:var(--blue); }
.nav-toggle{ display:none; width:46px; height:46px; border:1px solid var(--line); background:#fff; border-radius:12px; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle svg{ width:24px; height:24px; color:var(--navy); }

/* ---------- Hero ---------- */
.hero{ background:linear-gradient(180deg,var(--sky) 0%, var(--sky-2) 62%, #fff 100%); padding:66px 0 90px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.hero h1{ font-size:clamp(2.6rem,5vw,4rem); margin:16px 0 20px; }
.hero h1 em{ font-style:normal; color:var(--blue); }
.hero-lead{ font-size:1.12rem; color:var(--ink); max-width:33ch; margin-bottom:30px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-badges{ display:flex; gap:26px; flex-wrap:wrap; margin-top:34px; }
.hero-badges .hb{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--navy); }
.hero-badges .hb .ic{ width:38px; height:38px; border-radius:11px; background:#fff; box-shadow:var(--shadow-sm); display:grid; place-items:center; color:var(--blue); flex:none; }
.hero-badges .hb .ic svg{ width:20px; height:20px; }

/* Hero visual */
.hero-visual{ position:relative; display:flex; justify-content:center; }
.hero-portrait{
  position:relative; width:min(430px,88%); aspect-ratio:1/1; border-radius:50%;
  background:linear-gradient(160deg,#fff,var(--cream));
  box-shadow:inset 0 0 0 1px rgba(13,111,199,.10), var(--shadow-lg);
  display:flex; align-items:flex-end; justify-content:center;
}
.hero-portrait::before{
  content:""; position:absolute; inset:-16px; border-radius:50%;
  border:2px dashed rgba(13,111,199,.22);
}
.hero-portrait img{ width:96%; height:96%; object-fit:cover; object-position:top center; border-radius:50%; }
.stamp{ position:absolute; top:-6px; left:-6px; width:104px; height:104px; animation:none; }
.stamp svg{ width:100%; height:100%; }
.stamp .stamp-core{ position:absolute; inset:0; margin:auto; width:40px; height:40px; background:var(--blue); border-radius:50%; display:grid; place-items:center; top:32px; left:32px; }
.stamp .stamp-core svg{ width:22px; height:22px; color:#fff; }
.float-card{
  position:absolute; background:#fff; border-radius:16px; box-shadow:var(--shadow-md); padding:12px 14px;
  display:flex; align-items:center; gap:10px;
}
.float-smile{ bottom:24px; left:-6px; padding:6px; }
.float-smile img{ width:96px; height:70px; object-fit:cover; border-radius:11px; }
.float-rating{ top:40px; right:-10px; flex-direction:column; align-items:flex-start; gap:2px; }
.float-rating .stars{ color:#f5b301; letter-spacing:1px; font-size:.85rem; }
.float-rating b{ font-family:var(--font-head); color:var(--navy); font-size:1.05rem; }
.float-rating span{ font-size:.74rem; color:var(--muted); }

/* ---------- Marca / franja de especialidades ---------- */
.specstrip{ background:var(--navy); color:#dbe6f4; padding:26px 0; }
.specstrip .wrap{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; justify-content:center; text-align:center; }
.specstrip .lead{ font-family:var(--font-head); font-weight:600; color:#fff; font-size:1.05rem; }
.specstrip ul{ display:flex; gap:12px 26px; flex-wrap:wrap; list-style:none; margin:0; padding:0; justify-content:center; }
.specstrip li{ display:inline-flex; align-items:center; gap:.5rem; font-size:.92rem; }
.specstrip li svg{ width:16px; height:16px; color:var(--blue-400); }

/* ---------- Sección genérica ---------- */
.section{ padding:96px 0; }
.section-head{ max-width:660px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(2rem,3.6vw,2.9rem); margin:14px 0 14px; }
.section-head p{ color:var(--muted); font-size:1.06rem; }

/* ---------- Servicios ---------- */
.svc-featured{
  display:grid; grid-template-columns:1.05fr .95fr; gap:0; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-700) 100%); color:#fff; box-shadow:var(--shadow-md);
  margin-bottom:34px;
}
.svc-featured .txt{ padding:44px; display:flex; flex-direction:column; justify-content:center; }
.svc-featured .tag{ font-family:var(--font-head); font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#bfe0fb; margin-bottom:12px; }
.svc-featured h3{ color:#fff; font-size:1.9rem; margin-bottom:12px; }
.svc-featured p{ color:#dcecfb; margin-bottom:24px; }
.svc-featured .img{ position:relative; min-height:280px; }
.svc-featured .img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.svc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:26px 22px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent; }
.svc-card .ic{ width:54px; height:54px; border-radius:14px; background:var(--blue-050); color:var(--blue); display:grid; place-items:center; margin-bottom:18px; }
.svc-card .ic svg{ width:28px; height:28px; }
.svc-card h4{ font-size:1.12rem; margin-bottom:8px; }
.svc-card p{ font-size:.92rem; color:var(--muted); line-height:1.55; }

/* ---------- ¿Por qué elegirnos? ---------- */
.why{ background:var(--cream); }
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.why-list{ list-style:none; margin:26px 0 32px; padding:0; display:grid; gap:16px; }
.why-list li{ display:flex; gap:14px; align-items:flex-start; }
.why-list .ck{ flex:none; width:28px; height:28px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; margin-top:2px; }
.why-list .ck svg{ width:15px; height:15px; }
.why-list b{ font-family:var(--font-head); color:var(--navy); display:block; font-size:1.02rem; }
.why-list span{ font-size:.93rem; color:var(--muted); }
.why-collage{ position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:16px; }
.why-collage img{ width:100%; height:100%; object-fit:cover; border-radius:16px; box-shadow:var(--shadow-sm); }
.why-collage .big{ grid-row:1 / span 2; height:100%; min-height:340px; }
.why-collage .stat{
  position:absolute; left:-14px; bottom:-18px; background:#fff; border-radius:16px; box-shadow:var(--shadow-md);
  padding:16px 20px; text-align:center;
}
.why-collage .stat b{ font-family:var(--font-head); font-size:1.7rem; color:var(--blue); display:block; line-height:1; }
.why-collage .stat span{ font-size:.78rem; color:var(--muted); }

/* ---------- Resultados ---------- */
.results{ background:linear-gradient(180deg,#fff,var(--sky-2)); text-align:center; }
.results-frame{
  max-width:820px; margin:0 auto; position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-lg); border:8px solid #fff;
}
.results-frame img{ width:100%; height:auto; }
.results-frame .tag{
  position:absolute; top:16px; left:16px; background:rgba(20,35,63,.82); color:#fff; backdrop-filter:blur(4px);
  font-family:var(--font-head); font-weight:600; font-size:.82rem; padding:.4rem .9rem; border-radius:999px;
}
.results-note{ margin-top:22px; color:var(--muted); font-size:.95rem; }

/* ---------- Testimonios ---------- */
.tst-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tst-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:28px; box-shadow:var(--shadow-sm); }
.tst-card .stars{ color:#f5b301; letter-spacing:2px; margin-bottom:14px; }
.tst-card p{ color:var(--ink); font-size:.98rem; margin-bottom:22px; }
.tst-who{ display:flex; align-items:center; gap:12px; }
.tst-who img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.tst-who b{ font-family:var(--font-head); color:var(--navy); font-size:.98rem; display:block; }
.tst-who span{ font-size:.82rem; color:var(--muted); }

/* ---------- Banda CTA ---------- */
.cta-band{ position:relative; padding:0; }
.cta-band .inner{
  position:relative; border-radius:var(--radius); overflow:hidden; min-height:360px;
  display:flex; align-items:center; box-shadow:var(--shadow-md);
}
.cta-band img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cta-band .overlay{ position:absolute; inset:0; background:linear-gradient(100deg,rgba(8,74,137,.92) 0%,rgba(10,90,165,.72) 52%,rgba(10,90,165,.10) 100%); }
.cta-band .content{ position:relative; padding:52px; max-width:560px; color:#fff; }
.cta-band h2{ color:#fff; font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:14px; }
.cta-band p{ color:#e6f1fc; margin-bottom:26px; }
.cta-band .content .row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.cta-band .phone-inline{ color:#fff; font-family:var(--font-head); font-weight:600; display:inline-flex; align-items:center; gap:.5rem; }
.cta-band .phone-inline svg{ width:18px; height:18px; }

/* ---------- Contacto / Ubicación ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:stretch; }
.contact-info{ display:grid; gap:18px; align-content:start; }
.ci-item{ display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:20px 22px; box-shadow:var(--shadow-sm); }
.ci-item .ic{ flex:none; width:46px; height:46px; border-radius:12px; background:var(--blue-050); color:var(--blue); display:grid; place-items:center; }
.ci-item .ic svg{ width:22px; height:22px; }
.ci-item h4{ font-size:1rem; margin-bottom:3px; }
.ci-item p, .ci-item a{ font-size:.95rem; color:var(--ink); }
.ci-item a:hover{ color:var(--blue); }
.contact-map{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); min-height:420px; border:1px solid var(--line); }
.contact-map iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; filter:grayscale(.15); }
.contact-cta{ margin-top:6px; display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.footer{ background:var(--navy); color:#aebfd6; padding:64px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px; }
.footer .brand-f img{ height:46px; margin-bottom:16px; filter:brightness(0) invert(1); opacity:.96; }
.footer .brand-f p{ font-size:.92rem; max-width:34ch; color:#9fb2cd; }
.footer h5{ font-family:var(--font-head); color:#fff; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer ul a, .footer ul li{ font-size:.93rem; color:#9fb2cd; transition:color .15s; display:inline-flex; align-items:center; gap:.5rem; }
.footer ul a:hover{ color:#fff; }
.footer ul svg{ width:15px; height:15px; color:var(--blue-400); flex:none; }
.social-row{ display:flex; gap:12px; margin-top:8px; }
.social-row a{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:background .18s, transform .18s; }
.social-row a:hover{ background:var(--blue); transform:translateY(-2px); }
.social-row svg{ width:20px; height:20px; color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.10); margin-top:48px; padding-top:22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.84rem; color:#8298b6; }
.footer-bottom a:hover{ color:#fff; }

/* ---------- WhatsApp flotante ---------- */
.wa-float{ position:fixed; right:20px; bottom:20px; z-index:70; width:60px; height:60px; border-radius:50%; background:#25d366; box-shadow:0 12px 30px rgba(37,211,102,.5); display:grid; place-items:center; transition:transform .2s; }
.wa-float:hover{ transform:scale(1.07); }
.wa-float svg{ width:32px; height:32px; color:#fff; }

/* ---------- Mobile nav panel ---------- */
.mobile-menu{ display:none; }

/* ---------- Testimonios: avatar placeholder ---------- */
.tst-avatar{ width:48px; height:48px; border-radius:50%; background:var(--blue-050); color:var(--blue-400); display:grid; place-items:center; flex:none; }
.tst-avatar svg{ width:26px; height:26px; }
.tst-card p.placeholder{ color:var(--muted); }

/* ---------- Agendar / Formulario (demo) ---------- */
.booking{ background:var(--cream); }
.booking-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:48px; align-items:start; }
.booking-aside h2{ font-size:clamp(2rem,3.4vw,2.7rem); margin:14px 0 14px; }
.booking-aside > p{ color:var(--muted); font-size:1.05rem; max-width:40ch; }
.booking-contact{ display:grid; gap:14px; margin:28px 0 26px; }
.bc-item{ display:flex; gap:14px; align-items:flex-start; }
.bc-item .ic{ flex:none; width:44px; height:44px; border-radius:12px; background:#fff; color:var(--blue); display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.bc-item .ic svg{ width:21px; height:21px; }
.bc-item h4{ font-size:.98rem; margin-bottom:2px; }
.bc-item p, .bc-item a{ font-size:.93rem; color:var(--ink); }
.bc-item a:hover{ color:var(--blue); }

.booking-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:34px; }
.booking-card h3{ font-size:1.4rem; margin-bottom:6px; }
.booking-card .sub{ color:var(--muted); font-size:.92rem; margin-bottom:22px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label{ font-family:var(--font-head); font-weight:500; font-size:.83rem; color:var(--navy); }
.field label .req{ color:var(--blue); }
.field input, .field select, .field textarea{
  width:100%; padding:.82rem .95rem; border:1.5px solid #d7e1ee; border-radius:12px;
  font-family:var(--font-body); font-size:.95rem; color:var(--ink); background:#fbfdff;
  transition:border-color .16s ease, box-shadow .16s ease; -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:96px; }
.field select{ background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236c7a93' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; cursor:pointer; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(13,111,199,.12); }
.booking-card .btn{ width:100%; margin-top:4px; }
.form-note{ font-size:.8rem; color:var(--muted); margin-top:14px; text-align:center; }
.form-success{
  display:none; text-align:center; padding:20px 4px;
}
.form-success.show{ display:block; }
.form-success .check{ width:66px; height:66px; border-radius:50%; background:#e7f7ee; color:#25a35a; display:grid; place-items:center; margin:0 auto 16px; }
.form-success .check svg{ width:34px; height:34px; }
.form-success h3{ margin-bottom:8px; }
.form-success p{ color:var(--muted); font-size:.95rem; max-width:34ch; margin:0 auto 20px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .hero h1{ font-size:clamp(2.3rem,6.4vw,3.2rem); }
}

@media (max-width:860px){
  body{ font-size:16px; }
  .section{ padding:64px 0; }
  .nav-links, .nav-phone{ display:none; }
  .nav-toggle{ display:flex; }
  .hero{ padding:40px 0 64px; }
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .hero-visual{ order:-1; }
  .hero-lead{ max-width:none; }
  .hero-portrait{ width:min(340px,80%); }
  .why-grid{ grid-template-columns:1fr; gap:40px; }
  .contact-grid{ grid-template-columns:1fr; }
  .booking-grid{ grid-template-columns:1fr; gap:34px; }
  .booking-card{ padding:26px; }
  .svc-featured{ grid-template-columns:1fr; }
  .svc-featured .img{ min-height:220px; order:-1; }
  .tst-grid{ grid-template-columns:1fr; }
  .cta-band .overlay{ background:linear-gradient(180deg,rgba(8,74,137,.86),rgba(10,90,165,.78)); }
  .cta-band .content{ padding:36px 28px; }

  /* Panel móvil */
  .mobile-menu{
    display:block; position:fixed; inset:0 0 0 auto; width:min(320px,86vw); z-index:80;
    background:#fff; box-shadow:var(--shadow-lg); padding:24px; transform:translateX(105%);
    transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column;
  }
  .mobile-menu.open{ transform:translateX(0); }
  .mm-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
  .mm-head img{ height:40px; }
  .mm-close{ width:44px; height:44px; border:1px solid var(--line); background:#fff; border-radius:12px; display:grid; place-items:center; cursor:pointer; }
  .mm-close svg{ width:24px; height:24px; }
  .mobile-menu a.mm-link{ font-family:var(--font-head); font-weight:500; font-size:1.15rem; color:var(--navy); padding:14px 0; border-bottom:1px solid var(--line); }
  .mobile-menu .mm-cta{ margin-top:auto; display:grid; gap:12px; padding-top:22px; }
  .mm-backdrop{ position:fixed; inset:0; background:rgba(20,35,63,.45); z-index:75; opacity:0; visibility:hidden; transition:opacity .28s; }
  .mm-backdrop.open{ opacity:1; visibility:visible; }
  body.menu-open{ overflow:hidden; }
}

@media (max-width:560px){
  .wrap{ padding:0 18px; }
  .topbar{ display:none; }
  .nav-actions .btn-primary{ display:none; }
  .svc-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .hero-cta .btn, .contact-cta .btn{ flex:1 1 auto; }
  .hero-badges{ gap:16px 22px; }
  .float-rating{ right:0; top:20px; }
  .float-smile{ left:0; }
  .topbar-info span:nth-child(3){ display:none; }
  .results-frame{ border-width:5px; }
}

/* Respeto a movimiento reducido (aunque el sitio es estático) */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
}