:root {
    --tinta: #12364b;
    --azul: #134e6f;
    --menta: #d9f4e9;
    --menta-viva: #72d2af;
    --niebla: #f2f8f6;
    --coral: #f07e65;
    --blanco: #fffefa;
    --muted: #5e727d;
    --linea: #c9ddd8;
    --display: "DM Serif Display", Georgia, serif;
    --sans: "Manrope", Arial, sans-serif;
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-move: cubic-bezier(.77, 0, .175, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--blanco); color: var(--tinta); font: 400 16px/1.6 var(--sans); }
body.menu-abierto { overflow: hidden; }
a { color: inherit; }
button { font: inherit; }
.saltar { position: fixed; top: .6rem; left: .75rem; z-index: 30; padding: .7rem 1rem; background: var(--tinta); color: #fff; transform: translateY(-160%); transition: transform 160ms var(--ease-out); }
.saltar:focus { transform: translateY(0); }

.barra { min-height: 5.4rem; max-width: 78rem; margin: auto; padding: .85rem clamp(1.25rem, 4vw, 3rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; z-index: 10; }
.marca { display: inline-flex; align-items: center; gap: .6rem; color: var(--tinta); font-size: .72rem; font-weight: 600; line-height: .85; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.marca b { font-size: 1.16rem; letter-spacing: .04em; }
.marca__cruz { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; background: var(--azul); color: var(--menta); border-radius: 50%; }
.marca__cruz svg { width: 1.4rem; height: 1.4rem; }
.barra nav { display: flex; align-items: center; gap: 2rem; font-size: .82rem; font-weight: 700; }
.barra nav a { color: #385766; text-decoration: none; transition: color 160ms var(--ease-out); }
.barra nav a:hover { color: var(--coral); }
.barra__cta { display: inline-flex; align-items: center; gap: .4rem; padding: .7rem 1rem; background: var(--menta); border-radius: 999px; color: var(--tinta); font-size: .78rem; font-weight: 800; text-decoration: none; transition: transform 160ms var(--ease-out), background 160ms var(--ease-out); }
.barra__cta svg, .boton svg { width: 1.15rem; height: 1.15rem; }
.barra__cta:hover { background: var(--menta-viva); }
.barra__cta:active, .boton:active { transform: scale(.97); }
.menu { display: none; }

.hero { min-height: 38rem; max-width: 78rem; margin: auto; padding: clamp(4.2rem, 9vw, 7.5rem) clamp(1.25rem, 4vw, 3rem) 5.2rem; display: grid; grid-template-columns: minmax(0, .96fr) minmax(22rem, .84fr); gap: clamp(2.5rem, 8vw, 7rem); align-items: center; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 34rem; height: 34rem; right: -16rem; top: -9rem; border: 1px solid var(--linea); border-radius: 50%; box-shadow: 0 0 0 3.5rem var(--niebla), 0 0 0 3.55rem var(--linea); z-index: -1; }
.eyebrow { margin: 0 0 1.25rem; color: var(--azul); font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; display: flex; align-items: center; gap: .6rem; }
.eyebrow span { width: 1.6rem; height: 2px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.04em; line-height: .96; }
h1 { max-width: 40rem; margin-bottom: 1.5rem; font-size: clamp(3.6rem, 7vw, 6.8rem); }
h1 em { color: var(--azul); font-style: italic; }
.hero__bajada { max-width: 30rem; color: var(--muted); font-size: 1.05rem; }
.hero__acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 1.1rem; margin-top: 2rem; }
.boton { display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .82rem 1.18rem; border-radius: .7rem; font-size: .82rem; font-weight: 800; text-decoration: none; transition: transform 160ms var(--ease-out), background 160ms var(--ease-out), color 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.boton--principal { background: var(--coral); box-shadow: 0 12px 24px rgba(240, 126, 101, .24); color: #fff; }
.boton--principal:hover { background: #dc654e; box-shadow: 0 16px 28px rgba(240, 126, 101, .32); }
.boton--enlace { min-height: auto; padding: .7rem 0; border-radius: 0; color: var(--azul); text-decoration: underline; text-decoration-color: var(--menta-viva); text-underline-offset: .45rem; }
.hero__nota { grid-column: 1 / -1; margin: 0; border-top: 1px solid var(--linea); padding-top: 1.1rem; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.dispensario { min-height: 25rem; position: relative; padding: 1rem; background: var(--azul); border: .8rem solid var(--blanco); box-shadow: 0 0 0 1px var(--linea), 1.2rem 1.2rem 0 var(--menta); color: var(--blanco); overflow: hidden; }
.dispensario__rayo { position: absolute; width: 24rem; height: 24rem; top: -14rem; right: -6rem; border: 1px solid rgba(217,244,233,.3); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(217,244,233,.04), 0 0 0 6rem rgba(217,244,233,.03); }
.dispensario__cabecera { height: 3.8rem; padding: 0 .5rem .65rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.3); font-size: .67rem; font-weight: 800; letter-spacing: .16em; }
.dispensario__cabecera i { display: grid; place-items: center; width: 2rem; height: 2rem; background: var(--menta-viva); color: var(--azul); border-radius: 50%; }
.dispensario__cabecera svg { width: 1.25rem; }
.dispensario__repisa { height: 8.2rem; display: flex; align-items: end; gap: 1.25rem; padding: 1rem 1.3rem .25rem; border-bottom: .45rem solid var(--menta-viva); position: relative; }
.dispensario__repisa--dos { padding-left: 4rem; }
.frasco { display: block; width: 3.2rem; height: 5.4rem; background: var(--blanco); border-radius: .5rem .5rem .3rem .3rem; position: relative; box-shadow: inset 0 -.8rem 0 rgba(114,210,175,.35); }
.frasco::before { content: ""; width: 1.9rem; height: .6rem; position: absolute; top: -.55rem; left: .65rem; background: var(--coral); border-radius: .15rem .15rem 0 0; }
.frasco--alto { height: 6.2rem; width: 2.65rem; }.frasco--alto::before { left: .4rem; }
.frasco--bajo { height: 3.7rem; }.frasco--ancho { height: 4.5rem; width: 4.5rem; }.frasco--ancho::before { left: 1.3rem; }
.frasco--menta { background: var(--menta); box-shadow: inset 0 -.8rem 0 rgba(255,255,255,.18); }.frasco--coral { background: var(--coral); box-shadow: inset 0 -.8rem 0 rgba(255,255,255,.18); }
.dispensario__etiqueta { position: absolute; right: 1.3rem; bottom: 1.25rem; color: var(--menta); font-family: var(--display); font-size: 1.55rem; font-style: italic; line-height: .9; text-align: right; }
.dispensario__cruz { position: absolute; right: 1rem; top: 4.9rem; color: rgba(217,244,233,.13); transform: rotate(12deg); }
.dispensario__cruz svg { width: 7rem; height: 7rem; stroke-width: .6; }

.bienvenida { max-width: 53rem; margin: 0 auto; padding: 6rem 1.5rem 7rem; text-align: center; }.bienvenida .eyebrow { justify-content: center; }.bienvenida h2, .seccion-cabecera h2, .pagos h2, .visita h2 { margin-bottom: 1.15rem; font-size: clamp(2.5rem, 5vw, 4.45rem); }.bienvenida > p:last-child { max-width: 39rem; margin: auto; color: var(--muted); }

.categorias { padding: 6.5rem max(1.25rem, calc((100vw - 72rem) / 2)); background: var(--niebla); }.seccion-cabecera { max-width: 39rem; margin-bottom: 2.8rem; }.seccion-cabecera > p:last-child { color: var(--muted); }
.categoria-lista { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }.categoria { min-height: 13.5rem; padding: 1.5rem; background: rgba(255,255,255,.32); border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); position: relative; transition: transform 220ms var(--ease-out), background 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }.categoria__icono { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: 2.6rem; background: var(--menta); border-radius: 50%; color: var(--azul); }.categoria h3 { margin-bottom: .3rem; font-size: .93rem; }.categoria p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }.categoria__linea { position: absolute; bottom: 0; left: 0; width: 0; height: .23rem; background: var(--coral); transition: width 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .categoria:hover { z-index: 1; background: var(--blanco); box-shadow: 0 .8rem 1.8rem rgba(18,54,75,.1); transform: translateY(-.32rem); }.categoria:hover .categoria__linea { width: 100%; } }
.aviso-receta { max-width: 44rem; margin: 2.6rem 0 0; display: flex; gap: .8rem; align-items: flex-start; color: var(--muted); font-size: .78rem; }.aviso-receta svg { flex: 0 0 auto; width: 1.5rem; color: var(--coral); }

.confianza { padding: 7rem max(1.25rem, calc((100vw - 72rem) / 2)); display: grid; grid-template-columns: .85fr 1.15fr; gap: 6rem; background: var(--azul); color: var(--blanco); }.eyebrow--claro { color: var(--menta-viva); }.confianza h2, .cierre h2 { margin-bottom: 1.2rem; font-size: clamp(2.8rem, 5.1vw, 4.8rem); }.confianza__titular > p:last-child { max-width: 28rem; color: rgba(255,255,255,.72); }.promesas { border-top: 1px solid rgba(255,255,255,.28); }.promesa { padding: 1.5rem 0 1.45rem; display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 1rem; border-bottom: 1px solid rgba(255,255,255,.28); }.promesa > span { grid-row: span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--menta-viva); border: 1px solid rgba(114,210,175,.6); border-radius: 50%; }.promesa span svg { width: 1.35rem; }.promesa h3 { margin: .1rem 0 .28rem; font-size: .92rem; }.promesa p { margin: 0; color: rgba(255,255,255,.68); font-size: .78rem; }

.pagos { max-width: 72rem; margin: auto; padding: 6rem 1.5rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }.pagos h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.8rem); }.pagos ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: end; gap: .6rem; list-style: none; }.pagos li { padding: .72rem 1rem; border: 1px solid var(--linea); border-radius: 99px; font-size: .8rem; font-weight: 800; }

.visita { max-width: 72rem; margin: auto; padding: 2rem 1.5rem 7rem; display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: clamp(3rem, 9vw, 8rem); }.mapa { min-height: 22rem; position: relative; overflow: hidden; background: var(--menta); border: 1px solid var(--linea); }.mapa::before { content: ""; position: absolute; inset: 1.4rem; border: 1px dashed rgba(19,78,111,.32); }.mapa__calle { position: absolute; z-index: 1; background: var(--blanco); box-shadow: 0 0 0 1px rgba(19,78,111,.05); }.mapa__calle--uno { width: 120%; height: 3.1rem; top: 41%; left: -10%; transform: rotate(-20deg); }.mapa__calle--dos { width: 3rem; height: 120%; top: -10%; left: 45%; transform: rotate(22deg); }.mapa__calle--tres { width: 120%; height: 1.7rem; top: 74%; left: -10%; transform: rotate(15deg); }.mapa__pin { width: 2.9rem; height: 2.9rem; position: absolute; z-index: 2; left: 48%; top: 41%; background: var(--coral); border: .55rem solid var(--blanco); border-radius: 50% 50% 50% 0; box-shadow: 0 .55rem 0 rgba(18,54,75,.18); transform: rotate(-45deg); }.mapa b { position: absolute; z-index: 3; top: 58%; left: 48%; color: var(--azul); font-size: .7rem; line-height: 1.1; letter-spacing: .08em; }.mapa small { position: absolute; z-index: 3; left: 1.7rem; bottom: 1.5rem; color: var(--muted); font-size: .65rem; }.visita h2 { margin-top: 0; }.dato { display: flex; align-items: flex-start; gap: .8rem; margin: 1.2rem 0; }.dato > span { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; flex: 0 0 auto; color: var(--coral); border: 1px solid var(--linea); border-radius: 50%; }.dato svg { width: 1.25rem; }.dato p { margin: 0; color: var(--muted); font-size: .88rem; }.dato b { color: var(--tinta); }.visita__aclaracion { margin-top: 1.7rem; color: var(--muted); font-size: .7rem; }

.cierre { padding: 7rem 1.5rem; background: var(--coral); color: var(--blanco); text-align: center; }.cierre .eyebrow { justify-content: center; color: var(--blanco); }.cierre h2 { margin-top: 0; }.cierre > p:not(.eyebrow) { max-width: 37rem; margin: 0 auto 2rem; color: rgba(255,255,255,.8); }.boton--claro { background: var(--blanco); color: var(--azul); }.boton--claro:hover { background: var(--menta); }
footer { min-height: 7.5rem; max-width: 78rem; margin: auto; padding: 1.5rem clamp(1.25rem, 4vw, 3rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }footer p { margin: 0; color: var(--muted); font-size: .7rem; }footer > a:last-child { color: var(--azul); font-size: .75rem; font-weight: 800; text-decoration: none; }

.js .hero-entrada, .js .revelar, .js .categoria, .js .promesa { opacity: 0; transform: translateY(1rem); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); transition-delay: var(--rvl-d, 0ms); }.js .en { opacity: 1 !important; transform: translateY(0) !important; }.js.anim-fallback .hero-entrada, .js.anim-fallback .revelar, .js.anim-fallback .categoria, .js.anim-fallback .promesa { opacity: 1; transform: none; }

@media (min-width: 700px) and (prefers-reduced-motion: no-preference) { .js .dispensario__cruz { animation: cruz-entra 620ms var(--ease-move) both; } @keyframes cruz-entra { from { opacity: .25; transform: translateY(-.7rem) rotate(12deg); } to { opacity: 1; transform: translateY(0) rotate(12deg); } } }
@media (max-width: 760px) { .barra { min-height: 4.7rem; }.barra__cta { display: none; }.menu { width: 2.75rem; height: 2.75rem; display: grid; align-content: center; justify-items: center; gap: .35rem; padding: 0; border: 1px solid var(--linea); border-radius: 50%; background: var(--blanco); cursor: pointer; }.menu span { width: 1.1rem; height: 2px; background: var(--tinta); transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out); }.menu[aria-expanded="true"] span:first-child { transform: translateY(.26rem) rotate(45deg); }.menu[aria-expanded="true"] span:last-child { transform: translateY(-.26rem) rotate(-45deg); }.barra nav { position: absolute; top: 4.4rem; left: 1rem; right: 1rem; display: grid; gap: 0; padding: .55rem; border: 1px solid var(--linea); background: var(--blanco); box-shadow: 0 .7rem 1.6rem rgba(18,54,75,.12); opacity: 0; pointer-events: none; transform: translateY(-.5rem); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }.barra nav.abierto { opacity: 1; pointer-events: auto; transform: translateY(0); }.barra nav a { padding: .9rem; }.hero { min-height: auto; grid-template-columns: 1fr; padding-top: 3.2rem; gap: 2.6rem; }.hero::before { width: 21rem; height: 21rem; right: -11rem; top: 27rem; }.hero__nota { grid-column: auto; }.dispensario { min-height: 22.5rem; max-width: 29rem; width: calc(100% - 1rem); justify-self: center; }.bienvenida { padding: 4.6rem 1.35rem; }.categorias, .confianza { padding-top: 4.8rem; padding-bottom: 4.8rem; }.categoria-lista { grid-template-columns: repeat(2, 1fr); }.categoria { min-height: 12.3rem; padding: 1.2rem; }.categoria__icono { margin-bottom: 1.9rem; }.confianza, .visita { grid-template-columns: 1fr; gap: 3rem; }.pagos { display: grid; padding-top: 4.8rem; padding-bottom: 4.8rem; }.pagos ul { justify-content: start; }.mapa { min-height: 19rem; }.visita { padding-bottom: 5rem; }.cierre { padding: 5rem 1.25rem; }footer { align-items: flex-start; flex-direction: column; gap: .9rem; } }
@media (max-width: 390px) { h1 { font-size: 3.25rem; }.categoria-lista { grid-template-columns: 1fr; }.categoria { min-height: auto; }.dispensario__repisa { gap: .8rem; padding-left: .65rem; }.dispensario__repisa--dos { padding-left: 2rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }