:root {
      --verde: #21461d;
      --verde-md: #416b35;
      --verde-lt: #6B8F5E;
      --verde-menta: #c8dbbf;
      --terracota: #E8836A;
      --terracota-lt: #f0a48e;
      --terracota-pale: #fae3db;
      --crema: #f5f2e8;
      --crema-lt: #F7F3EA;
      --blanco: #fefefe;
      --warm-gray: #7a7570;
      --dark: #2D5A27;
      --font-d: 'Montserrat', sans-serif;
      --font-b: 'Jost', sans-serif;
      --ease: cubic-bezier(0.25,0.46,0.45,0.94);
      --t: 0.4s;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font-b); background: var(--blanco); color: var(--dark); overflow-x: hidden; }
    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; }

    /* ── SCROLLBAR ── */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--crema); }
    ::-webkit-scrollbar-thumb { background: var(--verde-lt); border-radius: 4px; }

    /* ═══════════════════════════════════════
       NAVBAR — 3/4 width, centered, transparent → white
    ═══════════════════════════════════════ */
    nav {
      position: fixed; top: 1.2rem; left: 50%; transform: translateX(-50%);
      z-index: 1000;
      width: 75%;
      background: transparent;
      transition: all var(--t) var(--ease);
    }
    .nav-inner {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%;
      background: rgba(20, 20, 20, 0.18);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-radius: 50px;
      border: 1px solid rgba(255,255,255,0.15);
      padding: 0.75rem 1.8rem;
      transition: all var(--t) var(--ease);
    }
    nav.scrolled .nav-inner {
      background: #f5f2e8;
      border-color: rgba(45,90,39,0.12);
      box-shadow: 0 4px 32px rgba(45,90,39,0.12);
    }
    .nav-logo { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
    .nav-logo-mark {
      width: 34px; height: 34px; border-radius: 50%;
      background: var(--verde);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      border: 1.5px solid rgba(255,255,255,0.25);
      transition: background var(--t), border-color var(--t);
    }
    nav.scrolled .nav-logo-mark { border-color: var(--verde-menta); }
    .nav-logo-mark svg { width: 18px; height: 18px; }
    .nav-logo-text { display: flex; flex-direction: column; }
    .nav-logo .nl-title {
      font-family: var(--font-d); font-size: 1rem; font-weight: 500;
      color: var(--blanco); line-height: 1; letter-spacing: 0.02em;
      transition: color var(--t);
      white-space: nowrap;
    }
    nav.scrolled .nl-title { color: var(--verde); }
    .nav-logo .nl-sub {
      font-size: 0.52rem; font-weight: 400; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--terracota-lt);
      white-space: nowrap;
    }
    .nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; flex-shrink: 0; }
    .nav-links a {
      font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em;
      text-transform: uppercase; color: rgba(255,255,255,0.9);
      position: relative; transition: color var(--t); white-space: nowrap;
    }
    nav.scrolled .nav-links a { color: var(--dark); }
    .nav-links a::after {
      content: ''; position: absolute; bottom: -3px; left: 0;
      width: 0; height: 1.5px; background: var(--terracota);
      transition: width var(--t) var(--ease);
    }
    .nav-links a:hover::after { width: 100%; }
    .btn-nav {
      background: var(--verde) !important; color: var(--blanco) !important;
      padding: 0.6rem 1.3rem; border-radius: 50px; font-size: 0.72rem !important;
      transition: all var(--t) !important; margin-left: 0.6rem;
      white-space: nowrap;
    }
    .btn-nav::after { display: none !important; }
    .btn-nav:hover { background: var(--terracota) !important; transform: translateY(-1px); }

    /* Hamburger */
    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; z-index: 1001; margin-left: 1rem; }
    .hamburger span {
      width: 24px; height: 2px; border-radius: 2px;
      background: var(--blanco); transition: all var(--t);
    }
    nav.scrolled .hamburger span { background: var(--verde); }
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
    .mobile-menu {
      display: none; position: fixed; inset: 0; z-index: 999;
      background: var(--blanco); flex-direction: column;
      align-items: center; justify-content: center; gap: 2rem;
    }
    .mobile-menu.active { display: flex; }
    .mobile-menu a {
      font-family: var(--font-d); font-size: 2.4rem; font-weight: 300;
      color: var(--verde); transition: color var(--t);
    }
    .mobile-menu a:hover { color: var(--terracota); }
    .mobile-cta {
      background: var(--verde) !important; color: var(--blanco) !important;
      padding: 0.9rem 2.5rem; border-radius: 50px;
      font-family: var(--font-b) !important; font-size: 0.85rem !important;
    }

    /* ═══════════════════════════════════════
       HERO — full-bg ortopedia image
    ═══════════════════════════════════════ */
    #inicio {
      position: relative; min-height: 100vh;
      display: flex; align-items: center;
      overflow: hidden;
    }
    .hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background:
        linear-gradient(80deg, rgba(30,43,26,0.65) 0%, rgba(45,90,39,0.45) 50%, rgba(232,131,106,0.30) 100%),
        url('/Hero.jpg') 30% center/cover no-repeat;
    }
    /* Animated bones / ortho pattern overlay */
    .hero-pattern {
      position: absolute; inset: 0; z-index: 1;
      background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='1.5' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E");
    }
    .hero-content {
      position: relative; z-index: 2;
      max-width: 720px; padding: 0 5rem;
      margin-top: 5rem;
    }
    .hero-eyebrow {
      font-size: 0.66rem; font-weight: 500; letter-spacing: 0.3em;
      text-transform: uppercase; color: var(--terracota-lt);
      margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem;
      opacity: 0; animation: fadeUp 0.8s var(--ease) 0.3s forwards;
    }
    .hero-eyebrow::before { display: none; }
    .hero-title {
      font-family: var(--font-d); font-weight: 300;
      font-size: clamp(3rem, 6vw, 5.5rem);
      line-height: 1.02; color: var(--blanco);
      margin-bottom: 1.5rem;
      opacity: 0; animation: fadeUp 0.9s var(--ease) 0.5s forwards;
    }
    .hero-title em { font-style: italic; color: var(--terracota-lt); }
    .hero-subtitle {
      font-size: 1rem; font-weight: 300; color: rgba(255,255,255,0.78);
      line-height: 1.85; max-width: 500px; margin-bottom: 2.5rem;
      opacity: 0; animation: fadeUp 0.9s var(--ease) 0.7s forwards;
    }
    .hero-ctas {
      display: flex; gap: 1rem; flex-wrap: wrap;
      opacity: 0; animation: fadeUp 0.9s var(--ease) 0.9s forwards;
    }
    .btn-hero-main {
      display: inline-flex; align-items: center; gap: 0.7rem;
      background: #25D366; color: var(--blanco);
      padding: 1rem 2rem; border-radius: 50px;
      font-size: 0.84rem; font-weight: 500; letter-spacing: 0.06em;
      transition: all var(--t) var(--ease);
      border: 2px solid transparent;
    }
    .btn-hero-main:hover { background: var(--terracota); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(232,131,106,0.4); }
    .btn-hero-out {
      display: inline-flex; align-items: center; gap: 0.7rem;
      background: transparent; color: var(--blanco);
      padding: 1rem 2rem; border-radius: 50px;
      font-size: 0.84rem; font-weight: 500; letter-spacing: 0.06em;
      border: 1.5px solid rgba(255,255,255,0.45);
      transition: all var(--t) var(--ease);
    }
    .btn-hero-out:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); transform: translateY(-2px); }
    .hero-scroll {
      position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
      z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
      opacity: 0; animation: fadeIn 1s var(--ease) 1.4s forwards;
    }
    .hero-scroll span { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
    .scroll-line { width: 1px; height: 40px; background: rgba(255,255,255,0.3); animation: scrollAnim 2s ease-in-out infinite; }
    @keyframes scrollAnim { 0%,100%{transform:scaleY(1);opacity:0.3} 50%{transform:scaleY(0.5);opacity:1} }

    /* ═══════════════════════════════════════
       QUIÉN SOY — circle photo + content right
    ═══════════════════════════════════════ */
    #quien-soy {
      padding: 8rem 5rem;
      display: grid; grid-template-columns: 480px 1fr;
      gap: 5rem; align-items: start;
      background: var(--blanco);
    }
    .qs-left {
      display: flex; flex-direction: column; align-items: center; gap: 2rem;
      position: sticky; top: 6rem;
    }
    /* Circle photo */
    .circle-photo {
      width: 380px; height: 500px; border-radius: 200px;
      position: relative; flex-shrink: 0;
    }
    .circle-photo-inner {
      width: 100%; height: 100%; border-radius: 200px;
      overflow: hidden; border: 4px solid var(--verde-menta);
      background: var(--crema);
      position: relative;
      box-shadow: 0 30px 80px rgba(45,90,39,0.2);
      transition: box-shadow var(--t);
    }
    .circle-photo-inner:hover { box-shadow: 0 40px 100px rgba(45,90,39,0.32); }
    .circle-photo-inner img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 5%;
      transition: transform 0.6s var(--ease);
    }
    .circle-photo-inner:hover img { transform: scale(1.03); }
    /* Placeholder doctor SVG */
    .circle-placeholder {
      width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center;
      background: linear-gradient(160deg, var(--verde-menta) 0%, var(--crema) 100%);
    }
    .circle-placeholder svg { width: 75%; opacity: 0.55; }
    /* Rotating ring */
    .circle-ring {
      position: absolute; inset: -8px; border-radius: 50%;
      border: 1.5px dashed var(--verde-lt);
      animation: spin 20s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    /* Name below circle */
    .circle-name {
      text-align: center;
    }
    .circle-name h2 {
      font-family: var(--font-d); font-size: 1.7rem; font-weight: 500;
      color: var(--verde); line-height: 1.15;
    }
    .circle-name h2 em { font-style: italic; color: var(--terracota); }
    .circle-name p {
      font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--verde-lt); margin-top: 0.4rem; font-weight: 500;
    }
    /* CTA buttons — used in reviews section */
    .chip-btn {
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.55rem 1.1rem; border-radius: 50px; font-size: 0.75rem;
      font-weight: 500; transition: all var(--t) var(--ease); cursor: pointer;
    }
    .chip-wa { background: #25D366; color: white; }
    .chip-wa:hover { background: #1da851; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,211,102,0.35); }
    /* CTA buttons below name — REMOVED */
    .circle-actions { display: none; }
    /* Badge circle */
    .circle-badge {
      position: absolute; bottom: 20px; right: -15px;
      width: 110px; height: 110px; border-radius: 50%;
      background: var(--verde);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
      box-shadow: 0 10px 30px rgba(45,90,39,0.4);
      border: 3px solid var(--blanco);
      text-align: center; padding: 0rem;
     
    }
    .circle-badge-inner {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      animation: spin 25s linear infinite reverse;
    }
    .circle-badge strong {
      font-family: var(--font-d); font-size: 1.6rem; font-weight: 500; color: var(--blanco); line-height: 1;
    }
    .circle-badge span {
      font-size: 0.5rem; font-weight: 500; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--verde-menta); line-height: 1.3; text-align: center;
    }

    /* Right content */
    .qs-right { padding-top: 1rem; }
    .eyebrow {
      font-size: 0.64rem; font-weight: 500; letter-spacing: 0.28em;
      text-transform: uppercase; color: var(--terracota);
      margin-bottom: 1.2rem; display: block;
    }
    .qs-title {
      font-family: var(--font-d); font-size: clamp(2rem,3.5vw,3rem);
      font-weight: 300; color: var(--verde); line-height: 1.08;
      margin-bottom: 1.8rem;
    }
    .qs-title em { font-style: italic; color: var(--terracota); }
    .qs-text {
      font-size: 1rem; font-weight: 400; color: var(--warm-gray);
      line-height: 1.9; margin-bottom: 2rem;
    }
    .creds { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 2.5rem; }
    .cred-item {
      display: flex; align-items: flex-start; gap: 0.9rem;
      font-size: 0.86rem; color: var(--dark); line-height: 1.5;
    }
    .cred-icon {
      width: 32px; height: 32px; border-radius: 8px;
      background: var(--crema); display: flex; align-items: center;
      justify-content: center; flex-shrink: 0; font-size: 0.95rem;
    }
    .qs-divider { width: 40px; height: 1.5px; background: var(--verde-menta); margin-bottom: 2rem; }

    /* ═══════════════════════════════════════
       SERVICIOS — "Áreas de Especialidad"
    ═══════════════════════════════════════ */
    #servicios {
      padding: 7rem 5rem; background: var(--crema); position: relative; overflow: hidden;
    }
    #servicios::before {
      content: ''; position: absolute; top: -120px; right: -120px;
      width: 500px; height: 500px; border-radius: 50%;
      background: radial-gradient(circle, var(--verde-menta) 0%, transparent 70%);
      opacity: 0.35;
    }
    .sec-header { text-align: center; margin-bottom: 4rem; }
    .sec-title {
      font-family: var(--font-d); font-size: clamp(2rem,4vw,3.2rem);
      font-weight: 300; color: var(--verde); line-height: 1.1;
    }
    .sec-title em { font-style: italic; color: var(--terracota); }
    .sec-divider { width: 48px; height: 1.5px; background: var(--verde-lt); margin: 1.2rem auto 0; }

    .services-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem; position: relative; z-index: 1;
    }
    .srv-card {
      background: var(--blanco); border-radius: 18px; padding: 2.5rem 2rem;
      border: 1px solid transparent; transition: all var(--t) var(--ease);
      cursor: default; position: relative; overflow: hidden;
    }
    .srv-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 3px; background: linear-gradient(90deg, var(--verde), var(--terracota));
      transform: scaleX(0); transition: transform var(--t) var(--ease);
    }
    .srv-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(45,90,39,0.14); border-color: var(--verde-menta); }
    .srv-card:hover::before { transform: scaleX(1); }
    /* SVG icon container */
    .srv-icon {
      width: 54px; height: 54px; border-radius: 14px; color:#1a3d14;
      background: var(--crema); display: flex; align-items: center;
      justify-content: center; margin-bottom: 1.2rem;
      transition: background var(--t);
    }
    .srv-card:hover .srv-icon { background: var(--verde); }
    .srv-icon svg { width: 28px; height: 28px; transition: all var(--t); }
    .srv-card:hover .srv-icon svg path,
    .srv-card:hover .srv-icon svg circle,
    .srv-card:hover .srv-icon svg rect,
    .srv-card:hover .srv-icon svg ellipse { stroke: white !important; }
    .srv-title {
      font-family: var(--font-d); font-size: 1.15rem; font-weight: 500;
      color: var(--verde); margin-bottom: 0.6rem;
    }
    .srv-desc { font-size: 0.78rem; font-weight: 300; color: var(--warm-gray); line-height: 1.65; }

    /* Seguros banner */
    .seguros-banner {
      margin-top: 3rem; border-radius: 20px; padding: 2.5rem 0 2rem;
      background: linear-gradient(135deg, var(--verde) 0%, #1a3d14 100%);
      display: flex; flex-direction: column;
      gap: 1.8rem; position: relative; z-index: 1; overflow: hidden;
    }
    .seguros-banner::after {
      content: ''; position: absolute; right: -40px; top: -40px;
      width: 200px; height: 200px; border-radius: 50%;
      border: 50px solid rgba(255,255,255,0.04);
    }
    .seg-text { padding: 0 3rem; }
    .seg-text h3 { font-family: var(--font-d); font-size: 1.5rem; font-weight: 700; color: white; margin-bottom: 0.4rem; }
    .seg-text p { font-size: 0.8rem; color: var(--verde-menta); font-weight: 300; }

    /* Marquee */
    .seg-marquee-wrap {
      width: 100%; overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    }
    .seg-marquee { display: flex; width: 100%; }
    .seg-track {
      display: flex; align-items: center; gap: 0.8rem;
      white-space: nowrap; flex-shrink: 0;
      animation: marquee 50s linear infinite;
    }
    .seg-marquee-wrap:hover .seg-track { animation-play-state: paused; }
    @keyframes marquee {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .seg-logo-item {
      background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
      border-radius: 50px; padding: 0.45rem 1.1rem;
      font-size: 0.72rem; font-weight: 500; color: white;
      letter-spacing: 0.06em; white-space: nowrap; flex-shrink: 0;
      transition: background var(--t);
    }
    .seg-logo-item:hover { background: rgba(255,255,255,0.22); }

    /* ═══════════════════════════════════════
       AGENDAR — only Doctoralia
    ═══════════════════════════════════════ */
    #agendar {
      padding: 7rem 5rem; background: var(--blanco);
      display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
    }
    .ag-content .eyebrow { margin-bottom: 1rem; }
    .ag-title {
      font-family: var(--font-d); font-size: clamp(2rem,3.5vw,3rem);
      font-weight: 300; color: var(--verde); line-height: 1.1; margin-bottom: 1.5rem;
    }
    .ag-title em { font-style: italic; color: var(--terracota); }
    .ag-text {
      font-size: 0.92rem; font-weight: 300; color: var(--warm-gray);
      line-height: 1.85; margin-bottom: 2.5rem;
    }
    /* Single Doctoralia button */
    .btn-doctoralia {
      display: inline-flex; align-items: center; gap: 1rem;
      background: var(--verde); color: white;
      padding: 1.1rem 2rem; border-radius: 14px;
      font-size: 0.9rem; font-weight: 500;
      transition: all var(--t) var(--ease);
      border: 2px solid transparent;
    }
    .btn-doctoralia:hover { background: var(--terracota); transform: translateY(-3px); box-shadow: 0 14px 36px rgba(232,131,106,0.3); }
    .btn-doctoralia-icon {
      width: 42px; height: 42px; border-radius: 10px;
      background: rgba(255,255,255,0.15);
      display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    }
    /* Visual card right */
    .ag-visual {
      background: linear-gradient(145deg, var(--verde) 0%, #1a3d14 100%);
      border-radius: 24px; padding: 3rem; color: white; position: relative; overflow: hidden;
    }
    .ag-visual::before {
      content: ''; position: absolute; bottom: -50px; right: -50px;
      width: 220px; height: 220px; border-radius: 50%;
      border: 55px solid rgba(255,255,255,0.04);
    }
    /* bone shapes as decoration — same transparency */
    .ag-bone-deco {
      position: absolute; top: -30px; left: -30px;
      width: 150px; height: 150px; opacity: 0.05;
    }
    .ag-live-badge {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
      padding: 0.4rem 1rem; border-radius: 50px;
      font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
      margin-bottom: 1.8rem; color: var(--verde-menta);
    }
    .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: livePulse 2s infinite; }
    @keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.7)} }
    .ag-visual-title {
      font-family: var(--font-d); font-size: 1.9rem; font-weight: 300;
      line-height: 1.2; margin-bottom: 2rem;
    }
    .ag-visual-title em { font-style: italic; color: var(--terracota-lt); }
    .ag-promises { display: flex; flex-direction: column; gap: 0.9rem; }
    .promise {
      display: flex; align-items: center; gap: 0.8rem;
      font-size: 0.84rem; color: var(--verde-menta);
    }
    .p-check {
      width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
      background: rgba(74,222,128,0.2); display: flex; align-items: center;
      justify-content: center; font-size: 0.65rem; color: #4ade80;
    }

    /* ═══════════════════════════════════════
       DOCTORALIA WIDGET / RESEÑAS
    ═══════════════════════════════════════ */
    #reviews {
      padding: 7rem 5rem; background: var(--crema);
    }
    .reviews-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start;
    }
    .reviews-left { display: flex; flex-direction: column; }
    .rating-hero {
      display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; margin-bottom: 3rem;
    }
    .rating-big {
      font-family: var(--font-d); font-size: 5rem; font-weight: 300;
      color: var(--verde); line-height: 1;
    }
    .rating-info { display: flex; flex-direction: column; gap: 0.3rem; }
    .stars { color: #f59e0b; font-size: 1.2rem; letter-spacing: 0.05em; }
    .rating-label { font-size: 0.75rem; color: var(--warm-gray); }
    .reviews-carousel {
      position: relative; overflow: hidden;
    }
    .reviews-track { position: relative; min-height: 160px; }
    .review-card {
      background: var(--blanco); border-radius: 14px; padding: 1.2rem 1.4rem;
      border: 1px solid rgba(45,90,39,0.08);
      position: absolute; top: 0; left: 0; width: 100%;
      opacity: 0; transform: translateX(40px);
      transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
      pointer-events: none;
    }
    .review-card.active {
      opacity: 1; transform: translateX(0);
      position: relative; pointer-events: auto;
    }
    .review-stars { color: #f59e0b; font-size: 0.8rem; margin-bottom: 0.5rem; }
    .review-text { font-size: 0.82rem; font-weight: 300; color: var(--dark); line-height: 1.65; margin-bottom: 0.8rem; font-style: italic; }
    .review-author { display: flex; align-items: center; gap: 0.6rem; }
    .review-avatar {
      width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
      background: var(--verde-menta); display: flex; align-items: center;
      justify-content: center; font-size: 0.7rem; font-weight: 600; color: var(--verde);
    }
    .review-name { font-size: 0.76rem; font-weight: 600; color: var(--verde); }
    .review-date { font-size: 0.65rem; color: var(--warm-gray); }
    .carousel-dots {
      display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem;
    }
    .cdot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--verde-menta); border: none; cursor: pointer;
      transition: background var(--t), transform var(--t); padding: 0;
    }
    .cdot.active { background: var(--verde); transform: scale(1.3); }
    /* Doctoralia CTA card */
    .doc-cta-card {
      background: var(--verde); border-radius: 20px; padding: 2.5rem;
      color: white; display: flex; flex-direction: column; gap: 1.5rem;
      position: sticky; top: 6rem;
    }
    .doc-cta-card h3 { font-family: var(--font-d); font-size: 1.8rem; font-weight: 300; line-height: 1.2; }
    .doc-cta-card h3 em { font-style: italic; color: var(--terracota-lt); }
    .doc-cta-card p { font-size: 0.83rem; font-weight: 300; color: var(--verde-menta); line-height: 1.7; }
    .btn-doc-white {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
      background: white; color: var(--verde);
      padding: 1rem 1.8rem; border-radius: 12px;
      font-size: 0.88rem; font-weight: 600;
      transition: all var(--t); text-align: center;
    }
    .btn-doc-white:hover { background: var(--terracota); color: white; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(232,131,106,0.3); }
    .doc-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
    .doc-stat { display: flex; flex-direction: column; gap: 0.15rem; }
    .doc-stat strong { font-family: var(--font-d); font-size: 2rem; font-weight: 400; color: white; }
    .doc-stat span { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verde-menta); }

    /* ═══════════════════════════════════════
       FAQ
    ═══════════════════════════════════════ */
    #faq { padding: 7rem 5rem; background: var(--blanco); }
    .faq-grid { max-width: 800px; margin: 0 auto; }
    .faq-item {
      border-bottom: 1px solid var(--verde-menta); overflow: hidden;
    }
    .faq-q {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.5rem 0; cursor: pointer; gap: 1rem;
      font-family: var(--font-d); font-size: 1.1rem; font-weight: 400;
      color: var(--verde); transition: color var(--t);
      user-select: none;
    }
    .faq-q:hover { color: var(--terracota); }
    .faq-icon {
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--crema); display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: all var(--t);
      font-size: 1rem; color: var(--verde);
    }
    .faq-item.open .faq-icon { background: var(--verde); color: white; transform: rotate(45deg); }
    .faq-a {
      max-height: 0; overflow: hidden;
      transition: max-height 0.5s var(--ease), padding 0.3s;
    }
    .faq-item.open .faq-a { max-height: 300px; }
    .faq-a-inner {
      padding-bottom: 1.5rem;
      font-size: 0.88rem; font-weight: 300; color: var(--warm-gray); line-height: 1.85;
    }

    /* ═══════════════════════════════════════
       CONSULTORIOS
    ═══════════════════════════════════════ */
    #consultorios { padding: 5rem 5rem; background: var(--blanco); }
    .cons-grid {
      display: grid; grid-template-columns: repeat(2, minmax(260px, 360px)); gap: 1.5rem;
      max-width: 760px; margin: 0 auto;
    }
    .con-card {
      background: var(--crema-lt); border-radius: 20px; padding: 2rem 1.8rem;
      border: 1px solid rgba(45,90,39,0.08);
      transition: all var(--t) var(--ease); position: relative;
      display: flex; flex-direction: column; gap: 0.5rem;
    }
    .con-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(45,90,39,0.12); border-color: var(--verde-menta); }
    .con-tag {
      font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--terracota);
      margin-bottom: 0.3rem;
    }
    .con-name { font-family: var(--font-d); font-size: 1.1rem; font-weight: 700; color: var(--verde); line-height: 1.2; margin-bottom: 0.2rem; }
    .con-addr { font-size: 0.8rem; font-weight: 300; color: var(--warm-gray); line-height: 1.75; flex: 1; }
    .con-link {
      display: inline-flex; align-items: center; gap: 0.45rem;
      font-size: 0.74rem; font-weight: 600; color: var(--terracota);
      margin-top: 0.8rem; transition: gap var(--t), color var(--t);
    }
    .con-link:hover { gap: 0.7rem; color: var(--verde); }
    .con-card-dark { background: var(--verde); border-color: transparent; }
    .con-card-dark .con-tag { color: var(--terracota-lt); }
    .con-card-dark .con-name { color: white; }
    .con-card-dark .con-addr { color: rgba(255,255,255,0.65); }
    .con-card-dark .con-link { color: var(--terracota-lt); }
    .con-card-dark .con-link:hover { color: white; }
    .urg-badge {
      display: inline-flex; align-items: center; gap: 0.4rem;
      background: var(--terracota); color: white;
      padding: 0.28rem 0.75rem; border-radius: 50px;
      font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em;
      text-transform: uppercase; margin-bottom: 0.4rem; width: fit-content;
    }
    .urg-dot { width: 6px; height: 6px; border-radius: 50%; background: #ffaaaa; animation: livePulse 1.5s infinite; }
    @media (max-width: 768px) {
      #consultorios { padding: 4rem 2rem; }
      .cons-grid { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════
       INSTAGRAM FEED
    ═══════════════════════════════════════ */
    #instagram {
      padding: 5rem 5rem; background: var(--crema);
    }
    .ig-handle {
      margin-top: 0.8rem;
    }
    .ig-handlee p{
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-size: 0.82rem; font-weight: 500; color: var(--verde-lt);
      letter-spacing: 0.06em; transition: color var(--t); font-family: 'Jost', sans-serif;;
    }
    .ig-handle a {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-size: 0.82rem; font-weight: 500; color: var(--verde-lt);
      letter-spacing: 0.06em; transition: color var(--t);
    }
    .ig-handle a:hover { color: var(--terracota); }
    .ig-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem; max-width: 1000px; margin: 0 auto;
    }
    .ig-card {
      border-radius: 18px; overflow: hidden;
      background: var(--blanco);
      border: 1px solid rgba(45,90,39,0.08);
      transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
      /* fuerza el embed a llenar la tarjeta */
      display: flex; flex-direction: column;
    }
    .ig-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 50px rgba(45,90,39,0.12);
    }
    /* Normaliza el iframe de Instagram */
    .ig-card .instagram-media {
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
      margin: 0 !important;
      min-width: 0 !important;
      width: 100% !important;
    }
    .btn-ig {
      display: none; /* ya no se usa */
    }
    .ig-social-row {
      display: flex; align-items: center; justify-content: center; gap: 0.8rem;
      margin-top: 0.5rem;
    }
    .ig-soc-btn {
      width: 48px; height: 48px; border-radius: 50%;
      background: var(--blanco); border: 1.5px solid rgba(45,90,39,0.15);
      display: flex; align-items: center; justify-content: center;
      color: var(--verde); transition: all var(--t) var(--ease);
    }
    .ig-soc-btn:hover {
      background: var(--verde); color: white;
      border-color: var(--verde);
      transform: translateY(-3px); box-shadow: 0 8px 20px rgba(45,90,39,0.2);
    }
    @media (max-width: 768px) {
      #instagram { padding: 4rem 2rem; }
      .ig-grid { grid-template-columns: 1fr; max-width: 420px; }
    }
    @media (max-width: 1100px) {
      .ig-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ═══════════════════════════════════════
       CUÁNDO ACUDIR
    ═══════════════════════════════════════ */
    #cuando-acudir { padding: 5rem 5rem; background: var(--crema); }
    .cuando-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 1.2rem; max-width: 1000px; margin: 0 auto;
    }
    .cuando-item {
      background: var(--blanco); border-radius: 18px; padding: 1.8rem 1.4rem;
      border: 1px solid rgba(45,90,39,0.07);
      display: flex; flex-direction: column; gap: 0.9rem;
      transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
    }
    .cuando-item:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(45,90,39,0.1); }
    .cuando-icon { font-size: 1.8rem; line-height: 1; }
    .cuando-item p { font-size: 0.82rem; font-weight: 300; color: var(--warm-gray); line-height: 1.7; }
    @media (max-width: 1100px) { .cuando-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 768px) { #cuando-acudir { padding: 4rem 1.5rem; } }
    @media (max-width: 480px) { .cuando-grid { grid-template-columns: 1fr 1fr; gap: 0.9rem; } }

    /* ═══════════════════════════════════════
       MOBILE MENU — rediseñado
    ═══════════════════════════════════════ */
    .mobile-menu {
      display: none; position: fixed; inset: 0; z-index: 999;
      background: var(--dark);
      flex-direction: column; padding: 2rem 2rem 3rem;
    }
    .mobile-menu.active { display: flex; }
    .mobile-close {
      align-self: flex-end; background: rgba(255,255,255,0.08);
      border: none; border-radius: 50%; width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
      color: white; cursor: pointer; margin-bottom: 2rem;
      transition: background var(--t);
    }
    .mobile-close:hover { background: rgba(255,255,255,0.15); }
    .mobile-logo {
      display: flex; align-items: center; gap: 0.8rem;
      margin-bottom: 2.5rem; padding-bottom: 1.5rem;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .mobile-logo .nav-logo-mark { width: 36px; height: 36px; flex-shrink: 0; }
    .mobile-logo span {
      font-family: var(--font-d); font-size: 1rem; font-weight: 700;
      color: white; letter-spacing: 0.04em;
    }
    .mobile-nav {
      display: flex; flex-direction: column; gap: 0; flex: 1; margin-top: 3.8rem;
    }
    .mobile-nav a {
      display: flex; align-items: center; gap: 1rem;
      font-family: var(--font-d); font-size: 1.1rem; font-weight: 700;
      color: rgba(255,255,255,0.75); padding: 1rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      transition: color var(--t), padding-left var(--t);
      letter-spacing: -0.01em;
    }
    .mobile-nav a:hover { color: white; padding-left: 0.5rem; }
    .mn-num {
      font-family: var(--font-b); font-size: 0.6rem; font-weight: 500;
      color: var(--terracota); letter-spacing: 0.1em;
      min-width: 20px;
    }
    .mobile-cta {
      display: flex; align-items: center; justify-content: center;
      background: var(--terracota) !important; color: white !important;
      padding: 1rem 2rem; border-radius: 50px; margin-top: 2rem;
      font-family: var(--font-b) !important; font-size: 0.88rem !important;
      font-weight: 600; letter-spacing: 0.04em;
      transition: background var(--t), transform var(--t);
    }
    .mobile-cta:hover { background: var(--verde) !important; transform: translateY(-2px); }

    /* ═══════════════════════════════════════
       FLOATING WHATSAPP + DOCTORALIA
    ═══════════════════════════════════════ */
    .float-btns {
      position: fixed; bottom: 2rem; right: 2rem; z-index: 900;
      display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem;
    }
    .float-label {
      background: #E8836A; color: #21461d;
      padding: 0.35rem 0.8rem; border-radius: 50px;
      font-size: 0.68rem; white-space: nowrap;
      opacity: 0; transform: translateX(8px);
      transition: all var(--t); pointer-events: none;
    }
    .float-row { display: flex; align-items: center; gap: 0.6rem; }
    .float-row:hover .float-label { opacity: 1; transform: translateX(0); }
    .float-btn {
      width: 54px; height: 54px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
      cursor: pointer; transition: all var(--t); font-size: 1.4rem;
    }
    .float-btn:hover { transform: scale(1.1); }
    .float-wa { background: #25D366; }
    .float-wa:hover { box-shadow: 0 12px 32px rgba(62, 226, 180, 0.45); }
    .float-doc { background: #107964; }
    .float-doc:hover { background: #107964; box-shadow: 0 12px 32px rgba(232,131,106,0.35); }

    /* ═══════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════ */
    footer { background: var(--dark); padding: 3.5rem 5rem 2rem; }
    .footer-main {
      display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; margin-bottom: 2.5rem;
      align-items: start;
    }
    /* Logo centered on name */
    .footer-brand { display: flex; flex-direction: column; }
    .fb-logo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
    /* Simple logo mark */
    .logo-mark {
      width: 42px; height: 42px; border-radius: 10px;
      background: var(--verde); display: flex; align-items: center;
      justify-content: center; flex-shrink: 0;
    }
    .logo-mark svg { width: 22px; }
    .fb-name { display: flex; flex-direction: column; }
    .fb-name strong { font-family: var(--font-d); font-size: 1.1rem; font-weight: 400; color: white; line-height: 1.1; }
    .fb-name span { font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracota-lt); margin-top: 0.2rem; }
    .footer-tagline { font-size: 0.8rem; font-weight: 300; color: #f5f2e8;; line-height: 1.7; margin-bottom: 1.5rem; }
    .social-row { display: flex; gap: 0.7rem; }
    .soc-btn {
      width: 36px; height: 36px; border-radius: 8px;
      background: #f5f2e8; border: 1px solid rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center;
      color: #416b35; transition: all var(--t); font-size: 0.9rem;
    }
    .soc-btn:hover { background: var(--terracota); border-color: var(--terracota); color: white; transform: translateY(-2px); }
    .footer-col-title {
      font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em;
      text-transform: uppercase; color: #f0a48e; margin-bottom: 1.2rem;
    }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
    .footer-links a { font-size: 0.8rem; font-weight: 300; color: #fae3db; transition: color var(--t); }
    .footer-links a:hover { color: var(--terracota-lt); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.07); padding-top: 1.5rem;
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
    }
    .footer-copy { font-size: 0.7rem; color: rgba(255,255,255,0.25); }
 .footer-copyy { font-size: 0.7rem; color: rgba(255,255,255,0.25); margin-left: 40rem;}
    /* ═══════════════════════════════════════
       SCROLL REVEAL
    ═══════════════════════════════════════ */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
    .reveal.visible { opacity: 1; transform: none; }
    .rd1 { transition-delay: 0.08s; }
    .rd2 { transition-delay: 0.16s; }
    .rd3 { transition-delay: 0.24s; }
    .rd4 { transition-delay: 0.32s; }
    .rd5 { transition-delay: 0.40s; }
    .rd6 { transition-delay: 0.48s; }

    @keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
    @keyframes fadeIn { to { opacity:1; } }

    /* ═══════════════════════════════════════
       TEXT ANIMATION — split chars
    ═══════════════════════════════════════ */
    .char-wrap { overflow: hidden; display: inline-block; }
    .char {
      display: inline-block;
      transform: translateY(110%);
      transition: transform 0.65s var(--ease);
    }
    .char.in { transform: translateY(0); }

    /* ═══════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════ */

    /* ── Tablet ≤1100px ── */
    @media (max-width: 1100px) {
      nav { top: 0.8rem; width: 90%; }
      #quien-soy { grid-template-columns: 1fr; padding: 5rem 3rem; gap: 3rem; }
      .qs-left { position: static; align-items: center; }
      .circle-photo { width: 280px; height: 370px; }
      #agendar { grid-template-columns: 1fr; padding: 5rem 3rem; gap: 2rem; }
      .ag-visual { display: block; padding: 2rem; border-radius: 18px; }
      .reviews-grid { grid-template-columns: 1fr; }
      .doc-cta-card { position: static; }
      #servicios, #faq, #reviews, #instagram { padding: 5rem 3rem; }
      #consultorios { padding: 5rem 3rem; }
      footer { padding: 3rem 3rem 2rem; }
      .footer-main { grid-template-columns: 1fr 1fr; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .ig-grid { grid-template-columns: repeat(2, 1fr); }
      .cons-grid { grid-template-columns: 1fr 1fr; }
    }

    /* ── Mobile ≤768px ── */
    @media (max-width: 768px) {
      nav { top: 0.6rem; left: 1rem; right: 1rem; transform: none; width: calc(100% - 2rem); }
      .nav-inner { width: 100%; justify-content: space-between; padding: 0.6rem 0.8rem 0.6rem 1rem; }
      .nav-links { display: none; }
      .hamburger { display: flex; }

      #inicio { min-height: 100svh; }
      .hero-content { padding: 0 1.5rem; margin-top: 4rem; }
      .hero-eyebrow { font-size: 0.58rem; }
      .hero-subtitle { font-size: 0.88rem; }
      .hero-ctas { flex-direction: column; gap: 0.8rem; }
      .btn-hero-main, .btn-hero-out { justify-content: center; width: 100%; padding: 0.9rem 1.5rem; }

      #quien-soy { padding: 4rem 1.5rem; gap: 2rem; }
      .circle-photo { width: 260px; height: 340px; }
      .qs-right { padding-top: 0; }

      #servicios { padding: 4rem 1.5rem; }
      .services-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
      .srv-card { padding: 1.5rem 1.2rem; }

      .seguros-banner { padding: 2rem 0 1.5rem; }
      .seg-text { padding: 0 1.5rem; }

      #agendar { padding: 4rem 1.5rem; }
      .ag-visual { padding: 1.8rem; border-radius: 16px; }
      .ag-visual-title { font-size: 1.4rem; }
      .promise { font-size: 0.8rem; }
      #reviews { padding: 4rem 1.5rem; }
      .rating-hero { gap: 1rem; }
      .rating-big { font-size: 3.5rem; }

      #faq { padding: 4rem 1.5rem; }

      #consultorios { padding: 4rem 1.5rem; }
      .cons-grid { grid-template-columns: 1fr; max-width: 100%; }

      #instagram { padding: 4rem 1.5rem; }
      .ig-grid { grid-template-columns: 1fr; max-width: 100%; }

      footer { padding: 3rem 1.5rem 2rem; }
      .footer-main { grid-template-columns: 1fr; gap: 2rem; }
      .footer-bottom { flex-direction: column; text-align: center; }

      /* Botones flotantes más pequeños */
      .float-btns { bottom: 1rem; right: 1rem; gap: 0.5rem; }
      .float-btn { width: 42px; height: 42px; }
      .float-btn svg { width: 18px; height: 18px; }
      .float-label { display: none; }

      /* CTAs hero más compactos */
      .btn-hero-main, .btn-hero-out {
        padding: 0.75rem 1.2rem;
        font-size: 0.78rem;
      }
      .btn-hero-main svg { width: 15px; height: 15px; }
    }

    /* ── Mobile pequeño ≤480px ── */
    @media (max-width: 480px) {
      .hero-title { font-size: 2.2rem; }
      .circle-photo { width: 220px; height: 290px; }
      .services-grid { grid-template-columns: 1fr; }
      .circle-name h2 { font-size: 1.3rem; }
      .nl-sub { display: none; }
      .btn-hero-main, .btn-hero-out { font-size: 0.78rem; }
      .rating-big { font-size: 3rem; }
      .fb-name strong { font-size: 0.95rem; }
    }

    /* ═══════════════════════════════════════
       FLOATING WHATSAPP + DOCTORALIA
    ═══════════════════════════════════════ */

    .avatar {
  width: 42px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}