/* Landing de Patalia (patalia.online). Un solo archivo: sin estilos en línea, así la CSP queda en style-src 'self'.
   Colores y tipografía tomados de la app (css/base.css). */

@font-face {
  font-family: Gabarito;
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(../fonts/gabarito-latin.woff2) format('woff2');
}

@font-face {
  font-family: Caveat;
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/caveat-latin.woff2) format('woff2');
}

:root {
  --teal: #078985;
  --teal-ink: #066f6b;
  --dark: #163342;
  --muted: #4a6470;
  --bg: #f8fbfb;
  --line: #e2eded;
  --mint: #e2f6f2;
  --paper: #fff3d9;
  --coral: #f57970;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--dark);
  line-height: 1.5;
  overflow-x: hidden;
}

a {
  color: var(--teal-ink);
}

a:hover {
  color: var(--dark);
}

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, p, ul, ol {
  margin: 0;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  background: var(--dark);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
}

.skip:focus {
  top: 12px;
  color: #fff;
}

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding-inline: 32px;
}

.disp {
  font-family: Gabarito, system-ui, sans-serif;
}

.hand {
  font-family: Caveat, cursive;
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 16px;
  background: var(--teal-ink);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  text-align: center;
}

.btn:hover {
  background: var(--dark);
  color: #fff;
}

.btn.sm {
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
  border-radius: 13px;
}

.btn.caps {
  text-transform: uppercase;
  letter-spacing: .4px;
}

.btn.full {
  width: 100%;
}

.btn.wide {
  min-width: 220px;
}

/* Encabezado */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--dark);
}

.logoMark {
  width: 38px;
  height: 38px;
  flex: none;
}

.wordmark {
  font-family: Gabarito, system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.8px;
  color: var(--dark);
}

.wordmark span {
  color: var(--teal);
}

.topNav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.navLink {
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

.navLink.strong {
  font-weight: 800;
}

/* Hero */
.hero {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-top: 56px;
  padding-bottom: 96px;
}

.heroText {
  flex: 1 1 460px;
  min-width: 0;
}

.heroArt {
  flex: 1 1 520px;
  min-width: 0;
  position: relative;
  height: 620px;
}

.h1 {
  font-size: 76px;
  line-height: .98;
  letter-spacing: -2.6px;
  font-weight: 800;
  margin-bottom: 24px;
  max-width: 9ch;
}

.lead {
  font-size: 20px;
  color: var(--muted);
  margin-bottom: 36px;
  max-width: 30ch;
}

.heroPrice {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.priceFig {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  line-height: 1;
}

.priceFig .cur {
  font-size: 30px;
  font-weight: 700;
  margin-top: 8px;
}

.priceFig .amt {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -2px;
}

.priceFig .mxn {
  font-size: 18px;
  font-weight: 700;
  margin-top: 12px;
  color: var(--muted);
}

.priceFig.big {
  margin: 18px 0 6px;
}

.priceFig.big .cur {
  font-size: 34px;
  margin-top: 10px;
}

.priceFig.big .amt {
  font-size: 96px;
  letter-spacing: -3px;
}

.priceFig.big .mxn {
  font-size: 20px;
  margin-top: 16px;
}

.priceNote {
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
}

.payMini {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.payMini .marks {
  gap: 6px;
}

.payMini .mark {
  height: 28px;
  min-width: 44px;
  padding: 0 5px;
}

.payMini .mark.spei {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .5px;
}

.payMini .txt {
  font-size: 14px;
  color: var(--muted);
}

.ctaRow {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.ctaRow .more {
  font-weight: 700;
  font-size: 16px;
}

.ctaNote {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

/* La libreta de papel */
.paper {
  position: absolute;
  left: 0;
  top: 70px;
  width: 320px;
  height: 460px;
  background: var(--paper);
  border-radius: 6px 14px 14px 6px;
  border-left: 10px solid #e8cf98;
  transform: rotate(-8deg);
  box-shadow: 0 1px 0 #e9d9b5, 0 24px 50px -20px #8a6a2a55;
  padding: 26px 24px;
}

.paperHead {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1.5px solid #e3c98f;
  padding-bottom: 10px;
  margin-bottom: 14px;
  font-weight: 800;
  font-size: 13px;
  color: #7a5a17;
  letter-spacing: .3px;
}

.paperHead svg {
  width: 20px;
  height: 20px;
  fill: #b88a2c;
}

.paperFields {
  display: grid;
  grid-template-columns: 64px 1fr;
  row-gap: 4px;
  font-size: 11px;
  color: #7a5a17;
  margin-bottom: 16px;
}

.handVal {
  font-family: Caveat, cursive;
  font-size: 22px;
  line-height: .9;
  color: #1d3c74;
  border-bottom: 1px dotted #c9ad6c;
}

.paperRows {
  display: grid;
  gap: 12px;
}

.paperRow {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #ecdcb8;
  padding-bottom: 10px;
}

.handDate {
  font-family: Caveat, cursive;
  font-size: 20px;
  color: #1d3c74;
  width: 70px;
}

.sticker {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border-radius: 3px;
  padding: 6px 8px 5px;
  box-shadow: 0 1px 2px #8a6a2a40;
  font-size: 10px;
  line-height: 1.2;
  width: 104px;
  transform: rotate(-3deg);
}

.sticker.r2 {
  transform: rotate(2deg);
}

.sticker.r3 {
  transform: rotate(-1deg);
  opacity: .9;
}

.barcode {
  height: 12px;
  background: repeating-linear-gradient(90deg, #163342 0 1px, transparent 1px 3px, #163342 3px 5px, transparent 5px 6px);
}

.stamp {
  position: absolute;
  right: 22px;
  bottom: 30px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 2.5px solid #066f6bbb;
  color: #066f6bcc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(14deg);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  line-height: 1.15;
}

.stamp b {
  font-size: 15px;
}

.heroNote {
  position: absolute;
  left: -20px;
  top: 556px;
  font-size: 25px;
  line-height: 1;
  color: var(--teal-ink);
  transform: rotate(-4deg);
}

.heroArrow {
  position: absolute;
  left: 168px;
  top: 524px;
}

/* Teléfonos */
.ph {
  position: absolute;
  right: 8px;
  top: 0;
  width: 290px;
  height: 600px;
  border-radius: 44px;
  background: var(--dark);
  padding: 10px;
  box-shadow: 0 40px 80px -30px #16334288;
}

.mini {
  position: relative;
  width: 270px;
  height: 520px;
  border-radius: 40px;
  background: var(--dark);
  padding: 9px;
  box-shadow: 0 30px 60px -30px #16334277;
}

.scr {
  width: 100%;
  height: 100%;
  border-radius: 35px;
  background: var(--bg);
  overflow: hidden;
  position: relative;
  font-size: 11px;
  line-height: 1.35;
}

/* Interfaz de la app dentro del teléfono (copia reducida de los estilos de la app) */
.aTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 16px 10px;
  border-bottom: 1px solid var(--line);
}

.aBrand {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.5px;
  display: flex;
  align-items: center;
}

.aBrand span {
  color: var(--teal);
}

.aBrand svg {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

.aIcon {
  background: var(--mint);
  color: #076b68;
  border-radius: 10px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700;
}

.aBody {
  padding: 13px 14px;
}

.aEye {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 800;
  color: #5d7580;
}

.aH2 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.5px;
  margin: 2px 0 10px;
}

.aH3 {
  font-size: 12.5px;
  font-weight: 800;
  margin: 14px 0 7px;
}

.aH3 small {
  font-size: 10px;
  color: #5d7580;
  font-weight: 400;
}

.aTabs {
  display: flex;
  gap: 5px;
  overflow: hidden;
  margin-bottom: 9px;
}

.aTabs span {
  border-radius: 30px;
  padding: 6px 9px;
  background: #eaf1f2;
  color: #4b6e74;
  font-size: 10px;
  white-space: nowrap;
}

.aTabs span.on {
  background: var(--teal);
  color: #fff;
}

.aBtn {
  display: block;
  text-align: center;
  border-radius: 11px;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 9px;
}

.aBtn.mb {
  margin-bottom: 10px;
}

.aCard {
  background: #fff;
  border: 1px solid #e7eeee;
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 9px;
}

.aItem {
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
}

.aItem:last-child {
  border-bottom: 0;
}

.aItem b {
  display: block;
  font-size: 11.5px;
}

.aMeta {
  font-size: 9.5px;
  color: #5d7580;
}

.aMeta.mt {
  margin-top: 3px;
}

.aMeta.ink {
  margin-top: 3px;
  color: var(--dark);
}

.aChip {
  display: inline-block;
  border-radius: 99px;
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 800;
  background: #dcf5ec;
  color: #15816a;
}

.aChip.warn {
  background: #fff2d7;
  color: #7d5a10;
}

.aItem .aChip {
  margin-top: 4px;
}

.aSm {
  display: inline-block;
  border-radius: 9px;
  padding: 5px 7px;
  font-size: 9px;
  font-weight: 700;
  background: #e7f5f3;
  color: #087d77;
  margin: 6px 4px 0 0;
}

.aSm.g {
  background: #f1f5f5;
  color: var(--dark);
}

.tl {
  padding-left: 16px;
}

.tl .aItem {
  border-left: 2px solid #d5ede8;
  padding-left: 13px;
  position: relative;
}

.tl .aItem::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  border: 3px solid #def3ef;
}

.aNav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #ffffffee;
  border-top: 1px solid var(--line);
  padding: 7px 2px 16px;
}

.aNav span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 8.5px;
  font-weight: 700;
  color: #7e9198;
}

.aNav span.on {
  color: var(--teal);
}

.aNav svg {
  width: 17px;
  height: 17px;
}

/* Pantalla de Inicio */
.aPet {
  background: #e4f6f3;
  border: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.aAvatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #f3c98a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aAvatar svg {
  width: 28px;
  height: 28px;
  fill: #8a5a16;
}

.aPetName {
  font-size: 15px;
  font-weight: 800;
}

.aSoon {
  background: #fff7e5;
  border: 0;
}

.aRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.aRow.top {
  align-items: flex-start;
}

.aSoon b {
  font-size: 11px;
}

.aSoonTitle {
  font-size: 11px;
  margin-top: 4px;
}

.aQuick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.aQuick span {
  border-radius: 12px;
  padding: 10px 2px;
  text-align: center;
  font-size: 8.5px;
  font-weight: 700;
  background: #e0f4f0;
}

.aQuick span:nth-child(2) {
  background: #e4f0ff;
}

.aQuick span:nth-child(3) {
  background: #ffeae5;
}

.aQuick span:nth-child(4) {
  background: #eee9fe;
}

.aStats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.aStat {
  background: #eff7f7;
  border-radius: 12px;
  padding: 10px;
}

.aStatVal {
  font-size: 15px;
  font-weight: 800;
}

/* Pantalla de Medicinas */
.aLogs {
  margin-top: 9px;
  padding: 9px;
  border-radius: 11px;
  background: #f3f8f8;
}

.aLogs b {
  display: inline;
  font-size: 10px;
}

.aLog {
  border-top: 1px solid #e0ebeb;
  padding: 6px 0;
}

.aLog:first-of-type {
  margin-top: 5px;
}

.aLogMore {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  background: #f1f5f5;
  border-radius: 8px;
  padding: 5px;
}

/* Pantalla de Gastos */
.aTotal {
  background: #e6f6f2;
  border: 0;
}

.aTotalVal {
  font-size: 24px;
  font-weight: 850;
}

.aCard > b {
  font-size: 10.5px;
}

.aChart {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
  align-items: end;
  height: 76px;
  margin-top: 10px;
  border-bottom: 1px solid #d1e5e2;
}

.aChart span {
  background: #55b6af;
  border-radius: 3px 3px 0 0;
}

.aChart span:nth-child(1) { height: 48%; }
.aChart span:nth-child(2) { height: 30%; }
.aChart span:nth-child(3) { height: 92%; }
.aChart span:nth-child(4) { height: 41%; }
.aChart span:nth-child(5) { height: 36%; }
.aChart span:nth-child(6) { height: 58%; }
.aChart span:nth-child(7) { height: 33%; }
.aChart span:nth-child(8) { height: 45%; }
.aChart span:nth-child(9) { height: 70%; }
.aChart span:nth-child(10) { height: 62%; background: var(--teal); }

.aMonths {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
  font-size: 7.5px;
  color: #5d7580;
  text-align: center;
  margin-top: 3px;
}

.aMonths span:last-child {
  color: var(--teal);
  font-weight: 800;
}

.aCats {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.aCats .aRow {
  font-size: 9.5px;
}

.aBar {
  height: 6px;
  background: #e6eeee;
  border-radius: 9px;
  margin-top: 3px;
}

.aBar i {
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: 9px;
}

.aCats > div:nth-child(1) .aBar i { width: 51%; }
.aCats > div:nth-child(2) .aBar i { width: 41%; }
.aCats > div:nth-child(3) .aBar i { width: 8%; }

.aCats.sep > div:nth-child(1) .aBar i { width: 55%; }
.aCats.sep > div:nth-child(2) .aBar i { width: 36%; }
.aCats.sep > div:nth-child(3) .aBar i { width: 9%; }

/* Escenas de los mockups. Cada .sw apila el estado A (el de siempre) y el B (después del
   toque) en la misma celda; sin movimiento solo se ve A y el dedo, el aviso y la
   notificación no existen. La animación vive en el bloque "Movimiento". */
.sw {
  display: grid;
}

.sw > * {
  grid-area: 1 / 1;
  min-width: 0;
}

.sw > :last-child {
  visibility: hidden;
  opacity: 0;
}

.tap,
.aToast,
.aNoti {
  display: none;
}

/* El dedo va dentro de lo que toca, así siempre cae encima */
.tapHost,
.aChart span {
  position: relative;
}

.tap {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: #16334255;
  border: 2px solid #ffffffd9;
  box-shadow: 0 3px 8px #16334240;
  pointer-events: none;
}

.tap::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid #16334270;
  opacity: 0;
}

.aAvatar.gato {
  background: #cfdcf5;
}

.aAvatar.gato svg {
  fill: #3d5a8a;
}

/* Resaltado de la barra tocada y de la que se apaga */
.aChart span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
}

.aChart span:nth-child(9)::after {
  background: var(--teal);
}

.aChart span:nth-child(10)::after {
  background: #55b6af;
}

.aToast {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  width: max-content;
  margin-inline: auto;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 8px 18px -8px #16334288;
}

.aNoti {
  position: absolute;
  top: 14px;
  left: 12px;
  right: 12px;
  z-index: 3;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 14px;
  background: #fffffff2;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px -10px #16334277;
}

.aNoti svg {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 4px;
  border-radius: 8px;
  background: var(--mint);
}

.aNoti b {
  display: block;
  font-size: 8px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #5d7580;
}

.aNoti span {
  font-size: 10.5px;
  font-weight: 700;
}

/* Secciones */
.sec {
  padding-block: 110px;
}

.sec.white {
  background: #fff;
  border-top: 1px solid var(--line);
}

.h2 {
  font-size: 52px;
  line-height: 1.04;
  letter-spacing: -1.6px;
  font-weight: 800;
  margin-bottom: 18px;
  max-width: 16ch;
}

.sub {
  font-size: 19px;
  color: var(--muted);
  max-width: 44ch;
}

.feat {
  display: flex;
  align-items: center;
  gap: 72px;
  margin-top: 96px;
}

/* Sin encabezado en la sección, la primera función arranca con el padding de .sec */
.feat:first-child {
  margin-top: 0;
}

.feat.rev {
  flex-direction: row-reverse;
}

.featText {
  flex: 1 1 420px;
  min-width: 0;
}

.featArt {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  justify-content: center;
  position: relative;
}

.blob {
  position: absolute;
  inset: 40px 30px;
  border-radius: 40px;
  background: var(--mint);
}

.blob.lav { background: #eee9fe; }
.blob.cream { background: var(--paper); }
.blob.peach { background: #ffeae5; }

.h3 {
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -.8px;
  font-weight: 700;
  margin-bottom: 14px;
}

.featText p {
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 18px;
  max-width: 38ch;
}

.ticks {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 16px;
}

.ticks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ticks svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

/* Datos en el celular */
.dark {
  background: var(--dark);
  color: #fff;
}

.dark .h2 {
  color: #fff;
}

.dark .sub {
  color: #c9dbe0;
}

.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin-top: 64px;
}

.trio svg {
  width: 44px;
  height: 44px;
}

.trio h3 {
  font-size: 22px;
  margin: 16px 0 8px;
  font-weight: 700;
}

.trio p {
  color: #c9dbe0;
  font-size: 16px;
}

/* Precio y formas de pago */
.payGrid {
  display: flex;
  gap: 40px;
  align-items: stretch;
  margin-top: 56px;
  flex-wrap: wrap;
}

.priceCard {
  flex: 1 1 380px;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.priceBg {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 220px;
  height: 220px;
  fill: var(--teal);
  opacity: .08;
}

.priceName {
  font-size: 22px;
  font-weight: 700;
}

.priceCard .priceTag {
  margin-bottom: 28px;
  font-size: 17px;
  font-weight: 600;
}

.priceCard .ticks {
  margin-bottom: 32px;
}

.methods {
  flex: 1.3 1 460px;
  min-width: 0;
  display: grid;
  gap: 14px;
  align-content: start;
}

.method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 24px;
  flex-wrap: wrap;
}

.method h3 {
  font-size: 18px;
  font-weight: 700;
}

.method p {
  margin-top: 2px;
  font-size: 14px;
  color: var(--muted);
}

.marks {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.mark {
  height: 40px;
  min-width: 62px;
  border-radius: 7px;
  border: 1px solid #dfe7e8;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  color: var(--dark);
}

.mark.spei {
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .6px;
}

/* Pasos */
.steps {
  list-style: none;
  padding: 0;
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  counter-reset: paso;
}

.steps li {
  position: relative;
  padding-top: 74px;
}

.steps li::before {
  counter-increment: paso;
  content: counter(paso);
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--teal-ink);
  font-family: Gabarito, sans-serif;
  font-weight: 800;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps li::after {
  content: "";
  position: absolute;
  top: 26px;
  left: 64px;
  right: -16px;
  border-top: 2px dashed #b9dcd6;
}

.steps li:last-child::after {
  display: none;
}

.steps h3 {
  font-size: 21px;
  margin-bottom: 6px;
  font-weight: 700;
}

.steps p {
  color: var(--muted);
  font-size: 16px;
}

/* Preguntas */
.faq {
  max-width: 780px;
  margin-top: 48px;
  border-top: 1px solid #dbe7e7;
}

.faq details {
  border-bottom: 1px solid #dbe7e7;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  font-size: 19px;
  font-weight: 700;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-size: 26px;
  font-weight: 400;
  color: var(--teal-ink);
  flex: none;
}

.faq details[open] summary::after {
  content: "–";
}

.faq p {
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 17px;
  max-width: 62ch;
}

/* Cierre */
.closingWrap {
  padding-bottom: 110px;
}

.closing {
  background: var(--mint);
  border-radius: 32px;
  padding: 56px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.closingText {
  min-width: 0;
  flex: 1 1 380px;
}

.closingTitle {
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -1.2px;
  margin-bottom: 10px;
  font-weight: 800;
}

.closingText p {
  font-size: 18px;
  color: #3d5762;
}

.closingCta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #3d5762;
}

.closingCta .btn {
  min-width: 240px;
}

/* Pie */
.foot {
  border-top: 1px solid var(--line);
  padding: 56px 0 64px;
}

.footRow {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.foot .wordmark {
  font-size: 22px;
  letter-spacing: -.6px;
}

.footTag {
  margin-top: 4px;
  color: var(--muted);
  font-size: 15px;
}

.footLinks {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 15px;
}

.legal {
  margin-top: 36px;
  font-size: 13px;
  color: var(--muted);
  max-width: 70ch;
}

/* Aviso de privacidad y página de error */
.docTop {
  max-width: 700px;
  padding-inline: 24px;
}

.docTop .wordmark {
  font-size: 22px;
  letter-spacing: -.6px;
}

.doc {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px 96px;
  line-height: 1.6;
}

.doc h1 {
  font-family: Gabarito, system-ui, sans-serif;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -1.2px;
  margin: 0 0 12px;
  font-weight: 800;
}

.doc h2 {
  font-family: Gabarito, system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: -.4px;
  margin: 44px 0 10px;
  font-weight: 700;
}

.doc p,
.doc li {
  font-size: 16px;
  color: #2f4a57;
}

.doc p {
  margin: 0 0 12px;
}

.doc ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.doc li {
  margin-bottom: 6px;
}

.doc .updated,
.doc .contact {
  color: var(--muted);
}

.doc .contact {
  margin-top: 48px;
  font-size: 14px;
}

.draft {
  background: var(--paper);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 12px 0 32px;
  font-size: 14px;
  color: #6b4d0f;
}

.todo {
  background: var(--paper);
  color: #6b4d0f;
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 600;
}

.lost {
  padding-block: 80px 120px;
}

.lost .h2 {
  margin-bottom: 14px;
}

.lost .sub {
  margin-bottom: 32px;
}

@media (max-width: 760px) {
  .wrap {
    padding-inline: 20px;
  }
  .hideM {
    display: none;
  }
  /* En celular el encabezado conserva "Iniciar sesión" junto al botón de compra */
  .logo {
    gap: 8px;
  }
  .wordmark {
    font-size: 21px;
  }
  .top {
    gap: 10px;
  }
  .topNav {
    gap: 12px;
  }
  .navLink {
    font-size: 14px;
    white-space: nowrap;
  }
  .top .btn.sm {
    padding: 0 13px;
    font-size: 14px;
    white-space: nowrap;
  }
  .hero {
    flex-direction: column;
    align-items: stretch;
    padding-top: 28px;
    padding-bottom: 64px;
    gap: 0;
  }
  /* Como hijos del flex sus márgenes ya no se colapsan: el precio ya deja su espacio */
  .heroText > .payMini {
    margin-top: 0;
  }
  /* Debajo del botón va la nota del precio y al final "Cómo funciona" */
  .ctaRow {
    display: contents;
  }
  .ctaRow .btn {
    order: 3;
    align-self: flex-start;
    margin-top: 24px;
  }
  .heroText > .ctaNote {
    order: 4;
  }
  .ctaRow .more {
    order: 5;
    align-self: flex-start;
    margin-top: 16px;
  }
  /* En celular la libreta y el teléfono van justo después del título y el subtítulo, y
     abajo el precio, las formas de pago y el botón: heroText se "disuelve" para que sus
     hijos y heroArt se ordenen juntos. El escritorio no cambia. */
  .heroText {
    display: contents;
  }
  .heroText > * {
    order: 2;
  }
  .heroText > .h1,
  .heroText > .lead {
    order: 0;
  }
  .heroArt {
    order: 1;
  }
  .h1 {
    font-size: 50px;
    letter-spacing: -1.6px;
    margin-bottom: 18px;
  }
  .lead {
    font-size: 18px;
    margin-bottom: 26px;
  }
  /* La composición del hero se reduce completa (libreta + teléfono) en lugar de reacomodarse:
     mide 500 × 620 y se escala; el margen negativo recupera el alto que deja la escala. */
  .hero {
    overflow: hidden;
  }
  .heroArt {
    flex: none;
    width: 500px;
    height: 620px;
    margin-left: 12px;
    transform: scale(.69);
    transform-origin: top left;
    margin-bottom: -170px;
  }
  .heroArrow {
    display: none;
  }
  .sec {
    padding-block: 72px;
  }
  .h2 {
    font-size: 36px;
    letter-spacing: -1px;
  }
  .sub {
    font-size: 17px;
  }
  .feat,
  .feat.rev {
    flex-direction: column;
    gap: 36px;
    margin-top: 72px;
  }
  .featText {
    flex: none;
  }
  .h3 {
    font-size: 27px;
  }
  .featText p {
    font-size: 17px;
  }
  .trio {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    margin-top: 44px;
  }
  .priceCard {
    padding: 30px 26px;
  }
  .priceFig.big .amt {
    font-size: 80px;
  }
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-top: 44px;
  }
  .steps li {
    padding: 0 0 0 72px;
    min-height: 52px;
  }
  .steps li::after {
    top: 60px;
    left: 25px;
    right: auto;
    bottom: -28px;
    border-top: 0;
    border-left: 2px dashed #b9dcd6;
  }
  .faq summary {
    font-size: 17px;
    padding: 18px 0;
  }
  .faq p {
    font-size: 16px;
  }
  .closingWrap {
    padding-bottom: 72px;
  }
  .closing {
    padding: 40px 26px;
  }
  .closingTitle {
    font-size: 32px;
  }
  .closingCta {
    width: 100%;
  }
  .closingCta .btn {
    width: 100%;
    min-width: 0;
  }
  .doc h1 {
    font-size: 36px;
  }
}

/* En los celulares más angostos el logo queda solo con el ícono para que quepa el encabezado */
@media (max-width: 380px) {
  .logoMark + .wordmark {
    display: none;
  }
}

@media (max-width: 370px) {
  .heroArt {
    transform: scale(.62);
    margin-bottom: -214px;
  }
}

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

/* Movimiento. Solo CSS y solo si el sistema no pide reducir animaciones; se anima opacity,
   translate, scale, rotate y clip-path (propiedades sueltas: se suman al transform que ya
   rota la libreta, las etiquetas y la nota, y a la escala del hero en celular). */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --ease: cubic-bezier(.2, .7, .2, 1);
    interpolate-size: allow-keywords;
  }

  /* Hero: la libreta llega, se pegan las etiquetas, cae el sello y aparece el teléfono */
  .heroText > * {
    animation: sube .6s var(--ease) backwards;
  }
  .heroText > :nth-child(2) { animation-delay: 80ms; }
  .heroText > :nth-child(3) { animation-delay: 160ms; }
  .heroText > :nth-child(4) { animation-delay: 240ms; }
  .heroText > :nth-child(5) { animation-delay: 320ms; }
  .heroText > :nth-child(6) { animation-delay: 400ms; }
  /* En celular .ctaRow no tiene caja (display: contents): se animan sus hijos */
  @media (max-width: 760px) {
    .ctaRow > * {
      animation: sube .6s var(--ease) 320ms backwards;
    }
  }

  .paper {
    animation: llegaLibreta .7s var(--ease) .15s backwards;
  }
  .sticker {
    animation: pega .45s var(--ease) .6s backwards;
  }
  .sticker.r2 { animation-delay: .72s; }
  .sticker.r3 { animation-delay: .84s; }
  .stamp {
    animation: sella .4s cubic-bezier(.3, 1.4, .5, 1) 1s backwards;
  }
  .ph {
    animation: subeTel .8s var(--ease) .3s backwards;
  }
  .heroNote {
    animation: escribe .6s ease-out 1.15s backwards;
  }
  .heroArrow {
    animation: escribe .45s ease-out 1.35s backwards;
  }

  /* Botones y enlaces */
  .btn {
    transition: background-color .2s, translate .2s var(--ease), scale .1s, box-shadow .2s;
  }
  .btn:hover {
    translate: 0 -2px;
    box-shadow: 0 10px 22px -10px #16334288;
  }
  .btn:active {
    scale: .97;
  }
  .navLink {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
    transition: background-size .3s var(--ease);
  }
  .navLink:hover {
    background-size: 100% 2px;
  }

  /* Brillo que cruza el botón de compra */
  .priceCard .btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .priceCard .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 30%, #ffffff38 50%, transparent 70%);
    translate: -100% 0;
    pointer-events: none;
    animation: brillo 4s var(--ease) 2s infinite;
  }

  /* El chip de "Próximo en la agenda" late */
  .aSoon .aChip {
    animation: late 3s ease-out 1.5s infinite;
  }

  /* Preguntas: abren y cierran con transición donde el navegador lo permite */
  .faq summary::after {
    transition: rotate .3s var(--ease);
  }
  .faq details[open] summary::after {
    rotate: 180deg;
  }
  @supports selector(::details-content) {
    .faq details::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size .35s var(--ease), content-visibility .35s allow-discrete;
    }
    .faq details[open]::details-content {
      block-size: auto;
    }
  }

  /* Escenas de los mockups: todo lo de un mockup dura --ciclo y se repite, así los
     porcentajes de sus keyframes van juntos (el toque cae al 31 %, el cambio al 33-37 %). */
  .mMeds,
  .mAgenda,
  .mGastos,
  .mCartilla { --ciclo: 6s; }
  .mInicio { --ciclo: 7s; }

  .tap,
  .aToast {
    display: block;
    opacity: 0;
  }
  .aNoti {
    display: flex;
    opacity: 0;
  }
  .sw > :last-child {
    visibility: visible;
  }
  .tap {
    animation: toque var(--ciclo) infinite;
  }
  .tap::after {
    animation: onda var(--ciclo) infinite;
  }
  .sw > :first-child {
    animation: swA var(--ciclo) infinite;
  }
  .sw > :last-child {
    animation: swB var(--ciclo) infinite;
  }

  /* Inicio: dos toques en "Cambiar", a Michi y de regreso */
  .mInicio .tap { animation-name: toque2; }
  .mInicio .tap::after { animation-name: onda2; }
  .mInicio .sw > :first-child { animation-name: swA2; }
  .mInicio .sw > :last-child { animation-name: swB2; }

  /* Medicinas: la toma nueva destella al llegar */
  .mMeds .nuevo {
    animation: destello var(--ciclo) infinite;
  }

  /* Agenda: aviso de "agregado" y luego la notificación del celular */
  .mAgenda .aToast {
    animation: aviso var(--ciclo) infinite;
  }
  .mAgenda .aNoti {
    animation: noti var(--ciclo) infinite;
  }

  /* Gastos: septiembre se enciende, octubre se apaga, y sus etiquetas también */
  .mGastos .aChart span:nth-child(9)::after,
  .mGastos .aChart span:nth-child(10)::after {
    animation: enciende var(--ciclo) infinite;
  }
  .mGastos .aMonths span:nth-child(9) {
    animation: mesOn var(--ciclo) infinite;
  }
  .mGastos .aMonths span:nth-child(10) {
    animation: mesOff var(--ciclo) infinite;
  }

  /* Cartilla del hero: sin dedo; empieza después de la entrada y el nombre se escribe */
  .mCartilla .sw > * {
    animation-delay: 1s;
  }
  .mCartilla .nuevo b {
    animation: teclea var(--ciclo) 1s infinite;
  }

  /* Al hacer scroll. Sin soporte (Firefox) todo se ve normal desde el inicio. */
  @supports (animation-timeline: view()) {
    .sec .h2,
    .sec .sub,
    .featText,
    .ticks li,
    .featArt .mini,
    .closing {
      animation: sube linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 25%;
    }
    .ticks li:nth-child(2) { animation-range: entry 25% cover 30%; }
    .ticks li:nth-child(3) { animation-range: entry 40% cover 35%; }
    .ticks li:nth-child(4) { animation-range: entry 55% cover 40%; }
    .featArt .mini { animation-range: entry 15% cover 35%; }

    .featArt .blob {
      animation: crece linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    /* Gráficas de Gastos */
    .aChart span {
      transform-origin: bottom;
      animation: barraV linear both;
      animation-timeline: view();
    }
    .aChart span:nth-child(1) { animation-range: cover 10% cover 24%; }
    .aChart span:nth-child(2) { animation-range: cover 11.5% cover 25.5%; }
    .aChart span:nth-child(3) { animation-range: cover 13% cover 27%; }
    .aChart span:nth-child(4) { animation-range: cover 14.5% cover 28.5%; }
    .aChart span:nth-child(5) { animation-range: cover 16% cover 30%; }
    .aChart span:nth-child(6) { animation-range: cover 17.5% cover 31.5%; }
    .aChart span:nth-child(7) { animation-range: cover 19% cover 33%; }
    .aChart span:nth-child(8) { animation-range: cover 20.5% cover 34.5%; }
    .aChart span:nth-child(9) { animation-range: cover 22% cover 36%; }
    .aChart span:nth-child(10) { animation-range: cover 23.5% cover 37.5%; }
    .aBar i {
      transform-origin: left;
      animation: barraH linear both;
      animation-timeline: view();
      animation-range: cover 15% cover 35%;
    }

    /* Sección oscura */
    .trio > div {
      animation: sube linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 25%;
    }
    .trio > div:nth-child(2) { animation-range: entry 30% cover 30%; }
    .trio > div:nth-child(3) { animation-range: entry 50% cover 35%; }
    .trio svg {
      animation: pop linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 30%;
    }

    /* Precio */
    .priceCard {
      animation: subeEscala linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 25%;
    }
    .priceBg {
      animation: gira linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    .method {
      animation: desdeDerecha linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 25%;
    }
    .method:nth-child(2) { animation-range: entry 30% cover 30%; }

    /* Pasos: los círculos y la línea avanzan con el mismo scroll */
    .steps {
      view-timeline-name: --pasos;
    }
    .steps li::before {
      animation: pop linear both;
      animation-timeline: --pasos;
    }
    .steps li::after {
      animation: trazaH linear both;
      animation-timeline: --pasos;
    }
    .steps li:nth-child(1)::before { animation-range: cover 8% cover 16%; }
    .steps li:nth-child(1)::after { animation-range: cover 14% cover 22%; }
    .steps li:nth-child(2)::before { animation-range: cover 20% cover 28%; }
    .steps li:nth-child(2)::after { animation-range: cover 26% cover 34%; }
    .steps li:nth-child(3)::before { animation-range: cover 32% cover 40%; }
    .steps li:nth-child(3)::after { animation-range: cover 38% cover 46%; }
    .steps li:nth-child(4)::before { animation-range: cover 44% cover 52%; }

    @media (max-width: 760px) {
      .steps li::after {
        animation-name: trazaV;
      }
    }
  }
}

@keyframes sube {
  from { opacity: 0; translate: 0 24px; }
}

@keyframes subeTel {
  from { opacity: 0; translate: 0 40px; }
}

@keyframes subeEscala {
  from { opacity: 0; translate: 0 24px; scale: .96; }
}

@keyframes desdeDerecha {
  from { opacity: 0; translate: 24px 0; }
}

@keyframes llegaLibreta {
  from { opacity: 0; translate: -40px 20px; }
}

@keyframes pega {
  0% { opacity: 0; scale: .6; }
  70% { opacity: 1; scale: 1.06; }
  100% { scale: 1; }
}

@keyframes sella {
  from { opacity: 0; scale: 1.6; }
}

@keyframes escribe {
  from { clip-path: inset(-20% 100% -20% -10%); }
  to { clip-path: inset(-20% -10% -20% -10%); }
}

@keyframes crece {
  from { opacity: 0; scale: .85; }
}

@keyframes pop {
  from { opacity: 0; scale: .7; }
}

@keyframes barraV {
  from { scale: 1 0; }
}

@keyframes barraH {
  from { scale: 0 1; }
}

@keyframes trazaH {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

@keyframes trazaV {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0); }
}

@keyframes gira {
  from { rotate: -10deg; }
  to { rotate: 10deg; }
}

@keyframes brillo {
  0% { translate: -100% 0; }
  30%, 100% { translate: 100% 0; }
}

@keyframes late {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); }
  60%, 100% { box-shadow: 0 0 0 6px transparent; }
}

/* Escenas de los mockups (porcentajes del --ciclo de cada mockup) */
@keyframes toque {
  0%, 22% { opacity: 0; translate: 16px 22px; scale: 1; }
  28% { opacity: 1; translate: 0 0; scale: 1; }
  31% { scale: .8; }
  34% { opacity: 1; translate: 0 0; scale: 1; }
  42%, 100% { opacity: 0; translate: 12px 16px; scale: 1; }
}

@keyframes onda {
  0%, 30% { opacity: 0; scale: 1; }
  31% { opacity: .9; scale: 1; }
  42%, 100% { opacity: 0; scale: 2.4; }
}

@keyframes swA {
  0%, 33% { opacity: 1; }
  37%, 88% { opacity: 0; }
  94%, 100% { opacity: 1; }
}

@keyframes swB {
  0%, 33% { opacity: 0; translate: 0 6px; }
  37%, 88% { opacity: 1; translate: 0 0; }
  94%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes toque2 {
  0%, 12% { opacity: 0; translate: 16px 22px; scale: 1; }
  18% { opacity: 1; translate: 0 0; scale: 1; }
  21% { scale: .8; }
  24% { opacity: 1; translate: 0 0; scale: 1; }
  31% { opacity: 0; translate: 12px 16px; scale: 1; }
  57% { opacity: 0; translate: 16px 22px; scale: 1; }
  63% { opacity: 1; translate: 0 0; scale: 1; }
  66% { scale: .8; }
  69% { opacity: 1; translate: 0 0; scale: 1; }
  76%, 100% { opacity: 0; translate: 12px 16px; scale: 1; }
}

@keyframes onda2 {
  0%, 20% { opacity: 0; scale: 1; }
  21% { opacity: .9; scale: 1; }
  31% { opacity: 0; scale: 2.4; }
  65% { opacity: 0; scale: 1; }
  66% { opacity: .9; scale: 1; }
  76%, 100% { opacity: 0; scale: 2.4; }
}

@keyframes swA2 {
  0%, 22% { opacity: 1; }
  26%, 67% { opacity: 0; }
  71%, 100% { opacity: 1; }
}

@keyframes swB2 {
  0%, 22% { opacity: 0; translate: 0 6px; }
  26%, 67% { opacity: 1; translate: 0 0; }
  71%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes destello {
  0%, 35% { background-color: transparent; }
  39% { background-color: #cdeee6; }
  70%, 100% { background-color: transparent; }
}

@keyframes aviso {
  0%, 33% { opacity: 0; translate: 0 10px; }
  37%, 55% { opacity: 1; translate: 0 0; }
  60%, 100% { opacity: 0; translate: 0 10px; }
}

@keyframes noti {
  0%, 52% { opacity: 0; translate: 0 -120%; }
  57%, 84% { opacity: 1; translate: 0 0; }
  90%, 100% { opacity: 0; translate: 0 -120%; }
}

@keyframes enciende {
  0%, 33% { opacity: 0; }
  37%, 88% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

@keyframes mesOn {
  0%, 33% { color: #5d7580; font-weight: 400; }
  37%, 88% { color: var(--teal); font-weight: 800; }
  94%, 100% { color: #5d7580; font-weight: 400; }
}

@keyframes mesOff {
  0%, 33% { color: var(--teal); font-weight: 800; }
  37%, 88% { color: #5d7580; font-weight: 400; }
  94%, 100% { color: var(--teal); font-weight: 800; }
}

@keyframes teclea {
  0%, 34% { clip-path: inset(-20% 100% -20% -2%); animation-timing-function: steps(14, end); }
  48%, 100% { clip-path: inset(-20% -2% -20% -2%); }
}