/* ===== CURET Links — clon de Linktree (linktr.ee/curet_rd) ===== */
/* Todos los valores medidos directo del DOM real */

:root {
    --bg: #544e42;             /* fondo página (srgb 0.330,0.306,0.258) */
    --hero-bg: #3d3628;        /* contenedor del hero */
    --gold: #ffc200;           /* título, tagline, secciones */
    --btn-bg: #ffffff;
    --btn-text: #272727;       /* rgb(39,39,39) */
    --dots: rgba(39, 39, 39, .5);
    --radius: 28px;
    --col: 580px;
    --side: 28px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 100dvh;
    background: var(--bg);
    color: #fff;
    display: flex;
    justify-content: center;
    padding: 0 0 64px;
    -webkit-font-smoothing: antialiased;
}

.page {
    width: 100%;
    max-width: var(--col);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===================== HERO ===================== */
.hero {
    width: 100%;
    transform-origin: top center;
}

.hero__media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    background: var(--hero-bg);
    animation: entranceOver .6s cubic-bezier(.22, .61, .36, 1) both;
}

/* degradado inferior: el hero se funde con el fondo (no corte recto) */
.hero__media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;                 /* tapa cualquier costura de 1px de la capa GPU */
    height: 56%;
    background: linear-gradient(
        to bottom,
        rgba(84, 78, 66, 0) 0%,
        rgba(84, 78, 66, .45) 42%,
        var(--bg) 78%             /* fondo sólido temprano = franja gruesa que oculta la costura */
    );
    pointer-events: none;
    z-index: 1;
}

.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: center;
}

/* chrome overlay — píldoras glass (backdrop-filter blur 16 brightness .72) */
.chip {
    height: 40px;
    border: none;
    border-radius: 16px;
    background: transparent;
    color: #fff;
    backdrop-filter: blur(16px) brightness(.72);
    -webkit-backdrop-filter: blur(16px) brightness(.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
}

.chip--logo { position: absolute; top: 16px; left: 16px; width: 40px; }

.chip-group { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; }

.chip--text { padding: 0 16px; font-size: 14px; font-weight: 500; }

.chip--icon { width: 40px; }

/* ===================== IDENTIDAD ===================== */
.title {
    margin-top: -14px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    text-align: center;
}

.title__logo { height: 38px; width: auto; display: block; }

.flag { font-size: 20px; line-height: 1; }

.tagline {
    margin: 8px auto 0;
    max-width: 32ch;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--gold);
    text-align: center;
    padding: 0 var(--side);
}

/* ===================== LINKS ===================== */
.links {
    width: 100%;
    margin-top: 26px;
    padding: 0 var(--side);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.section {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    color: var(--gold);
}

/* sombra sutil multicapa idéntica al original */
.fcard, .scard, .tbtn {
    box-shadow:
        0 .3px .5px rgba(17, 17, 17, .04),
        0 1.5px 3px rgba(17, 17, 17, .05),
        0 4px 9px rgba(17, 17, 17, .04);
}

.fcard, .scard, .tbtn {
    position: relative;
    background: var(--btn-bg);
    border-radius: var(--radius);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
}

/* overlay de hover/press (negro instantáneo, como el original) */
.fcard::after, .scard::after, .tbtn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    transition: background .12s ease;
    z-index: 2;
}
@media (hover: hover) {
    .fcard:hover::after, .scard:hover::after, .tbtn:hover::after { background: rgba(0, 0, 0, .05); }
}
.fcard:active::after, .scard:active::after, .tbtn:active::after { background: rgba(0, 0, 0, .12); }

/* --- Featured image card (Catálogo, Servicio) --- */
.fcard { display: block; }
.fcard__img { width: 100%; height: auto; display: block; }

/* --- Square card grid (Tiendas) --- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.scard { display: block; }
.scard__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

/* --- Caption row (image cards) --- */
.cap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 14px 44px 14px 18px;
}
.cap--left { justify-content: flex-start; padding: 14px 40px 14px 16px; }
.cap__text {
    font-size: 16px;
    font-weight: 400;
    color: var(--btn-text);
    line-height: 1.25;
}
.scard .cap__text { font-size: 15px; }

/* --- Thumbnail button (Cambios, Vacante) --- */
.tbtn {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 8px;
}
.tbtn__thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 16px;
    object-fit: cover;
}
.tbtn__text {
    position: absolute;
    left: 64px;
    right: 56px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: var(--btn-text);
    line-height: 1.2;
}

/* --- Menú ⋮ (3 puntos) --- */
.dots {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px;
    z-index: 3;
}
.cap .dots { right: 12px; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--dots); display: block; }

/* ===================== REDES ===================== */
.socials { margin-top: 30px; display: flex; gap: 16px; justify-content: center; }
.social { color: var(--gold); display: inline-flex; transition: transform .18s ease; }
.social svg { width: 32px; height: 32px; }
.social:hover { transform: translateY(-2px); }

/* ===================== FOOTER ===================== */
.footer { margin-top: 34px; text-align: center; }
.footer a {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, .5);
    text-decoration: none;
    transition: color .18s ease;
}
.footer a:hover { color: var(--gold); }

/* ===================== ANIMACIONES ===================== */
/* entrada del hero: overscale (scale 1.04 -> 1 + fade) */
@keyframes entranceOver {
    0%   { opacity: 0; transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}
/* entrada de elementos: rise (translateY 6 -> 0 + fade) */
@keyframes rise {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise .55s cubic-bezier(.22, .61, .36, 1) both; animation-delay: var(--d, 0s); }

@media (prefers-reduced-motion: reduce) {
    .hero__media, .rise { animation: none; }
    .rise { opacity: 1; transform: none; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 480px) {
    :root { --side: 16px; }
    .grid2 { gap: 12px; }
    .scard .cap__text { font-size: 14px; }
}