/* Rebeca Mayora - portfolio. Built from the Figma design (Desktop 1440 / Mobile 390). */
@font-face{font-family:"Montserrat";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/montserrat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Abril Fatface";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/abril-fatface-latin-400-normal.woff2) format("woff2")}

:root{
  --white:#fff;--black:#000;--ink:#1a0a00;
  --yellow-lime:#e6e178;--pink-hot:#ff6fa8;--gray-light:#e9e9e9;--mint:#b8e3ce;--peach:#fac3a8;
  --radius-md:16px;--radius-lg:24px;--radius-pill:999px;
  --pad-x:clamp(24px,8.333vw,120px);
  --grad-hero:linear-gradient(180deg,rgba(242,182,221,0) 0%,rgba(242,182,221,.95) 100%),linear-gradient(90deg,#f7a3a0 0%,#f8e3a0 45%,#f6e2a2 100%);
  --font-body:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Abril Fatface",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:26px;font-weight:400;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
p,h1,h2,h3{margin:0}
h1,h2,h3{font-weight:400}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 16px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
section[id]{scroll-margin-top:72px}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--grad-hero);overflow:hidden;min-height:880px;display:flex;flex-direction:column}
.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:24px var(--pad-x)}
.nav__brand{font-weight:600;text-decoration:none;white-space:nowrap}
.nav__links{display:flex;gap:32px;align-items:center}
.nav__links a{font-weight:500;line-height:24px;text-decoration:none}
.nav__links a:hover{text-decoration:underline;text-underline-offset:4px}
.nav__toggle{display:none;background:none;border:0;padding:0;width:24px;height:24px;cursor:pointer}
.nav__toggle img{width:24px;height:24px}
.hero__container{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x);gap:32px}
.hero__content{display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.hero__title{font-family:var(--font-display);font-size:clamp(80px,8.889vw,128px);line-height:.9375;letter-spacing:-.01em;color:var(--ink)}
.pill-role{display:inline-flex;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--ink);border-radius:var(--radius-pill);padding:16px 64px;font-weight:600;font-size:28px;line-height:32px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.social{display:flex;gap:16px}
.social a{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--radius-pill);transition:transform .2s}
.social a:hover{transform:translateY(-3px) rotate(-4deg)}
.social img{width:28px;height:28px}
.social .is-mail{background:var(--gray-light)}
.social .is-ig{background:var(--pink-hot)}
.social .is-tt{background:var(--yellow-lime)}
.hero__image{flex:none;background:var(--white);border:1px solid var(--ink);padding:16px;border-top-left-radius:210px;border-top-right-radius:210px}
.hero__photo{width:388px;height:528px;border-top-left-radius:194px;border-top-right-radius:194px;overflow:hidden}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:52% 20%}
.decor{position:absolute;pointer-events:none;z-index:1}
.decor img{width:100%;height:100%}
.hero .decor--yellow{width:300px;height:300px;left:calc(100% - 190px);top:-110px}
.hero .decor--black{width:300px;height:300px;left:-110px;bottom:-100px}

/* ---------- Marquee ---------- */
.marquee{background:var(--black);color:var(--white);height:64px;overflow:hidden;display:flex;align-items:center}
.marquee__track{display:flex;flex:none;animation:marquee 28s linear infinite}
.marquee__item{display:flex;align-items:center;gap:32px;padding:8px 16px;font-weight:500;font-size:32px;line-height:40px;text-transform:uppercase;white-space:nowrap;flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Section label ---------- */
.label{font-weight:500;font-size:40px;line-height:48px;text-transform:uppercase}

/* ---------- Portfolio ---------- */
.portfolio{background:linear-gradient(180deg,#fff,#f1dcf5);padding:96px 0}
.portfolio__container{padding:0 var(--pad-x);display:flex;flex-direction:column;gap:96px}
.group{display:flex;flex-direction:column;gap:64px}
.row{display:flex;gap:24px}
.card{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}
.card__media{position:relative;height:480px;border-radius:var(--radius-md);overflow:hidden;background:#222;display:flex;align-items:center;justify-content:center}
.card__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:none}
.card.is-playing .card__video{display:block}
.card.is-playing .card__poster,.card.is-playing .card__play{display:none}
.card__play{position:relative;z-index:1;width:64px;height:64px;border-radius:var(--radius-pill);background:var(--white);border:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.card__play:hover{transform:scale(1.08)}
.card__play img{width:24px;height:24px}
.tag{position:absolute;z-index:1;top:12px;right:12px;background:var(--white);border-radius:100px;padding:6px 12px;font-weight:600;font-size:12px;line-height:normal}
.card.is-playing .tag{display:none}
.card__title{font-weight:600}
.card__watch{align-self:flex-start;background:none;border:0;padding:0;font:inherit;font-weight:500;font-size:14px;line-height:20px;text-transform:uppercase;text-decoration:underline;text-underline-position:from-font;cursor:pointer;color:var(--ink)}

/* ---------- Pricing ---------- */
.pricing{padding:120px 0;background:var(--white)}
.pricing__container{padding:0 var(--pad-x);display:flex;flex-direction:column;gap:64px}
.pricing__cards{display:flex;gap:24px;align-items:stretch}
.plan{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:32px;align-items:flex-start;padding:48px;border:1px solid var(--ink);border-radius:var(--radius-lg)}
.plan--mint{background:var(--mint)}
.plan--peach{background:var(--peach)}
.plan__title{font-family:var(--font-display);font-size:48px;line-height:52px}
.plan__prices{width:100%;margin:0;padding:0;list-style:none;margin-top:auto}
.plan__prices li{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--ink)}
.plan__prices strong{font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--white);border-radius:var(--radius-pill);padding:16px 48px;font-weight:600;text-decoration:none;white-space:nowrap;transition:transform .2s,opacity .2s}
.btn:hover{transform:translateY(-2px);opacity:.88}

/* ---------- Divider ---------- */
.divider{height:96px;background:var(--white);display:flex;align-items:center;justify-content:space-between;padding:0 32px;overflow:hidden}
.divider .sparkle{width:40px;height:48px}
.divider .starburst{width:60px;height:60px}

/* ---------- About ---------- */
.about{display:flex;min-height:720px;background:var(--white)}
.about__media{position:relative;flex:1 1 0;min-width:0;background:var(--yellow-lime);display:flex;align-items:center;justify-content:center;overflow:hidden}
.about__img{width:340px;height:373px;position:relative;z-index:1;margin-top:27px}
.about__img img{width:100%;height:100%;object-fit:contain}
.about__glow{position:absolute;left:-10px;top:430px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,158,179,.8) 0%,rgba(255,199,150,0) 100%)}
.badge{position:absolute;left:60px;top:500px;width:200px;height:200px;z-index:2}
.badge svg{width:200px;height:200px;animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.about__content{position:relative;flex:1 1 0;min-width:0;border-left:1px solid var(--black);display:flex;flex-direction:column;overflow:hidden}
.about__title-area{padding:96px 96px 64px;border-bottom:1px solid var(--black)}
.about__title{font-family:var(--font-display);font-size:96px;line-height:96px}
.about__body{padding:64px 96px 96px;flex:1}
.about__body p{font-size:20px;line-height:30px;max-width:527px}
.about__zigzag{position:absolute;left:calc(100% - 90px);top:60px;width:200px;height:200px}
.about__zigzag svg{width:200px;height:200px}

/* ---------- Contact ---------- */
.contact{position:relative;background:var(--grad-hero);padding:160px 0;overflow:hidden}
.contact__container{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:48px;padding:0 var(--pad-x)}
.contact__title{font-family:var(--font-display);font-size:72px;line-height:76px;text-align:center}
.contact__links{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}
.pill-link{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--ink);border-radius:var(--radius-pill);padding:16px 32px;font-weight:600;text-decoration:none;transition:transform .2s}
.pill-link:hover{transform:translateY(-2px)}
.pill-link img{width:20px;height:20px}
.contact .decor--yellow{width:300px;height:300px;left:calc(100% - 190px);top:-110px}
.contact .decor--black{width:300px;height:300px;left:-110px;top:334px}

/* ---------- Footer ---------- */
.footer{background:var(--black);color:var(--white);display:flex;align-items:center;justify-content:space-between;padding:48px var(--pad-x);font-weight:500;font-size:14px;line-height:20px;text-transform:uppercase}
.footer__links{display:flex;gap:32px}
.footer a{text-decoration:underline;text-underline-position:from-font}

/* ---------- Legal pages ---------- */
.legal{background:var(--grad-hero);min-height:60vh;padding:48px var(--pad-x) 96px}
.legal__box{max-width:760px;margin:0 auto;background:var(--white);border:1px solid var(--ink);border-radius:var(--radius-lg);padding:48px}
.legal h1{font-family:var(--font-display);font-size:56px;line-height:60px;margin-bottom:8px}
.legal h2{font-weight:600;font-size:20px;line-height:28px;margin:32px 0 8px}
.legal p,.legal li{font-size:16px;line-height:26px}
.legal ul{padding-left:20px;margin:8px 0}
.legal .updated{font-size:14px;opacity:.7}
.legal__back{display:inline-block;margin-bottom:32px;font-weight:500}
.nav--simple{background:transparent}

/* ---------- Mobile / tablet ---------- */
@media (max-width:1023px){
  :root{--pad-x:24px}
  section[id]{scroll-margin-top:60px}
  .hero{min-height:0}
  .nav{padding:16px 24px}
  .nav__toggle{display:block}
  .nav__links{display:none;position:absolute;top:100%;left:16px;right:16px;flex-direction:column;align-items:stretch;gap:0;background:var(--white);border:1px solid var(--ink);border-radius:var(--radius-md);padding:8px 0;z-index:10}
  .nav__links.is-open{display:flex}
  .nav__links a{padding:12px 24px}
  .hero__container{flex-direction:column;align-items:stretch;gap:48px;padding:48px 24px 96px}
  .hero__title{font-size:64px;line-height:64px;letter-spacing:-.01em}
  .pill-role{font-size:20px;line-height:24px;letter-spacing:.02em;padding:16px 64px}
  .hero__content{gap:32px}
  .hero__image{width:100%;max-width:520px;margin:0 auto;height:460px;display:flex;border-top-left-radius:171px;border-top-right-radius:171px}
  .hero__photo{width:100%;height:100%;border-top-left-radius:155px;border-top-right-radius:155px}
  .hero .decor--yellow{width:200px;height:200px;left:230px;top:-60px}
  .hero .decor--black{display:none}
  .marquee{height:48px}
  .marquee__item{font-size:20px;line-height:28px;gap:32px}
  .label{font-size:28px;line-height:36px}
  .portfolio{padding:64px 0}
  .portfolio__container{padding:0 0 0 24px;gap:64px}
  .group{gap:32px}
  .group .label{padding-right:24px}
  .row{gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-right:24px;scrollbar-width:none}
  .row::-webkit-scrollbar{display:none}
  .card{flex:none;width:240px;scroll-snap-align:start}
  .pricing{padding:96px 0}
  .pricing__container{gap:32px}
  .pricing__cards{flex-direction:column;gap:32px}
  .plan{padding:32px 24px}
  .plan__title{font-size:32px;line-height:36px}
  .divider{height:72px;padding:0 16px}
  .divider .sparkle{width:28px;height:33.6px}
  .divider .starburst{width:42px;height:42px}
  .divider .hide-m{display:none}
  .about{flex-direction:column;min-height:0}
  .about__media{flex:none;padding:64px 0 96px;display:flex;flex-direction:column;align-items:center}
  .about__glow{display:none}
  .badge{left:16px;top:352px}
  .about__content{border-left:0;flex:none}
  .about__img{margin-top:0}
  .about__title-area{padding:48px 24px 32px;border-top:1px solid var(--black)}
  .about__title{font-size:48px;line-height:52px}
  .about__body{padding:32px 24px 64px}
  .about__body p{font-size:18px;line-height:28px;max-width:none}
  .about__zigzag{display:none}
  .contact{padding:96px 0}
  .contact__container{gap:32px}
  .contact__title{font-size:48px;line-height:52px}
  .contact__links{flex-direction:column}
  .contact .decor--yellow{display:none}
  .contact .decor--black{width:200px;height:200px;left:-90px;top:333px}
  .footer{flex-direction:column;align-items:flex-start;gap:16px;padding:32px 24px}
  .footer__links{flex-direction:column;gap:16px}
  .legal{padding:24px 16px 64px}
  .legal__box{padding:32px 24px}
  .legal h1{font-size:40px;line-height:44px}
}
@media (min-width:1024px) and (max-width:1279px){
  .hero__photo{width:320px;height:440px}
  .hero__image{border-top-left-radius:176px;border-top-right-radius:176px}
  .hero__photo{border-top-left-radius:160px;border-top-right-radius:160px}
  .plan{padding:32px}
  .about__title-area{padding:64px 48px 48px}
  .about__body{padding:48px}
  .contact__title{font-size:56px;line-height:60px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee__track,.badge svg{animation:none}
}