/* ============================================================
   APPTITUD.NET — Hoja de estilos principal
   Archivo : css/apptitud.css
   Fuente  : Bootstrap 5 + Bootstrap Icons + Google Fonts (Inter)
   ============================================================ */


/* ============================================================
   1. VARIABLES DE MARCA (Design Tokens)
   ============================================================ */
:root {
  --ap-yellow : #F5A623;   /* Amarillo corporativo        */
  --ap-orange : #E8542A;   /* Naranja corporativo         */
  --ap-teal   : #3A9E8D;   /* Verde teal corporativo      */
  --ap-dark   : #1A1A2E;   /* Fondo oscuro                */
  --ap-gray   : #F8F9FA;   /* Fondo gris claro            */
  --ap-text   : #4A4A6A;   /* Color de texto general      */
}


/* ============================================================
   2. LOGIN / RESET / BASE
   ============================================================ */
   
#loginTabs .nav-link {
  color: var(--ap-dark) !important;
}
#loginTabs .nav-link.active {
  color: var(--ap-orange) !important;
  border-bottom: 2px solid var(--ap-orange);
  background: transparent;
}   
   
* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--ap-text);
  overflow-x: hidden;
}

section {
  padding: 5rem 0;
}


/* ============================================================
   3. NAVBAR
   Transparente sobre el hero, blanco al hacer scroll (.scrolled
   se agrega via JS cuando window.scrollY > 20).
   ============================================================ */
.navbar {
  background: transparent;
  box-shadow: none;
  padding: 1rem 0;
  transition: background .35s ease, box-shadow .35s ease;
}

/* Estado fijo (después de scroll) */
.navbar.scrolled {
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

.navbar-brand img {
  height: 40px;
}

/* Logo: blanco sobre hero, color de marca al scrollear */
.nav-logo-text          { color: rgba(255, 255, 255, .92); transition: color .35s; }
.nav-logo-a             { color: rgba(255, 255, 255, .92); transition: color .35s; }
.nav-logo-dot           { color: rgba(255, 255, 255, .75); transition: color .35s; }

.navbar.scrolled .nav-logo-text { color: var(--ap-dark); }
.navbar.scrolled .nav-logo-a    { color: var(--ap-orange); }
.navbar.scrolled .nav-logo-dot  { color: var(--ap-teal); }

/* Links: blancos en hero, oscuros al scrollear */
.nav-link {
  font-weight: 500;
  color: rgba(255, 255, 255, .88) !important;
  transition: color .2s;
}

.navbar.scrolled .nav-link {
  color: var(--ap-dark) !important;
}

.nav-link:hover {
  color: #fff !important;
}

.navbar.scrolled .nav-link:hover {
  color: var(--ap-orange) !important;
}

/* Ícono hamburguesa: blanco sobre hero */
.navbar:not(.scrolled) .navbar-toggler-icon {
  filter: invert(1);
}

/* Logos intercambiables según estado del navbar */
.logo-blanco { display: block; }
.navbar.scrolled .logo-blanco { display: none; }

.logo-negro  { display: none; }
.navbar.scrolled .logo-negro  { display: block; }

/* Botón principal de acción (CTA) */
.btn-ap {
  background: linear-gradient(135deg, var(--ap-orange), var(--ap-yellow));
  color: #fff !important;
  border: none;
  border-radius: 50px;
  padding: .5rem 1.5rem;
  font-weight: 600;
  transition: opacity .2s, transform .2s;
}

.btn-ap:hover {
  opacity: .9;
  transform: translateY(-1px);
}

/* Botón secundario (outline) */
.btn-ap-outline {
  border: 2px solid rgba(255, 255, 255, .4);
  color: #fff !important;
  border-radius: 50px;
  padding: .6rem 1.8rem;
  font-weight: 600;
  background: transparent;
  transition: background .2s, border-color .2s;
}

.btn-ap-outline:hover {
  background: rgba(255, 255, 255, .1);
  border-color: #fff;
}

/* Logo responsivo en hero */
.logo-responsive {
  max-height: 60px;
  width: auto;
  margin-bottom: 1.5rem;
  display: block;
}


/* ============================================================
   4. HERO
   ============================================================ */
.hero {
  background: linear-gradient(135deg, var(--ap-dark) 0%, #16213E 60%, #0F3460 100%);
  color: #fff;
  padding: 6rem 0 5rem;
  position: relative;
  overflow: hidden;
}

/* Overlay de radiales sobre el video */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(232, 84, 42, .18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(58, 158, 141, .15) 0%, transparent 60%);
  z-index: 1;
}

/* 4a. VIDEO DE FONDO (Vimeo / YouTube embed) */
.video-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;       /* ratio 16:9 */
  min-height: 100%;
  min-width: 177.78vh;   /* ratio 16:9 inverso */
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}

/* 4b. BADGE / ETIQUETA SOBRE EL HERO */
.hero-badge {
  display: inline-block;
  background: rgba(245, 166, 35, .15);
  border: 1px solid rgba(245, 166, 35, .4);
  color: var(--ap-yellow);
  border-radius: 50px;
  padding: .3rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

/* 4c. TIPOGRAFÍA DEL HERO */
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.2rem;
}

.hero h1 span {
  background: linear-gradient(90deg, var(--ap-yellow), var(--ap-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, .75);
  max-width: 520px;
}

/* 4d. POST-IT (tarjeta estilo nota adhesiva sobre el hero) */
.hero-postit {
  background: rgba(255, 220, 60, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 4px 18px 18px 18px;
  padding: 2.5rem 2.2rem 2rem;
  position: relative;
  box-shadow:
    4px 6px 18px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  clip-path: polygon(18px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 18px);
}

/* Doblez superior izquierdo del post-it */
.hero-postit::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background: rgba(180, 140, 0, 0.45);
  clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
  border-radius: 0 0 4px 0;
}

/* Ajuste de colores de texto dentro del post-it */
.hero-postit .hero-badge {
  background: rgba(180, 120, 0, .18);
  border-color: rgba(160, 100, 0, .45);
  color: #5a3a00;
}

.hero-postit h1       { color: #1a1000; }
.hero-postit h1 span  {
  background: linear-gradient(90deg, #c47000, #e8320a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-postit p        { color: rgba(30, 20, 0, .8); }

/* 4e. MOCKUP DE APP (panel derecho del hero) */
.hero-img-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-mock {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(10px);
  width: 100%;
  max-width: 460px;
}

/* Barra de "semáforo" del mockup */
.mock-bar {
  display: flex;
  gap: .4rem;
  margin-bottom: 1.2rem;
}

.mock-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.mock-bar span:nth-child(1) { background: #FF5F56; }
.mock-bar span:nth-child(2) { background: #FFBD2E; }
.mock-bar span:nth-child(3) { background: #27C93F; }

/* Filas de módulos dentro del mockup */
.mock-row {
  background: rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: .75rem 1rem;
  margin-bottom: .7rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  color: rgba(255, 255, 255, .85);
  font-size: .88rem;
}

.mock-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}


/* ============================================================
   5. BANDA DE ESTADÍSTICAS (Stats Band)
   ============================================================ */
.stats-band {
  background: #fff;
  border-bottom: 1px solid #eee;
}

.stat-item {
  text-align: center;
  padding: 2rem 1rem;
}

.stat-item .num {
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--ap-orange), var(--ap-yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-item p {
  margin: 0;
  font-size: .9rem;
  color: var(--ap-text);
}


/* ============================================================
   6. ELEMENTOS DE SECCIÓN GENÉRICOS
   (usados en Productos, Beneficios, Testimonios, etc.)
   ============================================================ */
.section-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ap-orange);
  margin-bottom: .5rem;
}

.section-title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--ap-dark);
  margin-bottom: 1rem;
}

.section-sub {
  font-size: 1rem;
  color: var(--ap-text);
  max-width: 560px;
}

/* Lista con checks (usada en Beneficios y tarjetas de producto) */
.check-list li {
  list-style: none;
  padding: .4rem 0;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .95rem;
}

.check-list li i {
  color: var(--ap-teal);
  font-size: 1.1rem;
  margin-top: .1rem;
  flex-shrink: 0;
}


/* ============================================================
   7. SECCIÓN DE PRODUCTOS (Tarjetas)
   ============================================================ */
.product-card {
  border: 1.5px solid #E8ECF0;
  border-radius: 20px;
  padding: 2rem;
  height: 100%;
  background: #fff;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}

.product-card:hover {
  border-color: var(--ap-orange);
  box-shadow: 0 12px 40px rgba(232, 84, 42, .12);
  transform: translateY(-4px);
}

.product-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
}

.product-card h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ap-dark);
  margin-bottom: .6rem;
}

.product-card p {
  font-size: .93rem;
  margin: 0;
}

/* Tag / etiqueta de categoría dentro de la tarjeta */
.tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 50px;
  padding: .2rem .75rem;
  margin-top: 1rem;
}


/* ============================================================
   8. SECCIÓN DE BENEFICIOS (Features alternadas)
   ============================================================ */
.feature-img {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .12);
}

/* Recuadro de mockup/dashboard en la columna visual */
.feature-mockup {
  border-radius: 20px;
  background: var(--ap-gray);
  padding: 2.5rem;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-mockup .inner {
  background: #fff;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  width: 100%;
}


/* ============================================================
   9. SECCIÓN DE TESTIMONIOS
   ============================================================ */
.testimonials {
  background: var(--ap-gray);
}

.testi-card {
  background: #fff;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
  height: 100%;
}

.testi-card .stars {
  color: var(--ap-yellow);
  font-size: 1rem;
  margin-bottom: .8rem;
}

.testi-card p {
  font-size: .93rem;
  font-style: italic;
  margin-bottom: 1.2rem;
}

/* Avatar circular con iniciales */
.testi-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ap-orange), var(--ap-teal));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
}


/* ============================================================
   10. SECCIÓN CTA FINAL (Call To Action)
   ============================================================ */
.cta-section {
  background: linear-gradient(135deg, var(--ap-dark), #0F3460);
  color: #fff;
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Halo de luz central */
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(232, 84, 42, .15) 0%, transparent 70%);
}

.cta-section h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 1rem;
}

.cta-section p {
  color: rgba(255, 255, 255, .7);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}


/* ============================================================
   11. FOOTER
   ============================================================ */
footer {
  background: var(--ap-dark);
  color: rgba(255, 255, 255, .6);
  padding: 3rem 0 2rem;
  font-size: .88rem;
}

footer .brand {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .5rem;
}

footer a {
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  transition: color .2s;
}

footer a:hover {
  color: var(--ap-yellow);
}

footer h6 {
  color: rgba(255, 255, 255, .9);
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.footer-divider {
  border-color: rgba(255, 255, 255, .1);
}

/* Iconos de redes sociales */
.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .6);
  transition: background .2s, color .2s;
}

.social-icon:hover {
  background: var(--ap-orange);
  color: #fff;
  border-color: var(--ap-orange);
}


/* ============================================================
   12. SECCIÓN PARA QUÉ SIRVE (Pin-cards)
   Grilla de 3 columnas con tarjetas estilo tablón de anuncios.
   Variantes de color: postit (amarillo), pink (rosa), green (verde).
   ============================================================ */

/* Tarjeta contenedora */
.pin-card {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid #E8ECF0;
  overflow: hidden;
  transition: box-shadow .25s, transform .25s, border-color .25s;
  position: relative;
}

.pin-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .10);
  border-color: transparent;
}

/* Barra de acento de color (borde superior) */
.pin-accent {
  height: 5px;
  width: 100%;
}

.pin-accent.postit { background: #F5C842; }
.pin-accent.pink   { background: #F06080; }
.pin-accent.green  { background: #3DBF8C; }

/* Cuerpo interior con padding */
.pin-body {
  padding: 1.25rem 1.4rem 1.4rem;
  gap: 1rem;
  align-items: flex-start;
}

/* Ícono circular a la izquierda */
.pin-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

.pin-icon.postit { background: rgba(245, 200, 66, .18); color: #C89A00; }
.pin-icon.pink   { background: rgba(240, 96, 128, .15); color: #D03060; }
.pin-icon.green  { background: rgba(61, 191, 140, .15); color: #1F9968; }

/* Título de la tarjeta */
.pin-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ap-dark);
  line-height: 1.3;
}

/* Texto descriptivo */
.pin-text {
  font-size: .85rem;
  color: var(--ap-text);
  line-height: 1.5;
  margin-top: .25rem;
}

/* Badge/etiqueta de categoría */
.pin-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  border-radius: 50px;
  padding: .18rem .65rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.pin-badge.postit { background: rgba(245, 200, 66, .20); color: #8A6800; }
.pin-badge.pink   { background: rgba(240, 96, 128, .15); color: #B02050; }
.pin-badge.green  { background: rgba(61, 191, 140, .15); color: #0F7A52; }


/* ============================================================
   13. SECCIÓN WHAT (video + mock izquierda + 4 tarjetas derecha)
   ============================================================ */

/* Contenedor principal */
.what-section {
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
  background: var(--ap-dark); /* fallback si el video no carga */
}

/* Overlay semitransparente sobre el video */
.what-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 35, 0.52);
  z-index: 1;
}

/* Las tarjetas what usan el .video-background existente —
   el z-index ya está definido en la regla del hero */

/* Tarjeta base */
.what-card {
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex: 1;           /* para que ocupen espacio parejo en flex-column */
}

/* Título dentro de la tarjeta */
.what-title {
  font-size: .98rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .55rem;
  line-height: 1.4;
}

.what-title .fa {
  opacity: .85;
}

/* Texto descriptivo */
.what-text {
  font-size: .86rem;
  color: rgba(255, 255, 255, .88);
  line-height: 1.6;
}

/* ── Variantes de color (con transparencia + blur) ── */
.custom-bg-ros { background: rgba(254, 119, 150, 0.85); }  /* rosa pastel */
.custom-bg-tur { background: rgba(160, 217, 239, 0.85); }  /* celeste pastel */
.custom-bg-ver { background: rgba(154, 230, 159, 0.85); }  /* verde pastel */
.custom-bg-ama { background: rgba(255, 247, 102, 0.65); }  /* amarillo post-it */
/* ── Responsive: ocultar video en mobile para no penalizar rendimiento ── */
@media (max-width: 767.98px) {
  .what-section .video-background {
    display: none;
  }
  .what-section {
    background: linear-gradient(135deg, var(--ap-dark) 0%, #0F3460 100%);
  }
}


/* ============================================================
   14. MODALES (FAQ, Login, Reset)
   ============================================================ */

/* Accordion con colores de marca */
.ap-accordion .accordion-button {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ap-dark);
  background: transparent;
  padding: 1rem 0;
}

.ap-accordion .accordion-button:not(.collapsed) {
  color: var(--ap-orange);
  background: transparent;
  box-shadow: none;
}

.ap-accordion .accordion-button::after {
  filter: none;
}

.ap-accordion .accordion-button:not(.collapsed)::after {
  filter: invert(45%) sepia(90%) saturate(600%) hue-rotate(350deg);
}

.ap-accordion .accordion-button:focus {
  box-shadow: none;
}

.ap-accordion .accordion-body {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 1rem;
}

/* Link pequeño de "¿Olvidaste tu contraseña?" */
.ap-link-sm {
  font-size: .84rem;
  color: var(--ap-orange);
  text-decoration: none;
  transition: color .2s;
}

.ap-link-sm:hover {
  color: var(--ap-dark);
  text-decoration: underline;
}


/* ============================================================
   15. FORMULARIO DE CONTACTO
   ============================================================ */

/* Focus con color de marca en lugar del azul Bootstrap */
.form-control:focus,
.form-select:focus {
  border-color: var(--ap-orange);
  box-shadow: 0 0 0 .2rem rgba(232, 84, 42, .18);
  outline: none;
}

/* Opción placeholder del select: gris mientras no hay selección */
.form-select:required:invalid { color: #9ca3af; }
.form-select option[value=""] { color: #9ca3af; }
.form-select option           { color: var(--ap-dark); }


/* ============================================================
   16. COOKIE ALERT
   ============================================================ */
.cookiealert {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0 !important;
  z-index: 1055;
  opacity: 0;
  border-radius: 0;
  transform: translateY(100%);
  transition: all .3s ease-in;
  background: var(--ap-dark);
  color: rgba(255, 255, 255, .85);
  border-top: 2px solid var(--ap-orange);
  padding: .85rem 1.5rem;
}

.cookiealert.show {
  opacity: 1;
  transform: translateY(0%);
  transition-delay: .5s;
}

.cookiealert a {
  color: var(--ap-yellow);
  text-decoration: underline;
}

.cookiealert .acceptcookies {
  background: linear-gradient(135deg, var(--ap-orange), var(--ap-yellow));
  border: none;
  border-radius: 50px;
  color: #fff;
  font-weight: 600;
  padding: .3rem 1.2rem;
  margin-left: .5rem;
  vertical-align: middle;
  cursor: pointer;
  transition: opacity .2s;
}

.cookiealert .acceptcookies:hover {
  opacity: .9;
}


/* ============================================================
   17. PLANES / PRICING (planes.html)
   ============================================================ */

/* Hero de la página de planes (sin video, gradiente puro) */
.planes-hero {
  background: linear-gradient(135deg, var(--ap-dark) 0%, #16213E 60%, #0F3460 100%);
  color: #fff;
  padding: 9rem 0 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.planes-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(232, 84, 42, .14) 0%, transparent 70%);
}

.planes-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  margin-bottom: 1rem;
}

.planes-hero p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .72);
  max-width: 580px;
  margin: 0 auto;
}

/* Tarjeta de plan */
.plan-card {
  border: 1.5px solid #E8ECF0;
  border-radius: 20px;
  padding: 2rem;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  position: relative;
}

.plan-card:hover {
  box-shadow: 0 12px 40px rgba(232, 84, 42, .12);
  transform: translateY(-4px);
}

/* Plan destacado */
.plan-card.featured {
  border-color: var(--ap-orange);
  box-shadow: 0 8px 32px rgba(232, 84, 42, .18);
}

/* Badge de plan */
.plan-badge-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 50px;
  padding: .25rem .9rem;
  margin-bottom: 1.2rem;
}

.plan-badge-label.starter    { background: rgba(58, 158, 141, .12);  color: var(--ap-teal);   }
.plan-badge-label.growth      { background: linear-gradient(135deg, var(--ap-orange), var(--ap-yellow)); color: #fff; }
.plan-badge-label.enterprise  { background: rgba(26, 26, 46, .08);   color: var(--ap-dark);  }

/* Nombre del plan */
.plan-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ap-dark);
  margin-bottom: .25rem;
}

/* Bloque de precio */
.plan-price-block {
  margin: 1rem 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #F0F0F0;
}

.plan-price-row {
  font-size: .82rem;
  color: var(--ap-text);
  margin-bottom: .3rem;
  display: flex;
  align-items: baseline;
  gap: .4rem;
}

.plan-price-row strong {
  font-size: 1.15rem;
  color: var(--ap-dark);
  font-weight: 800;
}

.plan-price-currency {
  font-size: .75rem;
  font-weight: 600;
}

.plan-desc {
  font-size: .88rem;
  color: var(--ap-text);
  margin-bottom: 1.5rem;
}

/* Lista de features del plan */
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  font-size: .88rem;
  flex: 1;
}

.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .45rem 0;
  border-bottom: 1px solid #F7F7F7;
  color: var(--ap-text);
  line-height: 1.45;
}

.plan-features li:last-child { border-bottom: none; }
.plan-features li:empty { display: none; }

.feat-check { color: var(--ap-teal);  flex-shrink: 0; margin-top: .15rem; font-size: .85rem; }
.feat-x     { color: #D0D0D0;         flex-shrink: 0; margin-top: .15rem; font-size: .85rem; }


/* ============================================================
   18. TÉRMINOS / PÁGINAS LEGALES (terminos.html)
   Concepto: tabs verticales izquierda + pane derecho
   ============================================================ */

/* ── Nav tabs vertical ── */
.terms-tabs-vertical {
  flex-direction: column;
  border-bottom: none;
  border-right: 2px solid #E8ECF0;
  gap: .1rem;
}

.terms-tabs-vertical .nav-link {
  text-align: left;
  border: none;
  border-right: 3px solid transparent;
  border-radius: 10px 0 0 10px;
  padding: .85rem 1.25rem;
  color: var(--ap-text);
  font-weight: 500;
  font-size: .92rem;
  transition: background .18s, color .18s, border-color .18s;
  margin-right: -2px;    /* solapa el borde derecho del ul */
}

.terms-tabs-vertical .nav-link:hover {
  background: rgba(232, 84, 42, .06);
  color: var(--ap-orange);
}

.terms-tabs-vertical .nav-link.active {
  background: rgba(232, 84, 42, .08);
  color: var(--ap-orange);
  border-right-color: var(--ap-orange);
  font-weight: 700;
}

.terms-tabs-vertical .nav-link i {
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

/* Separador de grupo entre tabs */
.terms-tab-sep {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #b0b0b0;
  padding: .9rem 1.25rem .2rem;
  pointer-events: none;
}

/* Pane de contenido */
.terms-tab-pane {
  background: #fff;
  border-radius: 0 16px 16px 16px;
  padding: 2rem 2.5rem 2.5rem;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
}

/* ── Texto legal ── */
.terms-content h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ap-dark);
  margin-top: 2rem;
  margin-bottom: .75rem;
  padding-bottom: .45rem;
  border-bottom: 2px solid #F0F0F0;
}

.terms-content h4:first-child { margin-top: 0; }

.terms-content strong {
  display: block;
  font-size: .93rem;
  font-weight: 700;
  color: var(--ap-dark);
  margin-top: 1.25rem;
  margin-bottom: .35rem;
}

.terms-content p,
.terms-content li {
  font-size: .92rem;
  color: var(--ap-text);
  line-height: 1.75;
}

.terms-content ul,
.terms-content ol {
  padding-left: 1.4rem;
  margin-bottom: .75rem;
}

.terms-content a {
  color: var(--ap-orange);
  text-decoration: none;
}

.terms-content a:hover { text-decoration: underline; }

/* Banner de aviso legal */
.terms-alert {
  background: rgba(232, 84, 42, .06);
  border-left: 4px solid var(--ap-orange);
  border-radius: 0 10px 10px 0;
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.5rem;
}

.terms-alert p,
.terms-alert li {
  font-size: .9rem;
  color: var(--ap-text);
  margin: 0;
}

.terms-alert ul {
  margin: .6rem 0 .4rem;
  padding-left: 1.4rem;
}

/* Caja de "¿Te fue útil?" */
.terms-helpful {
  background: var(--ap-gray);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .9rem;
  color: var(--ap-text);
}