/*
 * TIENDA — paquetes, suscripciones y el dialogo de publicar.
 *
 * Una sola hoja para el modal del Studio, precios.html y el dialogo de publicar,
 * con la paleta y la tipografia del Studio (studio-workspace.css): papel, lienzo
 * y tinta verde en OKLCH, Cormorant Garamond para los titulos e Inter para la
 * interfaz. Sustituye al modal anterior (degradados dorados), que DESIGN-RULES
 * catalogaba como delator.
 *
 * Fluida de 280 px a 4K: rejillas con auto-fit y minmax(min(100%, …)), tipografia
 * con clamp() en rem (respeta el tamano base del usuario) y objetivos tactiles de
 * 44 px con puntero grueso.
 */
.tienda,
.pricing-modal,
.publicar-dialogo {
  --t-papel: oklch(99% .004 90);
  --t-lienzo: oklch(96.5% .007 85);
  --t-tinta: oklch(29% .017 155);
  --t-tinta-suave: oklch(38% .016 155);
  --t-apagado: oklch(47% .012 95);
  --t-linea: oklch(87% .013 90);
  --t-linea-fuerte: oklch(76% .015 95);
  --t-realce: oklch(93% .03 150);
  --t-error: oklch(46% .14 28);
  --t-ok: oklch(42% .09 150);
  --t-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --t-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-curva: cubic-bezier(0.22, 1, 0.36, 1);
  --t-objetivo: 40px;
  color: var(--t-tinta);
  font-family: var(--t-ui);
}

@media (pointer: coarse) {
  .tienda,
  .pricing-modal,
  .publicar-dialogo { --t-objetivo: 44px; }
}

/* ── Modal del Studio ─────────────────────────────────────────────── */
.pricing-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: oklch(22% .01 155 / .46);
}
.pricing-modal[hidden] { display: none; }

.pricing-modal-box {
  position: relative;
  width: min(1080px, 100%);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(1.25rem, 3vw, 2.75rem);
  background: var(--t-papel);
  border: 1px solid var(--t-linea);
  border-radius: 6px;
  box-shadow: 0 30px 80px oklch(25% .02 155 / .22);
}

.pricing-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--t-apagado);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.pricing-modal-close:hover { background: var(--t-lienzo); color: var(--t-tinta); }

/* En pantallas estrechas el modal es una hoja completa: sin margen perdido. */
@media (max-width: 520px) {
  .pricing-modal { padding: 0; place-items: stretch; }
  .pricing-modal-box { max-height: 100dvh; min-height: 100dvh; border-radius: 0; border: 0; padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
}

/* ── Contenido de la tienda ───────────────────────────────────────── */
.tienda { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }

.tienda__cabecera { max-width: 46rem; padding-right: 44px; }
.tienda__eyebrow {
  margin: 0 0 .6rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-apagado);
}
.tienda__titulo {
  margin: 0;
  font-family: var(--t-serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.tienda__nota {
  margin: .9rem 0 0;
  font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
  line-height: 1.55;
  color: var(--t-apagado);
  max-width: 38rem;
}

.tienda__vistas,
.tienda__ciclo {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--t-lienzo);
  border: 1px solid var(--t-linea);
  border-radius: 999px;
  justify-self: start;
  max-width: 100%;
}
.tienda__vistas button,
.tienda__ciclo button {
  min-height: var(--t-objetivo);
  padding: 0 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--t-apagado);
  font: 500 .92rem/1.2 var(--t-ui);
  cursor: pointer;
  transition: background-color .25s var(--t-curva), color .25s var(--t-curva);
}
.tienda__vistas button[aria-selected="true"],
.tienda__ciclo button[aria-checked="true"] {
  background: var(--t-papel);
  color: var(--t-tinta);
  box-shadow: 0 1px 2px oklch(25% .02 155 / .12), 0 0 0 1px var(--t-linea);
}
.tienda__ciclo-ahorro { color: var(--t-ok); font-weight: 600; }
/* Estrecho: dos columnas iguales en vez de una pildora que se parte en dos filas. */
@media (max-width: 520px) {
  .tienda__vistas, .tienda__ciclo { display: grid; grid-template-columns: 1fr 1fr; width: 100%; box-sizing: border-box; border-radius: 12px; justify-self: stretch; }
  .tienda__vistas button, .tienda__ciclo button { border-radius: 9px; padding: .45rem .6rem; line-height: 1.2; }
}

.tienda__estado:empty { display: none; }
.tienda__estado {
  margin: 0;
  padding: .85rem 1rem;
  border-left: 3px solid var(--t-tinta);
  background: var(--t-lienzo);
  font-size: .95rem;
  line-height: 1.5;
}
.tienda__estado[data-tono="error"] { border-left-color: var(--t-error); color: var(--t-error); }
.tienda__estado a { color: inherit; font-weight: 600; }

.tienda__rejilla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
  gap: clamp(.9rem, 1.6vw, 1.25rem);
  align-items: stretch;
}

.plan-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--t-papel);
  border: 1px solid var(--t-linea);
  border-radius: 4px;
  transition: border-color .3s var(--t-curva), box-shadow .3s var(--t-curva);
}
.plan-tarjeta:hover { border-color: var(--t-linea-fuerte); box-shadow: 0 14px 40px oklch(25% .02 155 / .08); }
.plan-tarjeta--destacada { border-color: var(--t-tinta); box-shadow: inset 0 0 0 1px var(--t-tinta); }
.plan-tarjeta--actual { background: var(--t-realce); }

.plan-tarjeta__insignia {
  position: absolute;
  top: -.8rem;
  left: clamp(1.25rem, 2vw, 1.75rem);
  margin: 0;
  padding: .3rem .7rem;
  background: var(--t-tinta);
  color: var(--t-papel);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  border-radius: 999px;
}
.plan-tarjeta__nombre {
  margin: 0;
  font-family: var(--t-serif);
  font-weight: 600;
  font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem);
  line-height: 1.1;
}
.plan-tarjeta__resumen { margin: -.4rem 0 0; font-size: .95rem; line-height: 1.45; color: var(--t-apagado); }
.plan-tarjeta__precio { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; }
.plan-tarjeta__monto {
  font-family: var(--t-serif);
  font-size: clamp(2.3rem, 1.9rem + 1.4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.plan-tarjeta__periodo { font-size: .9rem; color: var(--t-apagado); }
.plan-tarjeta__equivale { margin: -.5rem 0 0; font-size: .85rem; color: var(--t-ok); }
.plan-tarjeta__lista {
  list-style: none;
  margin: 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--t-linea);
  display: grid;
  gap: .55rem;
  font-size: .95rem;
  line-height: 1.4;
  flex: 1;
}
.plan-tarjeta__lista li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .5rem; }
.plan-tarjeta__lista li::before {
  content: '';
  width: .55rem;
  height: .3rem;
  margin-top: .42rem;
  border-left: 1.5px solid var(--t-tinta);
  border-bottom: 1.5px solid var(--t-tinta);
  transform: rotate(-45deg);
}
.plan-tarjeta__saldo { margin: 0; font-size: .9rem; font-weight: 600; color: var(--t-ok); }

.tienda-boton,
.plan-tarjeta__accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--t-objetivo);
  padding: .55rem 1.2rem;
  border: 1px solid var(--t-tinta);
  border-radius: 3px;
  background: var(--t-papel);
  color: var(--t-tinta);
  font: 600 .95rem/1.2 var(--t-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--t-curva), color .25s var(--t-curva), transform .2s var(--t-curva);
}
.plan-tarjeta__accion { width: 100%; }
.plan-tarjeta--destacada .plan-tarjeta__accion,
.tienda-boton--primario { background: var(--t-tinta); color: var(--t-papel); }
.tienda-boton:hover,
.plan-tarjeta__accion:hover { background: var(--t-tinta-suave); color: var(--t-papel); }
.tienda-boton:active,
.plan-tarjeta__accion:active { transform: translateY(1px); }
.tienda-boton:disabled,
.plan-tarjeta__accion:disabled { opacity: .55; cursor: not-allowed; background: var(--t-lienzo); color: var(--t-apagado); border-color: var(--t-linea); }
.tienda-boton:focus-visible,
.plan-tarjeta__accion:focus-visible,
.tienda__vistas button:focus-visible,
.tienda__ciclo button:focus-visible,
.pricing-modal-close:focus-visible { outline: 2px solid var(--t-tinta); outline-offset: 3px; }
.plan-tarjeta__accion[aria-busy="true"] { cursor: progress; opacity: .7; }

.tienda__complemento,
.tienda__pie { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--t-apagado); }
.tienda__complemento { padding: 1rem 1.1rem; border: 1px dashed var(--t-linea-fuerte); border-radius: 4px; }
.tienda__pie { padding-top: 1rem; border-top: 1px solid var(--t-linea); }
.tienda__complemento a,
.tienda__pie a { color: var(--t-tinta); font-weight: 600; text-underline-offset: 3px; }
.tienda__cargando { margin: 0; color: var(--t-apagado); }

/* ── Dialogo de publicar ─────────────────────────────────────────── */
.publicar-dialogo {
  /* El reset global del Studio (* { margin: 0 }) anula el centrado nativo de <dialog>. */
  margin: auto;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid var(--t-linea);
  border-radius: 6px;
  background: var(--t-papel);
  box-shadow: 0 30px 80px oklch(25% .02 155 / .25);
}
.publicar-dialogo::backdrop { background: oklch(22% .01 155 / .46); }
/* En el telefono, hoja inferior: el pulgar alcanza las acciones y el teclado no la tapa. */
@media (max-width: 520px) {
  .publicar-dialogo { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 14px 14px 0 0; border-bottom: 0; }
  .publicar-dialogo__cuerpo { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
}
.publicar-dialogo__cuerpo { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 3vw, 2rem); }
.publicar-dialogo h2 { margin: 0; font-family: var(--t-serif); font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.1; }
.publicar-dialogo p { margin: 0; line-height: 1.5; color: var(--t-apagado); }
.publicar-dialogo fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: .6rem; }
.publicar-dialogo legend { margin-bottom: .5rem; font-weight: 600; }
.publicar-opcion {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem .75rem;
  align-items: start;
  min-height: 44px;
  padding: .8rem .9rem;
  border: 1px solid var(--t-linea);
  border-radius: 4px;
  cursor: pointer;
}
.publicar-opcion:has(input:checked) { border-color: var(--t-tinta); box-shadow: inset 0 0 0 1px var(--t-tinta); background: var(--t-realce); }
.publicar-opcion input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--t-tinta); grid-row: span 2; }
.publicar-opcion strong { font-weight: 600; }
.publicar-opcion span { font-size: .88rem; color: var(--t-apagado); }
.publicar-legal { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; font-size: .92rem; line-height: 1.5; cursor: pointer; }
.publicar-legal input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--t-tinta); }
.publicar-legal a { color: var(--t-tinta); font-weight: 600; }
.publicar-dialogo__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.publicar-dialogo__acciones .tienda-boton { flex: 1 1 10rem; }
.publicar-dialogo__estado:empty { display: none; }
.publicar-dialogo__estado { color: var(--t-error); font-size: .92rem; }

@media (prefers-reduced-motion: reduce) {
  .plan-tarjeta, .tienda-boton, .plan-tarjeta__accion, .tienda__vistas button, .tienda__ciclo button { transition: none; }
}

/* ── Pagina publica de precios ────────────────────────────────────── */
body.pagina-precios {
  margin: 0;
  min-height: 100dvh;
  background: var(--t-lienzo, oklch(96.5% .007 85));
}
.pagina-precios__marco {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: max(1.25rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 3rem) max(2.5rem, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.pagina-precios__barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; padding: .5rem 0 clamp(1.5rem, 4vw, 3rem); }
.pagina-precios__marca { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.6rem; color: oklch(29% .017 155); text-decoration: none; }
.pagina-precios__barra nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.pagina-precios__barra nav a { display: inline-flex; align-items: center; min-height: 44px; color: oklch(29% .017 155); font: 500 .95rem/1 'Inter', system-ui, sans-serif; text-underline-offset: 4px; }
.pagina-precios__lienzo { background: oklch(99% .004 90); border: 1px solid oklch(87% .013 90); border-radius: 6px; padding: clamp(1.25rem, 4vw, 3.5rem); }

/* Pantallas muy grandes: la tipografia base crece con el ancho (en rem, asi que
   el zoom del usuario sigue mandando). */
@media (min-width: 1600px) {
  html:has(> body.pagina-precios) { font-size: clamp(100%, calc(100% + (100vw - 1600px) * .0036), 150%); }
}

/* ── Enlace en el dialogo de publicar ─────────────────────────────── */
.publicar-enlace { display: grid; gap: .45rem; }
.publicar-enlace__etiqueta { font-weight: 600; }
.publicar-enlace__campo {
  display: flex;
  align-items: stretch;
  min-height: 48px;
  border: 1px solid var(--t-linea-fuerte);
  border-radius: 4px;
  background: var(--t-papel);
  overflow: hidden;
}
.publicar-enlace__campo:focus-within { border-color: var(--t-tinta); box-shadow: 0 0 0 1px var(--t-tinta); }
.publicar-enlace__prefijo {
  display: flex;
  align-items: center;
  max-width: 45%;
  padding: 0 .55rem 0 .75rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .9rem;
  color: var(--t-apagado);
  background: var(--t-lienzo);
  border-right: 1px solid var(--t-linea);
}
/* 16 px: por debajo, Safari en iPhone hace zoom al enfocar el campo. */
.publicar-enlace input { flex: 1; min-width: 0; padding: 0 .75rem; border: 0; outline: none; background: transparent; color: var(--t-tinta); font: 500 1rem var(--t-ui); }
.publicar-enlace__ayuda { font-size: .85rem; color: var(--t-apagado); }