/* ==========================================================================
   ChipMascotas — hoja de estilos principal
   Mobile-first. Todos los tokens de marca viven en :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tipografía autoalojada (Roboto variable, 400–700)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/roboto-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/roboto-latin-ext-variable.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Tokens de diseño
   -------------------------------------------------------------------------- */
:root {
  /* ------------------------------------------------------------------
     Paleta oficial ChipMascotas
     Morado 35% · Cian 30% · Blanco 20% · Azul eléctrico 10% · Rosa 5%
     ------------------------------------------------------------------ */
  --c-purple: #6c3a9b;        /* logotipo y encabezados */
  --c-purple-soft: #8b5cbd;   /* morado de apoyo (hover, iconos suaves) */
  --c-purple-deep: #4a2870;   /* profundidad del card / sombras */
  --c-cyan: #97f5fd;          /* fondos y secciones */
  --c-cyan-soft: #b9f9ff;     /* luminosidad de fondo */
  --c-white: #ffffff;         /* contenido y espacios limpios */
  --c-blue: #008cff;          /* botones y tecnología */
  --c-blue-soft: #3aa4ff;
  --c-blue-deep: #0072d0;
  --c-pink: #ed78e9;          /* detalles y campañas */
  --c-star: #ffb400;          /* estrellas de calificación (color de review) */

  /* Superficie del hero = fondo exacto del JPG de mascotas */
  --c-surface: #f4f5f0;

  /* Tipografía */
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;

  /* Formas */
  --radius-pill: 999px;
  --radius-card: 26px;
  --radius-screen: 44px;

  /* Sombras */
  --shadow-floating: 0 10px 24px -8px rgba(74, 40, 112, 0.28);
  --shadow-panel: 0 -12px 26px -18px rgba(74, 40, 112, 0.35);
  --shadow-screen: 0 50px 90px -40px rgba(74, 40, 112, 0.5);

  /* Movimiento */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.28s;

  /* Espaciado */
  --space-page: 18px;

  /* Cuánto se meten las mascotas sobre el panel morado.
     = alto de la franja del card horneada en perro-y-gato_morado.jpg
     (146px de 1200px de ancho = 12.1667% del ancho). */
  --stage-overlap: 12.1667%;

  /* ------------------------------------------------------------------
     Patrón de huellas · SVG en línea (0 peticiones extra)
     `use` repite una huella base: pad + 4 dedos.
     ------------------------------------------------------------------ */
  --paw-size: 148px;
  --paw-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='148' viewBox='0 0 148 148'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cellipse cx='18' cy='30' rx='13.5' ry='11'/%3E%3Cellipse cx='5' cy='15' rx='5.4' ry='6.8'/%3E%3Cellipse cx='16' cy='8' rx='5.4' ry='6.8'/%3E%3Cellipse cx='28' cy='9' rx='5.4' ry='6.8'/%3E%3Cellipse cx='38' cy='19' rx='5.4' ry='6.8'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23ffffff' fill-opacity='0.075'%3E%3Cuse href='%23p' transform='translate(8 12) rotate(-15)'/%3E%3Cuse href='%23p' transform='translate(84 58) rotate(18) scale(0.8)'/%3E%3Cuse href='%23p' transform='translate(34 102) rotate(-32) scale(0.58)'/%3E%3C/g%3E%3C/svg%3E");
  --paw-on-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='148' viewBox='0 0 148 148'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cellipse cx='18' cy='30' rx='13.5' ry='11'/%3E%3Cellipse cx='5' cy='15' rx='5.4' ry='6.8'/%3E%3Cellipse cx='16' cy='8' rx='5.4' ry='6.8'/%3E%3Cellipse cx='28' cy='9' rx='5.4' ry='6.8'/%3E%3Cellipse cx='38' cy='19' rx='5.4' ry='6.8'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%236c3a9b' fill-opacity='0.05'%3E%3Cuse href='%23p' transform='translate(8 12) rotate(-15)'/%3E%3Cuse href='%23p' transform='translate(84 58) rotate(18) scale(0.8)'/%3E%3Cuse href='%23p' transform='translate(34 102) rotate(-32) scale(0.58)'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-sans);
  color: var(--c-purple);
  background: var(--c-cyan);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.has-drawer {
  overflow: hidden;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--c-purple);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--c-purple);
  color: var(--c-white);
  font-size: 0.85rem;
  transition: top var(--dur) var(--ease-out);
}

.skip-link:focus {
  top: max(12px, env(safe-area-inset-top));
}

/* --------------------------------------------------------------------------
   3. Hero (primer pantallazo del index)
   -------------------------------------------------------------------------- */
.hero {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  background: radial-gradient(
      130% 70% at 50% -10%,
      var(--c-cyan-soft) 0%,
      transparent 60%
    ),
    var(--c-cyan);
}

.hero__screen {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--c-surface);
  overflow: hidden;
}

@media (min-width: 720px) {
  .hero {
    align-items: center;
    padding: 28px;
  }

  .hero__screen {
    min-height: min(860px, calc(100svh - 56px));
    max-height: 860px;
    border-radius: var(--radius-screen);
    box-shadow: var(--shadow-screen);
  }
}

/* --- Barra superior ------------------------------------------------------- */
.topbar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px var(--space-page) 0;
}

.icon-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: var(--c-white);
  color: var(--c-purple);
  box-shadow: var(--shadow-floating);
  transition: transform var(--dur) var(--ease-out);
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--c-white);
  box-shadow: var(--shadow-floating);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--dur) var(--ease-out);
}

.pill:active {
  transform: scale(0.96);
}

.pill svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.pill--cart .pill__dot {
  fill: var(--c-pink);
  stroke: none;
}

/* --- Bloque de texto (eyebrow + titular + subtítulo) ---------------------- */
.hero__intro {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  padding: 0 var(--space-page);
  text-align: center;
}

.hero__logo {
  width: min(56%, 240px);
  height: auto;
  margin-bottom: 14px;
}

.hero__title {
  position: relative;
  margin: 0;
  padding: 0;
  font-size: clamp(2.1rem, 9.6vw, 2.9rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--c-purple);
}

.hero__subtitle {
  max-width: 32ch;
  margin: 12px 0 0;
  font-size: clamp(0.875rem, 3.8vw, 0.95rem);
  line-height: 1.42;
  font-weight: 400;
  color: rgba(74, 40, 112, 0.7);
  text-wrap: pretty;
}

/* --- Mascotas ------------------------------------------------------------- */
.hero__stage {
  position: relative;
  z-index: 3; /* por encima del panel: las patas cuelgan sobre el morado */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: auto 0 calc(var(--stage-overlap) * -1);
}

.hero__stage picture {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
}

.hero__photo {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Panel inferior ------------------------------------------------------- */
.hero__panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: calc(var(--stage-overlap) + 16px) 24px
    calc(34px + env(safe-area-inset-bottom));
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background-color: #2a1641;
  background-image:
    var(--paw-on-dark),
    linear-gradient(180deg, #49286f 0%, #49286f 22%, #3a1f59 62%, #2a1641 100%);
  background-size: var(--paw-size) var(--paw-size), auto;
  box-shadow: var(--shadow-panel);
  text-align: center;
  color: var(--c-white);
}

.hero__panel-title {
  margin: 0;
  font-size: clamp(1.3rem, 5.5vw, 1.6rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hero__panel-note {
  margin: -8px 0 0;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.62);
}

/* --- Botón principal ------------------------------------------------------ */
.cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 2.6vw, 18px);
  padding: 7px 7px 7px clamp(20px, 5.4vw, 30px);
  border-radius: var(--radius-pill);
  background: linear-gradient(
    180deg,
    var(--c-blue-soft) 0%,
    var(--c-blue) 60%,
    var(--c-blue-deep) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: var(--c-white);
  font-size: clamp(0.875rem, 3.7vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: transform var(--dur) var(--ease-out);
}

.cta:active {
  transform: translateY(1px) scale(0.985);
}

.cta__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(40px, 11vw, 46px);
  height: clamp(40px, 11vw, 46px);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-purple);
  transition: transform var(--dur) var(--ease-out);
}

.cta__icon svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) {
  .cta:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }

  .cta:hover .cta__icon {
    transform: translateX(2px);
  }
}

/* --- Pantallas bajas ------------------------------------------------------ */
@media (max-height: 700px) {
  .hero__panel-note {
    display: none;
  }

  .hero__logo {
    width: min(46%, 190px);
    margin-bottom: 8px;
  }

  .hero__subtitle {
    margin-top: 8px;
    font-size: 0.82rem;
  }

  .hero__title {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }

  .hero__panel {
    gap: 14px;
    padding-top: calc(var(--stage-overlap) + 8px);
  }
}

@media (max-height: 620px) {
  .hero__panel {
    gap: 12px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   4. Menú lateral
   -------------------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: min(82%, 330px) 1fr;
  visibility: hidden;
}

.drawer__backdrop {
  z-index: 0;
  grid-area: 1 / 1 / 2 / 3;
  background: rgba(42, 22, 65, 0.55);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.drawer__panel {
  z-index: 1;
  grid-area: 1 / 1 / 2 / 2;
  display: flex;
  flex-direction: column;
  padding: calc(14px + env(safe-area-inset-top)) 22px
    calc(24px + env(safe-area-inset-bottom));
  background: var(--c-white);
  box-shadow: 0 0 60px rgba(42, 22, 65, 0.25);
  transform: translateX(-100%);
  transition: transform 0.34s var(--ease-out);
}

.drawer.is-open {
  visibility: visible;
}

.drawer.is-open .drawer__backdrop {
  opacity: 1;
}

.drawer.is-open .drawer__panel {
  transform: none;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
}

.drawer__brand {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.drawer__nav {
  display: flex;
  flex-direction: column;
}

.drawer__nav a {
  padding: 15px 2px;
  border-bottom: 1px solid rgba(108, 58, 155, 0.12);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease-out),
    padding-left var(--dur) var(--ease-out);
}

.drawer__nav a:active {
  color: var(--c-blue);
}

@media (hover: hover) {
  .drawer__nav a:hover {
    padding-left: 8px;
    color: var(--c-blue);
  }
}

.drawer__foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: auto 0 0;
  padding-top: 18px;
  font-size: 0.85rem;
  color: rgba(74, 40, 112, 0.6);
}

.drawer__foot a {
  color: var(--c-purple);
  font-size: 1rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Catálogo
   Arranca exactamente con el color final del card del hero (#2a1641) y sube
   al morado de la paleta para dar continuidad.
   -------------------------------------------------------------------------- */
.catalog {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--c-purple);
  color: var(--c-white);
  /* tapa cualquier costura de 1px contra la sección siguiente */
  box-shadow: 0 1px 0 0 var(--c-purple);
}

/* Banda de transición: el perro va sin fondo (WebP con alpha) y el corte de la
   paleta lo pinta el CSS. El PNG trae el pecho cortado al 84,23% de su alto y
   las patas por debajo, así que se ancla abajo y se desplaza ese 15,77% para
   que el pecho caiga justo en la línea y las patas queden sobre el morado. */
.catalog__band {
  position: relative;
  height: 0;
  padding-bottom: 43.22%;
  background-image:
    var(--paw-on-dark),
    linear-gradient(180deg, #281542 0 84.2%, #6c3a9b 84.2% 100%);
  background-size: var(--paw-size) var(--paw-size), auto;
}

.catalog__pup {
  position: absolute;
  left: 50%;
  bottom: 15.8%;
  width: 44%;
  height: auto;
  transform: translate(-50%, 15.77%);
  pointer-events: none;
}

.catalog__body {
  position: relative;
  z-index: 1;
  padding: 14px var(--space-page) calc(34px + env(safe-area-inset-bottom));
}

/* --- Valoración ----------------------------------------------------------- */
.catalog__rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 24px;
  text-align: center;
}

.catalog__rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 20px 9px 22px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #ffffff 0%, #fff6e0 100%);
  box-shadow: 0 16px 30px -14px rgba(12, 4, 22, 0.75),
    0 0 0 3px rgba(255, 180, 0, 0.3),
    inset 0 -2px 0 rgba(255, 180, 0, 0.28);
}

.catalog__score {
  font-size: clamp(1.8rem, 8vw, 2.15rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--c-purple-deep);
}

.catalog__stars {
  width: clamp(96px, 27vw, 116px);
  height: auto;
  fill: var(--c-star);
  filter: drop-shadow(0 2px 3px rgba(210, 135, 0, 0.4));
}

.catalog__rating-note {
  max-width: 30ch;
  margin: 12px auto 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}

.catalog__rating-note strong {
  font-weight: 700;
  color: var(--c-white);
}

/* --- Categoría ------------------------------------------------------------ */
.category + .category {
  margin-top: 34px;
}

.category__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  text-align: center;
}

.category__title {
  margin: 0;
  font-size: clamp(1.45rem, 6.6vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}

.category__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}

.category__link svg {
  width: 12px;
  height: 12px;
}

/* --- Productos ------------------------------------------------------------ */
.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 8px 12px;
  border-radius: 20px;
  background: var(--c-white);
  box-shadow: 0 14px 26px -20px rgba(15, 6, 26, 0.85);
}

/* La foto sangra hasta los bordes de la tarjeta: mismo alto de tarjeta,
   imagen más grande. */
.product__media {
  position: relative;
  margin: 0 -8px;
  aspect-ratio: 1 / 1;
  border-radius: 20px 20px 14px 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(108, 58, 155, 0.07);
}

.product__media img {
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
}

.product__add {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--c-purple);
  box-shadow: 0 4px 10px rgba(42, 22, 65, 0.18);
  transition: transform var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out);
}

.product__add svg {
  width: 14px;
  height: 14px;
}

.product__add:active {
  transform: scale(0.9);
}

@media (hover: hover) {
  .product__add:hover {
    background: var(--c-purple);
    color: var(--c-white);
  }
}

.product__name {
  margin: 10px 2px 6px;
  font-size: clamp(0.92rem, 0.86rem + 0.28vw, 1rem);
  font-weight: 500;
  line-height: 1.35;
  color: rgba(42, 22, 65, 0.86);
}

.product__price {
  margin: auto 2px 0;
  padding-top: 2px;
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.34rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-purple-deep);
}

.product__price-old {
  display: block;
  margin-bottom: 2px;
  font-size: clamp(0.86rem, 0.8rem + 0.22vw, 0.96rem);
  font-weight: 700;
  letter-spacing: 0;
  color: #d64545;
  text-decoration: line-through;
}

/* fila del precio anterior + porcentaje de descuento */
.product__deal {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}

.product__deal .product__price-old {
  margin-bottom: 0;
}

.product__price .product__off {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(18, 161, 80, 0.14);
  color: #0f8a45;
  font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.product__price .product__off:empty {
  display: none;
}

.product__price span {
  font-size: clamp(0.68rem, 0.64rem + 0.18vw, 0.76rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(42, 22, 65, 0.55);
}

/* --- Cierre del catálogo -------------------------------------------------- */
.catalog__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-top: 26px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-white);
  transition: background var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .catalog__cta:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* Banner promocional (tarjeta redondeada dentro del padding de la sección) */
.catalog__promo {
  display: block;
  width: 100%;
  height: auto;
  margin: 26px 0 10px;
  border-radius: 18px;
  /* la sombra hace que el borde inferior se lea como tarjeta y no como línea */
  box-shadow: 0 16px 28px -18px rgba(10, 3, 18, 0.85);
}

/* En escritorio la columna del hero y la del catálogo se unen sin cortes */
@media (min-width: 720px) {
  .hero {
    align-items: stretch;
    padding-bottom: 0;
  }

  .hero__screen {
    min-height: min(860px, calc(100svh - 28px));
    max-height: none;
    border-radius: var(--radius-screen) var(--radius-screen) 0 0;
  }

  .catalog {
    border-radius: 0;
  }

  .travel {
    border-radius: 0;
  }

  .closing {
    border-radius: 0;
  }

  .press {
    border-radius: 0;
  }

  .site-footer {
    border-radius: 0 0 var(--radius-screen) var(--radius-screen);
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   6. Viajes · microchip ISO
   Continúa el morado del catálogo en la banda del perro y abre a blanco.
   -------------------------------------------------------------------------- */
.travel {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  /* blanco: coincide con el borde inferior de la sección y con el inicio del cierre */
  background: var(--c-white);
  color: var(--c-purple-deep);
}

/* Banda morada con el perro recargado sobre el borde */
.travel__band {
  position: relative;
  height: 0;
  /* alto proporcional al ancho del perro (74% de ancho) */
  padding-bottom: 53.94%;
  background: var(--c-purple);
  /* refuerza el borde superior por si el redondeo deja un pixel libre */
  box-shadow: 0 -1px 0 0 var(--c-purple);
}

.travel__dog {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 74%;
  height: auto;
  /* baja lo que mide la parte de patas que cuelga bajo el borde */
  transform: translate(-50%, 15.68%);
  z-index: 2;
  pointer-events: none;
}

.travel__body {
  position: relative;
  z-index: 1;
  padding: 12% var(--space-page) calc(40px + env(safe-area-inset-bottom));
  background: var(--c-white);
  text-align: center;
}

.travel__eyebrow {
  margin: 0 0 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-blue);
}

.travel__title {
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(1.4rem, 6.2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--c-purple);
  text-wrap: balance;
}

.travel__text {
  max-width: 34ch;
  margin: 12px auto 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(42, 22, 65, 0.72);
}

.travel__text strong {
  font-weight: 600;
  color: var(--c-purple-deep);
}

/* --- Beneficios ----------------------------------------------------------- */
.travel__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.travel__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(108, 58, 155, 0.1);
  border-radius: 16px;
  background: #f7fbfc;
}

.travel__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(108, 58, 155, 0.09);
  color: var(--c-purple);
}

.travel__icon svg {
  width: 20px;
  height: 20px;
}

.travel__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: rgba(42, 22, 65, 0.68);
}

.travel__copy strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-purple-deep);
}

/* --------------------------------------------------------------------------
   7. Cierre · misma imagen del perro, espejada
   -------------------------------------------------------------------------- */
.closing {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  /* el color de la sección es el de su borde superior (la banda blanca) */
  background: var(--c-white);
  color: var(--c-white);
}

.closing__band {
  position: relative;
  height: 0;
  padding-bottom: 46.68%;
  background: var(--c-white);
  /* tapa cualquier costura de 1px con la sección anterior */
  box-shadow: 0 -1px 0 0 var(--c-white);
}

.closing__pet {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64%;
  height: auto;
  /* baja la franja de patas que cuelga bajo el borde */
  transform: translate(-50%, 15.61%);
  z-index: 2;
  pointer-events: none;
}

.closing__body {
  position: relative;
  z-index: 1;
  padding: 16% var(--space-page) calc(40px + env(safe-area-inset-bottom));
  background: var(--c-blue);
  text-align: center;
}

/* Insignia de garantía */
.closing__badge {
  display: block;
  width: min(56%, 200px);
  height: auto;
  margin: 0 auto 18px;
  filter: drop-shadow(0 12px 20px rgba(5, 30, 55, 0.25));
}

.closing__title {
  max-width: 20ch;
  margin: 0 auto;
  font-size: clamp(1.4rem, 6.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--c-white);
  text-wrap: balance;
}

.closing__text {
  max-width: 32ch;
  margin: 12px auto 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.closing__text strong {
  font-weight: 700;
  color: var(--c-white);
}

/* --- Reseñas · carrusel --------------------------------------------------- */
.reviews {
  margin-top: 26px;
  text-align: left;
}

.reviews__sprite {
  position: absolute;
}

.reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 16px;
}

.reviews__eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.reviews__summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.reviews__summary-score {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-white);
}

.reviews__summary-stars {
  width: 58px;
  height: auto;
  fill: var(--c-star);
}

.reviews__summary-count {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.72);
}

.reviews__viewport {
  overflow: hidden;
  padding: 2px 0 26px;
  cursor: grab;
}

.reviews.is-dragging .reviews__viewport {
  cursor: grabbing;
}

.reviews__track {
  position: relative;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.55s var(--ease-out);
  touch-action: pan-y;
}

.reviews.is-dragging .reviews__track {
  transition: none;
}

.review {
  position: relative;
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 20px 16px;
  border: 1px solid rgba(108, 58, 155, 0.09);
  border-radius: 24px;
  background-image:
    radial-gradient(130% 90% at 100% 0%, rgba(151, 245, 253, 0.34), transparent 58%),
    radial-gradient(90% 70% at 0% 100%, rgba(237, 120, 233, 0.1), transparent 60%);
  background-color: var(--c-white);
  box-shadow: 0 18px 30px -20px rgba(4, 22, 44, 0.55);
  color: var(--c-purple-deep);
  transition: box-shadow var(--dur) var(--ease-out);
}

.review__glyph {
  position: absolute;
  top: 6px;
  right: 12px;
  color: rgba(108, 58, 155, 0.07);
  pointer-events: none;
}

.review__glyph svg {
  display: block;
  width: 56px;
  height: 56px;
  fill: currentColor;
}

.review__rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  padding: 5px 9px 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 180, 0, 0.14);
}

.review__star {
  width: 13px;
  height: 13px;
  fill: var(--c-star);
}

.review__text {
  margin: 12px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: #2f1c4a;
  text-wrap: pretty;
}

/* Reseñas de una sola frase: se muestran grandes y centradas para no dejar huecos */
.review__text--short {
  margin: auto 0;
  padding: 10px 0;
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--c-purple);
}

.review__person {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(108, 58, 155, 0.12);
}

.review__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--c-purple), var(--c-pink));
  box-shadow: 0 0 0 2px var(--c-white), 0 0 0 3.5px rgba(108, 58, 155, 0.18);
  color: var(--c-white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.review__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.review__name {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-purple-deep);
}

.review__verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  padding: 2px 6px 2px 5px;
  border-radius: var(--radius-pill);
  background: rgba(18, 161, 80, 0.1);
  color: #0e7a41;
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1.3;
}

.review__verified svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.review__date {
  align-self: flex-start;
  margin-left: auto;
  padding-top: 2px;
  font-size: 0.64rem;
  font-weight: 500;
  color: #8b7aa6;
  white-space: nowrap;
}

.reviews__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin-top: 2px;
}

.reviews__dot {
  display: grid;
  place-items: center;
  width: 20px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.reviews__dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.45);
  transition: width var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.reviews__dot[aria-current="true"]::after {
  width: 20px;
  background: var(--c-white);
}

.reviews__dot:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 1px;
  border-radius: var(--radius-pill);
}

@media (hover: hover) {
  .reviews__dot:hover::after {
    background: rgba(255, 255, 255, 0.8);
  }

  .review:hover {
    box-shadow: 0 22px 34px -20px rgba(4, 22, 44, 0.6);
  }
}

/* --------------------------------------------------------------------------
   8. Prensa · logos de medios
   Banda azul (continúa el cierre) + cuerpo morado con el gato espejado.
   -------------------------------------------------------------------------- */
.press {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--c-blue); /* coincide con la banda superior y con el cierre */
  color: var(--c-white);
}

.press__band {
  position: relative;
  height: 0;
  padding-bottom: 60%;
  background: var(--c-blue);
  box-shadow: 0 -1px 0 0 var(--c-blue);
}

.press__pet {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 70%;
  height: auto;
  /* 15.2% del alto: el pecho del gato cruza la línea y desaparece el hueco azul
     que quedaba entre las patas (escala igual en cualquier ancho) */
  transform: translate(-50%, 15.2%);
  z-index: 2;
  pointer-events: none;
}

.press__body {
  position: relative;
  z-index: 1;
  padding: 16% var(--space-page) calc(40px + env(safe-area-inset-bottom));
  background: var(--c-purple);
  text-align: center;
}

.press__eyebrow {
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-cyan);
}

.press__title {
  margin: 0 auto;
  font-size: clamp(1.4rem, 6.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--c-white);
  text-wrap: balance;
}

.press__text {
  max-width: 32ch;
  margin: 10px auto 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

/* --- Muro de logos -------------------------------------------------------- */
/* Tira compacta: 3 logos arriba y 2 centrados abajo, en tarjetas de altura
   fija (52px) para que el muro ocupe el mínimo alto de pantalla. */
.press__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.press__logos li {
  display: flex;
  flex: 0 0 calc((100% - 16px) / 3);
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 52px;
  padding: 5px 6px;
  border-radius: 10px;
  background: var(--c-white);
}

.press__logos a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: transform var(--dur) var(--ease-out);
}

/* Logos que traen fondo propio (captura de TV): la píldora va a sangre para
   que no se lea un marco blanco alrededor. */
.press__logos .press__item--cover {
  padding: 0;
  overflow: hidden;
}

.press__logos .press__item--cover img {
  object-fit: cover;
}

@media (hover: hover) {
  .press__logos a:hover {
    transform: translateY(-2px);
  }
}

.press__logos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--c-purple-deep);
  color: var(--c-white);
}

.footer__inner {
  padding: 30px var(--space-page) calc(26px + env(safe-area-inset-bottom));
}

.footer__logo {
  display: block;
  width: min(62%, 190px);
  height: auto;
}

.footer__tagline {
  max-width: 34ch;
  margin: 8px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.footer__cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 22px 12px;
  margin-top: 26px;
}

.footer__title {
  position: relative;
  margin: 0 0 14px;
  padding-bottom: 10px;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.footer__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-cyan);
}

.footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.76rem;
  line-height: 1.35;
}

.footer__list li {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.footer__list a {
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--dur) var(--ease-out);
}

.footer__note {
  margin-left: 2px;
  font-size: 0.88em;
  color: rgba(255, 255, 255, 0.55);
}

.footer__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--c-cyan);
}

.footer__icon svg {
  width: 16px;
  height: 16px;
}

.footer__list--links {
  gap: 9px;
}

@media (hover: hover) {
  .footer__list a:hover {
    color: var(--c-white);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* --- Redes ---------------------------------------------------------------- */
.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: var(--c-white);
  transition: background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.footer__social svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) {
  .footer__social a:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
  }
}

.footer__legal {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Textura de huellas en los fondos planos
   Se aplica como capa de imagen sobre el color de cada bloque; el tamaño es
   fijo para que la huella se vea igual en todas las secciones.
   -------------------------------------------------------------------------- */
.catalog__body,
.closing__body,
.press__body,
.site-footer,
.travel__band,
.press__band {
  background-image: var(--paw-on-dark);
  background-size: var(--paw-size) var(--paw-size);
  background-repeat: repeat;
}

.travel__body,
.closing__band {
  background-image: var(--paw-on-light);
  background-size: var(--paw-size) var(--paw-size);
  background-repeat: repeat;
}

/* --------------------------------------------------------------------------
   10. Página legal (reembolsos, privacidad, FAQ…)
   Misma retícula de 480px que el home: encabezado morado, cuerpo cian y
   tarjetas blancas para cada bloque de texto.
   -------------------------------------------------------------------------- */
.legal {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--c-white);
}

.legal__head {
  position: relative;
  padding: 16px var(--space-page) 22px;
  border-radius: 0 0 30px 30px;
  background-color: var(--c-purple-deep);
  background-image:
    var(--paw-on-dark),
    linear-gradient(155deg, #4a2870 0%, #6c3a9b 62%, #562d83 100%);
  background-size: var(--paw-size) var(--paw-size), auto;
  color: var(--c-white);
}

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

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px 8px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.15);
  color: var(--c-white);
  font-size: 0.76rem;
  font-weight: 500;
  transition: background var(--dur) var(--ease-out);
}

.legal__back svg {
  width: 15px;
  height: 15px;
}

.legal__brand img {
  display: block;
  width: 118px;
  height: auto;
}

.legal__eyebrow {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-white);
}

.legal__title {
  margin: 10px 0 0;
  font-size: clamp(1.45rem, 6.2vw, 1.8rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.legal__lead {
  margin: 12px 0 0;
  font-size: 0.87rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
}

.legal__lead strong {
  font-weight: 700;
  color: var(--c-white);
}

/* Plazos clave del encabezado */
.legal__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.legal__stat {
  padding: 12px 12px 11px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
}

.legal__stat b {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-white);
}

.legal__stat span {
  display: block;
  margin-top: 6px;
  font-size: 0.66rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.8);
}

.legal__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 0;
  padding: 6px 12px 6px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.78);
}

.legal__meta svg {
  width: 13px;
  height: 13px;
  color: var(--c-white);
}

.legal__body {
  padding: 18px var(--space-page) calc(30px + env(safe-area-inset-bottom));
  background: var(--c-white);
}

/* --- Índice --------------------------------------------------------------- */
.legal__toc {
  padding: 16px 16px 12px;
  border: 1px solid rgba(108, 58, 155, 0.09);
  border-radius: 20px;
  background: var(--c-surface);
}

.legal__toc-title {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-purple);
}

.legal__toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  display: grid;
  gap: 2px;
}

.legal__toc-list li {
  counter-increment: toc;
}

.legal__toc-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(108, 58, 155, 0.08);
  color: #3a2a4f;
  font-size: 0.82rem;
  line-height: 1.3;
}

.legal__toc-list li:last-child a {
  border-bottom: 0;
  padding-bottom: 0;
}

.legal__toc-list a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--c-purple-soft);
}

.legal__toc-list a::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-top: 2px solid var(--c-purple-soft);
  border-right: 2px solid var(--c-purple-soft);
  transform: rotate(45deg);
  opacity: 0.55;
}

/* --- Bloques de contenido ------------------------------------------------- */
.legal-card {
  padding: 24px 0 4px;
  border-top: 1px solid rgba(108, 58, 155, 0.12);
  margin-top: 22px;
  scroll-margin-top: 20px;
}

.legal-card:first-of-type {
  margin-top: 4px;
  border-top: 0;
  padding-top: 6px;
}

.legal-card__title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 1.05rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--c-purple-deep);
}

.legal-card__num {
  flex: none;
  margin-top: 2px;
  padding: 3px 6px;
  border-radius: 7px;
  background: var(--c-purple);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--c-white);
}

.legal-card p {
  margin: 0 0 10px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: #3a2a4f;
  text-wrap: pretty;
}

.legal-card p:last-child {
  margin-bottom: 0;
}

.legal-card ul {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.legal-card li {
  position: relative;
  padding-left: 17px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #3a2a4f;
  text-wrap: pretty;
}

.legal-card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-purple-soft);
}

.legal-card strong {
  font-weight: 700;
  color: var(--c-purple-deep);
}

.legal-card a {
  color: var(--c-blue-deep);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

/* --- Cierre con CTA ------------------------------------------------------- */
.legal__cta {
  margin-top: 26px;
  padding: 22px 18px 20px;
  border-radius: 22px;
  background-color: var(--c-blue);
  background-image: var(--paw-on-dark);
  background-size: var(--paw-size) var(--paw-size);
  color: var(--c-white);
  text-align: center;
}

.legal__cta-title {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.25;
}

.legal__cta-text {
  margin: 8px 0 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

.legal__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--c-white);
  color: var(--c-blue-deep);
  font-size: 0.82rem;
  font-weight: 600;
  transition: transform var(--dur) var(--ease-out);
}

.legal__cta-btn svg {
  width: 16px;
  height: 16px;
}

.legal__cta-btn:active {
  transform: scale(0.98);
}

/* --- Preguntas frecuentes · acordeón nativo ------------------------------- */
.faq-list {
  margin-top: 2px;
}

.faq {
  border-top: 1px solid rgba(108, 58, 155, 0.12);
}

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

.faq__summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 0;
  list-style: none;
  cursor: pointer;
  color: var(--c-purple-deep);
}

.faq__summary::-webkit-details-marker {
  display: none;
}

.faq__summary:focus-visible {
  outline: 2px solid var(--c-purple);
  outline-offset: 3px;
  border-radius: 8px;
}

.faq__num {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 21px;
  margin-top: 1px;
  padding: 0 4px;
  border-radius: 7px;
  background: rgba(108, 58, 155, 0.1);
  color: var(--c-purple);
  font-size: 0.62rem;
  font-weight: 700;
  transition: background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.faq__q {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.faq__icon {
  flex: none;
  margin-top: 2px;
  color: var(--c-purple-soft);
  transition: transform var(--dur) var(--ease-out);
}

.faq__icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.faq[open] .faq__icon {
  transform: rotate(180deg);
}

.faq[open] .faq__summary {
  color: var(--c-purple);
}

.faq[open] .faq__num {
  background: var(--c-purple);
  color: var(--c-white);
}

.faq__a {
  padding: 0 0 18px 32px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #3a2a4f;
  text-wrap: pretty;
}

.faq__a p {
  margin: 0 0 10px;
}

.faq__a p:last-child {
  margin-bottom: 0;
}

.faq__a ul,
.faq__a ol {
  display: grid;
  gap: 7px;
  margin: 0 0 10px;
  padding-left: 0;
  list-style: none;
}

.faq__a ol {
  counter-reset: step;
}

.faq__a li {
  position: relative;
  padding-left: 20px;
}

.faq__a ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-purple-soft);
}

.faq__a ol li {
  counter-increment: step;
  padding-left: 22px;
}

.faq__a ol li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.15em;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(108, 58, 155, 0.12);
  color: var(--c-purple);
  font-size: 0.6rem;
  font-weight: 700;
}

.faq__a strong {
  font-weight: 700;
  color: var(--c-purple-deep);
}

.faq__a a {
  color: var(--c-blue-deep);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .legal__back:hover {
    background: rgba(255, 255, 255, 0.26);
  }

  .legal__toc-list a:hover {
    color: var(--c-purple);
  }

  .legal-card a:hover {
    color: var(--c-purple);
  }
}

@media (min-width: 720px) {
  .legal {
    border-radius: var(--radius-screen);
    overflow: hidden;
    box-shadow: var(--shadow-screen);
  }
}

/* --------------------------------------------------------------------------
   11. Accesibilidad / preferencias
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   12. Modal de producto
   Hoja inferior en móvil y diálogo centrado en escritorio. Toda la pieza
   comparte los tokens de marca: morado profundo para el texto, azul para la
   acción y cian solo como acento.
   -------------------------------------------------------------------------- */
body.has-modal {
  overflow: hidden;
}

.pmodal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}

.pmodal.is-open {
  visibility: visible;
  pointer-events: auto;
}

.pmodal__backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(24, 10, 40, 0.58);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: opacity 0.34s var(--ease-out);
}

.pmodal.is-open .pmodal__backdrop {
  opacity: 1;
}

.pmodal__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  height: 100svh;
  height: 100dvh;
  max-height: 100svh;
  max-height: 100dvh;
  border-radius: 0;
  background: var(--c-white);
  box-shadow: 0 -24px 60px -24px rgba(18, 6, 32, 0.65);
  opacity: 0;
  transform: translateY(4%) scale(0.985);
  transition: transform 0.46s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}

.pmodal.is-open .pmodal__sheet {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pmodal__grab {
  width: 44px;
  height: 5px;
  margin: 9px auto 3px;
  border-radius: var(--radius-pill);
  background: rgba(108, 58, 155, 0.2);
}

.pmodal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--c-purple-deep);
  color: var(--c-white);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92),
    0 12px 24px -12px rgba(24, 8, 40, 0.9);
  transition: background var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.pmodal__close svg {
  width: 16px;
  height: 16px;
}

.pmodal__close:active {
  transform: scale(0.92);
}

.pmodal__scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* --- Imagen (carrusel) ----------------------------------------------------- */
.pmodal__media {
  position: relative;
  margin: 6px 14px 0;
  border-radius: 24px;
  /* caja vertical + tope en svh: las fotos lucen sin comerse la ficha */
  aspect-ratio: 4 / 5;
  max-height: 58svh;
  /* el alto lo manda la proporción, no el flex del panel */
  flex: none;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(151, 245, 253, 0.5), transparent 62%),
    linear-gradient(160deg, #f8f7fb 0%, #ebe7f4 100%);
  touch-action: pan-y;
}

.pmodal__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px rgba(108, 58, 155, 0.07);
  pointer-events: none;
}

.pmodal__slides {
  display: flex;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.pmodal__media.is-dragging .pmodal__slides {
  transition: none;
}

.pmodal__img {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  padding: 10px 14px 20px;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

.pmodal__dots {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
}

.pmodal__dots[hidden] {
  display: none;
}

.pmodal__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(108, 58, 155, 0.3);
  cursor: pointer;
  transition: width var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out);
}

.pmodal__dot.is-active {
  width: 20px;
  border-radius: var(--radius-pill);
  background: var(--c-purple);
}

.pmodal__dot:focus-visible {
  outline: 2px solid var(--c-purple);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pmodal__slides {
    transition: none;
  }
}

.pmodal__flag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-purple);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 8px 16px -12px rgba(30, 10, 50, 0.8);
}

.pmodal__flag:empty {
  display: none;
}

/* --- Datos ---------------------------------------------------------------- */
.pmodal__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 16px 20px 20px;
}

.pmodal__eyebrow {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-purple-soft);
}

.pmodal__title {
  margin: 6px 0 0;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--c-purple-deep);
  text-wrap: pretty;
}

.pmodal__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  font-size: 0.7rem;
  color: #7b6a92;
}

.pmodal__stars {
  display: inline-flex;
}

.pmodal__stars svg {
  width: 74px;
  height: auto;
  fill: var(--c-star);
}

.pmodal__stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--radius-pill);
  background: rgba(18, 161, 80, 0.1);
  color: #0e7a41;
  font-weight: 500;
}

.pmodal__stock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #12a150;
}

.pmodal__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 14px 0 0;
  font-size: 1.72rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--c-purple-deep);
}

.pmodal__price-old {
  display: none;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #d64545;
  text-decoration: line-through;
}

.pmodal__price-old.is-visible {
  display: inline;
}

/* porcentaje de descuento junto al precio anterior */
.pmodal__off {
  align-self: center;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: rgba(18, 161, 80, 0.14);
  color: #0f8a45;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
}

.pmodal__off[hidden] {
  display: none;
}

.pmodal__currency {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(42, 22, 65, 0.42);
}

.pmodal__desc {
  margin: 12px 0 0;
  font-size: 0.86rem;
  line-height: 1.62;
  color: #3a2a4f;
  text-wrap: pretty;
}

.pmodal__desc p {
  margin: 0 0 8px;
}

.pmodal__desc p:last-child {
  margin-bottom: 0;
}

.pmodal__desc ul {
  display: grid;
  gap: 5px;
  margin: 0 0 8px;
  padding-left: 18px;
  list-style: disc;
}

.pmodal__desc li::marker {
  color: var(--c-purple);
}

/* Descripción recortada a 4 líneas con degradado + botón para abrirla */
.pmodal__desc.is-clamped {
  position: relative;
  max-height: calc(1.62em * 4);
  overflow: hidden;
}

.pmodal__desc.is-clamped::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.9em;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    var(--c-white) 78%
  );
  pointer-events: none;
}

.pmodal__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: 2px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--c-purple);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.pmodal__more svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease-out);
}

.pmodal__more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.pmodal__more:focus-visible {
  outline: 2px solid var(--c-purple);
  outline-offset: 2px;
  border-radius: 6px;
}

.pmodal__perks {
  display: grid;
  gap: 10px;
  margin: 16px 0 18px;
  padding: 0;
  list-style: none;
}

.pmodal__perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.79rem;
  color: #3a2a4f;
}

.pmodal__perk-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: rgba(108, 58, 155, 0.09);
  color: var(--c-purple);
}

.pmodal__perk-icon svg {
  width: 14px;
  height: 14px;
}

/* --- Cantidad ------------------------------------------------------------- */
.pmodal__qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 10px 12px 10px 16px;
  border-radius: 18px;
  background: var(--c-surface);
}

.pmodal__qty-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--c-purple-deep);
}

.stepper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stepper__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-purple);
  box-shadow: 0 6px 14px -8px rgba(42, 22, 65, 0.55);
  transition: transform var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.stepper__btn svg {
  width: 13px;
  height: 13px;
}

.stepper__btn:active {
  transform: scale(0.9);
}

.stepper__btn:disabled {
  opacity: 0.4;
  box-shadow: none;
}

.stepper__value {
  min-width: 26px;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  color: var(--c-purple-deep);
  font-variant-numeric: tabular-nums;
}

/* --- Pie con acción ------------------------------------------------------- */
.pmodal__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(108, 58, 155, 0.1);
  background: var(--c-white);
  box-shadow: 0 -16px 28px -24px rgba(20, 6, 34, 0.75);
}

.pmodal__total {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  min-width: 78px;
}

.pmodal__total-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b7aa6;
}

.pmodal__total strong {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-purple-deep);
  font-variant-numeric: tabular-nums;
}

.pmodal__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  height: 50px;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--c-blue-soft) 0%, var(--c-blue) 100%);
  color: var(--c-white);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 14px 24px -16px rgba(0, 114, 208, 0.95);
  transition: transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.pmodal__add svg {
  width: 16px;
  height: 16px;
}

.pmodal__add:active {
  transform: scale(0.985);
}

/* --- Tarjetas de producto clicables --------------------------------------- */
.product {
  cursor: pointer;
}

/* Botón transparente que cubre la tarjeta: toda la superficie abre la ficha
   y el "+" queda por encima para el alta rápida. */
.product__open {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
}

.product__open:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 3px;
}

.product__add {
  z-index: 2;
}

/* --------------------------------------------------------------------------
   13. Carrito
   Panel a pantalla completa en móvil y diálogo centrado en escritorio.
   -------------------------------------------------------------------------- */
body.has-cart {
  overflow: hidden;
}

.cart {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}

.cart.is-open {
  visibility: visible;
  pointer-events: auto;
}

.cart__backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(24, 10, 40, 0.58);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: opacity 0.34s var(--ease-out);
}

.cart.is-open .cart__backdrop {
  opacity: 1;
}

.cart__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  height: 100svh;
  height: 100dvh;
  max-height: 100svh;
  max-height: 100dvh;
  border-radius: 0;
  background: var(--c-white);
  box-shadow: 0 -24px 60px -24px rgba(18, 6, 32, 0.65);
  opacity: 0;
  transform: translateY(4%) scale(0.985);
  transition: transform 0.46s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}

.cart.is-open .cart__sheet {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: calc(16px + env(safe-area-inset-top)) 20px 14px;
  border-bottom: 1px solid rgba(108, 58, 155, 0.1);
}

.cart__eyebrow {
  margin: 0;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-purple-soft);
}

.cart__title {
  margin: 4px 0 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--c-purple-deep);
}

.cart__count {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: #8b7aa6;
}

.cart__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(108, 58, 155, 0.08);
  color: var(--c-purple-deep);
  transition: background var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.cart__close svg {
  width: 15px;
  height: 15px;
}

.cart__close:active {
  transform: scale(0.92);
}

.cart__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px;
}

.cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 40px 10px;
  text-align: center;
}

.cart__empty-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(108, 58, 155, 0.08);
  color: var(--c-purple);
}

.cart__empty-icon svg {
  width: 34px;
  height: 34px;
}

.cart__empty-title {
  margin: 18px 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-purple-deep);
}

.cart__empty-text {
  max-width: 260px;
  margin: 6px 0 18px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #6f5e86;
}

.cart__empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--c-blue-soft) 0%, var(--c-blue) 100%);
  color: var(--c-white);
  font-size: 0.84rem;
  font-weight: 600;
  box-shadow: 0 14px 24px -16px rgba(0, 114, 208, 0.95);
}

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

.cart__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 26px;
  gap: 12px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(108, 58, 155, 0.09);
}

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

.cart__thumb {
  width: 64px;
  height: 64px;
  padding: 4px;
  border: 1px solid rgba(108, 58, 155, 0.07);
  border-radius: 14px;
  background: #fff;
  object-fit: contain;
}

.cart__info {
  min-width: 0;
}

.cart__meta {
  margin: 0;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-purple-soft);
}

.cart__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 4px 0 0;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-purple-deep);
}

.cart__unit {
  margin: 3px 0 0;
  font-size: 0.66rem;
  color: #8b7aa6;
}

.cart__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.cart__stepper .stepper__btn {
  width: 28px;
  height: 28px;
}

.cart__stepper .stepper__btn svg {
  width: 11px;
  height: 11px;
}

.cart__stepper .stepper__value {
  min-width: 22px;
  font-size: 0.82rem;
}

.cart__line {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-purple-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart__remove {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(42, 22, 65, 0.38);
  transition: color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out);
}

.cart__remove svg {
  width: 15px;
  height: 15px;
}

.cart__remove:active {
  background: rgba(192, 57, 43, 0.1);
  color: #c0392b;
}

.cart__foot {
  flex: none;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(108, 58, 155, 0.1);
  background: var(--c-white);
  box-shadow: 0 -16px 28px -24px rgba(20, 6, 34, 0.75);
}

.cart__foot[hidden] {
  display: none;
}

.cart__summary {
  display: grid;
  gap: 5px;
}

.cart__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 0.78rem;
  color: #6f5e86;
}

.cart__row--total {
  margin-top: 5px;
  padding-top: 9px;
  border-top: 1px solid rgba(108, 58, 155, 0.12);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-purple-deep);
}

.cart__row--total strong {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cart__free {
  color: #0e7a41;
  font-weight: 600;
}

.cart__note {
  margin: 9px 0 12px;
  font-size: 0.64rem;
  line-height: 1.45;
  color: #8b7aa6;
}

.cart__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.cart__back {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 1.5px solid rgba(108, 58, 155, 0.22);
  border-radius: var(--radius-pill);
  background: var(--c-white);
  color: var(--c-purple);
  padding: 0 8px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.cart__back:active {
  transform: scale(0.985);
}

.cart__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--c-blue-soft) 0%, var(--c-blue) 100%);
  color: var(--c-white);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 14px 24px -16px rgba(0, 114, 208, 0.95);
  transition: transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

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

.cart__checkout:active {
  transform: scale(0.985);
}

.cart__clear {
  display: inline-block;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #8b7aa6;
  font-size: 0.66rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cart__clear[hidden] {
  display: none;
}

@media (hover: hover) {
  .cart__close:hover {
    background: var(--c-purple);
    color: var(--c-white);
  }

  .cart__back:hover {
    background: rgba(108, 58, 155, 0.06);
  }

  .cart__remove:hover {
    background: rgba(192, 57, 43, 0.08);
    color: #c0392b;
  }

  .cart__checkout:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 18px 28px -16px rgba(0, 114, 208, 1);
  }

  .cart__empty-cta:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 18px 28px -16px rgba(0, 114, 208, 1);
  }
}

@media (min-width: 720px) {
  .cart {
    align-items: center;
    padding: 28px;
  }

  .cart__actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .cart__sheet {
    height: auto;
    max-height: 86vh;
    border-radius: 30px;
  }

  .cart__head {
    padding: 20px 24px 16px;
  }

  .cart__body {
    padding: 0 24px;
  }

  .cart__foot {
    padding: 16px 24px 18px;
  }
}

.pill--cart.is-bump {
  animation: pill-bump 0.45s var(--ease-out);
}

@keyframes pill-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@media (hover: hover) {
  .pmodal__close:hover {
    background: var(--c-purple);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95),
      0 14px 26px -12px rgba(24, 8, 40, 0.95);
  }

  .stepper__btn:hover {
    background: var(--c-purple);
    color: var(--c-white);
  }

  .pmodal__add:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 18px 28px -16px rgba(0, 114, 208, 1);
  }
}

@media (min-width: 720px) {
  .pmodal {
    align-items: center;
    padding: 28px;
  }

  .pmodal__sheet {
    height: auto;
    max-height: 86vh;
    border-radius: 30px;
  }

  .pmodal__grab {
    display: none;
  }

  .pmodal__close {
    top: 14px;
    right: 14px;
  }
}

/* --------------------------------------------------------------------------
   14. Checkout (checkout.html)
   Código postal → datos de envío → revisión.
   -------------------------------------------------------------------------- */
.co-page {
  background: #f2f5f7;
}

.co {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  background: var(--c-white);
  box-shadow: 0 24px 60px -40px rgba(18, 6, 32, 0.5);
}

.co__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(160deg, var(--c-purple) 0%, var(--c-purple-deep) 100%);
  color: var(--c-white);
}

.co__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 4px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  transition: background var(--dur) var(--ease-out);
}

.co__back svg {
  width: 16px;
  height: 16px;
}

.co__logo {
  width: auto;
  height: 22px;
}

.co__steps {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 12px 14px;
  list-style: none;
  background: #f4eefb;
}

.co__steps[hidden] {
  display: none;
}

.co__steps li {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(42, 22, 65, 0.45);
}

.co__steps li span {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(108, 58, 155, 0.12);
  color: var(--c-purple);
  font-size: 0.58rem;
  font-weight: 800;
}

.co__steps li.is-current {
  color: var(--c-purple-deep);
}

.co__steps li.is-current span {
  background: var(--c-purple);
  color: var(--c-white);
}

.co__steps li.is-done span {
  background: #12a150;
  color: var(--c-white);
}

.co__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

/* --- Tarjetas de paso ------------------------------------------------------ */
.co-card {
  padding: 20px 18px;
  border: 1px solid rgba(108, 58, 155, 0.1);
  border-radius: 22px;
  background: var(--c-white);
  box-shadow: 0 16px 30px -26px rgba(15, 6, 26, 0.8);
}

.co-card[hidden] {
  display: none;
}

.co-card__eyebrow {
  margin: 0 0 6px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-blue);
}

.co-card__title {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--c-purple-deep);
  text-wrap: balance;
}

.co-card__text {
  margin: 10px 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(42, 22, 65, 0.7);
}

/* --- Campos ---------------------------------------------------------------- */
.co-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.co-field__label {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(42, 22, 65, 0.62);
}

.co-field__opt {
  font-weight: 500;
  color: rgba(42, 22, 65, 0.4);
}

.co-field__req {
  color: #d64545;
  font-weight: 800;
}

.co-form__note {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(42, 22, 65, 0.5);
}

.co-form__note .co-field__req {
  margin-right: 3px;
}

.co-field__help {
  font-size: 0.66rem;
  color: rgba(42, 22, 65, 0.45);
}

.co-input {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1.5px solid rgba(108, 58, 155, 0.16);
  border-radius: 14px;
  background: #fbfafe;
  color: var(--c-purple-deep);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.co-input::placeholder {
  color: rgba(42, 22, 65, 0.34);
}

.co-input:focus {
  outline: none;
  border-color: var(--c-purple);
  background-color: var(--c-white);
  box-shadow: 0 0 0 3px rgba(108, 58, 155, 0.12);
}

.co-input[aria-invalid="true"] {
  border-color: #d64545;
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.12);
}

.co-input--area {
  min-height: 66px;
  padding-top: 10px;
  resize: vertical;
}

/* Select de colonias: mismo look que los inputs, con chevron propio */
.co-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c3a9b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  cursor: pointer;
}

.co-select:required:invalid {
  color: rgba(42, 22, 65, 0.34);
}

.co-select option {
  color: var(--c-purple-deep);
}

.co-select[hidden],
.co-input[hidden] {
  display: none;
}

.co-field--zip .co-input {
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
}

.co-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.co-grid--3 {
  grid-template-columns: 1fr 1fr;
}

/* en móvil el CP ocupa toda la fila para no quedar solo en media columna */
.co-grid--3 > .co-field:last-child {
  grid-column: 1 / -1;
}

.co-zip,
.co-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.co-zip {
  margin-top: 18px;
}

.co-form {
  margin-top: 16px;
}

/* --- Botones --------------------------------------------------------------- */
.co-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.co-btn svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.co-btn--primary {
  background: linear-gradient(
    180deg,
    var(--c-blue-soft) 0%,
    var(--c-blue) 60%,
    var(--c-blue-deep) 100%
  );
  box-shadow: 0 16px 26px -16px rgba(0, 140, 255, 0.95);
  color: var(--c-white);
}

.co-btn--primary:active {
  transform: scale(0.99);
}

.co-btn--ghost {
  margin-top: 10px;
  border: 1.5px solid rgba(108, 58, 155, 0.22);
  background: transparent;
  color: var(--c-purple);
}

.co-btn[disabled] {
  opacity: 0.72;
  cursor: progress;
}

/* Decisión cuando el CP no existe (o falla la consulta) */
.co-choice {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(214, 69, 69, 0.2);
  border-radius: 16px;
  background: rgba(214, 69, 69, 0.06);
}

.co-choice[hidden] {
  display: none;
}

.co-choice__text {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #9c2f2f;
}

.co-choice__text strong {
  color: #7f2222;
}

.co-choice__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.co-choice__actions .co-btn {
  min-height: 46px;
  font-size: 0.84rem;
}

.co-choice__actions .co-btn--ghost {
  margin-top: 0;
}

.co-btn.is-loading svg {
  animation: co-spin 1s linear infinite;
}

@keyframes co-spin {
  to { transform: rotate(360deg); }
}

/* --- Mensajes -------------------------------------------------------------- */
.co-status {
  margin: 12px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(42, 22, 65, 0.6);
}

.co-status:empty {
  display: none;
}

.co-status.is-error {
  color: #c0392b;
  font-weight: 600;
}

.co-status.is-ok {
  color: #0f8a45;
  font-weight: 600;
}

/* --- Lugar detectado ------------------------------------------------------- */
.co-place {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(18, 161, 80, 0.08);
  color: #0f8a45;
  font-size: 0.8rem;
  font-weight: 600;
}

.co-place[hidden] {
  display: none;
}

/* variante cuando el CP no se pudo validar */
.co-place.is-manual {
  background: rgba(255, 176, 0, 0.16);
  color: #8a5a00;
}

.co-place.is-manual .co-place__edit {
  color: #6b4600;
}

.co-place svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.co-place > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.co-place__edit {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--c-purple);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Revisión -------------------------------------------------------------- */
.co-review {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 18px;
}

.co-review__subtitle {
  margin: 6px 0 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(42, 22, 65, 0.5);
}

.co-review__address {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  border-radius: 16px;
  background: #f7f4fc;
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.45;
  color: rgba(42, 22, 65, 0.78);
}

.co-review__address strong {
  font-size: 0.88rem;
  color: var(--c-purple-deep);
}

.co-review__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: rgba(42, 22, 65, 0.8);
}

.co-review__items li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.co-review__qty {
  flex: none;
  font-weight: 700;
  color: var(--c-purple);
}

.co-review__name {
  flex: 1;
  min-width: 0;
}

.co-review__price {
  flex: none;
  font-weight: 700;
  color: var(--c-purple-deep);
}

.co-review__row-total {
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed rgba(108, 58, 155, 0.2);
}

.co-review__row-total strong {
  font-size: 0.96rem;
  color: var(--c-purple-deep);
}

.co-note {
  margin: 14px 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(42, 22, 65, 0.55);
}

/* --- Carrito vacío --------------------------------------------------------- */
.co-empty {
  text-align: center;
}

.co-empty .co-btn {
  margin-top: 16px;
}

/* --- Pago ------------------------------------------------------------------ */
.co-pay {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.co-pay__methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.co-pay__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1.5px solid rgba(108, 58, 155, 0.16);
  border-radius: 16px;
  background: #fbfafe;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.co-pay__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.co-pay__option:has(input:checked) {
  border-color: var(--c-purple);
  background: rgba(108, 58, 155, 0.06);
  box-shadow: 0 0 0 3px rgba(108, 58, 155, 0.08);
}

.co-pay__option:has(input:focus-visible) {
  outline: 2px solid var(--c-purple);
  outline-offset: 2px;
}

.co-pay__option.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.co-pay__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.co-pay__copy strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-purple-deep);
}

.co-pay__copy small {
  font-size: 0.76rem;
  line-height: 1.35;
  color: rgba(42, 22, 65, 0.6);
}

.co-pay__badge {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(42, 22, 65, 0.08);
  color: rgba(42, 22, 65, 0.6);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.co-pay__badge[hidden] {
  display: none;
}

[data-pay-amount] {
  font-weight: 800;
}

[data-pay-amount][hidden] {
  display: none;
}

.co-note__link {
  color: var(--c-purple);
  font-weight: 700;
  text-decoration: underline;
}

/* --- Pedido creado --------------------------------------------------------- */
.co-done {
  text-align: center;
}

.co-done__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(18, 161, 80, 0.12);
  color: #0f8a45;
}

.co-done__icon svg {
  width: 30px;
  height: 30px;
}

.co-done__order {
  margin: 14px 0 0;
  font-size: 0.86rem;
  color: rgba(42, 22, 65, 0.7);
}

.co-done__order strong {
  color: var(--c-purple-deep);
}

.co-done__status {
  margin: 10px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #0f8a45;
}

.co-done .co-btn {
  margin-top: 16px;
}

/* --- Resumen --------------------------------------------------------------- */
.co-summary {
  padding: 16px 18px;
  border: 1px solid rgba(108, 58, 155, 0.1);
  border-radius: 22px;
  background: #faf8fd;
}

.co-summary[hidden] {
  display: none;
}

.co-summary__title {
  margin: 0 0 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(42, 22, 65, 0.5);
}

.co-summary__details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--c-purple-deep);
  list-style: none;
  cursor: pointer;
}

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

.co-summary__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.co-summary__items li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.co-summary__items img {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--c-white);
  object-fit: contain;
}

.co-summary__item-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 0.78rem;
}

.co-summary__item-name {
  font-weight: 600;
  color: var(--c-purple-deep);
}

.co-summary__item-meta {
  font-size: 0.72rem;
  color: rgba(42, 22, 65, 0.55);
}

.co-summary__item-total {
  flex: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-purple-deep);
}

.co-summary__totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(108, 58, 155, 0.2);
}

.co-summary__totals div {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(42, 22, 65, 0.72);
}

.co-summary__totals dd {
  margin: 0;
  font-weight: 600;
}

.co-summary__free {
  color: #0f8a45;
}

.co-summary__total {
  padding-top: 6px;
  border-top: 1px solid rgba(108, 58, 155, 0.12);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--c-purple-deep);
}

/* --- Pie ------------------------------------------------------------------- */
.co__help {
  margin: 0;
  text-align: center;
  font-size: 0.76rem;
  color: rgba(42, 22, 65, 0.55);
}

.co__help a {
  color: var(--c-purple);
  font-weight: 600;
  text-decoration: underline;
}

.co__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  border-top: 1px solid rgba(108, 58, 155, 0.1);
  font-size: 0.72rem;
}

.co__foot a {
  color: rgba(42, 22, 65, 0.55);
}

@media (min-width: 420px) {
  .co-grid--3 {
    grid-template-columns: 0.85fr 0.85fr 1.1fr;
  }

  .co-grid--3 > .co-field:last-child {
    grid-column: auto;
  }

  .co-choice__actions {
    flex-direction: row;
  }

  .co-choice__actions .co-btn {
    flex: 1;
  }
}

@media (hover: hover) {
  .co-btn--primary:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 18px 28px -16px rgba(0, 114, 208, 1);
  }

  .co-btn--ghost:hover {
    background: rgba(108, 58, 155, 0.06);
  }

  .co__back:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  .co__foot a:hover {
    color: var(--c-purple);
  }
}

@media (min-width: 720px) {
  .co-page {
    padding: 28px 0;
    background: var(--c-cyan);
  }

  .co {
    min-height: auto;
    border-radius: 32px;
    overflow: hidden;
  }

  .co__top {
    padding: 18px 26px;
  }

  .co__steps {
    padding: 14px 26px;
  }

  .co__body {
    padding: 24px 26px;
  }

  .co-card {
    padding: 24px 22px;
  }
}