/* ---------- SATOSHI (static webfonts desde /fonts) ---------- */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-light-webfont.woff2") format("woff2"),
       url("../fonts/satoshi-light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-regular-webfont.woff2") format("woff2"),
       url("../fonts/satoshi-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-italic-webfont.woff2") format("woff2"),
       url("../fonts/satoshi-italic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-medium-webfont.woff2") format("woff2"),
       url("../fonts/satoshi-medium-webfont.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-mediumitalic-webfont.woff2") format("woff2"),
       url("../fonts/satoshi-mediumitalic-webfont.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-bold-webfont.woff2") format("woff2"),
       url("../fonts/satoshi-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-bolditalic-webfont.woff2") format("woff2"),
       url("../fonts/satoshi-bolditalic-webfont.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-black-webfont.woff2") format("woff2"),
       url("../fonts/satoshi-black-webfont.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-blackitalic-webfont.woff2") format("woff2"),
       url("../fonts/satoshi-blackitalic-webfont.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root{
  --rf-black:#0b0b0b;
  --rf-white:#ffffff;
  --rf-text:#111;
  --rf-about:#F5F5F5;
}

html, body { height: 100%; }

body{
  margin:0;
  font-family: "Satoshi", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--rf-text);
  background: #fff;
}

/* helpers */
.rf-section{
  min-height: 100vh;
  min-height: 100svh;  /* mejor en mobile */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rf-center{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* weight utilities (según lo que pides) */
.rf-w-regular{ font-weight: 400; }
.rf-w-medium{ font-weight: 500; }
.rf-w-bold{ font-weight: 700; }
.rf-w-black{ font-weight: 900; } /* opcional */

/* ---------- HERO ---------- */
.rf-hero{
  background-image: url("../assets/fondo-alvero.webp");
  background-size: cover;     /* cover SIEMPRE */
  background-position: center;
  background-repeat: no-repeat;
}

.rf-hero-title{
  margin:0;
  color: var(--rf-white);
  font-weight: 800;           /* el wordmark grande lo dejamos contundente */
  letter-spacing: 2px;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1;
}

/* Pills */
.rf-pill{
  display:inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration:none;
  border: 1px solid transparent;
}

.rf-pill--dark{
  background: rgba(0,0,0,0.78);
  color: #fff;
  border-color: rgba(255,255,255,0.06);
}

.rf-pill--dark:hover{ background: rgba(0,0,0,0.88); }

.rf-pill--light{
  background: var(--rf-black);
  color: #fff;
}

.rf-pill--light:hover{ background:#000; }

/* ---------- PRODUCT ---------- */
.rf-product{
  background:#fff;
}

.rf-product-card{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.rf-product-img{
  width: 100%;
  max-width: 380px;
  display:block;
  margin: 0 auto;
}

.rf-product-copy{
  padding-top: 8px;
}

.rf-kicker{
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #444;
  margin-bottom: 6px;
}

.rf-product-title{
  margin: 0 0 10px;
  font-size: 25px;
  letter-spacing: 0.2px;
}

.rf-desc{
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.55;
  color: #222;
  max-width: 52ch;
}

.rf-mini-title{
  font-size: 14px;
  margin-bottom: 6px;
}

.rf-mini-text{
  font-size: 14px;
  line-height: 1.45;
  color: #222;
}

/* ---------- ABOUT ---------- */
.rf-about{
  background: var(--rf-about);
}

.rf-about-wrap{
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 12px;
}

.rf-about-title{
  letter-spacing: 2px;
  font-size: clamp(34px, 4.2vw, 66px);
  margin: 0 0 18px;
}

.rf-about-copy{
  font-size: 16px;
  line-height: 1.6;
  color: #222;
  max-width: 760px;
  margin: 0 auto;
}

.rf-about-copy p{
  margin: 0 0 14px;
}

/* Contact */
.rf-contact-label{
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #222;
  margin-bottom: 6px;
}

.rf-contact-link{
  color: #111;
  text-decoration:none;
  font-size: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.25);
}

.rf-contact-link:hover{
  border-bottom-color: rgba(0,0,0,0.6);
}

.rf-contact-text{
  font-size: 14px;
  color: #111;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991.98px){
  .rf-product-img{
    max-width: 420px;
    margin-bottom: 22px;
  }

  .rf-desc{
    max-width: 60ch;
  }
}