/* ticket.css - Paquete Único (tarjeta apaisada única)
   Especificación de diseño: Oct 2026 "Paquete de Trabajo 1"
   Medido en PNG de referencia 1800x1532px (tarjeta a 1680x1420 px de diseño)
   Escalado: fluido con clamp() para responsivo */

/* Paleta de colores (valores hex exactos de la sección 2 de spec) */
.pu {
  --pu-bg: #131517;           /* Fondo de pagina */
  --pu-card: #ffffff;         /* Tarjeta */
  --pu-panel: #f0f3e8;        /* Paneles claros */
  --pu-text: #262c26;         /* Texto de cuerpo */
  --pu-title: #1a1e18;        /* Titulares dentro de tarjeta */
  --pu-olive: #424e2a;        /* Verde oliva (vinetas, boton, remate) */
  --pu-olive-l: #6c7c4c;      /* Verde oliva claro (etiquetas, kickers, compromisos) */
  --pu-sage: #96a868;         /* Verde salvia (kicker sobre fondo oscuro) */
  --pu-gray: #80867c;         /* Gris de apoyo ("/ mes", "Suscripcion...") */
  --pu-gold: #c4982e;         /* Dorado (filetes y barras laterales) */
  --pu-terra: #b06541;        /* Terracota (solo kicker ENTRA AHORA y su barra) */
  --pu-quote-bar: #c4cabc;    /* Barra de las citas */
  --pu-quote-text: #606a58;   /* Texto de las citas */
  --pu-phrase-text: #3e4638;  /* Texto de la frase */
  --pu-divider: #ced4ca;      /* Divisor vertical */
}

/* Tema claro: tarjeta invertida (tarjeta oscura sobre fondo claro) */
[data-theme="light"] .pu {
  --pu-text: #dcdedb;         /* Texto claro en tarjeta oscura */
  --pu-title: #f4f5f2;        /* Títulos claros en tarjeta oscura */
  --pu-card: #212426;         /* Superficie de tarjeta oscura */
  --pu-panel: rgba(255, 255, 255, 0.06);  /* Paneles ligeramente más claros */
  --pu-gray: #9a9fa0;         /* Gris más claro para texto secundario */
  --pu-olive: #a8af89;        /* Olive más claro para contraste en tarjeta oscura */
  --pu-olive-l: #a8af89;      /* Olive más claro para etiquetas */
  --pu-sage: #96a868;         /* Salvia sigue siendo razonable */
  --pu-gold: #cba65b;         /* Dorado más claro para contraste */
  --pu-terra: #dc9070;        /* Terracota más claro */
  --pu-quote-bar: #4a4e51;    /* Barra de citas oscura */
  --pu-quote-text: #c9cdb8;   /* Texto de cita claro */
  --pu-phrase-text: #e1e2e5;  /* Texto de frase claro */
  --pu-divider: #4a4e51;      /* Separador oscuro */
}

/* Configuración del contenedor */
.pu {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
  margin: 0 auto;
}

.pu-header {
  text-align: left;
}

.pu-header .eyebrow {
  color: var(--pu-sage);
}

/* Tarjeta */
.pu-card {
  background: var(--pu-card);
  border-radius: clamp(16px, 2vw, 28px);
  position: relative;
  box-shadow: 0 1px 2px rgba(25, 28, 30, 0.04), 0 8px 24px rgba(25, 28, 30, 0.06);
  padding: clamp(22px, 2.4vw, 38px) clamp(24px, 3vw, 46px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
}

/* Barra dorada arriba de la tarjeta, incrustada en las esquinas redondeadas (PNG de spec) */
.pu-card::before {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(6px, 0.55vw, 9px) - 2px);
  left: 1.2%;
  right: 1.2%;
  height: clamp(6px, 0.55vw, 9px);
  border-radius: 3px 3px 0 0;
  background: var(--pu-gold);
}

/* Sombra de la tarjeta en tema claro */
[data-theme="light"] .pu-card {
  box-shadow: 0 1px 2px rgba(25, 28, 30, 0.08), 0 8px 24px rgba(25, 28, 30, 0.14);
}

/* Título de la tarjeta con línea dorada corta */
.pu-card-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: normal;
  color: var(--pu-title);
  margin: 0;
  padding-bottom: clamp(8px, 1vw, 14px);
  position: relative;
  display: inline-block;
}

.pu-card-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(70px, 8.6vw, 145px);
  height: clamp(4px, 0.4vw, 6px);
  background: var(--pu-gold);
}

/* Grid principal: 2 columnas en escritorio, 1 en móvil */
.pu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: 0;
}

@media (min-width: 1024px) {
  .pu-grid {
    /* Grid de spec: izquierda 528 / derecha 946 px de diseño (aproximadamente 36/64) */
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.8fr);
    gap: 0;
  }
}

/* Columna izquierda: alineada arriba con botón anclado abajo */
.pu-left {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
}

@media (min-width: 1024px) {
  .pu-left {
    grid-column: 1;
    padding-right: clamp(20px, 3vw, 40px);
    justify-content: flex-start;
  }
}

/* Separador vertical (solo en escritorio, solo a altura de items) */
.pu-divider {
  display: none;
  width: 1px;
  background: var(--pu-divider);
  margin: 0;
}

@media (min-width: 1024px) {
  .pu-divider {
    display: block;
    grid-column: 2;
    grid-row: 1;
  }
}

/* Sección de precio */
.pu-label {
  font-family: 'Anton', sans-serif;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: clamp(2px, 0.25vw, 3.5px);
  text-transform: uppercase;
  color: var(--pu-olive-l);
  margin: 0;
}

.pu-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 clamp(8px, 1vw, 14px);
}

.pu-price-figure {
  font-family: 'Anton', sans-serif;
  font-size: clamp(2.8rem, 5.2vw, 5rem);
  font-weight: normal;
  color: var(--pu-title);
  line-height: 1;
  white-space: nowrap;
}

.pu-price-period {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--pu-gray);
  font-weight: 400;
}

/* Condiciones: un panel que contiene ambas condiciones */
.pu-conditions {
  background: var(--pu-panel);
  border-left: clamp(3px, 0.4vw, 6px) solid var(--pu-gold);
  padding: clamp(10px, 1.2vw, 16px) clamp(16px, 2vw, 28px);
  border-radius: clamp(4px, 0.5vw, 8px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 12px);
}

.pu-condition {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pu-condition-label {
  font-family: 'Anton', sans-serif;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: clamp(2px, 0.2vw, 3px);
  text-transform: uppercase;
  color: var(--pu-olive-l);
}

.pu-condition-text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--pu-text);
}

/* Panel de frase */
.pu-phrase {
  background: var(--pu-panel);
  border-left: clamp(3px, 0.4vw, 6px) solid var(--pu-gold);
  padding: clamp(12px, 1.4vw, 20px) clamp(16px, 2vw, 28px);
  border-radius: clamp(4px, 0.5vw, 8px);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.6vw, 8px);
  margin-top: clamp(4px, 0.6vw, 8px);
}

.pu-phrase em {
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.8vw, 19px);
  font-style: italic;
  line-height: 1.4;
  color: var(--pu-phrase-text);
}

.pu-phrase strong {
  font-family: 'Inter', sans-serif;
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 700;
  color: var(--pu-olive);
}

/* Contenedor de botón para anclaje inferior en escritorio */
.pu-button-wrapper {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vw, 10px);
  margin-top: clamp(12px, 1.6vw, 20px);
}

@media (min-width: 1024px) {
  .pu-button-wrapper {
    grid-column: 1;
    margin-top: auto;
  }
}

.pu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', sans-serif;
  font-size: clamp(18px, 1.7vw, 26px);
  letter-spacing: clamp(3px, 0.35vw, 6px);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pu-panel);
  background: var(--pu-olive);
  border: none;
  border-radius: clamp(8px, 1vw, 12px);
  padding: clamp(14px, 1.2vw, 20px) clamp(10px, 1.2vw, 20px);
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
  min-height: clamp(56px, 5.2vw, 84px);
}

.pu-btn:hover,
.pu-btn:focus-visible {
  background: #55643a;
}

.pu-subscription {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--pu-gray);
  margin: 0;
  padding: 0;
}

/* Columna derecha: items en layout de 2 columnas */
.pu-right {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
}

@media (min-width: 1024px) {
  .pu-right {
    grid-column: 3;
    grid-row: 1;
    padding-left: clamp(20px, 3vw, 40px);
  }
}

/* Items: una columna en móvil, 2 columnas en escritorio (4+4 column-major) */
.pu-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 18px);
}

@media (min-width: 1024px) {
  .pu-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    gap: clamp(12px, 1.5vw, 20px) clamp(24px, 3vw, 48px);
  }
}

.pu-items li {
  position: relative;
  padding-left: clamp(20px, 2.5vw, 32px);
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.4;
  color: var(--pu-text);
}

.pu-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(4px, 0.5vw, 8px);
  width: clamp(10px, 1.2vw, 16px);
  height: clamp(10px, 1.2vw, 16px);
  background: var(--pu-olive);
  border-radius: 2px;
}

/* Comillas (blockquote) */
.pu-items blockquote {
  display: block;
  margin: clamp(6px, 0.7vw, 8px) 0 0 0;
  padding: 0 0 0 clamp(12px, 1.5vw, 16px);
  border-left: clamp(2px, 0.25vw, 3px) solid var(--pu-quote-bar);
  font-family: 'Inter', sans-serif;
  font-size: clamp(14px, 1.5vw, 17px);
  font-style: italic;
  line-height: 1.45;
  color: var(--pu-quote-text);
}

/* Línea de horario (item 1) */
.pu-schedule {
  display: block;
  margin-top: clamp(4px, 0.6vw, 8px);
  font-family: 'Inter', sans-serif;
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 700;
  color: var(--pu-olive);
  line-height: 1.4;
}

/* Barra ENTRA AHORA: ancho completo debajo de items */
.pu-entra-ahora {
  background: var(--pu-panel);
  border-left: clamp(4px, 0.5vw, 8px) solid var(--pu-terra);
  padding: clamp(14px, 1.6vw, 22px) clamp(18px, 2vw, 28px);
  border-radius: clamp(4px, 0.5vw, 8px);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.6vw, 8px);
  margin-top: clamp(8px, 1.2vw, 16px);
}

@media (min-width: 1024px) {
  .pu-entra-ahora {
    grid-column: 3;
    grid-row: 2;
    margin-top: 0;
  }
}

.pu-entra-label {
  font-family: 'Anton', sans-serif;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: clamp(2.5px, 0.3vw, 4px);
  text-transform: uppercase;
  color: var(--pu-terra);
}

.pu-entra-text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--pu-title);
  margin: 0;
  padding: 0;
}

/* Pie de página: compromisos */
.pu-footer {
  border-top: 1px solid var(--pu-divider);
  padding-top: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(4px, 0.8vw, 10px);
}

.pu-commitments {
  text-align: center;
  font-family: 'Anton', sans-serif;
  font-size: clamp(13px, 1.25vw, 18px);
  letter-spacing: clamp(2px, 0.25vw, 3.5px);
  text-transform: uppercase;
  color: var(--pu-olive-l);
  margin: 0;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Cada compromiso permanece en una línea; el salto ocurre solo en los puntos */
.pu-commitments span {
  white-space: nowrap;
}

/* Layout de una columna (debajo del punto de quiebre de 2 columnas): aplanar ambas
   columnas para que sus elementos hijos se conviertan en items de grid y sigan el
   orden de móvil del spec: precio/condiciones, items, ENTRA AHORA, frase, botón */
@media (max-width: 1023px) {
  .pu-left,
  .pu-right {
    display: contents;
  }

  .pu-grid {
    grid-template-columns: 1fr;
    gap: clamp(16px, 3vw, 24px);
  }

  .pu-card {
    padding: clamp(24px, 5vw, 40px);
  }

  .pu-label,
  .pu-price,
  .pu-conditions {
    order: 1;
  }

  .pu-items {
    order: 2;
  }

  .pu-entra-ahora {
    order: 3;
  }

  .pu-phrase {
    order: 4;
  }

  .pu-button-wrapper {
    order: 5;
  }

  .pu-footer {
    order: 6;
  }

  .pu-commitments {
    text-align: center;
  }
}

/* Menos aire arriba: viene a continuación de Testimonios */
.oferta {
  padding-top: clamp(40px, 5vw, 72px);
}

/* Aumentar ancho del contenedor de sección */
.oferta .section-inner {
  max-width: 1400px;
}

/* Tema claro (tarjeta oscura): el botón olive claro necesita texto oscuro */
[data-theme="light"] .pu-btn {
  color: #131517;
}

[data-theme="light"] .pu-btn:hover,
[data-theme="light"] .pu-btn:focus-visible {
  background: #c4caa3;
}