/* Panorama Mashta al-Helu — servicio de radiografia para otras clinicas.
   Paleta propia (azul marino + ambar) para que NO se lea como la pagina del consultorio.
   Igual que en el sitio principal: propiedades logicas para que RTL/LTR se volteen solos. */
:root{
  --tinta:#16233a; --tinta-suave:#5d6b82; --marino:#1f3a5f; --marino-osc:#16233a;
  --ambar:#e8a33d; --ambar-osc:#c9871f; --hielo:#eef3fa; --hielo-borde:#d9e3f0;
  --blanco:#fff; --linea:#e5eaf2;
  --radio:22px; --sombra:0 18px 45px -22px rgba(22,35,58,.35);
  --ancho:1120px; --fuente:'Tajawal','Manrope',system-ui,sans-serif;
  --transicion:.35s cubic-bezier(.22,.61,.36,1);
}
html[lang="en"]{ --fuente:'Manrope','Tajawal',system-ui,sans-serif; }
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-block-start:90px; }
body{ margin:0; background:var(--blanco); color:var(--tinta); font-family:var(--fuente); font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ line-height:1.25; margin:0 0 .5em; font-weight:800; }
h1{ font-size:clamp(2rem,4.6vw,3.3rem); }
h2{ font-size:clamp(1.6rem,3.2vw,2.4rem); }
h3{ font-size:1.15rem; }
p{ margin:0 0 1em; }
.contenedor{ width:min(100% - 2.5rem,var(--ancho)); margin-inline:auto; }
.seccion{ padding-block:clamp(4rem,8vw,6.5rem); }
.seccion--gris{ background:var(--hielo); border-block:1px solid var(--hielo-borde); }
:focus-visible{ outline:3px solid var(--ambar); outline-offset:3px; border-radius:6px; }

.etiqueta{ display:inline-flex; align-items:center; gap:.5rem; margin:0 0 .8rem; font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ambar-osc); }
.etiqueta::before{ content:""; inline-size:26px; block-size:2px; background:currentColor; }
.etiqueta--claro{ color:var(--ambar); }

.boton{ display:inline-flex; align-items:center; gap:.55rem; justify-content:center; padding:.95rem 1.7rem; border-radius:999px; font-weight:700; border:2px solid transparent; cursor:pointer; transition:var(--transicion); white-space:nowrap; }
.boton .ico{ width:20px; height:20px; flex:none; }
.boton--primario{ background:linear-gradient(135deg,var(--ambar),var(--ambar-osc)); color:#1a1a1a; box-shadow:0 14px 30px -14px rgba(232,163,61,.9); }
.boton--primario:hover{ transform:translateY(-2px); }
.boton--fantasma{ background:transparent; border-color:var(--linea); color:var(--tinta); }
.boton--fantasma:hover{ border-color:var(--marino); transform:translateY(-2px); }
.boton--sm{ padding:.62rem 1.15rem; font-size:.95rem; }

/* Cabecera */
.cabecera{ position:sticky; inset-block-start:0; z-index:60; background:rgba(255,255,255,.85); backdrop-filter:blur(14px); border-block-end:1px solid transparent; transition:var(--transicion); }
.cabecera.pegada{ border-block-end-color:var(--linea); box-shadow:0 10px 30px -25px rgba(22,35,58,.6); }
.cabecera__fila{ display:flex; align-items:center; gap:1.2rem; padding-block:.8rem; }
.marca{ display:flex; align-items:center; gap:.7rem; flex:none; }
.marca__icono{ inline-size:44px; block-size:44px; display:grid; place-items:center; color:#fff; background:linear-gradient(140deg,var(--marino),var(--marino-osc)); border-radius:14px; }
.marca__icono svg{ inline-size:26px; block-size:26px; }
.marca__texto{ display:flex; flex-direction:column; line-height:1.25; }
.marca__texto strong{ font-size:1.05rem; }
.marca__texto small{ color:var(--tinta-suave); font-size:.78rem; }
.nav{ display:flex; gap:.2rem; margin-inline:auto; }
.nav a{ padding:.5rem .85rem; border-radius:999px; color:var(--tinta-suave); font-weight:500; transition:var(--transicion); }
.nav a:hover{ color:var(--marino); background:var(--hielo); }
.cabecera__acciones{ display:flex; align-items:center; gap:.6rem; flex:none; }
.idioma{ font-family:'Tajawal',var(--fuente); inline-size:42px; block-size:42px; border-radius:50%; border:1px solid var(--linea); background:#fff; color:var(--tinta); font-weight:800; font-size:.85rem; cursor:pointer; }
.idioma:hover{ border-color:var(--marino); color:var(--marino); }

/* Portada */
.portada{ position:relative; padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,5.5rem); overflow:hidden;
  background:radial-gradient(700px 420px at 85% 0%,rgba(232,163,61,.18),transparent 60%),radial-gradient(600px 460px at 5% 40%,rgba(31,58,95,.10),transparent 60%); }
.portada__rejilla{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.portada__bajada{ font-size:1.12rem; color:var(--tinta-suave); max-inline-size:56ch; }
.resalte{ color:var(--marino); background:linear-gradient(180deg,transparent 78%,rgba(232,163,61,.45) 78%); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.portada__botones{ display:flex; flex-wrap:wrap; gap:.8rem; margin-block:1.6rem 1.6rem; }
.pastillas{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0; }
.pastillas li{ padding:.4rem 1rem; border-radius:999px; background:var(--hielo); color:var(--marino); border:1px solid var(--hielo-borde); font-size:.9rem; font-weight:500; }
.portada__foto{ margin:0; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); position:relative; }
.portada__foto figcaption{ position:absolute; inset-block-end:0; inset-inline:0; padding:1.2rem; background:linear-gradient(to top,rgba(22,35,58,.8),transparent); color:#fff; font-weight:700; }

/* Titulos y tarjetas */
.titulo{ text-align:center; max-inline-size:720px; margin:0 auto clamp(2rem,4vw,3.2rem); }
.titulo .etiqueta{ justify-content:center; }
.titulo__bajada{ color:var(--tinta-suave); margin:0; }
.tarjetas{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.tarjeta{ background:#fff; border:1px solid var(--hielo-borde); border-radius:var(--radio); padding:1.7rem 1.5rem; transition:var(--transicion); }
.tarjeta:hover{ transform:translateY(-6px); box-shadow:var(--sombra); }
.tarjeta__num{ display:block; font-size:1.5rem; font-weight:800; color:var(--ambar); margin-block-end:.4rem; }
.tarjeta p{ margin:0; color:var(--tinta-suave); font-size:.95rem; }

/* Compromiso (la seccion que convence al colega) */
.compromiso{ background:radial-gradient(700px 400px at 90% 0%,rgba(232,163,61,.25),transparent 60%),linear-gradient(160deg,var(--marino-osc),var(--marino) 60%,#122540); color:#fff; }
.compromiso__rejilla{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.compromiso__bajada{ color:rgba(255,255,255,.75); margin:0; }
.promesas{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
.promesas li{ position:relative; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:1rem 1.2rem; padding-inline-start:3.2rem; font-weight:500; }
.promesas li::before{ content:""; position:absolute; inset-inline-start:1.1rem; inset-block-start:1.15rem; inline-size:22px; block-size:22px; border-radius:50%; background:var(--ambar) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2316233a' d='M9.6 16.2 5.4 12l1.4-1.4 2.8 2.8 7-7L18 7.8z'/></svg>") center/14px no-repeat; }

/* Pasos */
.pasos{ list-style:none; margin:0 0 2.5rem; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; counter-reset:paso; }
.pasos li{ background:var(--hielo); border-radius:var(--radio); padding:1.8rem 1.6rem; position:relative; }
.pasos__num{ display:grid; place-items:center; inline-size:44px; block-size:44px; border-radius:50%; background:var(--marino); color:#fff; font-weight:800; font-size:1.2rem; margin-block-end:1rem; }
.pasos p{ margin:0; color:var(--tinta-suave); font-size:.95rem; }
.info{ display:grid; grid-template-columns:1.3fr .7fr; gap:1.2rem; }
.info > div{ background:#fff; border:1px solid var(--hielo-borde); border-radius:var(--radio); padding:1.8rem; }
.lista{ margin:0; padding-inline-start:1.2rem; color:var(--tinta-suave); }
.lista li{ margin-block:.4rem; }
.precio{ text-align:center; background:linear-gradient(160deg,#fff,var(--hielo)) !important; }
.precio__valor{ font-size:2rem; font-weight:800; color:var(--marino); margin:.2rem 0; }
.precio__nota{ color:var(--tinta-suave); font-size:.92rem; margin:0; }

/* Ubicacion */
.ubicacion__rejilla{ display:grid; grid-template-columns:1fr 1.15fr; gap:1.5rem; }
.ficha{ background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:clamp(1.5rem,3vw,2.2rem); box-shadow:var(--sombra); }
.datos{ list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:1.1rem; }
.datos strong{ display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-suave); }
.datos p{ margin:.15rem 0 0; font-size:1.05rem; font-weight:500; }
.datos a:hover{ color:var(--marino); }
.horario{ border-collapse:collapse; margin-block-start:.35rem; font-size:.98rem; }
.horario td{ padding:.18rem 0; }
.horario td:first-child{ color:var(--tinta-suave); padding-inline-end:1.4rem; white-space:nowrap; }
.horario td:last-child{ font-weight:600; }
.horario tr.hoy td{ color:var(--ambar-osc); font-weight:700; }
.ficha__botones{ display:flex; flex-wrap:wrap; gap:.7rem; }
.mapa{ border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); min-block-size:380px; background:var(--hielo); }
.mapa iframe{ inline-size:100%; block-size:100%; min-block-size:380px; border:0; display:block; }

/* Imprimir / QR */
.imprimir{ display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center; }
.imprimir p{ color:var(--tinta-suave); }
.qr{ margin:0; justify-self:center; text-align:center; background:#fff; border:1px solid var(--hielo-borde); border-radius:var(--radio); padding:1.5rem; box-shadow:var(--sombra); }
.qr img{ inline-size:260px; block-size:260px; margin:0 auto .6rem; }
.qr figcaption{ font-weight:700; color:var(--marino); direction:ltr; }

.pie{ background:var(--marino-osc); color:rgba(255,255,255,.75); padding-block:2rem; }
.pie__fila{ display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between; align-items:center; }
.pie p{ margin:0; }
.pie strong{ color:#fff; }
.pie__credito{ font-size:.85rem; opacity:.75; }

.revelar{ opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1); }
.revelar.visible{ opacity:1; transform:none; }

@media (max-width:1000px){ .tarjetas{ grid-template-columns:repeat(2,1fr); } .nav{ display:none; } }
@media (max-width:860px){
  body{ font-size:16px; }
  .portada__rejilla,.compromiso__rejilla,.pasos,.info,.ubicacion__rejilla,.imprimir{ grid-template-columns:1fr; }
  .portada__foto{ order:-1; }
  .cabecera__acciones .boton--sm span{ display:none; }
  .cabecera__acciones .boton--sm{ padding:.62rem .8rem; }
  .marca__texto small{ display:none; }
  .mapa{ min-block-size:300px; }
}
@media (max-width:560px){ .tarjetas{ grid-template-columns:1fr; } .portada__botones .boton{ inline-size:100%; } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } .revelar{ opacity:1; transform:none; } }