/* =====================================================================
   Cutánea Medical Clinic — style.css
   Tabla de contenidos
   1. Tokens (:root)
   2. Reset y base
   3. Utilidades (skip-link, placeholders)
   5. Hero
   7. Movimiento y print
   ===================================================================== */

/* 1. Tokens ---------------------------------------------------------- */
:root {
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --navy: #183569;                                   /* logo + heading (Figma) */
  --slate: #7b8db0;                                  /* logo, tono secundario */
  --bg: #f4f4f5;
  --surface: #ffffff;
  --text-clear: var(--navy);
  --text-mid: oklch(from var(--navy) 0.45 0.06 h);
  --text-faint: var(--slate);
  --line: color-mix(in oklch, var(--navy) 14%, transparent);
  --line-strong: color-mix(in oklch, var(--navy) 32%, transparent);
  --whatsapp: #25d366;
  --whatsapp-deep: #1da851;

  --radius: 8px;
  --pad-x: clamp(20px, 5vw, 64px);
  --maxw: 1200px;
  --shadow: 0 10px 30px color-mix(in oklch, var(--navy) 18%, transparent);
}

/* 2. Reset y base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font-family: var(--font-sans);
  color: var(--text-clear);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
p { text-wrap: pretty; }
a { color: var(--text-clear); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { color: var(--text-mid); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* 3. Utilidades ------------------------------------------------------ */
.skip-link {
  position: absolute; top: 8px; left: 8px;
  padding: 10px 14px; background: var(--surface); border-radius: var(--radius);
  transform: translateY(-200%); transition: transform .2s;
  z-index: 10;
}
.skip-link:focus { transform: none; }

.ph {
  background:
    linear-gradient(115deg, transparent 0 28%, #fff 36%, transparent 44%, transparent 56%, #fff 66%, transparent 74%),
    linear-gradient(115deg, #ececee 0%, #f8f8f9 30%, #e9e9eb 50%, #f7f7f8 72%, #ededef 100%);
  filter: blur(0px);
}

/* 5. Hero ------------------------------------------------------------ */
.hero {
  position: relative; flex: 1;
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: clamp(48px, 8vh, 96px) var(--pad-x);
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__content {
  width: min(100%, 720px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(20px, 3.5vh, 36px);
}
.hero__logo { width: min(60%, 150px); height: auto; }
.hero__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(40px, 6.2vw, 72px);
  line-height: 0.98; letter-spacing: -0.065em;
  color: var(--text-clear);
}

/* 7. Movimiento y print --------------------------------------------- */
body.anim-ready .hero__content > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
body.anim-ready .hero__content > :nth-child(2) { animation-delay: .1s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  body { background: #fff; color: #000; }
  .hero__bg, .skip-link { display: none !important; }
}