:root{
      --primary:#6847a6;
      --primary-700:#553a88;
      --primary-900:#3a275f;
      --ink:#121018;
      --muted:#5c5b66;
      --bg:#fbfafc;
      --card:#ffffff;
      --line:rgba(104,71,166,.16);
      --shadow:0 0px 0px rgba(18,16,24,.08);
      --shadow-soft:0 0px 0px rgba(18,16,24,.06);
      --ring:0 0 0 4px rgba(104,71,166,.18);
      --radius:18px;
    }

    *{box-sizing:border-box;}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--ink);
      background: radial-gradient(1200px 600px at 10% 0%, rgba(104,71,166,.10), transparent 55%),
                  radial-gradient(900px 500px at 90% 10%, rgba(104,71,166,.08), transparent 60%),
                  var(--bg);
      line-height:1.55;
    }

    a{color:var(--primary); text-decoration:none;}
    a:hover{text-decoration:underline;}

    .container{max-width:1120px; margin:0 auto; padding:6px 26px;}
    .topbar{
      display:flex; align-items:center; justify-content:space-between;
      gap:16px; padding:14px 0;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      font-weight:700; letter-spacing:.2px;
    }
    .logo{
      width:36px; height:36px; border-radius:12px;
      background: linear-gradient(135deg, var(--primary), var(--primary-900));
      box-shadow: 0 10px 25px rgba(104,71,166,.25);
    }
    .nav{
      display:flex; flex-wrap:wrap; gap:14px;
      font-size:14px; color:var(--muted);
    }
    .nav a{color:var(--muted);}
    .nav a:hover{color:var(--primary); text-decoration:none;}

    .hero{
      margin-top:10px;
      display:grid; gap:22px;
      grid-template-columns: 1.25fr .75fr;
      align-items:start;
    }
    @media (max-width: 980px){
      .hero{grid-template-columns:1fr;}
    }

    .pill{
      display:inline-flex; align-items:center; gap:10px;
      padding:8px 12px;
      border-radius:999px;
      background: rgba(104,71,166,.10);
      border:1px solid rgba(104,71,166,.18);
      color:var(--primary-900);
      font-weight:650;
      font-size:12.5px;
      letter-spacing:.2px;
    }
    .pill .dot{
      width:7px; height:7px; border-radius:99px;
      background: var(--primary);
      box-shadow:0 0 0 4px rgba(104,71,166,.16);
    }

    h1{
      margin:14px 0 10px;
      font-size:44px;
      line-height:1.08;
      letter-spacing:-.6px;
      color:var(--ink);
    }
    @media (max-width: 520px){ h1{font-size:36px;} }

    .lead{
      font-size:17px; color:var(--muted);
      margin: 0 0 16px;
      max-width: 56ch;
    }

    .highlight{ color:var(--ink); font-weight:650; }

    .hero-actions{
      display:flex; flex-wrap:wrap; gap:12px;
      margin-top:16px;
    }

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:12px 16px;
      border-radius:14px;
      border:1px solid transparent;
      font-weight:700;
      font-size:14.5px;
      letter-spacing:.2px;
      transition: all .25s ease;
      cursor:pointer;
      user-select:none;
    }
    .btn.primary{
      background: linear-gradient(135deg, var(--primary), var(--primary-900));
      color:#fff;
      box-shadow: 0 14px 34px rgba(104,71,166,.26);
    }
    .btn.primary:hover{transform: translateY(-1px); box-shadow: 0 18px 44px rgba(104,71,166,.30);}
    .btn.secondary{
      background: rgba(255,255,255,.70);
      border-color: rgba(104,71,166,.22);
      color:var(--primary-900);
      backdrop-filter: blur(8px);
    }
    .btn.secondary:hover{border-color: rgba(104,71,166,.35); transform: translateY(-1px);}

    .trust{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
      margin-top:18px;
      max-width: 620px;
    }
    @media (max-width: 700px){ .trust{grid-template-columns:1fr;} }
    .trust .chip{
      background: rgba(255,255,255,.78);
      border:1px solid rgba(104,71,166,.14);
      border-radius: 14px;
      padding:12px 14px;
      box-shadow: var(--shadow-soft);
    }
    .chip b{display:block; font-size:13.5px; color:var(--ink);}
    .chip span{display:block; font-size:12.5px; color:var(--muted); margin-top:2px;}

    .panel{
      position:relative;
      border-radius: var(--radius);
      background: rgba(255,255,255,.86);
      border:1px solid rgba(104,71,166,.18);
      box-shadow: var(--shadow);
      overflow:hidden;
      backdrop-filter: blur(10px);
    }
    .panel::before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(600px 220px at 20% 0%, rgba(104,71,166,.18), transparent 55%),
                  radial-gradient(600px 220px at 85% 10%, rgba(104,71,166,.12), transparent 60%);
      pointer-events:none;
    }
    .panel-inner{position:relative; padding:22px;}
    .panel h3{margin:0 0 6px; font-size:18px; letter-spacing:-.2px;}
    .panel p{margin:0 0 14px; color:var(--muted); font-size:13.5px;}

    .form{ display:grid; gap:12px; margin-top:10px; }
    label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px;}
    input, textarea{
      width:100%;
      padding:12px 12px;
      border-radius: 12px;
      border:1px solid rgba(104,71,166,.18);
      background: rgba(255,255,255,.92);
      color:var(--ink);
      outline:none;
      transition: box-shadow .2s ease, border-color .2s ease;
      font-size:14px;
    }
    textarea{resize:vertical; min-height: 92px;}
    input:focus, textarea:focus{
      border-color: rgba(104,71,166,.55);
      box-shadow: var(--ring);
    }
    .consent{
      display:flex; gap:10px; align-items:flex-start;
      font-size:12.5px; color:var(--muted);
      margin-top:2px;
    }
    .consent input{width:auto; margin-top:2px;}

    .panel-footer{
      margin-top:12px;
      display:flex; gap:10px; flex-wrap:wrap;
      align-items:center; justify-content:space-between;
      color:var(--muted);
      font-size:12.5px;
    }
    .mini{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px;
      border-radius: 12px;
      border:1px solid rgba(104,71,166,.16);
      background: rgba(255,255,255,.70);
    }

    .section{margin-top:34px;}
    .section h2{
      font-size:28px;
      letter-spacing:-.35px;
      margin:0 0 14px;
      color:var(--ink);
    }
    .sub{
      margin:0 0 18px;
      color:var(--muted);
      max-width: 78ch;
    }

    .grid3{
      display:grid; gap:14px;
      grid-template-columns: repeat(3, 1fr);
    }
    @media (max-width: 980px){ .grid3{grid-template-columns:1fr;} }

    .card{
      background: rgba(255,255,255,.85);
      border:1px solid rgba(104,71,166,.14);
      border-radius: var(--radius);
      padding:18px;
      box-shadow: var(--shadow-soft);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      backdrop-filter: blur(8px);
    }
    .card:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      border-color: rgba(104,71,166,.26);
    }
    .card h3{
      margin:0 0 8px;
      font-size:16px;
      letter-spacing:-.2px;
      color:var(--ink);
    }
    .card p{margin:0; color:var(--muted); font-size:14px;}

    .divider{ height:1px; background: rgba(104,71,166,.14); margin: 28px 0; }

    .quote{
      border-radius: var(--radius);
      background: linear-gradient(135deg, rgba(104,71,166,.10), rgba(255,255,255,.70));
      border:1px solid rgba(104,71,166,.16);
      padding:18px;
      box-shadow: var(--shadow-soft);
    }
    .quote p{margin:0; color:var(--ink); font-weight:600; letter-spacing:-.15px;}
    .quote span{display:block; margin-top:8px; color:var(--muted); font-size:13.5px;}

    details{
      border:1px solid rgba(104,71,166,.14);
      background: rgba(255,255,255,.85);
      border-radius: 16px;
      padding: 14px 16px;
      margin: 10px 0;
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(8px);
    }
    summary{
      cursor:pointer;
      font-weight:750;
      color:var(--primary-900);
      letter-spacing:-.1px;
    }
    details p{color:var(--muted); margin:10px 0 0; font-size:14px;}

    footer{
      margin: 34px 0 18px;
      color:var(--muted);
      font-size:13.5px;
    }

    .kws{ display:flex; flex-wrap:wrap; gap:8px; margin: 14px 0 0; }
    .kw{
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(104,71,166,.16);
      background: rgba(255,255,255,.75);
      color:var(--primary-900);
    }

    /* ===== NUEVO: Doctor ===== */
    .doctor{
      display:grid;
      grid-template-columns: .8fr 1.2fr;
      gap:14px;
      align-items:stretch;
    }
    @media (max-width: 980px){ .doctor{grid-template-columns:1fr;} }

    .avatar{
      border-radius: var(--radius);
      border:1px solid rgba(104,71,166,.14);
      background: rgba(255,255,255,.85);
      box-shadow: var(--shadow-soft);
      overflow:hidden;
      backdrop-filter: blur(8px);
    }
    .avatar .photo{
      width:100%;
      aspect-ratio: 4/3;
      object-fit: contain;
      display:block;
      background: linear-gradient(135deg, rgba(104,71,166,.12), rgba(255,255,255,.60));
    }
    .avatar .meta{ padding:16px 18px; }
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(104,71,166,.16);
      background: rgba(255,255,255,.70);
      color:var(--primary-900);
      font-weight:700;
      font-size:12.5px;
    }
    .list{
      margin:10px 0 0;
      padding-left:18px;
      color:var(--muted);
      font-size:14px;
    }
    .list li{ margin:6px 0; }

    /* ===== NUEVO: Instalaciones ===== */
    .clinic-img{
      width:100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      border-radius: 14px;
      border:1px solid rgba(104,71,166,.14);
      background: linear-gradient(135deg, rgba(104,71,166,.10), rgba(255,255,255,.70));
      margin-bottom:12px;
      display:block;
    }
    .clinic-meta{
      display:flex;
      flex-direction:column;
      gap:6px;
      margin-top:6px;
    }
    .clinic-meta .name{
      font-weight:800;
      color:var(--ink);
      letter-spacing:-.2px;
      font-size:15.5px;
    }
    .clinic-meta .where{
      color:var(--muted);
      font-size:13.5px;
    }
    .clinic-meta .where b{color:var(--ink); font-weight:700;}

    /* ===== NUEVO: Banner principal (16:9) ===== */
	.hero-banner{
	  width:100%;
	  aspect-ratio: 16 / 9;
	  border-radius: var(--radius);
	  overflow:hidden;
	  border:1px solid rgba(104,71,166,.14);
	  background: rgba(255,255,255,.70);
	  box-shadow: var(--shadow-soft);
	  margin-bottom: 18px; /* separa del hero */
	}

	.hero-banner img{
	  width:100%;
	  height:100%;
	  object-fit: cover;
	  display:block;
	}