/* Fitanga, landing del beta. Translated from the Claude Design canvas "Fitanga: landing v1"
   (docs/landing/2026-11-09-diseno/). Sizes are the design's: clamp() between the 390 board and the 1440 one,
   in container units of the page (.pagina). */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/archivo-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/archivo-500-latin.woff2") format("woff2");
}

:root {
  --rosado: #F3A9C1;
  --celeste: #8CCBF2;
  --negro: #141414;
  --papel: #F2F4F2;
  --blanco: #FFFFFF;
  --gris: #5E5E5E;
  --hairline: #D1D1D6;
  --rosado-sec: #5B444B;
  --negro-sec: #A8A8A8;
  --familia: "Archivo", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--negro);
  font-family: var(--familia);
  font-size: 17px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.pagina { container-type: inline-size; }

.marco {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: clamp(16px, 6cqi - 8px, 80px);
}

/* Header and hero ---------------------------------------------------------------------------------------- */

.hero { background: var(--rosado); color: var(--negro); }
.hero__marco { padding-bottom: clamp(56px, 7cqi, 112px); }

.cabecera { display: flex; align-items: center; padding: clamp(18px, 2.4cqi, 36px) 0; }
.cabecera__logo { display: block; color: var(--negro); }

.logo { display: block; width: clamp(140px, 11.5cqi, 168px); height: auto; aspect-ratio: 4004 / 806; color: var(--negro); }
.logo--pie { width: 140px; }

/* "Escala": Archivo 500, -3.5 %, 0.98, 50 px on the phone to 108 px on desktop. */
.titulo {
  margin: 0;
  padding-top: clamp(8px, 2cqi, 40px);
  max-width: 1100px;
  font-size: clamp(50px, 7.5cqi, 108px);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero__cuerpo {
  margin-top: clamp(16px, 2.8cqi, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px clamp(40px, 6cqi, 96px);
}

.hero__texto { flex: 1 1 480px; max-width: 600px; min-width: 0; display: flex; flex-direction: column; }

.hero__bajada { margin: 0; max-width: 34em; font-size: clamp(17px, 1.4cqi, 20px); line-height: 1.47; }

.hero__texto .alta { margin-top: 24px; }

.hero__solo { margin: 12px 0 0; font-size: 13px; line-height: 18px; color: var(--rosado-sec); }

/* The day's row: one bar per meal, its width from its kcal (0.2816 px per kcal, the design's scale). */
.dia { margin-top: 32px; overflow-x: auto; padding-bottom: 4px; }
.dia__lista { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; gap: 8px; width: max-content; }
.dia__item { display: flex; flex-direction: column; gap: 8px; }
.dia__barra { display: block; height: 36px; border-radius: 6px; border: 1.5px solid var(--negro); }
.dia__barra--hecha { background: var(--negro); }
.dia__item:nth-child(1) .dia__barra { width: 107px; }  /* 381 kcal */
.dia__item:nth-child(2) .dia__barra { width: 60px; }   /* 213 kcal */
.dia__item:nth-child(3) .dia__barra { width: 144px; }  /* 512 kcal */
.dia__item:nth-child(4) .dia__barra { width: 78px; }   /* 276 kcal */
.dia__item:nth-child(5) .dia__barra { width: 65px; }   /* 232 kcal */
.dia__texto { margin: 0; font-size: 13px; line-height: 18px; }
.dia__texto > span { display: block; }
.dia__hora { font-weight: 500; }
.dia__kcal { color: var(--rosado-sec); }

/* The document and the day, linked by the same food. The visual is its own container: the link's height
   follows the capture's, and the document moves down so its line meets it. */
.visual {
  flex: 0 1 520px;
  max-width: 520px;
  min-width: 0;
  margin: 0;
  position: relative;
  display: grid;
  grid-template-columns: 40fr 60fr;
  align-items: start;
  gap: 16px;
  container-type: inline-size;
  --col: calc(100cqi - 16px);
  /* Measured on the real images: "Arroz cocido, 110 g" sits at 35.0 % of the Hoy capture's height
     (1170 x 2532) and at 30.6 % of the Semana page's (720 x 1019). In units of --col:
     capture 0.6 * 2532 / 1170 * 0.350 = 0.4545; page 0.4 * 1019 / 720 * 0.306 = 0.1732. */
  --enlace-alto: 0.4545;
  --doc-bajada: 0.2813;
}
.visual__doc { width: 100%; border-radius: 10px; margin-top: calc(var(--col) * var(--doc-bajada)); }
.visual__enlace {
  position: absolute;
  left: 2%;
  right: 2%;
  top: calc(var(--col) * var(--enlace-alto));
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}
.visual__chip {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--negro);
  color: var(--papel);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
}
.visual__linea { flex: 1 1 auto; min-width: 8px; height: 1.5px; background: var(--negro); transform-origin: left center; }

/* The one movement of the page: once, on load, the line runs from the document to the day (600 ms). */
@media (prefers-reduced-motion: no-preference) {
  .visual__linea { animation: enlace 600ms cubic-bezier(0.2, 0, 0, 1) 300ms both; }
  .visual__chip:last-child { animation: aparece 200ms ease-out 800ms both; }
}
@keyframes enlace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* iPhone screens: the screen's corner radius (12.1 % of the width); on white, a hairline. */
.pantalla { width: 100%; border-radius: 12.1% / 5.6%; }
.pantalla--borde { border: 1px solid var(--hairline); }

/* Sections ----------------------------------------------------------------------------------------------- */

.seccion { padding: clamp(56px, 7cqi, 112px) 0; }
.seccion--blanca { background: var(--blanco); color: var(--negro); }
.seccion--celeste { background: var(--celeste); color: var(--negro); }
.seccion--negra { background: var(--negro); color: var(--papel); }
.seccion--preguntas { padding-bottom: clamp(40px, 5cqi, 80px); }

.subtitulo { margin: 0; font-size: clamp(28px, 2.8cqi, 40px); line-height: 1.15; font-weight: 500; letter-spacing: -0.005em; }

.pasos {
  list-style: none;
  margin: clamp(32px, 4cqi, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 56px 48px;
}
.paso { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.paso__texto { display: flex; flex-direction: column; gap: 6px; min-height: clamp(0px, (100cqi - 700px) * 1000, 108px); }
.paso__titulo { margin: 0; font-size: 20px; line-height: 26px; font-weight: 500; }
.paso__texto p { margin: 0; }
.paso .pantalla { max-width: 260px; }

.seccion__cierre { margin: clamp(40px, 4cqi, 56px) 0 0; max-width: 36em; font-size: 15px; line-height: 22px; }

.sin-pauta { display: flex; flex-wrap: wrap; align-items: center; gap: 40px clamp(40px, 8cqi, 160px); }
.sin-pauta__texto { flex: 1 1 360px; max-width: 520px; min-width: 0; }
.sin-pauta__bajada { margin: 16px 0 0; font-size: clamp(17px, 1.4cqi, 20px); line-height: 1.47; }
.sin-pauta__pantalla { flex: 0 0 auto; width: min(260px, 100%); }

.banda { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px clamp(40px, 6cqi, 96px); }
.banda__titulo { flex: 1 1 360px; min-width: 0; margin: 0; font-size: clamp(36px, 4.2cqi, 60px); line-height: 1.06; font-weight: 500; letter-spacing: -0.01em; }
.banda__form { flex: 1 1 420px; max-width: 580px; min-width: 0; }

.preguntas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px clamp(40px, 6cqi, 96px); }
.preguntas__titulo { flex: 1 1 240px; max-width: 360px; }
.preguntas__cuerpo { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.preguntas__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 32px 48px; }
.pregunta { margin: 0; font-size: 17px; line-height: 24px; font-weight: 500; }
.respuesta { margin: 6px 0 0; font-size: 17px; line-height: 24px; }
.preguntas__cuerpo > .respuesta { margin: 0; }

.pie { background: var(--blanco); color: var(--negro); }
.pie .marco { padding-bottom: 48px; }
.pie__caja { border-top: 1px solid var(--negro); padding-top: 32px; display: flex; flex-direction: column; gap: 24px; }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 48px; }
.pie__marca { display: flex; flex-direction: column; gap: 14px; }
.pie__marca p { margin: 0; font-size: 15px; line-height: 20px; }
.pie__nav { display: flex; flex-wrap: wrap; gap: 0 28px; }
.pie__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 20px; }
.pie__legal { display: flex; flex-direction: column; gap: 6px; }
.pie__legal p { margin: 0; max-width: 62em; font-size: 13px; line-height: 18px; color: var(--gris); }
.pie__legal p + p { font-size: 12.5px; }

/* The signup ---------------------------------------------------------------------------------------------- */

.alta[data-fondo="rosado"] {
  --tinta: var(--negro); --sec: var(--rosado-sec);
  --btn-fondo: var(--negro); --btn-texto: var(--papel);
  --sel-fondo: var(--negro); --sel-texto: var(--papel);
}
.alta[data-fondo="negro"] {
  --tinta: var(--papel); --sec: var(--negro-sec);
  --btn-fondo: var(--papel); --btn-texto: var(--negro);
  --sel-fondo: var(--papel); --sel-texto: var(--negro);
}
.alta { color: var(--tinta); }
.alta__form { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.alta__fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 8px; }
.alta__campo { flex: 999 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.alta__etiqueta { font-size: 15px; line-height: 20px; font-weight: 500; }

/* White with a 1.5 px border: white alone is 1.9:1 against pink, and a field needs 3:1. 17 px so Safari
   doesn't zoom. */
.alta__input {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1.5px solid var(--negro);
  border-radius: 12px;
  outline: none;
  background: var(--blanco);
  color: var(--negro);
  font: 400 17px/22px var(--familia);
  -webkit-appearance: none;
  appearance: none;
}
.alta__input::placeholder { color: var(--gris); opacity: 1; }
.alta__input:focus { outline: 2px solid var(--tinta); outline-offset: 2px; }
.alta__input[aria-invalid="true"] { border-width: 2px; }

.boton {
  flex: 1 0 auto;
  height: 52px;
  margin: 0;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: var(--btn-fondo);
  color: var(--btn-texto);
  font: 500 17px/22px var(--familia);
  cursor: pointer;
}
.alta__resultado .boton { padding: 0 28px; }
.boton:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.boton[aria-busy="true"] { cursor: progress; }

.alta__mensaje p { margin: 0; font-size: 15px; line-height: 20px; }
.alta__nota { color: var(--sec); }
.alta__aviso { font-weight: 500; }

/* The honeypot: out of sight and out of the tab order. */
.alta__miel { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.alta__resultado { display: flex; flex-direction: column; gap: 20px; }
.alta__resultado--corto { align-items: flex-start; gap: 16px; }
.alta__encabezado { display: flex; flex-direction: column; gap: 4px; }
.alta__titulo { margin: 0; font-size: 20px; line-height: 26px; font-weight: 500; outline: none; }
.alta__sec { margin: 0; font-size: 15px; line-height: 20px; color: var(--sec); }
.alta__pregunta { margin: 0; padding: 0; border: 0; min-width: 0; }
.alta__pregunta legend { padding: 0; font-size: 15px; line-height: 20px; font-weight: 500; }
.alta__ayuda { margin: 4px 0 0; font-size: 15px; line-height: 20px; color: var(--sec); }
.alta__mas { display: flex; flex-direction: column; gap: 20px; }

.chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 44px;
  margin: 0;
  padding: 0 18px;
  border: 1.5px solid var(--tinta);
  border-radius: 12px;
  background: transparent;
  color: var(--tinta);
  font: 400 17px/22px var(--familia);
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--sel-fondo); color: var(--sel-texto); }
.chip:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* /privacidad --------------------------------------------------------------------------------------------- */

.privacidad { background: var(--blanco); }
.privacidad .cabecera__logo, .privacidad .logo { color: var(--negro); }
.legal { padding: clamp(32px, 4cqi, 64px) 0 clamp(56px, 7cqi, 112px); max-width: 36em; }
.legal h1 { margin: 0; font-size: clamp(36px, 4.2cqi, 60px); line-height: 1.06; font-weight: 500; letter-spacing: -0.01em; }
.legal .fecha { margin: 12px 0 0; font-size: 15px; line-height: 20px; color: var(--gris); }
.legal h2 { margin: 40px 0 0; font-size: 20px; line-height: 26px; font-weight: 500; }
.legal p { margin: 12px 0 0; }