@font-face {
  font-family: "Inter";
  src: url("/activos/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/activos/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/activos/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/activos/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/activos/playfair-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/activos/playfair-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/activos/playfair-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/activos/playfair-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/activos/playfair-600i.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/activos/jbmono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/activos/jbmono-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --fondo: #0a0a0c;
  /* El panel de una tarjeta: un paso más claro que el fondo, no un color
     aparte, para que las tarjetas se sientan del mismo material. */
  --vitela: #18191c;
  --vitela-alta: #202226;
  --regla: #28292d;
  --tinta: #f5f5f4;
  --rubro: #f04f56;
  --azur: #7c9eff;

  --tenue: #a3a3aa;
  /*
    Para texto que debe pesar menos sin volverse ilegible. Pasa AA en los dos
    fondos oscuros: por encima de 4.5:1 sobre --fondo y sobre --vitela.
  */
  --apagado: #8b8b93;
  /* Un punto más claro que --vitela: la lengüeta del botón del asistente y
     los estados de hover tienen que despegarse del panel. */
  --lengueta: #202226;
  /*
    Dos familias, como antes de Inter: --titular para lo que es contenido
    (títulos, el nombre de una materia) y --cuerpo para lo que es interfaz
    (nav, botones, fechas, chips). Playfair Display es una display serif —
    preciosa grande, casi ilegible en un botón de 13px — así que la regla es
    mecánica: si el elemento es un título o un nombre propio, --titular; si
    es algo que se toca o un dato tabular, --cuerpo. Ver NOTAS-DISENO.md.
  */
  --titular: "Playfair Display", Georgia, serif;
  --cuerpo: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  /* El monospace del sistema cambia de un navegador a otro y se nota, sobre
     todo al lado de Inter y Playfair Display, que sí están cuidadas. Para
     código y el editor de la descripción. */
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* El degradado de la marca: rubro a ámbar, la fruta. Se usa en el
     wordmark del sidebar y nada más: uno solo, no dos. */
  --gradiente-marca: linear-gradient(135deg, #fb7185, #f59e0b);

  /* Escala tipográfica en cuarta justa (1.333), de Bringhurst. */
  --t--1: 0.82rem;
  --t-0: 1rem;
  --t-1: 1.333rem;
  --t-2: 1.777rem;
  --t-3: 2.369rem;
  --t-4: 3.157rem;
  --t-5: 5.61rem;

  --paso: 1.5rem;
}

/* Public iFruit storefront. Fonts are shared with the private application. */
:root {
  --page-bg: #0b0c0d;
  --paper: #f8f5f1;
  --muted: #bebec1;
  --pink: #ff5c7e;
  --line: #29292c;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--paper); background: var(--page-bg); font-family: var(--cuerpo); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--pink); outline-offset: 6px; border-radius: 3px; }
::selection { background: var(--pink); color: var(--page-bg); }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
/* La compilación envuelve cada foto en <picture> con sus variantes AVIF y WebP.
   Que no ocupe caja: la imagen sigue siendo la hija del contenedor de siempre. */
picture { display: contents; }
h1, h2, h3, p, figure { margin: 0; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.site { overflow: clip; }
.container { width: calc(100% - 40px); max-width: 1160px; margin-inline: auto; }
.skip-link { position: absolute; top: -100px; left: 20px; z-index: 10; padding: 12px; background: var(--paper); color: var(--page-bg); }
.skip-link:focus { top: 12px; }
.header { border-bottom: 1px solid #ffffff0a; position: relative; z-index: 2; }
.header-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding-block: 12px 5px; }
.brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand img { width: 49px; }
.brand-copy { display: flex; flex-direction: column; }
.wordmark { font: 700 34px/1.06 var(--titular); letter-spacing: -1px; }
.tagline { font-size: 10px; letter-spacing: .8px; color: var(--muted); margin-top: 4px; }
nav { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; white-space: nowrap; }
nav a { display: flex; align-items: center; min-height: 44px; color: #d0ced0; }
nav a:hover, nav .nav-inicio { color: var(--pink); }
body:has(main section:target) nav .nav-inicio { color: #d0ced0; }
body:has(#inicio:target) nav .nav-inicio,
body:has(#sabores:target) nav .nav-sabores,
body:has(#preparacion:target) nav .nav-preparacion,
body:has(#hoy:target) nav .nav-hoy { color: var(--pink); }
.hero { position: relative; overflow: hidden; }
.hero-inner { position: relative; padding-top: 34px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { color: var(--pink); text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .7px; margin-bottom: 13px; }
h1 { font: 700 clamp(42px, 12vw, 72px)/1.01 var(--titular); letter-spacing: -1.8px; }
h1 span { display: block; white-space: nowrap; }
h1 span:last-child { font-size: .84em; }
.description { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 390px; margin-top: 22px; }
.hero-photo { position: relative; width: min(94%, 470px); margin: 6px auto -4px; isolation: isolate; }
.hero-photo img { position: relative; z-index: 1; width: 100%; }
.hero-photo::after { content: ""; position: absolute; z-index: 0; left: -12%; right: -12%; bottom: 5%; height: 12%; background: radial-gradient(ellipse, #b675713b 0%, #64515120 38%, transparent 70%); filter: blur(8px); }
.hero-wave { position: absolute; top: 43%; right: -15%; width: 65%; height: 180px; fill: #a23d51; opacity: .9; }
.sections { position: relative; z-index: 1; }
.section-heading { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
h2 { font: 600 clamp(33px, 8vw, 48px)/1.13 var(--titular); letter-spacing: -1px; }
.section-heading > p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.steps { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.step { position: relative; border: 1px solid var(--line); border-radius: 16px; min-height: 142px; display: grid; grid-template-columns: 94px 1fr; align-content: center; column-gap: 12px; padding: 20px; background: #11121366; }
.step-number { position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pink); color: #101012; font-size: 16px; font-weight: 600; }
.step-icon { grid-column: 1; grid-row: 1 / 3; justify-self: center; align-self: center; width: 56px; height: 66px; fill: none; stroke: #f9d9d1; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-accent { stroke: var(--pink); }
.icon-liquid { fill: #ff819b; stroke: none; }
.step h3 { font: 600 21px/1.15 var(--titular); align-self: end; }
.step p { font-size: 13px; line-height: 1.4; color: var(--muted); margin-top: 9px; }
.flavors { margin-top: 32px; }
.flavor-grid { display: grid; gap: 18px; }
.flavor { position: relative; border-radius: 16px; overflow: hidden; }
.strawberry { background: #ad4054; color: var(--paper); }
.banana { background: #e9c88f; color: #111214; }
.mixed { background: #f6c7bf; color: #111214; }
.flavor-photo { position: relative; height: 265px; isolation: isolate; }
.flavor-photo::after { position: absolute; content: ""; z-index: -1; left: 4%; right: 4%; bottom: 2px; height: 22px; border-radius: 50%; background: #2e10146b; filter: blur(12px); }
.strawberry .flavor-photo { background: #581f2a; }
.banana .flavor-photo { background: #d9ac61; }
.mixed .flavor-photo { background: #ed6480; }
.flavor-wave { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; }
.strawberry .flavor-wave { fill: #ad4054; }
.banana .flavor-wave { fill: #e9c88f; }
.mixed .flavor-wave { fill: #f6c7bf; }
.flavor-photo img { width: 100%; height: 100%; object-fit: contain; padding: 4px 10px 0; }
.flavor-copy { padding: 12px 24px 20px; border-top: 1px solid #00000024; }
.flavor h3 { font: 600 28px/1.2 var(--cuerpo); letter-spacing: -.9px; }
.flavor-copy p { font-size: 15px; line-height: 1.4; margin-top: 7px; color: #605857; }
.strawberry .flavor-copy p { color: #f2d5da; }
.price { display: block; color: #b32246; font-size: 23px; font-weight: 700; margin-top: 8px; }
.strawberry .price { color: #ffe0e6; }
.ingredients { margin-top: 34px; }
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; list-style: none; padding: 0; margin: 25px 0 0; }
.benefits li { display: flex; gap: 10px; align-items: flex-start; }
.benefits svg { flex-shrink: 0; width: 32px; height: 36px; fill: none; stroke: var(--pink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.benefits .blender { stroke: #f9d9d1; height: 42px; }
.benefits h3 { font: 600 16px/1.2 var(--titular); min-height: 38px; }
.benefits p { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 9px; }
.today { position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; background: #25191d; padding: 26px 22px; margin-top: 38px; margin-inline: -12px; }
.today::before { content: ""; position: absolute; z-index: -1; width: 100%; height: 210%; background: #54232c55; border-radius: 0 0 70% 0; top: -100%; left: -20%; transform: rotate(-10deg); }
.today-copy > p { font-size: 14px; line-height: 1.6; color: var(--muted); margin-top: 12px; }
.availability { display: flex; gap: 16px; align-items: flex-start; border-top: 1px solid #897779; margin-top: 22px; padding-top: 20px; }
.availability svg { width: 38px; height: 42px; flex-shrink: 0; fill: none; stroke: var(--pink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.availability h3 { color: var(--pink); font-size: 17px; font-weight: 600; line-height: 1.4; }
.availability p { margin-top: 7px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.footer { position: relative; display: flex; align-items: center; gap: 32px; padding-block: 32px 40px; isolation: isolate; }
.footer-brand .wordmark { font-size: 32px; }
.footer-brand img { width: 48px; }
.footer-brand .tagline { font-size: 9px; }
.footer-social { display: flex; flex-direction: column; gap: 8px; padding-left: 24px; border-left: 1px solid #646466; }
.footer-social > span { color: var(--muted); font-size: 13px; }
.footer-social a { display: inline-flex; align-items: center; gap: 11px; width: fit-content; color: var(--paper); }
.footer-social a:hover { color: var(--pink); }
.footer-social a svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--pink); stroke-width: 1.8; }
.footer-social a .instagram-flash { fill: var(--pink); stroke: none; }
.footer-social strong { font-size: 19px; font-weight: 600; letter-spacing: -.4px; }
.footer-wave { position: absolute; z-index: -1; pointer-events: none; width: 70%; height: 130px; bottom: 0; right: -40%; opacity: .6; }
@media (max-width: 599px) {
 .footer { flex-direction: column; align-items: flex-start; gap: 22px; padding-block: 30px 48px; }
 .footer-social { width: 100%; border-left: 0; border-top: 1px solid #646466; padding: 18px 0 0; }
 .footer-wave { right: -45%; }
}
@media (min-width: 760px) {
 .container { width: 87%; }
 .header-inner { min-height: 84px; padding-block: 8px; justify-content: space-between; gap: 20px; flex-wrap: nowrap; }
 .brand img { width: clamp(52px, 7vw, 82px); }
 .wordmark { font-size: clamp(35px, 4.6vw, 56px); }
 .tagline { font-size: clamp(11px, 1.6vw, 17px); }
 nav { width: auto; gap: clamp(18px, 3.2vw, 42px); font-size: clamp(12px, 1.6vw, 16px); }
 .hero-inner { height: clamp(425px, 55vw, 715px); padding-top: clamp(55px, 7.6vw, 100px); }
 .hero-copy { width: 65%; }
 .eyebrow { font-size: clamp(14px, 1.9vw, 23px); margin-bottom: 5px; letter-spacing: .8px; }
 h1 { font-size: clamp(70px, 9.7vw, 125px); letter-spacing: -2.8px; line-height: .96; }
 .description { width: 80%; max-width: 520px; margin-top: clamp(24px, 3.5vw, 46px); font-size: clamp(17px, 2.2vw, 25px); line-height: 1.48; }
 .hero-photo { position: absolute; top: -40px; right: -14.5%; width: 71%; max-width: 780px; margin: 0; }
 .hero-photo::after { bottom: 4%; height: 12%; left: -33%; right: -10%; }
 .hero-wave { top: 0; right: -1%; width: 38%; height: 46%; }
 .section-heading { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
 h2 { font-size: clamp(38px, 5vw, 62px); letter-spacing: -1.5px; }
 .section-heading > p { font-size: clamp(13px, 1.75vw, 19px); text-align: right; }
 .steps { grid-template-columns: repeat(3, 1fr); gap: 14px; }
 .step { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: clamp(198px, 22vw, 262px); padding: 14px 10px 10px; }
 .step-number { top: 16px; left: 30px; width: clamp(34px, 4.8vw, 53px); height: clamp(34px, 4.8vw, 53px); font-size: clamp(20px, 2.4vw, 28px); }
 .step-icon { width: clamp(55px, 7.2vw, 86px); height: clamp(66px, 8vw, 102px); margin-bottom: 6px; }
 .step h3 { font-size: clamp(19px, 2.4vw, 29px); align-self: auto; }
 .step p { font-size: clamp(13px, 1.6vw, 18px); line-height: 1.25; margin-top: 9px; }
 .flavors { margin-top: 25px; }
 .flavor-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
 .flavor-photo { height: clamp(164px, 20.1vw, 274px); }
 .flavor-copy { padding: 3px clamp(18px, 3.1vw, 36px) 13px; }
 .flavor h3 { font-size: clamp(25px, 3.1vw, 36px); }
 .flavor-copy p { font-size: clamp(13px, 1.7vw, 19px); }
 .price { font-size: clamp(21px, 2.5vw, 29px); margin-top: 6px; }
 .ingredients { margin-top: 27px; }
 .benefits { grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 24px; }
 .benefits li { gap: clamp(9px, 1.5vw, 19px); padding-inline: clamp(12px, 2vw, 25px); border-left: 1px solid #646466; }
 .benefits li:first-child { border-left: 0; padding-left: 0; }
 .benefits li:last-child { padding-right: 0; }
 .benefits svg { width: clamp(32px, 4.5vw, 54px); height: clamp(37px, 4.9vw, 59px); }
 .benefits .blender { height: clamp(44px, 5.8vw, 68px); }
 .benefits h3 { font-size: clamp(15px, 1.9vw, 22px); min-height: 38px; }
 .benefits p { font-size: clamp(10px, 1.3vw, 14px); white-space: nowrap; }
 .today { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: center; margin: 40px -12px 0; padding: 20px 25px 23px; }
 .today-copy > p { font-size: clamp(14px, 1.85vw, 22px); line-height: 1.5; margin-top: 10px; }
 .availability { border-top: 0; border-left: 1px solid #897779; margin: 0; padding: 7px 0 3px clamp(16px, 2.8vw, 36px); gap: 14px; }
 .availability svg { width: clamp(36px, 4.7vw, 54px); height: 46px; }
 .availability h3 { font-size: clamp(16px, 2.1vw, 24px); }
 .availability p { font-size: clamp(14px, 1.9vw, 22px); white-space: nowrap; }
 .footer { gap: clamp(45px, 7vw, 100px); padding-block: 29px 42px; }
 .footer-brand img { width: clamp(64px, 8vw, 94px); }
 .footer-brand .wordmark { font-size: clamp(42px, 5.5vw, 68px); }
 .footer-brand .tagline { font-size: clamp(12px, 1.6vw, 18px); }
 .footer-social { gap: 12px; padding-left: clamp(32px, 4vw, 56px); }
 .footer-social > span { font-size: clamp(14px, 1.4vw, 17px); }
 .footer-social a svg { width: 27px; height: 27px; }
 .footer-social strong { font-size: clamp(22px, 2.3vw, 28px); }
 .footer-wave { width: 53%; right: -2%; height: 160px; opacity: 1; }
}
@media (max-width: 359px) {
 nav { font-size: 10.5px; gap: 8px; }
 .step { grid-template-columns: 75px 1fr; padding-inline: 14px; }
 .benefits { column-gap: 12px; }
 .benefits li { gap: 7px; }
 .benefits svg { width: 25px; }
 .benefits h3 { font-size: 15px; }
 .footer { gap: 15px; }
 .footer-social { padding-left: 0; }
 .footer-social strong { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.flavor-photo img { transform: scale(1.12); }
.banana .flavor-photo img { transform: scale(1.25); }
.flavor-photo { overflow: hidden; }

/* Teléfono: el ancho de diseño pasa a ser el del teléfono. La referencia
   visual está dibujada a 908 px; aquí la composición se deja llevar y las
   medidas escalan con el ancho real de la pantalla. */
@media (max-width: 759px) {
  h1 { font-size: clamp(42px, 12vw, 72px); }
  h2 { font-size: clamp(33px, 8vw, 48px); }
  .hero-inner { padding-top: 24px; }
  .hero-wave { top: 32%; right: -22%; width: 72%; height: 190px; }
  .step { grid-template-columns: 64px 1fr; column-gap: 10px; padding: 16px 16px 16px 50px; min-height: 0; }
  .step-number { top: 12px; left: 12px; width: 26px; height: 26px; font-size: 15px; }
  .step-icon { width: 52px; height: 61px; }
  .step h3 { font-size: 19px; }
  .step p { font-size: 12.5px; }
  .flavor-photo { height: 200px; }
  .flavor h3 { font-size: 24px; }
  .flavor-copy p { font-size: 13.5px; }
  .price { font-size: 20px; }
  .benefits h3 { min-height: 0; }
  .benefits svg { width: 29px; height: 34px; }
  .benefits .blender { height: 40px; }
}