/* Gift Occasion Matcher landing. Blush field, cream tag cards with a brass eyelet, twine, bottle green. */

@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/gabarito-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/gabarito-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
}

:root {
  --rubor: #f7e4dc;
  --rubor-hondo: #efcdbf;
  --crema: #fffaf4;
  --tinta: #14352d;
  --verde: #1d4a3f;
  --tinta-suave: #47605a;
  --mostaza: #e0a92e;
  --mostaza-palida: #fbeecd;
  --frambuesa: #a32a58;
  --linea: #e6c4b6;
  --titulos: "Gabarito", "Trebuchet MS", system-ui, sans-serif;
  --texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--rubor);
  color: var(--tinta-suave);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--tinta);
  font-family: var(--titulos);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--tinta);
}

strong {
  color: var(--tinta);
  font-weight: 600;
}

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

:focus-visible {
  outline: 3px solid var(--frambuesa);
  outline-offset: 3px;
  border-radius: 4px;
}

.ancho {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 28px;
}

.salto {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--tinta);
  color: var(--crema);
}

.salto:focus {
  top: 12px;
}

.rotulo {
  margin: 0 0 14px;
  color: var(--tinta-suave);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Buttons and links */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 28px;
  border: 2px solid var(--verde);
  border-radius: 999px;
  background: var(--verde);
  color: var(--crema);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

a.boton:hover {
  border-color: var(--tinta);
  background: var(--tinta);
}

.boton--espera {
  border-style: dashed;
  border-color: var(--tinta);
  background: var(--crema);
  color: var(--tinta);
}

.boton--menor {
  min-height: 40px;
  padding: 6px 18px;
  font-size: 14px;
}

.enlace {
  display: inline-block;
  padding-block: 10px;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--mostaza);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.enlace:hover {
  text-decoration-color: var(--tinta);
}

.enlace--claro {
  color: var(--crema);
}

.enlace--claro:hover {
  text-decoration-color: var(--crema);
}

/* Header */

.cab {
  border-bottom: 2px dashed var(--mostaza);
}

.cab__fila {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 72px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-right: auto;
  color: var(--tinta);
  font-family: var(--titulos);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.marca img {
  flex: none;
}

.marca span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cab__nav {
  display: flex;
  flex: none;
  gap: 28px;
}

.cab__nav a {
  padding-block: 12px;
  color: var(--tinta);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.cab__nav a:hover,
.cab__nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--mostaza);
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}

.cab__cta {
  flex: none;
}

/* Home: cover */

.portada {
  padding: 72px 0 88px;
}

.portada__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 500px;
  gap: 64px;
  align-items: start;
}

.portada h1 {
  max-width: 11em;
  font-size: clamp(44px, 6.2vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.portada__entrada {
  max-width: 34em;
  margin: 28px 0 0;
  color: var(--tinta);
  font-size: 20px;
  line-height: 1.5;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 32px;
}

.hechos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  max-width: 620px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.45;
}

.hechos li {
  padding: 16px 0;
  border-top: 2px dashed var(--rubor-hondo);
}

.hechos strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--titulos);
  font-size: 19px;
  font-weight: 700;
}

.portada__muestra {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* Small tags on a line of twine, as on the store posters */

.colgantes {
  position: relative;
  margin: 12px 0 0;
  padding: 44px 0 0;
  list-style: none;
}

.colgantes::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 30px;
  left: 17px;
  border-left: 3px dashed var(--mostaza);
}

.colgantes::after {
  content: "";
  position: absolute;
  top: 0;
  left: 11px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--mostaza);
}

.colgantes li {
  position: relative;
  margin-bottom: 28px;
  padding: 11px 10px 11px 36px;
  border: 1.5px solid var(--linea);
  border-radius: 4px 10px 10px 4px;
  background: var(--crema);
  color: var(--tinta);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.colgantes li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 4px solid var(--mostaza);
  border-radius: 50%;
  background: var(--rubor);
}

/* Captures */

.captura {
  margin: 0;
}

.captura__marco {
  overflow: hidden;
  border: 2px solid var(--tinta);
  border-radius: 22px;
  background: var(--rubor);
}

.captura img {
  display: block;
  width: 100%;
}

.captura figcaption {
  margin-top: 10px;
  color: var(--tinta-suave);
  font-size: 13px;
  line-height: 1.4;
}

.captura--recorte {
  margin-top: 22px;
}

.captura--recorte .captura__marco {
  border-width: 1.5px;
  border-radius: 14px;
}

/* Home: the walk through the app */

.recorrido {
  padding: 24px 0 72px;
}

.apertura {
  max-width: 760px;
  margin-bottom: 72px;
}

.apertura h2,
.limites h2,
.cierre h2 {
  font-size: clamp(32px, 4vw, 52px);
}

.apertura p:last-child {
  margin: 20px 0 0;
  font-size: 19px;
}

.hilos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: start;
}

.hilo {
  position: relative;
}

.hilo:nth-child(2) {
  margin-top: 120px;
}

/* The line of twine the cards hang on: it runs behind them through their eyelets */
.hilo::before {
  content: "";
  position: absolute;
  top: -40px;
  bottom: 40px;
  left: 21px;
  border-left: 3px dashed var(--mostaza);
}

.hilo::after {
  content: "";
  position: absolute;
  top: -48px;
  left: 15px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--mostaza);
}

.ficha {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  margin-bottom: 44px;
  border: 1.5px solid var(--linea);
  border-radius: 18px;
  background: var(--crema);
  scroll-margin-top: 24px;
}

.ficha__ojal {
  border-right: 1px solid var(--linea);
}

.ficha__ojal span {
  display: block;
  width: 20px;
  height: 20px;
  margin: 30px auto 0;
  border: 5px solid var(--mostaza);
  border-radius: 50%;
  background: var(--rubor);
}

.ficha__cuerpo {
  padding: 22px 28px 28px;
}

.ficha__cuerpo > p:last-child,
.ficha__cuerpo > ul:last-child {
  margin-bottom: 0;
}

.ficha__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.ficha__num {
  margin: 0;
  color: var(--rubor-hondo);
  font-family: var(--titulos);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
}

.pestanas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pestanas li {
  padding: 4px 9px;
  border: 1px solid var(--linea);
  border-radius: 3px 8px 8px 3px;
  background: var(--rubor);
  color: var(--tinta);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.ficha h3 {
  margin-bottom: 14px;
  font-size: 28px;
}

.cuenta {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1.5px solid var(--linea);
  border-radius: 14px;
  background: var(--rubor);
}

.cuenta__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0 0 8px;
  color: var(--tinta);
  font-family: var(--titulos);
  font-size: 20px;
  font-weight: 700;
}

.cuenta__titulo span,
.formula span {
  color: var(--tinta-suave);
  font-family: var(--texto);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cuenta dl {
  margin: 0;
}

.cuenta dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
}

.cuenta dd {
  margin: 0;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.cuenta .cuenta__total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 2px dashed var(--rubor-hondo);
}

.cuenta__total dd {
  font-family: var(--titulos);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.formula {
  margin: 20px 0 0;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--mostaza-palida);
  color: var(--tinta);
  font-family: var(--titulos);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.formula span {
  display: block;
  margin-bottom: 4px;
}

/* Home: the rules, on bottle green */

.reglas {
  padding: 88px 0;
  background: var(--verde);
  color: #e9dfd3;
}

.reglas h2,
.reglas .rotulo {
  color: var(--crema);
}

.reglas .rotulo {
  color: var(--mostaza);
}

.reglas :focus-visible {
  outline-color: var(--mostaza);
}

.reglas .apertura {
  margin-bottom: 48px;
}

.formulas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  margin: 0;
}

.formulas div {
  padding: 26px 0 28px;
  border-top: 2px dashed rgba(255, 250, 244, 0.32);
}

.formulas dt {
  margin-bottom: 8px;
  color: var(--mostaza);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.formulas dd {
  margin: 0;
  font-size: 16px;
}

.formulas .formulas__regla {
  margin-bottom: 10px;
  color: var(--crema);
  font-family: var(--titulos);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.15;
}

.reglas__mas {
  margin: 20px 0 0;
}

/* Home: what stays on the phone, what the app does not do */

.limites {
  padding: 88px 0 56px;
}

.limites__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 72px;
}

.limites h2 {
  font-size: clamp(30px, 3.4vw, 42px);
}

.lista {
  margin: 26px 0 20px;
  padding: 0;
  list-style: none;
}

.lista li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-top: 2px dashed var(--rubor-hondo);
}

.lista li::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 2px;
  width: 16px;
  height: 16px;
  border: 4px solid var(--mostaza);
  border-radius: 50%;
}

.lista--no li::before {
  top: 26px;
  width: 16px;
  height: 0;
  border: 0;
  border-top: 3px solid var(--frambuesa);
  border-radius: 0;
}

/* Home: closing tag */

.cierre {
  padding: 72px 0 96px;
}

.cierre__etiqueta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px 56px;
  padding: 44px 48px 44px 116px;
  border: 1.5px solid var(--linea);
  border-radius: 22px;
  background: var(--crema);
}

.lazo {
  position: absolute;
  top: -82px;
  left: 6px;
  max-width: none;
}

.cierre__texto {
  max-width: 560px;
}

.cierre__texto p:last-child {
  margin: 16px 0 0;
}

.cierre__acciones {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Footer */

.pie {
  padding: 56px 0 32px;
  background: var(--tinta);
  color: #d8cfc4;
  font-size: 15px;
}

.pie :focus-visible {
  outline-color: var(--mostaza);
}

.pie a {
  color: var(--crema);
}

.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 48px;
}

.pie__marca {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pie__marca img {
  flex: none;
}

.pie__marca p {
  margin: 0;
}

.pie__nombre {
  color: var(--crema);
  font-family: var(--titulos);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.pie__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pie__nav a,
.pie__contacto a {
  padding-block: 8px;
  text-decoration-color: rgba(255, 250, 244, 0.4);
  text-underline-offset: 4px;
}

.pie__contacto a {
  display: inline-block;
  overflow-wrap: anywhere;
}

.pie .rotulo {
  margin-bottom: 4px;
  color: var(--mostaza);
}

.pie__linea {
  margin-top: 40px;
}

.pie__linea p {
  margin: 0;
  padding-top: 20px;
  border-top: 2px dashed rgba(255, 250, 244, 0.25);
  font-size: 13.5px;
}

/* Inner pages */

.portadilla {
  padding: 64px 0 0;
}

.portadilla .ancho::after {
  content: "";
  display: block;
  margin-top: 40px;
  border-top: 2px dashed var(--mostaza);
}

.portadilla h1 {
  font-size: clamp(38px, 5vw, 64px);
}

.portadilla__texto {
  max-width: 44em;
  margin: 20px 0 0;
  color: var(--tinta);
  font-size: 19px;
}

/* Privacy */

.doc {
  display: grid;
  grid-template-columns: 250px minmax(0, 720px);
  gap: 72px;
  align-items: start;
  padding-top: 48px;
  padding-bottom: 96px;
}

.sumario {
  position: sticky;
  top: 24px;
  padding: 22px 22px 14px;
  border: 1.5px solid var(--linea);
  border-radius: 18px;
  background: var(--crema);
  font-size: 15px;
}

.sumario ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sumario a {
  display: block;
  padding: 7px 0;
  text-decoration-color: var(--mostaza);
  text-underline-offset: 4px;
}

.prosa section {
  padding: 30px 0 14px;
  border-top: 2px dashed var(--rubor-hondo);
  scroll-margin-top: 16px;
}

.prosa section:first-child {
  padding-top: 0;
  border-top: 0;
}

.prosa h2 {
  margin-bottom: 14px;
  font-size: 28px;
}

.prosa ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.prosa li {
  margin-bottom: 0.6em;
}

.prosa li::marker {
  color: var(--mostaza);
}

.prosa a {
  overflow-wrap: anywhere;
}

/* Support */

.ayuda {
  padding-top: 16px;
  padding-bottom: 96px;
}

.ayuda__bloque {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 32px 64px;
  align-items: start;
  padding: 48px 0;
  border-top: 2px dashed var(--rubor-hondo);
  scroll-margin-top: 8px;
}

.ayuda__bloque:first-child {
  border-top: 0;
}

.ayuda__lado h2 {
  font-size: 34px;
}

.ayuda__lado p:last-child {
  margin: 14px 0 0;
  font-size: 15px;
}

.pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.pasos li {
  position: relative;
  min-height: 40px;
  margin-bottom: 18px;
  padding: 6px 0 0 58px;
  counter-increment: paso;
}

.pasos li::before {
  content: counter(paso);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 4px solid var(--mostaza);
  border-radius: 50%;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--titulos);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.normas {
  display: grid;
  gap: 24px;
}

.ficha--norma {
  margin-bottom: 0;
}

.ficha--norma h3,
.ficha--norma h2 {
  margin-bottom: 12px;
  font-size: 26px;
}

.ficha--norma p,
.ficha--norma li {
  font-size: 15.5px;
}

.ficha--norma ul {
  margin: 0;
  padding-left: 1.2em;
}

.ficha--norma li::marker {
  color: var(--mostaza);
}

.dudas {
  margin: 0;
}

.dudas div {
  padding: 18px 0;
  border-top: 2px dashed var(--rubor-hondo);
}

.dudas div:first-child {
  padding-top: 0;
  border-top: 0;
}

.dudas dt {
  margin-bottom: 6px;
  color: var(--tinta);
  font-family: var(--titulos);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
}

.dudas dd {
  margin: 0;
}

.contacto {
  position: relative;
  margin-top: 36px;
  padding: 34px 36px 30px 116px;
  border: 1.5px solid var(--linea);
  border-radius: 22px;
  background: var(--crema);
}

.contacto p {
  margin: 0;
}

.contacto__correo {
  padding: 6px 0 12px;
  font-family: var(--titulos);
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.contacto__correo a {
  text-decoration-color: var(--mostaza);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.contacto__nota {
  font-size: 15px;
}

/* Changelog, 404 */

.novedades {
  max-width: 820px;
  margin-left: max(0px, calc((100% - 1180px) / 2));
  padding-top: 48px;
  padding-bottom: 96px;
}

.aviso {
  padding-top: 40px;
  padding-bottom: 96px;
}

.aviso p {
  margin-bottom: 12px;
}

/* Narrower screens */

@media (max-width: 1040px) {
  .portada__rejilla {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 40px;
  }

  .portada__muestra {
    grid-template-columns: minmax(0, 1fr);
  }

  .colgantes {
    display: none;
  }

  .hilos {
    gap: 32px;
  }

  .doc {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 40px;
  }

  .ayuda__bloque {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 32px 40px;
  }
}

@media (max-width: 860px) {
  .cab__largo,
  .cab__cta {
    display: none;
  }

  .portada__rejilla,
  .hilos,
  .limites__rejilla,
  .doc,
  .ayuda__bloque {
    grid-template-columns: minmax(0, 1fr);
  }

  .hilo:nth-child(2) {
    margin-top: 0;
  }

  .hilo:nth-child(2)::before {
    top: -44px;
  }

  .hilo:nth-child(2)::after {
    display: none;
  }

  .sumario {
    position: static;
  }

  .cierre__etiqueta {
    flex-direction: column;
    align-items: flex-start;
  }

  .pie__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pie__marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 16px;
  }

  .ancho {
    padding-inline: 18px;
  }

  .cab__fila {
    gap: 14px;
    min-height: 60px;
  }

  .marca {
    gap: 8px;
    font-size: 16px;
  }

  .marca img {
    width: 30px;
    height: 30px;
  }

  .cab__nav {
    gap: 14px;
  }

  .cab__nav a {
    font-size: 14.5px;
  }

  .portada {
    padding: 40px 0 56px;
  }

  .portada__rejilla {
    gap: 36px;
  }

  .portada__entrada {
    margin-top: 20px;
    font-size: 18px;
  }

  .portada__acciones {
    margin-top: 24px;
  }

  .hechos {
    gap: 0 20px;
    margin-top: 32px;
    font-size: 14px;
  }

  .hechos li {
    padding: 12px 0;
  }

  .hechos strong {
    font-size: 17px;
  }

  /* On phones a capture is a short window on the top of the cut, closed at the end of a block */
  .captura--portada .captura__marco {
    aspect-ratio: 1280 / 1250;
  }

  .recorrido {
    padding: 8px 0 32px;
  }

  .apertura {
    margin-bottom: 64px;
  }

  .apertura p:last-child {
    font-size: 17px;
  }

  .ficha {
    grid-template-columns: 34px minmax(0, 1fr);
    margin-bottom: 28px;
  }

  .hilo::before {
    left: 15px;
  }

  .hilo::after {
    left: 9px;
  }

  .hilo:nth-child(2)::before {
    top: -28px;
  }

  .ficha__ojal span {
    width: 18px;
    height: 18px;
    margin-top: 26px;
  }

  .ficha__cuerpo {
    padding: 16px 16px 20px;
  }

  .ficha__cabeza {
    margin-bottom: 10px;
  }

  .ficha__num {
    font-size: 40px;
  }

  .pestanas li {
    padding: 3px 6px;
    font-size: 10.5px;
    letter-spacing: 0.05em;
  }

  .ficha h3 {
    margin-bottom: 10px;
    font-size: 23px;
  }

  .captura--recorte {
    margin-top: 16px;
  }

  #asistente .captura__marco {
    aspect-ratio: 1280 / 710;
  }

  #criterios .captura__marco {
    aspect-ratio: 1280 / 765;
  }

  #calendario .captura__marco {
    aspect-ratio: 1280 / 790;
  }

  #presupuesto .captura__marco {
    aspect-ratio: 1280 / 715;
  }

  /* Kept short on phones: the export cut and the small print of the rules are left to wider screens */
  #exportar .captura,
  .formulas dd:last-child {
    display: none;
  }

  .formulas .formulas__regla {
    margin-bottom: 0;
  }

  .formula {
    font-size: 17px;
  }

  .reglas {
    padding: 56px 0;
  }

  .formulas {
    grid-template-columns: minmax(0, 1fr);
  }

  .formulas div {
    padding: 20px 0;
  }

  .formulas .formulas__regla {
    font-size: 23px;
  }

  .limites {
    padding: 56px 0 32px;
  }

  .limites__rejilla {
    gap: 40px;
  }

  .cierre {
    padding: 72px 0 64px;
  }

  .cierre__etiqueta {
    gap: 20px;
    padding: 56px 20px 24px;
  }

  .lazo {
    top: -84px;
    left: -6px;
  }

  .pie {
    padding-top: 40px;
  }

  .pie__rejilla {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .pie__linea {
    margin-top: 24px;
  }

  .portadilla {
    padding-top: 40px;
  }

  .portadilla .ancho::after {
    margin-top: 28px;
  }

  .portadilla__texto {
    font-size: 17px;
  }

  .doc {
    padding-top: 28px;
    padding-bottom: 56px;
  }

  .prosa h2 {
    font-size: 24px;
  }

  .ayuda {
    padding-bottom: 56px;
  }

  .ayuda__bloque {
    gap: 20px;
    padding: 36px 0;
  }

  .ayuda__lado h2 {
    font-size: 28px;
  }

  .contacto {
    margin-top: 72px;
    padding: 56px 20px 22px;
  }

  .novedades {
    padding-top: 28px;
    padding-bottom: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}