/* ============================================================
   Farmacia Marc Ribas — one page
   Tokens y estilos basados en el sistema de diseño (Figma)
   ------------------------------------------------------------
   Breakpoints: Desktop (>768) · Tablet (≤768) · Mobile (≤430)
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --blue: #325AB8;           /* azul primario (cobalto) */
  --blue-dark: #223E7C;      /* azul oscuro */
  --ink: #0b1428;            /* footer / azul muy oscuro */
  --text: #2e3138;           /* texto primario */
  --text-secondary: #545864; /* texto secundario */
  --white: #ffffff;
  --border: #cfd3da;         /* borde default */
  --border-strong: #b3b8c2;  /* borde fuerte */
  --border-subtle: #e4e6ea;  /* borde sutil */

  /* ---------- Tipografía (familias) ---------- */
  --font-title: "Bespoke Sans", "Satoshi", system-ui, sans-serif;
  --font-body: "Satoshi", system-ui, -apple-system, sans-serif;

  /* ---------- Curvas de easing ---------- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);          /* suave, decelera al final */
  --ease-accordion: cubic-bezier(.55, .085, .68, .53); /* no lineal: acelera hacia el final */

  /* ---------- Escala tipográfica editorial (valores desktop; responsive abajo) ----------
     heading = font-title / bold · paragraph = font-body */
  --fs-h1: 64px; --lh-h1: 72px;
  --fs-h2: 34px; --lh-h2: 42px;
  --fs-h3: 24px; --lh-h3: 30px;
  --fs-h4: 20px; --lh-h4: 26px;
  --fs-lg:   20px; --lh-lg:   32px;
  --fs-base: 18px; --lh-base: 28px;
  --fs-sm:   16px; --lh-sm:   24px;

  /* ---------- Radios (valor de diseño = fallback) ---------- */
  --radius-2xl: 16px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --radius-smooth-factor: 2; /* compensación óptica al usar squircle */

  /* ---------- Layout ---------- */
  --container-max: 1400px;
  --container-pad: 96px;
  --section-gap: 96px;

  /* ---------- Escala de espaciado ---------- */
  /* Primitivas fijas (px) */
  --size-0: 0;    --size-2: 2px;   --size-4: 4px;   --size-6: 6px;
  --size-8: 8px;  --size-12: 12px; --size-16: 16px; --size-20: 20px;
  --size-24: 24px;--size-28: 28px; --size-32: 32px; --size-36: 36px;
  --size-48: 48px;--size-64: 64px; --size-96: 96px; --size-128: 128px;

  /* Tokens de espaciado RESPONSIVE (valores desktop; se ajustan por breakpoint) */
  --space-24: var(--size-24);
  --space-32: var(--size-32);
  --space-48: var(--size-48);
  --space-96: var(--size-96);

  /* Consumibles STACK (separaciones verticales). 3xs–md fijos; lg/xl/2xl responsive */
  --stack-gap-3xs: var(--size-2);
  --stack-gap-2xs: var(--size-4);
  --stack-gap-xs:  var(--size-8);
  --stack-gap-sm:  var(--size-12);
  --stack-gap-md:  var(--size-16);
  --stack-gap-lg:  var(--space-24);
  --stack-gap-xl:  var(--space-32);
  --stack-gap-2xl: var(--space-48);

  /* Separación entre bloques: el total (= space-96) se reparte a partes iguales
     entre margin-top y padding-top (para el offset de los anchors). */
  --section-split: calc(var(--space-96) / 2);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: 500;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }

/* ============================================================
   ESTILOS DE TIPO (globales) — todo consume la escala responsive
   ============================================================ */
h1, .t-h1 { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-h1); margin: 0; }
h2, .t-h2 { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); margin: 0; }
h3, .t-h3 { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0; }
h4, .t-h4 { font-family: var(--font-title); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-h4); margin: 0; }

.t-lg          { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-lg);   line-height: var(--lh-lg); }
.t-lg-strong   { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-lg);   line-height: var(--lh-lg); }
.t-base        { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-base); line-height: var(--lh-base); }
.t-base-strong { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-base); line-height: var(--lh-base); }
.t-sm          { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm);   line-height: var(--lh-sm); }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.section { padding-block: 0; }
.section + .section { padding-top: var(--section-split); margin-top: var(--section-split); }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  top: 0;
  z-index: 50;
  background: var(--white);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 130px;
}

.logo { display: inline-flex; align-items: center; }
.logo img { display: block; height: 50px; width: auto; }

.nav { display: flex; align-items: center; gap: 24px; font-weight: 500; font-size: var(--fs-base); line-height: var(--lh-base); }
.nav a { color: var(--text); transition: color .15s ease; }
.nav a:hover { color: var(--blue); }
.nav__phone { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.nav__phone img { width: 24px; height: 24px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--blue);
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: 96px;
  color: var(--white);
}
.hero__waves {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  max-width: 502px;
  height: auto;
  pointer-events: none;
}
.hero__content { position: relative; max-width: 640px; }
.hero__title { text-transform: uppercase; margin-bottom: var(--stack-gap-sm); }
.hero__subtitle { margin-bottom: var(--stack-gap-xl); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 24px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 18px;
  transition: transform .12s ease, opacity .15s ease, color .15s ease;
  transform: translateY(0);
}
.btn:hover { transform: translateY(-1px); opacity: .95; }
.btn:active { transform: translateY(1px); }
.btn--white { background: var(--white); color: var(--blue); }
.btn--ghost { border: 1px solid rgba(255,255,255,1); color: var(--white); background: var(--blue); }

/* ============================================================
   FEATURE (sobre nosotros)
   ============================================================ */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.feature__text { display: flex; flex-direction: column; gap: var(--stack-gap-xl); padding-block: 64px; }
.feature__text p { color: var(--text-secondary); }
.feature__text p strong { color: var(--text-secondary); }
.feature__media {
  align-self: stretch;
  min-height: 420px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #eef2fb;
}
.feature__media picture { display: block; width: 100%; height: 100%; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.feature--reverse .feature__media { order: -1; }

/* ============================================================
   HORARIO Y GUARDIAS
   ============================================================ */
.schedule { display: flex; flex-direction: column; gap: var(--stack-gap-xl); }
.card { border-radius: var(--radius-2xl); }
.card--outline {
  border: 1px solid var(--border-strong);
  padding: 96px 64px;
  text-align: center;
}
.schedule__general { display: flex; flex-direction: column; align-items: center; gap: var(--stack-gap-lg); }
.schedule__grid { display: flex; gap: 48px; flex-wrap: wrap; justify-content: center; }
.schedule__item { display: flex; flex-direction: column; align-items: center; gap: var(--stack-gap-xs); }
.schedule__label { color: var(--text); }
.schedule__hours { color: var(--blue); text-transform: uppercase; font-family: var(--font-body); font-weight: 900;}
.schedule__note { color: var(--text-secondary); }

/* Guardias (bloque azul) */
.card--blue {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  color: var(--white);
  padding: 96px 64px;
  text-align: center;
}
.card--blue h2 { color: var(--white); }
.guardias { display: flex; flex-direction: column; align-items: center; gap: var(--stack-gap-xl); }
.guardias__head { display: flex; flex-direction: column; gap: var(--stack-gap-xs); }
.guardias__dates { display: flex; gap: 12px; justify-content: center; position: relative; z-index: 1; width: 100%; }

/* Date-chip: componente CUSTOM (no usa la escala editorial) */
.date-chip {
  background: var(--white);
  color: var(--blue);
  border-radius: var(--radius-xl);
  padding: 32px 8px 26px;
  width: 100%;
  min-width: 66px;
  max-width: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.date-chip__day { font-family: var(--font-body); font-weight: 900; font-size: 24px; line-height: 20px; }
.date-chip__month { font-weight: 500; font-size: 20px; line-height: 26px; }

/* Ondas decorativas del bloque guardias */
.guardias__waves {
  position: absolute;
  width: 240px; height: auto;
  pointer-events: none;
}
.guardias__waves--tl { top: 0; left: 0; transform: rotate(180deg); }
.guardias__waves--br { bottom: 0; right: 0; }

/* ============================================================
   SERVICIOS (acordeón)
   ============================================================ */
.services {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 48px;
  align-items: start;
}
.services__intro { position: sticky; top: 28px; display: flex; flex-direction: column; gap: var(--stack-gap-xl); }
.services__intro p { color: var(--text-secondary); }
.services__list { display: flex; flex-direction: column; gap: var(--stack-gap-sm); }

.accordion__item {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color .15s ease;
}
.is-open.accordion__item { border-color: var(--border); }

.accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 32px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  /* Cerrado: el padding no revierte hasta que el panel termina de colapsar (.4s),
     así el contenido no se mueve durante el cierre. */
  transition: padding-bottom .3s var(--ease-out) .4s;
}
.is-open .accordion__header {
  padding-bottom: 24px;
  /* Abierto: el padding cambia junto con el panel, sin retardo. */
  transition: padding-bottom .4s var(--ease-out) 0s;
}
.accordion__title { flex: 1; }
/* Icono +/− con dos barras (para poder animar el giro).
   Al abrir: el icono gira y la barra vertical se colapsa -> queda el signo −. */
.accordion__icon {
  position: relative;
  width: 32px; height: 32px; flex-shrink: 0;
  transition: transform .45s var(--ease-out);
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 2.6px;
  background: var(--blue);
  border-radius: 2px;
  transition: transform .45s var(--ease-out), opacity .3s ease;
}
.accordion__icon::before { transform: translate(-50%, -50%); }               /* barra horizontal */
.accordion__icon::after  { transform: translate(-50%, -50%) rotate(90deg); }  /* barra vertical  */

.is-open .accordion__icon { transform: rotate(180deg); }
.is-open .accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); opacity: 0; }

.accordion__panel {
  max-height: 0;
  overflow: hidden;
  /* Curva no lineal: acelera un poco más hacia el final al abrirse */
  transition: max-height .4s var(--ease-accordion);
}
.accordion__panel p { padding: 0 32px 32px; color: var(--text); }

.accordion__panel p.t-base-inside{
  padding-bottom: 16px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  margin-top: var(--section-gap);
}
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-2xl);
  padding-block: 96px;
  position: relative;
  z-index: 1;
}
.footer__text { display: flex; flex-direction: column; gap: var(--stack-gap-md); }
.footer__copy { color: #c2c7d0; }
.footer__copy a { color: inherit; transition: color .15s ease; }
.footer__copy a:hover { color: var(--white); }
.footer__note { color: #6b7280; }
.footer__waves {
  position: absolute;
  top: 0; right: 0;
  height: 100%; width: auto;
  pointer-events: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- Tablet: layout intermedio (2 col -> 1 col) ---- */
@media (max-width: 1024px) {
  :root { --container-pad: 48px; --section-gap: 72px; }
  .services { grid-template-columns: 1fr; }
  .services__intro { position: static; }
}

/* ---- Tablet ≤768: tokens (espaciado + tipografía) y layout móvil ---- */
@media (max-width: 768px) {
  :root {
    --container-pad: 24px;
    --section-gap: 56px;

    /* Espaciado */
    --space-24: var(--size-20);
    --space-32: var(--size-28);
    --space-48: var(--size-36);
    --space-96: var(--size-64);

    /* Tipografía (solo cambian h1 y párrafos según la escala) */
    --fs-h1: 48px; --lh-h1: 56px;
    --fs-lg: 18px; --lh-lg: 28px;
    --lh-base: 26px;
  }
  
  .no_mobile{
      display: none;
  }

  /* Top bar: sin menú, solo logo (izq) + teléfono (der) */
  .nav a:not(.nav__phone) { display: none; }  /* los enlaces ya están en el hero */
  .logo img { height: 40px; }                 /* logo un poco más pequeño */

  /* Hero */
  .hero { padding: 48px 28px; min-height: 460px; }
  .hero__waves { width: 55%; opacity: .2; }
  .btn, .hero__actions { width: 100%; }

  /* Feature: imagen arriba y a media altura */
  .feature { grid-template-columns: 1fr; gap: 24px; }
  .feature__text { padding-block: 0; }
  .feature__media { order: -1; }
  .feature__media, .feature__media img { min-height: 140px; max-height: 280px; }

  /* Horario / servicios */
  .card--outline, .card--blue { padding: 38px 24px; }
  .schedule__grid { gap: 28px; }
  .accordion__header { padding: 24px; }
  .accordion__panel p { padding: 0 24px 24px; }
  .guardias__waves { opacity: .3; }
  .services { gap: var(--space-48) }

  /* Guardias: máx. 6 por fila. Con menos de 6 estiran a todo el ancho;
     con 12 quedan en 2 filas de 6. */
  .guardias__dates { display: flex; flex-wrap: wrap; gap: 8px; }
  .date-chip { flex: 1 1 calc(100% / 6 - 8px); min-width: 0; max-width: none; }

  /* Footer */
  .footer__inner { padding-block: 64px; }
  .footer__waves { width: 340px; height: 340px; right: -80px; }
}

/* ---- Mobile ≤430: tokens (espaciado + tipografía) y ajustes finos ---- */
@media (max-width: 430px) {
  :root {
    /* Espaciado */
    --space-24: var(--size-12);
    --space-32: var(--size-16);
    --space-48: var(--size-24);
    --space-96: var(--size-48);

    /* Tipografía */
    --fs-h1: 36px; --lh-h1: 44px;
    --fs-h2: 24px; --lh-h2: 32px;
    --fs-h3: 22px; --lh-h3: 28px;
    --fs-h4: 20px; --lh-h4: 24px;
    --fs-lg: 18px; --lh-lg: 28px;
    --fs-base: 16px; --lh-base: 26px;
    --fs-sm: 14px; --lh-sm: 22px;
  }

  /* Date-chip (custom) */
  .date-chip { min-width: 0; padding: 21px 6px 16px; }
  .date-chip__day { font-size: 18px; line-height: 12px; }
  .date-chip__month { font-size: 18px; }

  /* Accordion */
  .is-open .accordion__header { padding-bottom: 16px; }

  .btn{ padding: 14px 24px; }

  /* Horario y guardias: todo alineado a la izquierda */
  .card--outline, .card--blue { text-align: left; }
  .schedule__general, .schedule__item, .guardias { align-items: flex-start; }
  .schedule__grid, .guardias__dates { justify-content: flex-start; }

  .guardias__dates{ gap: 8px; }

  .topbar__inner{
    height: 110px;
  }

  .hero {
    padding: 38px 28px;
    min-height: 430px;
  }

  .hero__subtitle {
    margin-bottom: 24px;
  }

  .footer__waves {
    opacity: .1;
  }

  .schedule__grid {
    gap: 16px;
  }

  .accordion__header {
    padding: 16px;
  }

  .accordion__panel p {
    padding: 0 16px 24px;
  }

}

/* ============================================================
   SQUIRCLE — bordes suaves cuando el navegador lo soporta
   ------------------------------------------------------------
   · Fallback (sin soporte): border-radius normal (valor de Figma).
   · Con soporte: se compensa el radio (× --radius-smooth-factor)
     y se aplica corner-shape: squircle.
   Va al final para prevalecer sobre reglas base con igual
   especificidad (p. ej. .card).
   ============================================================ */
@supports (corner-shape: squircle) {
  .hero,
  .card {
    border-radius: calc(var(--radius-2xl) * var(--radius-smooth-factor));
    corner-shape: squircle;
  }
  .feature__media,
  .date-chip,
  .accordion__item {
    border-radius: calc(var(--radius-xl) * var(--radius-smooth-factor));
    corner-shape: squircle;
  }
}

/* ============================================================
   ANIMACIONES DE ENTRADA (solo al cargar la página)
   ------------------------------------------------------------
   Sutiles y modernas: NADA aparece al hacer scroll; todo el
   contenido entra a la vez al cargar, con un leve fundido +
   desplazamiento. Se desactivan si el usuario prefiere menos
   movimiento (accesibilidad).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Top bar: baja suavemente */
  .topbar { animation: nav-down .7s .05s var(--ease-out) both; }

  /* Hero: el bloque entero entra con fundido + subida */
  .hero { animation: rise-block 1s .08s var(--ease-out) both; }

  /* Toque muy ligero y escalonado en los textos y el botón.
     (Las ondas del hero no llevan animación: se ven desde el inicio.) */
  .hero__title,
  .hero__subtitle,
  .hero__actions { animation: fade-soft .65s var(--ease-out) both; }
  .hero__title    { animation-delay: .26s; }
  .hero__subtitle { animation-delay: .34s; }
  .hero__actions  { animation-delay: .42s; }

  /* Resto del contenido: entra un pelín después del hero (casi imperceptible) */
  main > .section:not(:first-child),
  .footer { animation: fade-up 1s .25s var(--ease-out) both; }
}

@keyframes nav-down   { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes rise-block { from { opacity: 0; transform: translateY(30px); }  to { opacity: 1; transform: none; } }
@keyframes fade-soft  { from { opacity: 0; }                               to { opacity: 1; } }
@keyframes fade-up    { from { opacity: 0; transform: translateY(14px); }  to { opacity: 1; transform: none; } }